From 4b76297a7b9f36fdbffe58b152e5ba418b0e6237 Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Mon, 12 May 2025 11:32:59 +0000
Subject: (대표님) S-EDP 관련 components/form-data
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/form-data/update-form-sheet.tsx | 82 ++++++++++++++++++++++++------
 1 file changed, 66 insertions(+), 16 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 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>
                             );
-- 
cgit v1.2.3