diff options
Diffstat (limited to 'components/form-data/update-form-sheet.tsx')
| -rw-r--r-- | components/form-data/update-form-sheet.tsx | 140 |
1 files changed, 96 insertions, 44 deletions
diff --git a/components/form-data/update-form-sheet.tsx b/components/form-data/update-form-sheet.tsx index c52b6833..27f426c1 100644 --- a/components/form-data/update-form-sheet.tsx +++ b/components/form-data/update-form-sheet.tsx @@ -4,8 +4,9 @@ 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 { Check, ChevronsUpDown, Loader } from "lucide-react"; import { toast } from "sonner"; +import { useRouter } from "next/navigation"; // Add this import import { Sheet, @@ -27,15 +28,22 @@ import { FormMessage, } from "@/components/ui/form"; import { - Select, - SelectTrigger, - SelectContent, - SelectItem, - SelectValue, -} from "@/components/ui/select"; + Popover, + PopoverTrigger, + PopoverContent, +} from "@/components/ui/popover" +import { + Command, + CommandInput, + CommandList, + CommandGroup, + CommandItem, + CommandEmpty, +} from "@/components/ui/command" import { DataTableColumnJSON } from "./form-data-table-columns"; import { updateFormDataInDB } from "@/lib/forms/services"; +import { cn } from "@/lib/utils"; interface UpdateTagSheetProps extends React.ComponentPropsWithoutRef<typeof Sheet> { @@ -60,6 +68,7 @@ export function UpdateTagSheet({ ...props }: UpdateTagSheetProps) { const [isPending, startTransition] = React.useTransition(); + const router = useRouter(); // Add router hook // 1) zod 스키마 const dynamicSchema = React.useMemo(() => { @@ -104,27 +113,41 @@ export function UpdateTagSheet({ async function onSubmit(values: Record<string, any>) { startTransition(async () => { - const { success, message } = await updateFormDataInDB( - formCode, - contractItemId, - values - ); - if (!success) { - toast.error(message); - return; - } - toast.success("Updated successfully!"); + try { + const { success, message } = await updateFormDataInDB( + formCode, + contractItemId, + values + ); + + if (!success) { + toast.error(message); + return; + } + + // Success handling + toast.success("Updated successfully!"); + + // Create a merged object of original rowData and new values + const updatedData = { + ...rowData, + ...values, + TAG_NO: rowData?.TAG_NO, + }; - // (A) 수정된 값(폼 데이터)을 부모 콜백에 전달 - onUpdateSuccess?.({ - // rowData(원본)와 values를 합쳐서 최종 "수정된 row"를 만든다. - // tagNumber는 기존 그대로 - ...rowData, - ...values, - tagNumber: rowData?.tagNumber, - }); + // Call the success callback + onUpdateSuccess?.(updatedData); - onOpenChange(false); + // Refresh the entire route to get fresh data + router.refresh(); + + // Close the sheet + onOpenChange(false); + + } catch (error) { + console.error("Error updating form data:", error); + toast.error("An unexpected error occurred while updating"); + } }); } @@ -147,7 +170,7 @@ export function UpdateTagSheet({ <div className="flex flex-col gap-4 pt-2"> {columns.map((col) => { const isTagNumberField = - col.key === "tagNumber" || col.key === "tagDescription"; + col.key === "TAG_NO" || col.key === "TAG_DESC"; return ( <FormField key={col.key} @@ -178,22 +201,51 @@ export function UpdateTagSheet({ return ( <FormItem> <FormLabel>{col.label}</FormLabel> - <Select - disabled={isTagNumberField} - value={field.value ?? ""} - onValueChange={(val) => field.onChange(val)} - > - <SelectTrigger> - <SelectValue placeholder="Select an option" /> - </SelectTrigger> - <SelectContent> - {col.options?.map((opt) => ( - <SelectItem key={opt} value={opt}> - {opt} - </SelectItem> - ))} - </SelectContent> - </Select> + <Popover> + <PopoverTrigger asChild> + <Button + variant="outline" + role="combobox" + disabled={isTagNumberField} + className={cn( + "w-full justify-between", + !field.value && "text-muted-foreground" + )} + > + {field.value + ? col.options?.find((opt) => opt === field.value) + : "Select an option"} + <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> + </Button> + </PopoverTrigger> + <PopoverContent className="w-full p-0"> + <Command> + <CommandInput placeholder="Search options..." /> + <CommandEmpty>No option found.</CommandEmpty> + <CommandList> + <CommandGroup> + {col.options?.map((opt) => ( + <CommandItem + key={opt} + value={opt} + onSelect={() => { + field.onChange(opt); + }} + > + <Check + className={cn( + "mr-2 h-4 w-4", + field.value === opt ? "opacity-100" : "opacity-0" + )} + /> + {opt} + </CommandItem> + ))} + </CommandGroup> + </CommandList> + </Command> + </PopoverContent> + </Popover> <FormMessage /> </FormItem> ); @@ -253,4 +305,4 @@ export function UpdateTagSheet({ </SheetContent> </Sheet> ); -} +}
\ No newline at end of file |