diff options
| author | joonhoekim <26rote@gmail.com> | 2025-03-27 16:33:09 +0900 |
|---|---|---|
| committer | joonhoekim <26rote@gmail.com> | 2025-03-27 16:33:09 +0900 |
| commit | 34bbeb86c1a8d24b5f526710889b5e54d699cfd0 (patch) | |
| tree | 19eaa9b8c266a5f6bc7f7d8fb9d9f949448c6b46 /components/form-data/update-form-sheet.tsx | |
| parent | e6e98a1bed7a23d148ab97b3a7414ade4b1d236b (diff) | |
| parent | a2bb2de8aa7534b7b89993c395808b4b2b0b9f5d (diff) | |
merge
Diffstat (limited to 'components/form-data/update-form-sheet.tsx')
| -rw-r--r-- | components/form-data/update-form-sheet.tsx | 137 |
1 files changed, 77 insertions, 60 deletions
diff --git a/components/form-data/update-form-sheet.tsx b/components/form-data/update-form-sheet.tsx index d5f7d21b..c52b6833 100644 --- a/components/form-data/update-form-sheet.tsx +++ b/components/form-data/update-form-sheet.tsx @@ -1,11 +1,11 @@ -"use client" +"use client"; -import * as React from "react" -import { z } from "zod" -import { zodResolver } from "@hookform/resolvers/zod" -import { useForm } from "react-hook-form" -import { Loader } from "lucide-react" -import { toast } from "sonner" +import * as React from "react"; +import { z } from "zod"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useForm } from "react-hook-form"; +import { Loader } from "lucide-react"; +import { toast } from "sonner"; import { Sheet, @@ -15,9 +15,9 @@ import { SheetFooter, SheetHeader, SheetTitle, -} from "@/components/ui/sheet" -import { Button } from "@/components/ui/button" -import { Input } from "@/components/ui/input" +} from "@/components/ui/sheet"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; import { Form, FormField, @@ -25,21 +25,28 @@ import { FormLabel, FormControl, FormMessage, -} from "@/components/ui/form" -import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from "@/components/ui/select" - -import { DataTableColumnJSON } from "./form-data-table-columns" -import { updateFormDataInDB } from "@/lib/forms/services" - -interface UpdateTagSheetProps extends React.ComponentPropsWithoutRef<typeof Sheet> { - open: boolean - onOpenChange: (open: boolean) => void - columns: DataTableColumnJSON[] - rowData: Record<string, any> | null - formCode: string - contractItemId: number +} from "@/components/ui/form"; +import { + Select, + SelectTrigger, + SelectContent, + SelectItem, + SelectValue, +} from "@/components/ui/select"; + +import { DataTableColumnJSON } from "./form-data-table-columns"; +import { updateFormDataInDB } from "@/lib/forms/services"; + +interface UpdateTagSheetProps + extends React.ComponentPropsWithoutRef<typeof Sheet> { + open: boolean; + onOpenChange: (open: boolean) => void; + columns: DataTableColumnJSON[]; + rowData: Record<string, any> | null; + formCode: string; + contractItemId: number; /** 업데이트 성공 시 호출될 콜백 */ - onUpdateSuccess?: (updatedValues: Record<string, any>) => void + onUpdateSuccess?: (updatedValues: Record<string, any>) => void; } export function UpdateTagSheet({ @@ -52,57 +59,61 @@ export function UpdateTagSheet({ onUpdateSuccess, ...props }: UpdateTagSheetProps) { - const [isPending, startTransition] = React.useTransition() + const [isPending, startTransition] = React.useTransition(); // 1) zod 스키마 const dynamicSchema = React.useMemo(() => { - const shape: Record<string, z.ZodType<any>> = {} + const shape: Record<string, z.ZodType<any>> = {}; for (const col of columns) { if (col.type === "NUMBER") { shape[col.key] = z .union([z.coerce.number(), z.nan()]) .transform((val) => (isNaN(val) ? undefined : val)) - .optional() + .optional(); } else { - shape[col.key] = z.string().optional() + shape[col.key] = z.string().optional(); } } - return z.object(shape) - }, [columns]) + return z.object(shape); + }, [columns]); // 2) form init const form = useForm({ resolver: zodResolver(dynamicSchema), defaultValues: React.useMemo(() => { - if (!rowData) return {} - const defaults: Record<string, any> = {} + if (!rowData) return {}; + const defaults: Record<string, any> = {}; for (const col of columns) { - defaults[col.key] = rowData[col.key] ?? "" + defaults[col.key] = rowData[col.key] ?? ""; } - return defaults + return defaults; }, [rowData, columns]), - }) + }); React.useEffect(() => { if (!rowData) { - form.reset({}) - return + form.reset({}); + return; } - const defaults: Record<string, any> = {} + const defaults: Record<string, any> = {}; for (const col of columns) { - defaults[col.key] = rowData[col.key] ?? "" + defaults[col.key] = rowData[col.key] ?? ""; } - form.reset(defaults) - }, [rowData, columns, form]) + form.reset(defaults); + }, [rowData, columns, form]); async function onSubmit(values: Record<string, any>) { startTransition(async () => { - const { success, message } = await updateFormDataInDB(formCode, contractItemId, values) + const { success, message } = await updateFormDataInDB( + formCode, + contractItemId, + values + ); if (!success) { - toast.error(message) - return + toast.error(message); + return; } - toast.success("Updated successfully!") + toast.success("Updated successfully!"); // (A) 수정된 값(폼 데이터)을 부모 콜백에 전달 onUpdateSuccess?.({ @@ -111,10 +122,10 @@ export function UpdateTagSheet({ ...rowData, ...values, tagNumber: rowData?.tagNumber, - }) + }); - onOpenChange(false) - }) + onOpenChange(false); + }); } return ( @@ -128,11 +139,15 @@ export function UpdateTagSheet({ </SheetHeader> <Form {...form}> - <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4"> + <form + onSubmit={form.handleSubmit(onSubmit)} + className="flex flex-col gap-4" + > <div className="overflow-y-auto max-h-[80vh] flex-1 pr-4 -mr-4"> <div className="flex flex-col gap-4 pt-2"> {columns.map((col) => { - const isTagNumberField = col.key === "tagNumber" || col.key === "tagDescription" + const isTagNumberField = + col.key === "tagNumber" || col.key === "tagDescription"; return ( <FormField key={col.key} @@ -149,15 +164,15 @@ export function UpdateTagSheet({ type="number" readOnly={isTagNumberField} onChange={(e) => { - const num = parseFloat(e.target.value) - field.onChange(isNaN(num) ? "" : num) + const num = parseFloat(e.target.value); + field.onChange(isNaN(num) ? "" : num); }} value={field.value ?? ""} /> </FormControl> <FormMessage /> </FormItem> - ) + ); case "LIST": return ( @@ -181,7 +196,7 @@ export function UpdateTagSheet({ </Select> <FormMessage /> </FormItem> - ) + ); // case "date": // return ( @@ -205,17 +220,19 @@ export function UpdateTagSheet({ <FormItem> <FormLabel>{col.label}</FormLabel> <FormControl> - <Input readOnly={isTagNumberField} {...field} /> + <Input + readOnly={isTagNumberField} + {...field} + /> </FormControl> <FormMessage /> </FormItem> - ) + ); } }} /> - ) + ); })} - </div> </div> @@ -235,5 +252,5 @@ export function UpdateTagSheet({ </Form> </SheetContent> </Sheet> - ) -}
\ No newline at end of file + ); +} |
