diff options
Diffstat (limited to 'lib/pq/table/update-pq-sheet.tsx')
| -rw-r--r-- | lib/pq/table/update-pq-sheet.tsx | 272 |
1 files changed, 272 insertions, 0 deletions
diff --git a/lib/pq/table/update-pq-sheet.tsx b/lib/pq/table/update-pq-sheet.tsx new file mode 100644 index 00000000..3bac3558 --- /dev/null +++ b/lib/pq/table/update-pq-sheet.tsx @@ -0,0 +1,272 @@ +"use client" + +import * as React from "react" +import { zodResolver } from "@hookform/resolvers/zod" +import { Loader, Save } from "lucide-react" +import { useForm } from "react-hook-form" +import { toast } from "sonner" +import { z } from "zod" +import { useRouter } from "next/navigation" + +import { Button } from "@/components/ui/button" +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { + Sheet, + SheetClose, + SheetContent, + SheetDescription, + SheetFooter, + SheetHeader, + SheetTitle, +} from "@/components/ui/sheet" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" + +import { modifyPq } from "../service" + +// PQ 수정을 위한 Zod 스키마 정의 +const updatePqSchema = z.object({ + code: z.string().min(1, "Code is required"), + checkPoint: z.string().min(1, "Check point is required"), + groupName: z.string().min(1, "Group is required"), + description: z.string().optional(), + remarks: z.string().optional() +}); + +type UpdatePqSchema = z.infer<typeof updatePqSchema>; + +// 그룹 이름 옵션 +const groupOptions = [ + "GENERAL", + "Quality Management System", + "Organization", + "Resource Management", + "Other" +]; + +interface UpdatePqSheetProps + extends React.ComponentPropsWithRef<typeof Sheet> { + pq: { + id: number; + code: string; + checkPoint: string; + description: string | null; + remarks: string | null; + groupName: string | null; + } | null +} + +export function UpdatePqSheet({ pq, ...props }: UpdatePqSheetProps) { + const [isUpdatePending, startUpdateTransition] = React.useTransition() + const router = useRouter() + + const form = useForm<UpdatePqSchema>({ + resolver: zodResolver(updatePqSchema), + defaultValues: { + code: pq?.code ?? "", + checkPoint: pq?.checkPoint ?? "", + groupName: pq?.groupName ?? groupOptions[0], + description: pq?.description ?? "", + remarks: pq?.remarks ?? "", + }, + }) + + // 폼 초기화 (pq가 변경될 때) + React.useEffect(() => { + if (pq) { + form.reset({ + code: pq.code, + checkPoint: pq.checkPoint, + groupName: pq.groupName ?? groupOptions[0], + description: pq.description ?? "", + remarks: pq.remarks ?? "", + }); + } + }, [pq, form]); + + function onSubmit(input: UpdatePqSchema) { + startUpdateTransition(async () => { + if (!pq) return + + const result = await modifyPq({ + id: pq.id, + ...input, + }) + + if (!result.success && 'error' in result) { + toast.error(result.error) + } else { + toast.error("Failed to update PQ criteria") + } + + form.reset() + props.onOpenChange?.(false) + toast.success("PQ criteria updated successfully") + router.refresh() + }) + } + return ( + <Sheet {...props}> + <SheetContent className="flex flex-col gap-6 sm:max-w-md"> + <SheetHeader className="text-left"> + <SheetTitle>Update PQ Criteria</SheetTitle> + <SheetDescription> + Update the PQ criteria details and save the changes + </SheetDescription> + </SheetHeader> + <Form {...form}> + <form + onSubmit={form.handleSubmit(onSubmit)} + className="flex flex-col gap-4" + > + {/* Code 필드 */} + <FormField + control={form.control} + name="code" + render={({ field }) => ( + <FormItem> + <FormLabel>Code <span className="text-destructive">*</span></FormLabel> + <FormControl> + <Input + placeholder="예: 1-1, A.2.3" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* Check Point 필드 */} + <FormField + control={form.control} + name="checkPoint" + render={({ field }) => ( + <FormItem> + <FormLabel>Check Point <span className="text-destructive">*</span></FormLabel> + <FormControl> + <Input + placeholder="검증 항목을 입력하세요" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* Group Name 필드 (Select) */} + <FormField + control={form.control} + name="groupName" + render={({ field }) => ( + <FormItem> + <FormLabel>Group <span className="text-destructive">*</span></FormLabel> + <Select + onValueChange={field.onChange} + defaultValue={field.value} + value={field.value} + > + <FormControl> + <SelectTrigger> + <SelectValue placeholder="그룹을 선택하세요" /> + </SelectTrigger> + </FormControl> + <SelectContent> + {groupOptions.map((group) => ( + <SelectItem key={group} value={group}> + {group} + </SelectItem> + ))} + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + + {/* Description 필드 */} + <FormField + control={form.control} + name="description" + render={({ field }) => ( + <FormItem> + <FormLabel>Description</FormLabel> + <FormControl> + <Textarea + placeholder="상세 설명을 입력하세요" + className="min-h-[120px] whitespace-pre-wrap" + {...field} + value={field.value || ""} + /> + </FormControl> + <FormDescription> + 줄바꿈이 필요한 경우 Enter 키를 누르세요. 입력한 대로 저장됩니다. + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + + {/* Remarks 필드 */} + <FormField + control={form.control} + name="remarks" + render={({ field }) => ( + <FormItem> + <FormLabel>Remarks</FormLabel> + <FormControl> + <Textarea + placeholder="비고 사항을 입력하세요" + className="min-h-[80px]" + {...field} + value={field.value || ""} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <SheetFooter className="gap-2 pt-2 sm:space-x-0"> + <SheetClose asChild> + <Button + type="button" + variant="outline" + onClick={() => form.reset()} + > + Cancel + </Button> + </SheetClose> + <Button disabled={isUpdatePending}> + {isUpdatePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + <Save className="mr-2 size-4" /> Save + </Button> + </SheetFooter> + </form> + </Form> + </SheetContent> + </Sheet> + ) +}
\ No newline at end of file |