108 lines
3.6 KiB
TypeScript
108 lines
3.6 KiB
TypeScript
"use client"
|
|
|
|
import { z } from "zod"
|
|
import { useForm } from "react-hook-form"
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { Plus, Save } from "lucide-react"
|
|
import { Button } from "@/shared/components/ui/button"
|
|
import { FieldGroup } from "@/shared/components/ui/field"
|
|
import { Rhform, RhfTextField, RhfCheckboxField } from "@/shared/components/form"
|
|
import { toast } from "sonner"
|
|
import { useAuthApi } from "@/shared/useApi"
|
|
import { useEffect } from "react"
|
|
|
|
// ── Schema ──
|
|
|
|
const taskSectionSchema = z.object({
|
|
title: z.string().min(1, "Title is required"),
|
|
arrangement: z.string().optional(),
|
|
is_default: z.boolean().optional(),
|
|
})
|
|
|
|
type TaskSectionFormValues = z.infer<typeof taskSectionSchema>
|
|
|
|
// ── Props ──
|
|
|
|
type TaskSectionFormProps = {
|
|
resourceId?: string | null
|
|
initialData?: any
|
|
onSuccess?: () => void
|
|
}
|
|
|
|
// ── Component ──
|
|
|
|
export function TaskSectionForm({ resourceId, initialData, onSuccess }: TaskSectionFormProps) {
|
|
const api = useAuthApi()
|
|
const isEditing = !!resourceId
|
|
|
|
const form = useForm<TaskSectionFormValues>({
|
|
resolver: zodResolver(taskSectionSchema),
|
|
defaultValues: { title: "", arrangement: "", is_default: false },
|
|
})
|
|
|
|
useEffect(() => {
|
|
if (initialData) {
|
|
const d = initialData?.data ?? initialData
|
|
form.reset({
|
|
title: d.title ?? "",
|
|
arrangement: d.arrangement != null ? String(d.arrangement) : "",
|
|
is_default: d.is_default ?? false,
|
|
})
|
|
}
|
|
}, [initialData, form])
|
|
|
|
const handleSubmit = async (values: TaskSectionFormValues) => {
|
|
try {
|
|
const promise = isEditing
|
|
? api.taskSections.update(resourceId!, {
|
|
title: values.title,
|
|
arrangement: values.arrangement ? Number(values.arrangement) : undefined,
|
|
is_default: values.is_default,
|
|
})
|
|
: api.taskSections.create({
|
|
title: values.title,
|
|
arrangement: values.arrangement ? Number(values.arrangement) : undefined,
|
|
is_default: values.is_default,
|
|
})
|
|
|
|
toast.promise(promise, {
|
|
loading: isEditing ? "Updating..." : "Creating...",
|
|
success: isEditing ? "Updated successfully" : "Created successfully",
|
|
error: isEditing ? "Failed to update" : "Failed to create",
|
|
})
|
|
|
|
await promise
|
|
form.reset()
|
|
onSuccess?.()
|
|
} catch {
|
|
// toast already shown
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Rhform form={form} onSubmit={handleSubmit}>
|
|
<FieldGroup>
|
|
<RhfTextField
|
|
name="title"
|
|
label="Title"
|
|
placeholder="e.g. Pre-Work"
|
|
required
|
|
/>
|
|
<RhfTextField
|
|
name="arrangement"
|
|
label="Arrangement Order"
|
|
placeholder="e.g. 1"
|
|
type="number"
|
|
/>
|
|
<RhfCheckboxField name="is_default" label="Set as default" />
|
|
<Button type="submit" disabled={form.formState.isSubmitting}>
|
|
{isEditing ? <Save className="h-4 w-4" /> : <Plus className="h-4 w-4" />}
|
|
{form.formState.isSubmitting
|
|
? isEditing ? "Updating..." : "Creating..."
|
|
: isEditing ? "Update" : "Create"}
|
|
</Button>
|
|
</FieldGroup>
|
|
</Rhform>
|
|
)
|
|
}
|