diff options
Diffstat (limited to 'components/form-data/update-form-sheet.tsx')
| -rw-r--r-- | components/form-data/update-form-sheet.tsx | 82 |
1 files changed, 66 insertions, 16 deletions
diff --git a/components/form-data/update-form-sheet.tsx b/components/form-data/update-form-sheet.tsx index 27f426c1..6f2a4722 100644 --- a/components/form-data/update-form-sheet.tsx +++ b/components/form-data/update-form-sheet.tsx @@ -4,9 +4,9 @@ import * as React from "react"; import { z } from "zod"; import { zodResolver } from "@hookform/resolvers/zod"; import { useForm } from "react-hook-form"; -import { Check, ChevronsUpDown, Loader } from "lucide-react"; +import { Check, ChevronsUpDown, Loader, LockIcon } from "lucide-react"; import { toast } from "sonner"; -import { useRouter } from "next/navigation"; // Add this import +import { useRouter } from "next/navigation"; import { Sheet, @@ -26,6 +26,7 @@ import { FormLabel, FormControl, FormMessage, + FormDescription, } from "@/components/ui/form"; import { Popover, @@ -68,7 +69,7 @@ export function UpdateTagSheet({ ...props }: UpdateTagSheetProps) { const [isPending, startTransition] = React.useTransition(); - const router = useRouter(); // Add router hook + const router = useRouter(); // 1) zod 스키마 const dynamicSchema = React.useMemo(() => { @@ -114,10 +115,19 @@ export function UpdateTagSheet({ async function onSubmit(values: Record<string, any>) { startTransition(async () => { try { + // 제출 전에 읽기 전용 필드를 원본 값으로 복원 + const finalValues = { ...values }; + for (const col of columns) { + if (col.shi || col.key === "TAG_NO" || col.key === "TAG_DESC") { + // 읽기 전용 필드는 원본 값으로 복원 + finalValues[col.key] = rowData?.[col.key] ?? ""; + } + } + const { success, message } = await updateFormDataInDB( formCode, contractItemId, - values + finalValues ); if (!success) { @@ -131,7 +141,7 @@ export function UpdateTagSheet({ // Create a merged object of original rowData and new values const updatedData = { ...rowData, - ...values, + ...finalValues, TAG_NO: rowData?.TAG_NO, }; @@ -157,7 +167,7 @@ export function UpdateTagSheet({ <SheetHeader className="text-left"> <SheetTitle>Update Row</SheetTitle> <SheetDescription> - Modify the fields below and save changes + Modify the fields below and save changes. Fields with <LockIcon className="inline h-3 w-3" /> are read-only. </SheetDescription> </SheetHeader> @@ -169,8 +179,11 @@ export function UpdateTagSheet({ <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 === "TAG_NO" || col.key === "TAG_DESC"; + // 읽기 전용 조건 업데이트: shi가 true이거나 TAG_NO/TAG_DESC인 경우 + const isReadOnly = col.shi === true || + col.key === "TAG_NO" || + col.key === "TAG_DESC"; + return ( <FormField key={col.key} @@ -181,18 +194,31 @@ export function UpdateTagSheet({ case "NUMBER": return ( <FormItem> - <FormLabel>{col.displayLabel}</FormLabel> + <FormLabel className="flex items-center"> + {col.displayLabel || col.label} + {isReadOnly && ( + <LockIcon className="ml-1 h-3 w-3 text-gray-400" /> + )} + </FormLabel> <FormControl> <Input type="number" - readOnly={isTagNumberField} + readOnly={isReadOnly} onChange={(e) => { const num = parseFloat(e.target.value); field.onChange(isNaN(num) ? "" : num); }} value={field.value ?? ""} + className={cn( + isReadOnly && "bg-gray-100 text-gray-600 cursor-not-allowed border-gray-300" + )} /> </FormControl> + {isReadOnly && col.shi && ( + <FormDescription className="text-xs text-gray-500"> + This field is read-only + </FormDescription> + )} <FormMessage /> </FormItem> ); @@ -200,16 +226,22 @@ export function UpdateTagSheet({ case "LIST": return ( <FormItem> - <FormLabel>{col.label}</FormLabel> + <FormLabel className="flex items-center"> + {col.label} + {isReadOnly && ( + <LockIcon className="ml-1 h-3 w-3 text-gray-400" /> + )} + </FormLabel> <Popover> <PopoverTrigger asChild> <Button variant="outline" role="combobox" - disabled={isTagNumberField} + disabled={isReadOnly} className={cn( "w-full justify-between", - !field.value && "text-muted-foreground" + !field.value && "text-muted-foreground", + isReadOnly && "bg-gray-100 text-gray-600 cursor-not-allowed border-gray-300" )} > {field.value @@ -246,6 +278,11 @@ export function UpdateTagSheet({ </Command> </PopoverContent> </Popover> + {isReadOnly && col.shi && ( + <FormDescription className="text-xs text-gray-500"> + This field is read-only + </FormDescription> + )} <FormMessage /> </FormItem> ); @@ -257,7 +294,7 @@ export function UpdateTagSheet({ // <FormControl> // <Input // type="date" - // readOnly={isTagNumberField} + // readOnly={isReadOnly} // onChange={field.onChange} // value={field.value ?? ""} // /> @@ -270,13 +307,26 @@ export function UpdateTagSheet({ default: return ( <FormItem> - <FormLabel>{col.label}</FormLabel> + <FormLabel className="flex items-center"> + {col.label} + {isReadOnly && ( + <LockIcon className="ml-1 h-3 w-3 text-gray-400" /> + )} + </FormLabel> <FormControl> <Input - readOnly={isTagNumberField} + readOnly={isReadOnly} {...field} + className={cn( + isReadOnly && "bg-gray-100 text-gray-600 cursor-not-allowed border-gray-300" + )} /> </FormControl> + {isReadOnly && col.shi && ( + <FormDescription className="text-xs text-gray-500"> + This field is read-only + </FormDescription> + )} <FormMessage /> </FormItem> ); |