refactor: Align form validation UX across management dialogs
This commit is contained in:
@@ -1,14 +1,15 @@
|
||||
'use client';
|
||||
|
||||
import type { ComponentProps } from 'react';
|
||||
import type { Control, UseFormRegister } from 'react-hook-form';
|
||||
import type { Control, FieldErrors, UseFormRegister } from 'react-hook-form';
|
||||
import { Controller } from 'react-hook-form';
|
||||
import { Loader2 } from 'lucide-react';
|
||||
|
||||
import { FormField } from '@/components/form';
|
||||
import { PermissionTree } from '@/components/permission-tree';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
@@ -34,7 +35,10 @@ interface PlanSheetProps {
|
||||
planId?: number;
|
||||
register: UseFormRegister<PlanFormValues>;
|
||||
control: Control<PlanFormValues>;
|
||||
errors: FieldErrors<PlanFormValues>;
|
||||
isSubmitted: boolean;
|
||||
onSubmit: ComponentProps<'form'>['onSubmit'];
|
||||
canSubmit: boolean;
|
||||
permissionTree: PermissionTreeItem[];
|
||||
permissionIds: number[];
|
||||
onPermissionIdsChange: (ids: number[]) => void;
|
||||
@@ -48,177 +52,237 @@ export function PlanSheet({
|
||||
planId,
|
||||
register,
|
||||
control,
|
||||
errors,
|
||||
isSubmitted,
|
||||
onSubmit,
|
||||
canSubmit,
|
||||
permissionTree,
|
||||
permissionIds,
|
||||
onPermissionIdsChange,
|
||||
isPermissionsLoading,
|
||||
isSaving,
|
||||
}: PlanSheetProps) {
|
||||
const fieldError = (field: keyof PlanFormValues) =>
|
||||
isSubmitted ? errors[field]?.message : undefined;
|
||||
|
||||
return (
|
||||
<Sheet open={open} onOpenChange={onOpenChange}>
|
||||
<SheetContent className="w-full overflow-y-auto sm:max-w-3xl">
|
||||
<SheetHeader>
|
||||
<SheetTitle>{planId ? 'Edit Plan' : 'Create Plan'}</SheetTitle>
|
||||
<SheetDescription>
|
||||
<SheetContent className="w-full gap-0 p-0 sm:max-w-3xl">
|
||||
<SheetHeader className="shrink-0 border-b px-6 py-4 pr-12">
|
||||
<SheetTitle className="text-lg leading-none font-semibold tracking-tight">
|
||||
{planId ? 'Edit Plan' : 'Create Plan'}
|
||||
</SheetTitle>
|
||||
<SheetDescription className="text-sm">
|
||||
Configure subscription limits, billing, and permission access.
|
||||
</SheetDescription>
|
||||
</SheetHeader>
|
||||
<form onSubmit={onSubmit} className="flex flex-1 flex-col gap-5 px-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plan-name">Name</Label>
|
||||
<Input
|
||||
|
||||
<form onSubmit={onSubmit} className="flex min-h-0 flex-1 flex-col">
|
||||
<div className="flex-1 space-y-5 overflow-y-auto px-6 py-4">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<FormField
|
||||
id="plan-name"
|
||||
placeholder="Starter"
|
||||
{...register('name', { required: true })}
|
||||
label="Name"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plan-slug">Slug</Label>
|
||||
<Input
|
||||
error={fieldError('name')}
|
||||
>
|
||||
<Input
|
||||
id="plan-name"
|
||||
placeholder="Enter plan name"
|
||||
aria-invalid={!!fieldError('name')}
|
||||
{...register('name')}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField
|
||||
id="plan-slug"
|
||||
placeholder="starter"
|
||||
{...register('slug', { required: true })}
|
||||
label="Slug"
|
||||
required
|
||||
/>
|
||||
error={fieldError('slug')}
|
||||
>
|
||||
<Input
|
||||
id="plan-slug"
|
||||
placeholder="starter"
|
||||
aria-invalid={!!fieldError('slug')}
|
||||
{...register('slug')}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plan-description">Description</Label>
|
||||
<textarea
|
||||
<FormField
|
||||
id="plan-description"
|
||||
placeholder="Basic plan for small teams"
|
||||
{...register('description', { required: true })}
|
||||
label="Description"
|
||||
required
|
||||
className="min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 outline-none focus-visible:border-ring"
|
||||
/>
|
||||
</div>
|
||||
error={fieldError('description')}
|
||||
>
|
||||
<Textarea
|
||||
id="plan-description"
|
||||
placeholder="Basic plan for small teams"
|
||||
aria-invalid={!!fieldError('description')}
|
||||
{...register('description')}
|
||||
className="min-h-20"
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plan-price">Price</Label>
|
||||
<Input
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<FormField
|
||||
id="plan-price"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="29.99"
|
||||
{...register('price', { required: true })}
|
||||
label="Price"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Billing Cycle</Label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="billing_cycle"
|
||||
render={({ field }) => (
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Billing cycle" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="monthly">Monthly</SelectItem>
|
||||
<SelectItem value="quarterly">Quarterly</SelectItem>
|
||||
<SelectItem value="yearly">Yearly</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="plan-trial-days">Trial Days</Label>
|
||||
<Input
|
||||
error={fieldError('price')}
|
||||
>
|
||||
<Input
|
||||
id="plan-price"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
placeholder="29.99"
|
||||
aria-invalid={!!fieldError('price')}
|
||||
{...register('price')}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField
|
||||
label="Billing Cycle"
|
||||
required
|
||||
error={fieldError('billing_cycle')}
|
||||
>
|
||||
<Controller
|
||||
control={control}
|
||||
name="billing_cycle"
|
||||
render={({ field }) => (
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Billing cycle" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="monthly">Monthly</SelectItem>
|
||||
<SelectItem value="quarterly">Quarterly</SelectItem>
|
||||
<SelectItem value="yearly">Yearly</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField
|
||||
id="plan-trial-days"
|
||||
type="number"
|
||||
min="0"
|
||||
{...register('trial_days', { valueAsNumber: true })}
|
||||
/>
|
||||
label="Trial Days"
|
||||
error={fieldError('trial_days')}
|
||||
>
|
||||
<Input
|
||||
id="plan-trial-days"
|
||||
type="number"
|
||||
min="0"
|
||||
aria-invalid={!!fieldError('trial_days')}
|
||||
{...register('trial_days', { valueAsNumber: true })}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="max-projects">Projects</Label>
|
||||
<Input
|
||||
<div className="grid gap-4 md:grid-cols-4">
|
||||
<FormField
|
||||
id="max-projects"
|
||||
type="number"
|
||||
min="0"
|
||||
{...register('max_projects', { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="max-organizations">Organizations</Label>
|
||||
<Input
|
||||
label="Projects"
|
||||
error={fieldError('max_projects')}
|
||||
>
|
||||
<Input
|
||||
id="max-projects"
|
||||
type="number"
|
||||
min="0"
|
||||
aria-invalid={!!fieldError('max_projects')}
|
||||
{...register('max_projects', { valueAsNumber: true })}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField
|
||||
id="max-organizations"
|
||||
type="number"
|
||||
min="0"
|
||||
{...register('max_organizations', { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="max-users">Users</Label>
|
||||
<Input
|
||||
label="Organizations"
|
||||
error={fieldError('max_organizations')}
|
||||
>
|
||||
<Input
|
||||
id="max-organizations"
|
||||
type="number"
|
||||
min="0"
|
||||
aria-invalid={!!fieldError('max_organizations')}
|
||||
{...register('max_organizations', { valueAsNumber: true })}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField
|
||||
id="max-users"
|
||||
type="number"
|
||||
min="0"
|
||||
{...register('max_users', { valueAsNumber: true })}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="max-roles">Roles</Label>
|
||||
<Input
|
||||
label="Users"
|
||||
error={fieldError('max_users')}
|
||||
>
|
||||
<Input
|
||||
id="max-users"
|
||||
type="number"
|
||||
min="0"
|
||||
aria-invalid={!!fieldError('max_users')}
|
||||
{...register('max_users', { valueAsNumber: true })}
|
||||
/>
|
||||
</FormField>
|
||||
|
||||
<FormField
|
||||
id="max-roles"
|
||||
type="number"
|
||||
min="0"
|
||||
{...register('max_roles', { valueAsNumber: true })}
|
||||
/>
|
||||
label="Roles"
|
||||
error={fieldError('max_roles')}
|
||||
>
|
||||
<Input
|
||||
id="max-roles"
|
||||
type="number"
|
||||
min="0"
|
||||
aria-invalid={!!fieldError('max_roles')}
|
||||
{...register('max_roles', { valueAsNumber: true })}
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-5">
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="size-4 rounded border-border accent-primary"
|
||||
{...register('is_active')}
|
||||
/>
|
||||
Active
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="size-4 rounded border-border accent-primary"
|
||||
{...register('is_custom')}
|
||||
/>
|
||||
Custom plan
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<Label>Permissions</Label>
|
||||
<span className="text-muted-foreground">
|
||||
{permissionIds.length} selected
|
||||
</span>
|
||||
<div className="flex flex-wrap gap-5">
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="size-4 rounded border-border accent-primary"
|
||||
{...register('is_active')}
|
||||
/>
|
||||
Active
|
||||
</label>
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="size-4 rounded border-border accent-primary"
|
||||
{...register('is_custom')}
|
||||
/>
|
||||
Custom plan
|
||||
</label>
|
||||
</div>
|
||||
{isPermissionsLoading ? (
|
||||
<div className="rounded-md border p-6 text-muted-foreground">
|
||||
Loading permissions...
|
||||
</div>
|
||||
) : (
|
||||
<PermissionTree
|
||||
items={permissionTree}
|
||||
selectedIds={permissionIds}
|
||||
onChange={onPermissionIdsChange}
|
||||
/>
|
||||
)}
|
||||
|
||||
<FormField
|
||||
label="Permissions"
|
||||
required
|
||||
error={fieldError('permission_ids')}
|
||||
className="space-y-3"
|
||||
labelEnd={
|
||||
<span className="text-muted-foreground">
|
||||
{permissionIds.length} selected
|
||||
</span>
|
||||
}
|
||||
>
|
||||
{isPermissionsLoading ? (
|
||||
<div className="rounded-md border p-6 text-muted-foreground">
|
||||
Loading permissions...
|
||||
</div>
|
||||
) : (
|
||||
<PermissionTree
|
||||
items={permissionTree}
|
||||
selectedIds={permissionIds}
|
||||
onChange={onPermissionIdsChange}
|
||||
/>
|
||||
)}
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<SheetFooter className="px-0">
|
||||
<SheetFooter className="shrink-0 border-t px-6 py-4 sm:flex-row sm:justify-end">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
@@ -227,7 +291,7 @@ export function PlanSheet({
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSaving}>
|
||||
<Button type="submit" disabled={isSaving || !canSubmit}>
|
||||
{isSaving ? (
|
||||
<Loader2 className="mr-2 size-4 animate-spin" />
|
||||
) : null}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import {
|
||||
collectDefaultPermissionIds,
|
||||
collectPermissionIdsByKeys,
|
||||
@@ -8,25 +9,39 @@ import type { PermissionTreeItem, Plan } from '@/types';
|
||||
import { useCallback } from 'react';
|
||||
import { useForm, useWatch } from 'react-hook-form';
|
||||
import { toast } from 'sonner';
|
||||
import { z } from 'zod';
|
||||
|
||||
import { useSavePlanMutation } from './usePlanMutations';
|
||||
|
||||
export interface PlanFormValues {
|
||||
id?: number;
|
||||
name: string;
|
||||
slug: string;
|
||||
description: string;
|
||||
price: string;
|
||||
billing_cycle: string;
|
||||
trial_days: number;
|
||||
max_projects: number;
|
||||
max_organizations: number;
|
||||
max_users: number;
|
||||
max_roles: number;
|
||||
permission_ids: number[];
|
||||
is_active: boolean;
|
||||
is_custom: boolean;
|
||||
}
|
||||
const nonNegativeNumber = z.number().refine(
|
||||
(value) => Number.isFinite(value) && value >= 0,
|
||||
{ message: 'Enter a valid number' },
|
||||
);
|
||||
|
||||
const planFormSchema = z.object({
|
||||
id: z.number().optional(),
|
||||
name: z.string().trim().min(1, 'Plan name is required'),
|
||||
slug: z.string().trim().min(1, 'Slug is required'),
|
||||
description: z.string().trim().min(1, 'Description is required'),
|
||||
price: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(1, 'Price is required')
|
||||
.refine((value) => Number.isFinite(Number(value)) && Number(value) >= 0, {
|
||||
message: 'Enter a valid price',
|
||||
}),
|
||||
billing_cycle: z.string().trim().min(1, 'Billing cycle is required'),
|
||||
trial_days: nonNegativeNumber,
|
||||
max_projects: nonNegativeNumber,
|
||||
max_organizations: nonNegativeNumber,
|
||||
max_users: nonNegativeNumber,
|
||||
max_roles: nonNegativeNumber,
|
||||
permission_ids: z.array(z.number()).min(1, 'Select at least one permission'),
|
||||
is_active: z.boolean(),
|
||||
is_custom: z.boolean(),
|
||||
});
|
||||
|
||||
export type PlanFormValues = z.infer<typeof planFormSchema>;
|
||||
|
||||
const defaultValues: PlanFormValues = {
|
||||
name: '',
|
||||
@@ -62,9 +77,12 @@ export function usePlanForm({
|
||||
handleSubmit,
|
||||
reset,
|
||||
setValue,
|
||||
formState: { isSubmitting },
|
||||
formState: { errors, isSubmitting, isSubmitted },
|
||||
} = useForm<PlanFormValues>({
|
||||
defaultValues,
|
||||
mode: 'onSubmit',
|
||||
reValidateMode: 'onChange',
|
||||
resolver: zodResolver(planFormSchema),
|
||||
});
|
||||
const saveMutation = useSavePlanMutation({
|
||||
onSaved: () => {
|
||||
@@ -75,26 +93,42 @@ export function usePlanForm({
|
||||
|
||||
const planId = useWatch({ control, name: 'id' });
|
||||
const permissionIds = useWatch({ control, name: 'permission_ids' }) || [];
|
||||
const name = useWatch({ control, name: 'name' }) || '';
|
||||
const slug = useWatch({ control, name: 'slug' }) || '';
|
||||
const description = useWatch({ control, name: 'description' }) || '';
|
||||
const price = useWatch({ control, name: 'price' }) || '';
|
||||
const canSubmit =
|
||||
name.trim().length > 0 &&
|
||||
slug.trim().length > 0 &&
|
||||
description.trim().length > 0 &&
|
||||
price.trim().length > 0 &&
|
||||
permissionIds.length > 0;
|
||||
|
||||
const onSubmit = handleSubmit((values) => {
|
||||
if (values.permission_ids.length === 0) {
|
||||
toast.error('Select at least one permission');
|
||||
return;
|
||||
}
|
||||
const onSubmit = handleSubmit(
|
||||
(values) => {
|
||||
saveMutation.mutate({
|
||||
...values,
|
||||
name: values.name.trim(),
|
||||
slug: values.slug.trim(),
|
||||
description: values.description.trim(),
|
||||
price: values.price.trim(),
|
||||
trial_days: toNumber(values.trial_days),
|
||||
max_projects: toNumber(values.max_projects),
|
||||
max_organizations: toNumber(values.max_organizations),
|
||||
max_users: toNumber(values.max_users),
|
||||
max_roles: toNumber(values.max_roles),
|
||||
});
|
||||
},
|
||||
(formErrors) => {
|
||||
const firstMessage = Object.values(formErrors).find(
|
||||
(error) => error?.message,
|
||||
)?.message;
|
||||
|
||||
saveMutation.mutate({
|
||||
...values,
|
||||
name: values.name.trim(),
|
||||
slug: values.slug.trim(),
|
||||
description: values.description.trim(),
|
||||
price: values.price.trim(),
|
||||
trial_days: toNumber(values.trial_days),
|
||||
max_projects: toNumber(values.max_projects),
|
||||
max_organizations: toNumber(values.max_organizations),
|
||||
max_users: toNumber(values.max_users),
|
||||
max_roles: toNumber(values.max_roles),
|
||||
});
|
||||
});
|
||||
if (firstMessage) {
|
||||
toast.error(String(firstMessage));
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
const openCreate = useCallback(() => {
|
||||
reset({
|
||||
@@ -146,6 +180,9 @@ export function usePlanForm({
|
||||
planId,
|
||||
permissionIds,
|
||||
setPermissionIds,
|
||||
errors,
|
||||
isSubmitted,
|
||||
canSubmit,
|
||||
isSaving: isSubmitting || saveMutation.isPending,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -67,6 +67,9 @@ export default function PlansPage() {
|
||||
planId,
|
||||
permissionIds,
|
||||
setPermissionIds,
|
||||
errors,
|
||||
isSubmitted,
|
||||
canSubmit,
|
||||
isSaving,
|
||||
} = planForm;
|
||||
const statusMutation = usePlanStatusMutation();
|
||||
@@ -183,7 +186,10 @@ export default function PlansPage() {
|
||||
planId={planId}
|
||||
register={register}
|
||||
control={control}
|
||||
errors={errors}
|
||||
isSubmitted={isSubmitted}
|
||||
onSubmit={onSubmit}
|
||||
canSubmit={canSubmit}
|
||||
permissionTree={permissionsQuery.permissionTree}
|
||||
permissionIds={permissionIds}
|
||||
onPermissionIdsChange={setPermissionIds}
|
||||
|
||||
Reference in New Issue
Block a user