feat: add subscription detail & edit page
This commit is contained in:
@@ -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,
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user