From e0b2367d88dd80eece67390574e60c9eacdee14d Mon Sep 17 00:00:00 2001 From: rlaks5757 Date: Wed, 26 Mar 2025 16:51:54 +0900 Subject: po, vendor-data-form-report --- components/form-data/update-form-sheet.tsx | 137 ++++++++++++++++------------- 1 file changed, 77 insertions(+), 60 deletions(-) (limited to 'components/form-data/update-form-sheet.tsx') 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 { - open: boolean - onOpenChange: (open: boolean) => void - columns: DataTableColumnJSON[] - rowData: Record | 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 { + open: boolean; + onOpenChange: (open: boolean) => void; + columns: DataTableColumnJSON[]; + rowData: Record | null; + formCode: string; + contractItemId: number; /** 업데이트 성공 시 호출될 콜백 */ - onUpdateSuccess?: (updatedValues: Record) => void + onUpdateSuccess?: (updatedValues: Record) => 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> = {} + const shape: Record> = {}; 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 = {} + if (!rowData) return {}; + const defaults: Record = {}; 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 = {} + const defaults: Record = {}; 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) { 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({
- +
{columns.map((col) => { - const isTagNumberField = col.key === "tagNumber" || col.key === "tagDescription" + const isTagNumberField = + col.key === "tagNumber" || col.key === "tagDescription"; return ( { - 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 ?? ""} /> - ) + ); case "LIST": return ( @@ -181,7 +196,7 @@ export function UpdateTagSheet({ - ) + ); // case "date": // return ( @@ -205,17 +220,19 @@ export function UpdateTagSheet({ {col.label} - + - ) + ); } }} /> - ) + ); })} -
@@ -235,5 +252,5 @@ export function UpdateTagSheet({
- ) -} \ No newline at end of file + ); +} -- cgit v1.2.3