feat: add subscription detail & edit page
This commit is contained in:
parent
0b5f25a263
commit
946d4e8c2c
@ -179,14 +179,3 @@ export function extractMikanSubscriptionSubscriberSourceUrl(
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
export function extractMikanSubscriptionSourceUrl(
|
||||
sourceUrl: string
|
||||
): MikanSubscriptionSourceUrl | ArkErrors {
|
||||
const u = new URL(sourceUrl);
|
||||
return MikanSubscriptionSourceUrlSchema({
|
||||
category: SubscriptionCategoryEnum.MikanBangumi,
|
||||
mikanBangumiId: u.searchParams.get(MIKAN_BANGUMI_ID_QUERY_KEY),
|
||||
mikanFansubId: u.searchParams.get(MIKAN_FANSUB_ID_QUERY_KEY),
|
||||
});
|
||||
}
|
||||
|
||||
@ -96,6 +96,7 @@ query GetSubscriptionDetail ($id: Int!) {
|
||||
enabled
|
||||
credential3rd {
|
||||
id
|
||||
username
|
||||
}
|
||||
bangumi {
|
||||
nodes {
|
||||
|
||||
@ -3,8 +3,17 @@ import {
|
||||
type SubscriptionsInsertInput,
|
||||
} from '@/infra/graphql/gql/graphql';
|
||||
import { Injectable, inject } from '@outposts/injection-js';
|
||||
import { ArkErrors } from 'arktype';
|
||||
import { omit } from 'lodash-es';
|
||||
import { buildMikanSubscriptionSeasonSourceUrl } from '../schema/mikan';
|
||||
import {
|
||||
type MikanSubscriptionBangumiSourceUrl,
|
||||
type MikanSubscriptionSeasonSourceUrl,
|
||||
type MikanSubscriptionSubscriberSourceUrl,
|
||||
buildMikanSubscriptionSeasonSourceUrl,
|
||||
extractMikanSubscriptionBangumiSourceUrl,
|
||||
extractMikanSubscriptionSeasonSourceUrl,
|
||||
extractMikanSubscriptionSubscriberSourceUrl,
|
||||
} from '../schema/mikan';
|
||||
import type { SubscriptionInsertForm } from '../schema/subscriptions';
|
||||
import { MikanService } from './mikan.service';
|
||||
|
||||
@ -26,4 +35,28 @@ export class SubscriptionService {
|
||||
}
|
||||
return form;
|
||||
}
|
||||
|
||||
extractSourceUrlMeta(
|
||||
category: SubscriptionCategoryEnum,
|
||||
sourceUrl: string
|
||||
):
|
||||
| MikanSubscriptionSeasonSourceUrl
|
||||
| MikanSubscriptionBangumiSourceUrl
|
||||
| MikanSubscriptionSubscriberSourceUrl
|
||||
| null {
|
||||
let meta:
|
||||
| MikanSubscriptionSeasonSourceUrl
|
||||
| MikanSubscriptionBangumiSourceUrl
|
||||
| MikanSubscriptionSubscriberSourceUrl
|
||||
| null
|
||||
| ArkErrors = null;
|
||||
if (category === SubscriptionCategoryEnum.MikanSeason) {
|
||||
meta = extractMikanSubscriptionSeasonSourceUrl(sourceUrl);
|
||||
} else if (category === SubscriptionCategoryEnum.MikanBangumi) {
|
||||
meta = extractMikanSubscriptionBangumiSourceUrl(sourceUrl);
|
||||
} else if (category === SubscriptionCategoryEnum.MikanSubscriber) {
|
||||
meta = extractMikanSubscriptionSubscriberSourceUrl(sourceUrl);
|
||||
}
|
||||
return meta instanceof ArkErrors ? null : meta;
|
||||
}
|
||||
}
|
||||
|
||||
@ -23,7 +23,7 @@ type Documents = {
|
||||
"\n mutation InsertSubscription($data: SubscriptionsInsertInput!) {\n subscriptionsCreateOne(data: $data) {\n id\n createdAt\n updatedAt\n displayName\n category\n sourceUrl\n enabled\n credentialId\n }\n }\n": typeof types.InsertSubscriptionDocument,
|
||||
"\n mutation UpdateSubscriptions(\n $data: SubscriptionsUpdateInput!,\n $filters: SubscriptionsFilterInput!,\n ) {\n subscriptionsUpdate (\n data: $data\n filter: $filters\n ) {\n id\n createdAt\n updatedAt\n displayName\n category\n sourceUrl\n enabled\n }\n}\n": typeof types.UpdateSubscriptionsDocument,
|
||||
"\n mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {\n subscriptionsDelete(filter: $filters)\n }\n": typeof types.DeleteSubscriptionsDocument,
|
||||
"\nquery GetSubscriptionDetail ($id: Int!) {\n subscriptions(filters: { id: {\n eq: $id\n } }) {\n nodes {\n id\n displayName\n createdAt\n updatedAt\n category\n sourceUrl\n enabled\n credential3rd {\n id\n }\n bangumi {\n nodes {\n createdAt\n updatedAt\n id\n mikanBangumiId\n displayName\n rawName\n season\n seasonRaw\n fansub\n mikanFansubId\n rssLink\n posterLink\n savePath\n homepage\n }\n }\n }\n }\n}\n": typeof types.GetSubscriptionDetailDocument,
|
||||
"\nquery GetSubscriptionDetail ($id: Int!) {\n subscriptions(filters: { id: {\n eq: $id\n } }) {\n nodes {\n id\n displayName\n createdAt\n updatedAt\n category\n sourceUrl\n enabled\n credential3rd {\n id\n username\n }\n bangumi {\n nodes {\n createdAt\n updatedAt\n id\n mikanBangumiId\n displayName\n rawName\n season\n seasonRaw\n fansub\n mikanFansubId\n rssLink\n posterLink\n savePath\n homepage\n }\n }\n }\n }\n}\n": typeof types.GetSubscriptionDetailDocument,
|
||||
};
|
||||
const documents: Documents = {
|
||||
"\n query GetCredential3rd($filters: Credential3rdFilterInput!, $orderBy: Credential3rdOrderInput, $pagination: PaginationInput) {\n credential3rd(filters: $filters, orderBy: $orderBy, pagination: $pagination) {\n nodes {\n id\n cookies\n username\n password\n userAgent\n createdAt\n updatedAt\n credentialType\n }\n paginationInfo {\n total\n pages\n }\n }\n }\n": types.GetCredential3rdDocument,
|
||||
@ -35,7 +35,7 @@ const documents: Documents = {
|
||||
"\n mutation InsertSubscription($data: SubscriptionsInsertInput!) {\n subscriptionsCreateOne(data: $data) {\n id\n createdAt\n updatedAt\n displayName\n category\n sourceUrl\n enabled\n credentialId\n }\n }\n": types.InsertSubscriptionDocument,
|
||||
"\n mutation UpdateSubscriptions(\n $data: SubscriptionsUpdateInput!,\n $filters: SubscriptionsFilterInput!,\n ) {\n subscriptionsUpdate (\n data: $data\n filter: $filters\n ) {\n id\n createdAt\n updatedAt\n displayName\n category\n sourceUrl\n enabled\n }\n}\n": types.UpdateSubscriptionsDocument,
|
||||
"\n mutation DeleteSubscriptions($filters: SubscriptionsFilterInput) {\n subscriptionsDelete(filter: $filters)\n }\n": types.DeleteSubscriptionsDocument,
|
||||
"\nquery GetSubscriptionDetail ($id: Int!) {\n subscriptions(filters: { id: {\n eq: $id\n } }) {\n nodes {\n id\n displayName\n createdAt\n updatedAt\n category\n sourceUrl\n enabled\n credential3rd {\n id\n }\n bangumi {\n nodes {\n createdAt\n updatedAt\n id\n mikanBangumiId\n displayName\n rawName\n season\n seasonRaw\n fansub\n mikanFansubId\n rssLink\n posterLink\n savePath\n homepage\n }\n }\n }\n }\n}\n": types.GetSubscriptionDetailDocument,
|
||||
"\nquery GetSubscriptionDetail ($id: Int!) {\n subscriptions(filters: { id: {\n eq: $id\n } }) {\n nodes {\n id\n displayName\n createdAt\n updatedAt\n category\n sourceUrl\n enabled\n credential3rd {\n id\n username\n }\n bangumi {\n nodes {\n createdAt\n updatedAt\n id\n mikanBangumiId\n displayName\n rawName\n season\n seasonRaw\n fansub\n mikanFansubId\n rssLink\n posterLink\n savePath\n homepage\n }\n }\n }\n }\n}\n": types.GetSubscriptionDetailDocument,
|
||||
};
|
||||
|
||||
/**
|
||||
@ -91,7 +91,7 @@ export function gql(source: "\n mutation DeleteSubscriptions($filters: Subscr
|
||||
/**
|
||||
* The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function gql(source: "\nquery GetSubscriptionDetail ($id: Int!) {\n subscriptions(filters: { id: {\n eq: $id\n } }) {\n nodes {\n id\n displayName\n createdAt\n updatedAt\n category\n sourceUrl\n enabled\n credential3rd {\n id\n }\n bangumi {\n nodes {\n createdAt\n updatedAt\n id\n mikanBangumiId\n displayName\n rawName\n season\n seasonRaw\n fansub\n mikanFansubId\n rssLink\n posterLink\n savePath\n homepage\n }\n }\n }\n }\n}\n"): (typeof documents)["\nquery GetSubscriptionDetail ($id: Int!) {\n subscriptions(filters: { id: {\n eq: $id\n } }) {\n nodes {\n id\n displayName\n createdAt\n updatedAt\n category\n sourceUrl\n enabled\n credential3rd {\n id\n }\n bangumi {\n nodes {\n createdAt\n updatedAt\n id\n mikanBangumiId\n displayName\n rawName\n season\n seasonRaw\n fansub\n mikanFansubId\n rssLink\n posterLink\n savePath\n homepage\n }\n }\n }\n }\n}\n"];
|
||||
export function gql(source: "\nquery GetSubscriptionDetail ($id: Int!) {\n subscriptions(filters: { id: {\n eq: $id\n } }) {\n nodes {\n id\n displayName\n createdAt\n updatedAt\n category\n sourceUrl\n enabled\n credential3rd {\n id\n username\n }\n bangumi {\n nodes {\n createdAt\n updatedAt\n id\n mikanBangumiId\n displayName\n rawName\n season\n seasonRaw\n fansub\n mikanFansubId\n rssLink\n posterLink\n savePath\n homepage\n }\n }\n }\n }\n}\n"): (typeof documents)["\nquery GetSubscriptionDetail ($id: Int!) {\n subscriptions(filters: { id: {\n eq: $id\n } }) {\n nodes {\n id\n displayName\n createdAt\n updatedAt\n category\n sourceUrl\n enabled\n credential3rd {\n id\n username\n }\n bangumi {\n nodes {\n createdAt\n updatedAt\n id\n mikanBangumiId\n displayName\n rawName\n season\n seasonRaw\n fansub\n mikanFansubId\n rssLink\n posterLink\n savePath\n homepage\n }\n }\n }\n }\n}\n"];
|
||||
|
||||
export function gql(source: string) {
|
||||
return (documents as any)[source] ?? {};
|
||||
|
||||
@ -1714,7 +1714,7 @@ export type GetSubscriptionDetailQueryVariables = Exact<{
|
||||
}>;
|
||||
|
||||
|
||||
export type GetSubscriptionDetailQuery = { __typename?: 'Query', subscriptions: { __typename?: 'SubscriptionsConnection', nodes: Array<{ __typename?: 'Subscriptions', id: number, displayName: string, createdAt: string, updatedAt: string, category: SubscriptionCategoryEnum, sourceUrl: string, enabled: boolean, credential3rd?: { __typename?: 'Credential3rd', id: number } | null, bangumi: { __typename?: 'BangumiConnection', nodes: Array<{ __typename?: 'Bangumi', createdAt: string, updatedAt: string, id: number, mikanBangumiId?: string | null, displayName: string, rawName: string, season: number, seasonRaw?: string | null, fansub?: string | null, mikanFansubId?: string | null, rssLink?: string | null, posterLink?: string | null, savePath?: string | null, homepage?: string | null }> } }> } };
|
||||
export type GetSubscriptionDetailQuery = { __typename?: 'Query', subscriptions: { __typename?: 'SubscriptionsConnection', nodes: Array<{ __typename?: 'Subscriptions', id: number, displayName: string, createdAt: string, updatedAt: string, category: SubscriptionCategoryEnum, sourceUrl: string, enabled: boolean, credential3rd?: { __typename?: 'Credential3rd', id: number, username?: string | null } | null, bangumi: { __typename?: 'BangumiConnection', nodes: Array<{ __typename?: 'Bangumi', createdAt: string, updatedAt: string, id: number, mikanBangumiId?: string | null, displayName: string, rawName: string, season: number, seasonRaw?: string | null, fansub?: string | null, mikanFansubId?: string | null, rssLink?: string | null, posterLink?: string | null, savePath?: string | null, homepage?: string | null }> } }> } };
|
||||
|
||||
|
||||
export const GetCredential3rdDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetCredential3rd"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdFilterInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Credential3rdOrderInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}},{"kind":"Argument","name":{"kind":"Name","value":"orderBy"},"value":{"kind":"Variable","name":{"kind":"Name","value":"orderBy"}}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"cookies"}},{"kind":"Field","name":{"kind":"Name","value":"username"}},{"kind":"Field","name":{"kind":"Name","value":"password"}},{"kind":"Field","name":{"kind":"Name","value":"userAgent"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"credentialType"}}]}},{"kind":"Field","name":{"kind":"Name","value":"paginationInfo"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"total"}},{"kind":"Field","name":{"kind":"Name","value":"pages"}}]}}]}}]}}]} as unknown as DocumentNode<GetCredential3rdQuery, GetCredential3rdQueryVariables>;
|
||||
@ -1726,4 +1726,4 @@ export const GetSubscriptionsDocument = {"kind":"Document","definitions":[{"kind
|
||||
export const InsertSubscriptionDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"InsertSubscription"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsInsertInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsCreateOne"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"credentialId"}}]}}]}}]} as unknown as DocumentNode<InsertSubscriptionMutation, InsertSubscriptionMutationVariables>;
|
||||
export const UpdateSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"data"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsUpdateInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsUpdate"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"data"},"value":{"kind":"Variable","name":{"kind":"Name","value":"data"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}}]}}]}}]} as unknown as DocumentNode<UpdateSubscriptionsMutation, UpdateSubscriptionsMutationVariables>;
|
||||
export const DeleteSubscriptionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteSubscriptions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filters"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"SubscriptionsFilterInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptionsDelete"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filters"}}}]}]}}]} as unknown as DocumentNode<DeleteSubscriptionsMutation, DeleteSubscriptionsMutationVariables>;
|
||||
export const GetSubscriptionDetailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSubscriptionDetail"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"bangumi"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"mikanBangumiId"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"rawName"}},{"kind":"Field","name":{"kind":"Name","value":"season"}},{"kind":"Field","name":{"kind":"Name","value":"seasonRaw"}},{"kind":"Field","name":{"kind":"Name","value":"fansub"}},{"kind":"Field","name":{"kind":"Name","value":"mikanFansubId"}},{"kind":"Field","name":{"kind":"Name","value":"rssLink"}},{"kind":"Field","name":{"kind":"Name","value":"posterLink"}},{"kind":"Field","name":{"kind":"Name","value":"savePath"}},{"kind":"Field","name":{"kind":"Name","value":"homepage"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetSubscriptionDetailQuery, GetSubscriptionDetailQueryVariables>;
|
||||
export const GetSubscriptionDetailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSubscriptionDetail"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"subscriptions"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filters"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"id"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"eq"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"category"}},{"kind":"Field","name":{"kind":"Name","value":"sourceUrl"}},{"kind":"Field","name":{"kind":"Name","value":"enabled"}},{"kind":"Field","name":{"kind":"Name","value":"credential3rd"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}},{"kind":"Field","name":{"kind":"Name","value":"bangumi"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"nodes"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createdAt"}},{"kind":"Field","name":{"kind":"Name","value":"updatedAt"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"mikanBangumiId"}},{"kind":"Field","name":{"kind":"Name","value":"displayName"}},{"kind":"Field","name":{"kind":"Name","value":"rawName"}},{"kind":"Field","name":{"kind":"Name","value":"season"}},{"kind":"Field","name":{"kind":"Name","value":"seasonRaw"}},{"kind":"Field","name":{"kind":"Name","value":"fansub"}},{"kind":"Field","name":{"kind":"Name","value":"mikanFansubId"}},{"kind":"Field","name":{"kind":"Name","value":"rssLink"}},{"kind":"Field","name":{"kind":"Name","value":"posterLink"}},{"kind":"Field","name":{"kind":"Name","value":"savePath"}},{"kind":"Field","name":{"kind":"Name","value":"homepage"}}]}}]}}]}}]}}]}}]} as unknown as DocumentNode<GetSubscriptionDetailQuery, GetSubscriptionDetailQueryVariables>;
|
||||
@ -104,7 +104,8 @@ function CredentialCreateRouteComponent() {
|
||||
userAgent: '',
|
||||
},
|
||||
validators: {
|
||||
onBlur: Credential3rdInsertSchema,
|
||||
onChangeAsync: Credential3rdInsertSchema,
|
||||
onChangeAsyncDebounceMs: 300,
|
||||
onSubmit: Credential3rdInsertSchema,
|
||||
},
|
||||
onSubmit: async (form) => {
|
||||
|
||||
@ -125,9 +125,7 @@ function Credential3rdDetailRouteComponent() {
|
||||
View credential detail
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Badge variant="secondary" className="capitalize">
|
||||
{credential.credentialType}
|
||||
</Badge>
|
||||
<Badge variant="secondary">{credential.credentialType}</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
@ -143,9 +141,7 @@ function Credential3rdDetailRouteComponent() {
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Credential type</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<Badge variant="secondary" className="capitalize">
|
||||
{credential.credentialType}
|
||||
</Badge>
|
||||
<Badge variant="secondary">{credential.credentialType}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -1,36 +1,346 @@
|
||||
import type { GetSubscriptionDetailQuery } from '@/infra/graphql/gql/graphql';
|
||||
import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { DetailEmptyView } from '@/components/ui/detail-empty-view';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { QueryErrorView } from '@/components/ui/query-error-view';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { GET_SUBSCRIPTION_DETAIL } from '@/domains/recorder/schema/subscriptions';
|
||||
import { SubscriptionService } from '@/domains/recorder/services/subscription.service';
|
||||
import { useInject } from '@/infra/di/inject';
|
||||
import {
|
||||
type GetSubscriptionDetailQuery,
|
||||
SubscriptionCategoryEnum,
|
||||
} from '@/infra/graphql/gql/graphql';
|
||||
import { useQuery } from '@apollo/client';
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { GET_SUBSCRIPTION_DETAIL } from '../../../../domains/recorder/schema/subscriptions.js';
|
||||
import {
|
||||
createFileRoute,
|
||||
useCanGoBack,
|
||||
useNavigate,
|
||||
useRouter,
|
||||
} from '@tanstack/react-router';
|
||||
import { format } from 'date-fns';
|
||||
import { ArrowLeft, Edit, ExternalLink } from 'lucide-react';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
export const Route = createFileRoute('/_app/subscriptions/detail/$id')({
|
||||
component: DetailRouteComponent,
|
||||
component: SubscriptionDetailRouteComponent,
|
||||
});
|
||||
|
||||
function DetailRouteComponent() {
|
||||
function SubscriptionDetailRouteComponent() {
|
||||
const { id } = Route.useParams();
|
||||
const navigate = useNavigate();
|
||||
const router = useRouter();
|
||||
const canGoBack = useCanGoBack();
|
||||
const subscriptionService = useInject(SubscriptionService);
|
||||
|
||||
const handleBack = () => {
|
||||
if (canGoBack) {
|
||||
router.history.back();
|
||||
} else {
|
||||
navigate({
|
||||
to: '/subscriptions/manage',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const { data, loading, error } = useQuery<GetSubscriptionDetailQuery>(
|
||||
GET_SUBSCRIPTION_DETAIL,
|
||||
{
|
||||
variables: {
|
||||
id: Number.parseInt(id),
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
}
|
||||
);
|
||||
|
||||
const handleEnterEditMode = () => {
|
||||
navigate({
|
||||
to: '/subscriptions/edit/$id',
|
||||
params: {
|
||||
id,
|
||||
},
|
||||
});
|
||||
};
|
||||
const subscription = data?.subscriptions?.nodes?.[0];
|
||||
|
||||
const sourceUrlMeta = useMemo(
|
||||
() =>
|
||||
subscription
|
||||
? subscriptionService.extractSourceUrlMeta(
|
||||
subscription?.category,
|
||||
subscription?.sourceUrl
|
||||
)
|
||||
: null,
|
||||
[
|
||||
subscription,
|
||||
subscription?.category,
|
||||
subscription?.sourceUrl,
|
||||
subscriptionService.extractSourceUrlMeta,
|
||||
]
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return <div>Loading...</div>;
|
||||
return <DetailCardSkeleton />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <div>Error: {error.message}</div>;
|
||||
return <QueryErrorView message={error.message} />;
|
||||
}
|
||||
|
||||
const detail = data?.subscriptions?.nodes?.[0];
|
||||
if (!subscription) {
|
||||
return <DetailEmptyView message="Not found certain subscription" />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(detail, null, 2) }}
|
||||
/>
|
||||
<div className="container mx-auto max-w-4xl py-6">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleBack}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="font-bold text-2xl">Subscription detail</h1>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
View subscription #{subscription.id}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={handleEnterEditMode}>
|
||||
<Edit className="mr-2 h-4 w-4" />
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Subscription information</CardTitle>
|
||||
<CardDescription className="mt-2">
|
||||
View subscription detail
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Badge variant={subscription.enabled ? 'default' : 'secondary'}>
|
||||
{subscription.enabled ? 'Enabled' : 'Disabled'}
|
||||
</Badge>
|
||||
<Badge variant="outline">{subscription.category}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-6">
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">ID</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<code className="text-sm">{subscription.id}</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Category</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<Badge variant="outline">{subscription.category}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Display Name</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<span className="text-sm">
|
||||
{subscription.displayName || 'Not set'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Enabled</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<Badge
|
||||
variant={subscription.enabled ? 'default' : 'secondary'}
|
||||
>
|
||||
{subscription.enabled ? 'Enabled' : 'Disabled'}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{subscription.credential3rd && (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Credential ID</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<code className="text-sm">
|
||||
{subscription.credential3rd.id}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">
|
||||
Credential Username
|
||||
</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<code className="text-sm">
|
||||
{subscription.credential3rd.username}
|
||||
</code>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Source URL</Label>
|
||||
<div className="flex items-center justify-between rounded-md bg-muted p-3">
|
||||
<span className="break-all text-sm">
|
||||
{subscription.sourceUrl || '-'}
|
||||
</span>
|
||||
{subscription.sourceUrl && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="ml-2 h-6 w-6 p-0"
|
||||
onClick={() =>
|
||||
window.open(subscription.sourceUrl, '_blank')
|
||||
}
|
||||
>
|
||||
<ExternalLink className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
{sourceUrlMeta?.category ===
|
||||
SubscriptionCategoryEnum.MikanSeason && (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Year</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<code className="text-sm">{sourceUrlMeta.year}</code>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Season</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<code className="text-sm">{sourceUrlMeta.seasonStr}</code>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Separator />
|
||||
|
||||
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Created at</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<span className="text-sm">
|
||||
{format(
|
||||
new Date(subscription.createdAt),
|
||||
'yyyy-MM-dd HH:mm:ss'
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-sm">Updated at</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<span className="text-sm">
|
||||
{format(
|
||||
new Date(subscription.updatedAt),
|
||||
'yyyy-MM-dd HH:mm:ss'
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{subscription.bangumi?.nodes &&
|
||||
subscription.bangumi.nodes.length > 0 && (
|
||||
<>
|
||||
<Separator />
|
||||
<div className="space-y-4">
|
||||
<Label className="font-medium text-sm">
|
||||
Associated Bangumi
|
||||
</Label>
|
||||
<div className="space-y-3">
|
||||
{subscription.bangumi.nodes.map((bangumi) => (
|
||||
<Card key={bangumi.id} className="p-4">
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-muted-foreground text-xs">
|
||||
Display Name
|
||||
</Label>
|
||||
<div className="text-sm">
|
||||
{bangumi.displayName}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-muted-foreground text-xs">
|
||||
Season
|
||||
</Label>
|
||||
<div className="text-sm">
|
||||
{bangumi.season || '-'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-muted-foreground text-xs">
|
||||
Fansub
|
||||
</Label>
|
||||
<div className="text-sm">
|
||||
{bangumi.fansub || '-'}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label className="font-medium text-muted-foreground text-xs">
|
||||
Save Path
|
||||
</Label>
|
||||
<div className="font-mono text-sm">
|
||||
{bangumi.savePath || '-'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{bangumi.homepage && (
|
||||
<div className="mt-3 border-t pt-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
window.open(bangumi.homepage!, '_blank')
|
||||
}
|
||||
>
|
||||
<ExternalLink className="mr-2 h-3 w-3" />
|
||||
Homepage
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,14 +1,414 @@
|
||||
import { DetailCardSkeleton } from '@/components/detail-card-skeleton';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import { DetailEmptyView } from '@/components/ui/detail-empty-view';
|
||||
import { FormFieldErrors } from '@/components/ui/form-field-errors';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { QueryErrorView } from '@/components/ui/query-error-view';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { useAppForm } from '@/components/ui/tanstack-form';
|
||||
import { MikanSeasonEnum } from '@/domains/recorder/schema/mikan';
|
||||
import {
|
||||
GET_SUBSCRIPTION_DETAIL,
|
||||
type SubscriptionInsertForm,
|
||||
SubscriptionInsertFormSchema,
|
||||
UPDATE_SUBSCRIPTIONS,
|
||||
} from '@/domains/recorder/schema/subscriptions';
|
||||
import { SubscriptionService } from '@/domains/recorder/services/subscription.service';
|
||||
import { useInject } from '@/infra/di/inject';
|
||||
import {
|
||||
Credential3rdTypeEnum,
|
||||
type GetSubscriptionDetailQuery,
|
||||
SubscriptionCategoryEnum,
|
||||
type UpdateSubscriptionsMutation,
|
||||
type UpdateSubscriptionsMutationVariables,
|
||||
} from '@/infra/graphql/gql/graphql';
|
||||
import type { RouteStateDataOption } from '@/infra/routes/traits';
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { useMutation, useQuery } from '@apollo/client';
|
||||
import { createFileRoute, useNavigate } from '@tanstack/react-router';
|
||||
import { ArrowLeft, Save, X } from 'lucide-react';
|
||||
import { useCallback, useMemo } from 'react';
|
||||
import { toast } from 'sonner';
|
||||
import { Credential3rdSelectContent } from './-credential3rd-select';
|
||||
|
||||
export const Route = createFileRoute('/_app/subscriptions/edit/$id')({
|
||||
component: RouteComponent,
|
||||
component: SubscriptionEditRouteComponent,
|
||||
staticData: {
|
||||
breadcrumb: { label: 'Edit' },
|
||||
} satisfies RouteStateDataOption,
|
||||
});
|
||||
|
||||
function RouteComponent() {
|
||||
const { id } = Route.useParams();
|
||||
return <div>Hello "/subscriptions/edit/$id"!</div>;
|
||||
type SubscriptionDetailDto = NonNullable<
|
||||
GetSubscriptionDetailQuery['subscriptions']['nodes'][0]
|
||||
>;
|
||||
|
||||
function FormView({
|
||||
subscription,
|
||||
onCompleted,
|
||||
}: {
|
||||
subscription: SubscriptionDetailDto;
|
||||
onCompleted: VoidFunction;
|
||||
}) {
|
||||
const navigate = useNavigate();
|
||||
const subscriptionService = useInject(SubscriptionService);
|
||||
|
||||
const handleBack = () => {
|
||||
navigate({
|
||||
to: '/subscriptions/detail/$id',
|
||||
params: { id: subscription.id.toString() },
|
||||
});
|
||||
};
|
||||
|
||||
const [updateSubscription, { loading: updating }] = useMutation<
|
||||
UpdateSubscriptionsMutation,
|
||||
UpdateSubscriptionsMutationVariables
|
||||
>(UPDATE_SUBSCRIPTIONS, {
|
||||
onCompleted,
|
||||
onError: (error) => {
|
||||
toast.error('Update subscription failed', {
|
||||
description: error.message,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Extract source URL metadata for form initialization
|
||||
const sourceUrlMeta = useMemo(
|
||||
() =>
|
||||
subscriptionService.extractSourceUrlMeta(
|
||||
subscription.category,
|
||||
subscription.sourceUrl
|
||||
),
|
||||
[subscription.category, subscription.sourceUrl, subscriptionService]
|
||||
);
|
||||
|
||||
// Initialize form with current subscription data
|
||||
const defaultValues = useMemo(() => {
|
||||
const base = {
|
||||
displayName: subscription.displayName,
|
||||
category: subscription.category,
|
||||
enabled: subscription.enabled,
|
||||
sourceUrl: subscription.sourceUrl,
|
||||
credentialId: subscription.credential3rd?.id || '',
|
||||
};
|
||||
|
||||
if (
|
||||
subscription.category === SubscriptionCategoryEnum.MikanSeason &&
|
||||
sourceUrlMeta?.category === SubscriptionCategoryEnum.MikanSeason
|
||||
) {
|
||||
return {
|
||||
...base,
|
||||
year: sourceUrlMeta.year,
|
||||
seasonStr: sourceUrlMeta.seasonStr,
|
||||
};
|
||||
}
|
||||
|
||||
return base;
|
||||
}, [subscription, sourceUrlMeta]);
|
||||
|
||||
const form = useAppForm({
|
||||
defaultValues: defaultValues as unknown as SubscriptionInsertForm,
|
||||
validators: {
|
||||
onChangeAsync: SubscriptionInsertFormSchema,
|
||||
onChangeAsyncDebounceMs: 300,
|
||||
onSubmit: SubscriptionInsertFormSchema,
|
||||
},
|
||||
onSubmit: async (form) => {
|
||||
const input = subscriptionService.transformInsertFormToInput(form.value);
|
||||
|
||||
await updateSubscription({
|
||||
variables: {
|
||||
data: input,
|
||||
filters: {
|
||||
id: {
|
||||
eq: subscription.id,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="container mx-auto max-w-4xl py-6">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={handleBack}
|
||||
className="h-8 w-8 p-0"
|
||||
>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<div>
|
||||
<h1 className="font-bold text-2xl">Subscription edit</h1>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
Edit subscription #{subscription.id}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={handleBack} disabled={updating}>
|
||||
<X className="mr-2 h-4 w-4" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => form.handleSubmit()} disabled={updating}>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
{updating ? 'Saving...' : 'Save'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Subscription information</CardTitle>
|
||||
<CardDescription className="mt-2">
|
||||
Edit subscription information
|
||||
</CardDescription>
|
||||
</div>
|
||||
<Badge variant="outline">{subscription.category}</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
form.handleSubmit();
|
||||
}}
|
||||
className="space-y-6"
|
||||
>
|
||||
<form.Field name="displayName">
|
||||
{(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>Display Name *</Label>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
placeholder="Please enter display name"
|
||||
autoComplete="off"
|
||||
/>
|
||||
{field.state.meta.errors && (
|
||||
<FormFieldErrors
|
||||
errors={field.state.meta.errors}
|
||||
isDirty={field.state.meta.isDirty}
|
||||
submissionAttempts={form.state.submissionAttempts}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
|
||||
{/* Category is read-only in edit mode */}
|
||||
<div className="space-y-2">
|
||||
<Label>Category</Label>
|
||||
<div className="rounded-md bg-muted p-3">
|
||||
<Badge variant="outline">{subscription.category}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conditional fields based on category */}
|
||||
{subscription.category === SubscriptionCategoryEnum.MikanSeason ? (
|
||||
<>
|
||||
<form.Field name="credentialId">
|
||||
{(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>Credential ID *</Label>
|
||||
<Select
|
||||
value={field.state.value.toString()}
|
||||
onValueChange={(value) =>
|
||||
field.handleChange(Number.parseInt(value))
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select credential" />
|
||||
</SelectTrigger>
|
||||
<Credential3rdSelectContent
|
||||
credentialType={Credential3rdTypeEnum.Mikan}
|
||||
/>
|
||||
</Select>
|
||||
{field.state.meta.errors && (
|
||||
<FormFieldErrors
|
||||
errors={field.state.meta.errors}
|
||||
isDirty={field.state.meta.isDirty}
|
||||
submissionAttempts={form.state.submissionAttempts}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
<form.Field name="year">
|
||||
{(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>Year *</Label>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
type="number"
|
||||
min={1970}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) =>
|
||||
field.handleChange(Number.parseInt(e.target.value))
|
||||
}
|
||||
placeholder={`Please enter full year (e.g. ${new Date().getFullYear()})`}
|
||||
autoComplete="off"
|
||||
/>
|
||||
{field.state.meta.errors && (
|
||||
<FormFieldErrors
|
||||
errors={field.state.meta.errors}
|
||||
isDirty={field.state.meta.isDirty}
|
||||
submissionAttempts={form.state.submissionAttempts}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
<form.Field name="seasonStr">
|
||||
{(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>Season *</Label>
|
||||
<Select
|
||||
value={field.state.value}
|
||||
onValueChange={(value) =>
|
||||
field.handleChange(value as MikanSeasonEnum)
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select season" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value={MikanSeasonEnum.Spring}>
|
||||
Spring
|
||||
</SelectItem>
|
||||
<SelectItem value={MikanSeasonEnum.Summer}>
|
||||
Summer
|
||||
</SelectItem>
|
||||
<SelectItem value={MikanSeasonEnum.Autumn}>
|
||||
Autumn
|
||||
</SelectItem>
|
||||
<SelectItem value={MikanSeasonEnum.Winter}>
|
||||
Winter
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{field.state.meta.errors && (
|
||||
<FormFieldErrors
|
||||
errors={field.state.meta.errors}
|
||||
isDirty={field.state.meta.isDirty}
|
||||
submissionAttempts={form.state.submissionAttempts}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
</>
|
||||
) : (
|
||||
<form.Field name="sourceUrl">
|
||||
{(field) => (
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor={field.name}>Source URL *</Label>
|
||||
<Input
|
||||
id={field.name}
|
||||
name={field.name}
|
||||
value={field.state.value}
|
||||
onBlur={field.handleBlur}
|
||||
onChange={(e) => field.handleChange(e.target.value)}
|
||||
placeholder="Please enter source URL"
|
||||
autoComplete="off"
|
||||
/>
|
||||
{field.state.meta.errors && (
|
||||
<FormFieldErrors
|
||||
errors={field.state.meta.errors}
|
||||
isDirty={field.state.meta.isDirty}
|
||||
submissionAttempts={form.state.submissionAttempts}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
)}
|
||||
|
||||
<form.Field name="enabled">
|
||||
{(field) => (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label htmlFor={field.name}>Enabled</Label>
|
||||
<div className="text-muted-foreground text-sm">
|
||||
Enable this subscription
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
id={field.name}
|
||||
checked={field.state.value}
|
||||
onCheckedChange={(checked) => field.handleChange(checked)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</form.Field>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SubscriptionEditRouteComponent() {
|
||||
const { id } = Route.useParams();
|
||||
|
||||
const { loading, error, data, refetch } =
|
||||
useQuery<GetSubscriptionDetailQuery>(GET_SUBSCRIPTION_DETAIL, {
|
||||
variables: {
|
||||
id: Number.parseInt(id),
|
||||
},
|
||||
fetchPolicy: 'cache-and-network',
|
||||
});
|
||||
|
||||
const subscription = data?.subscriptions?.nodes?.[0];
|
||||
|
||||
const onCompleted = useCallback(async () => {
|
||||
const refetchResult = await refetch();
|
||||
if (refetchResult.errors) {
|
||||
toast.error('Update subscription failed', {
|
||||
description: refetchResult.errors[0].message,
|
||||
});
|
||||
} else {
|
||||
toast.success('Update subscription successfully');
|
||||
}
|
||||
}, [refetch]);
|
||||
|
||||
if (loading) {
|
||||
return <DetailCardSkeleton />;
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return <QueryErrorView message={error.message} />;
|
||||
}
|
||||
|
||||
if (!subscription) {
|
||||
return <DetailEmptyView message="Not found certain subscription" />;
|
||||
}
|
||||
|
||||
return <FormView subscription={subscription} onCompleted={onCompleted} />;
|
||||
}
|
||||
|
||||
@ -72,7 +72,7 @@ function SubscriptionManageRouteComponent() {
|
||||
variables: {
|
||||
pagination: {
|
||||
page: {
|
||||
page: pagination.pageIndex + 1,
|
||||
page: pagination.pageIndex,
|
||||
limit: pagination.pageSize,
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user