summaryrefslogtreecommitdiff
path: root/components/form-data/update-form-sheet.tsx
diff options
context:
space:
mode:
authorjoonhoekim <26rote@gmail.com>2025-03-27 16:33:09 +0900
committerjoonhoekim <26rote@gmail.com>2025-03-27 16:33:09 +0900
commit34bbeb86c1a8d24b5f526710889b5e54d699cfd0 (patch)
tree19eaa9b8c266a5f6bc7f7d8fb9d9f949448c6b46 /components/form-data/update-form-sheet.tsx
parente6e98a1bed7a23d148ab97b3a7414ade4b1d236b (diff)
parenta2bb2de8aa7534b7b89993c395808b4b2b0b9f5d (diff)
merge
Diffstat (limited to 'components/form-data/update-form-sheet.tsx')
-rw-r--r--components/form-data/update-form-sheet.tsx137
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
+ );
+}