diff options
Diffstat (limited to 'lib/compliance/questions/compliance-question-edit-sheet.tsx')
| -rw-r--r-- | lib/compliance/questions/compliance-question-edit-sheet.tsx | 572 |
1 files changed, 572 insertions, 0 deletions
diff --git a/lib/compliance/questions/compliance-question-edit-sheet.tsx b/lib/compliance/questions/compliance-question-edit-sheet.tsx new file mode 100644 index 00000000..064cafc1 --- /dev/null +++ b/lib/compliance/questions/compliance-question-edit-sheet.tsx @@ -0,0 +1,572 @@ +"use client"; + +import * as React from "react"; +import { useForm } from "react-hook-form"; +import { zodResolver } from "@hookform/resolvers/zod"; +import * as z from "zod"; +import { Button } from "@/components/ui/button"; +import { + Sheet, + SheetContent, + SheetDescription, + SheetFooter, + SheetHeader, + SheetTitle, + SheetTrigger, +} from "@/components/ui/sheet"; +import { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form"; +import { Input } from "@/components/ui/input"; +import { Badge } from "@/components/ui/badge"; +import { Textarea } from "@/components/ui/textarea"; +import { Checkbox } from "@/components/ui/checkbox"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Edit, Plus, Trash2 } from "lucide-react"; +import { + updateComplianceQuestion, + getComplianceQuestionOptions, + createComplianceQuestionOption, + deleteComplianceQuestionOption, + getSelectableParentQuestions, +} from "@/lib/compliance/services"; +import { QUESTION_TYPES } from "@/db/schema/compliance"; +import { toast } from "sonner"; +import { useRouter } from "next/navigation"; +import { complianceQuestions } from "@/db/schema/compliance"; + +const questionSchema = z.object({ + questionNumber: z.string().min(1, "질문 번호를 입력하세요"), + questionText: z.string().min(1, "질문 내용을 입력하세요"), + questionType: z.string().min(1, "질문 유형을 선택하세요"), + isRequired: z.boolean(), + hasDetailText: z.boolean(), + hasFileUpload: z.boolean(), + isConditional: z.boolean(), + parentQuestionId: z.number().optional(), + conditionalValue: z.string().optional(), +}); + +type QuestionFormData = z.infer<typeof questionSchema>; + +interface ComplianceQuestionEditDialogProps { + question: typeof complianceQuestions.$inferSelect; + onSuccess?: () => void; +} + +export function ComplianceQuestionEditSheet({ + question, + onSuccess +}: ComplianceQuestionEditDialogProps) { + const [open, setOpen] = React.useState(false); + const [isLoading, setIsLoading] = React.useState(false); + const router = useRouter(); + const [options, setOptions] = React.useState<Array<{ id: number; optionValue: string; optionText: string; allowsOtherInput: boolean; displayOrder: number }>>([]); + const [newOptionValue, setNewOptionValue] = React.useState(""); + const [newOptionText, setNewOptionText] = React.useState(""); + const [newOptionOther, setNewOptionOther] = React.useState(false); + const [parentOptions, setParentOptions] = React.useState<Array<{ id: number; optionValue: string; optionText: string }>>([]); + const [selectableParents, setSelectableParents] = React.useState<Array<{ id: number; questionNumber: string; questionText: string; questionType: string }>>([]); + const [parentQuestionId, setParentQuestionId] = React.useState<number | null>(question.parentQuestionId || null); + const [showOptionForm, setShowOptionForm] = React.useState(false); + + const form = useForm<QuestionFormData>({ + resolver: zodResolver(questionSchema), + defaultValues: { + questionNumber: question.questionNumber, + questionText: question.questionText, + questionType: question.questionType, + isRequired: question.isRequired, + hasDetailText: question.hasDetailText, + hasFileUpload: question.hasFileUpload, + isConditional: !!question.parentQuestionId, + parentQuestionId: question.parentQuestionId || undefined, + conditionalValue: question.conditionalValue || "", + }, + }); + + const isSelectionType = React.useMemo(() => { + return [QUESTION_TYPES.RADIO, QUESTION_TYPES.CHECKBOX, QUESTION_TYPES.DROPDOWN].includes((form.getValues("questionType") || "").toUpperCase() as any); + }, [form]); + + const loadOptions = React.useCallback(async () => { + if (!isSelectionType) return; + try { + const data = await getComplianceQuestionOptions(question.id); + setOptions(data); + } catch (e) { + console.error("loadOptions error", e); + } + }, [isSelectionType, question.id]); + + React.useEffect(() => { + if (open) { + loadOptions(); + } + }, [open, loadOptions]); + + // 선택 가능한 부모 질문들 로드 (조건부 질문용) + React.useEffect(() => { + const loadSelectableParents = async () => { + if (!open) return; + try { + // 현재 질문과 같은 템플릿의 선택형 질문들만 가져오기 + const data = await getSelectableParentQuestions(question.templateId, question.id); + setSelectableParents(data); + } catch (e) { + console.error("loadSelectableParents error", e); + setSelectableParents([]); + } + }; + loadSelectableParents(); + }, [open, question.templateId, question.id]); + + // 부모 질문의 옵션 로드 (조건부 질문용) + React.useEffect(() => { + const loadParentOptions = async () => { + if (!open) return; + if (!parentQuestionId) { + setParentOptions([]); + return; + } + try { + const data = await getComplianceQuestionOptions(parentQuestionId); + setParentOptions(data.map((o: any) => ({ id: o.id, optionValue: o.optionValue, optionText: o.optionText }))); + } catch (e) { + console.error("loadParentOptions error", e); + setParentOptions([]); + } + }; + loadParentOptions(); + }, [open, parentQuestionId]); + + const onSubmit = async (data: QuestionFormData) => { + try { + setIsLoading(true); + + // 조건부 질문 관련 데이터 처리 + const updateData = { + ...data, + parentQuestionId: data.isConditional ? parentQuestionId : null, + conditionalValue: data.isConditional ? data.conditionalValue : undefined, + }; + + // isConditional과 parentQuestionId는 제거 (스키마에 없음) + delete (updateData as any).isConditional; + + await updateComplianceQuestion(question.id, updateData); + + toast.success("질문이 성공적으로 수정되었습니다."); + setOpen(false); + + // 페이지 새로고침 + router.refresh(); + + if (onSuccess) { + onSuccess(); + } + } catch (error) { + console.error("Error updating question:", error); + + // 중복 질문번호 오류 처리 + if (error instanceof Error && error.message === "DUPLICATE_QUESTION_NUMBER") { + form.setError("questionNumber", { + type: "manual", + message: "이미 사용 중인 질문번호입니다." + }); + toast.error("이미 사용 중인 질문번호입니다."); + } else { + toast.error("질문 수정 중 오류가 발생했습니다."); + } + } finally { + setIsLoading(false); + } + }; + + return ( + <Sheet open={open} onOpenChange={setOpen}> + <SheetTrigger asChild> + <Button variant="ghost" size="sm"> + <Edit className="h-4 w-4" /> + </Button> + </SheetTrigger> + <SheetContent className="sm:max-w-[500px] overflow-y-auto"> + <SheetHeader> + <SheetTitle>질문 수정</SheetTitle> + <SheetDescription> + 질문 내용을 수정합니다. + </SheetDescription> + </SheetHeader> + + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4"> + <FormField + control={form.control} + name="questionNumber" + render={({ field }) => ( + <FormItem> + <FormLabel>질문 번호</FormLabel> + <FormControl> + <Input placeholder="Q1" {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="questionText" + render={({ field }) => ( + <FormItem> + <FormLabel>질문 내용</FormLabel> + <FormControl> + <Textarea + placeholder="질문 내용을 입력하세요" + className="min-h-[100px]" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="questionType" + render={({ field }) => ( + <FormItem> + <FormLabel>질문 유형</FormLabel> + <Select onValueChange={field.onChange} defaultValue={(field.value || "").toUpperCase()}> + <FormControl> + <SelectTrigger> + <SelectValue placeholder="질문 유형을 선택하세요" /> + </SelectTrigger> + </FormControl> + <SelectContent> + {Object.entries(QUESTION_TYPES).map(([key, value]) => ( + <SelectItem key={key} value={value}> + {value} + </SelectItem> + ))} + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + + {isSelectionType && ( + <div className="space-y-3"> + <div className="flex items-center justify-between"> + <div className="text-sm font-medium">옵션 관리</div> + <Button + type="button" + variant="outline" + size="sm" + onClick={() => { + setNewOptionValue(""); + setNewOptionText(""); + setNewOptionOther(false); + // 옵션 추가 모드 활성화 + setShowOptionForm(true); + }} + > + <Plus className="h-4 w-4 mr-1" /> + 옵션 추가 + </Button> + </div> + + {/* 옵션 추가 폼 */} + {showOptionForm && ( + <div className="space-y-3 p-3 border rounded-lg bg-muted/50"> + <div className="grid grid-cols-2 gap-3"> + <div> + <Input + value={newOptionValue} + onChange={(e) => setNewOptionValue(e.target.value)} + placeholder="option_value (예: YES)" + /> + </div> + <div> + <Input + value={newOptionText} + onChange={(e) => setNewOptionText(e.target.value)} + placeholder="option_text (표시 라벨)" + /> + </div> + </div> + <div className="flex items-center justify-between"> + <div className="flex items-center gap-2"> + <Checkbox + checked={newOptionOther} + onCheckedChange={(v) => setNewOptionOther(Boolean(v))} + /> + <span className="text-sm text-muted-foreground">기타 허용</span> + </div> + <div className="flex gap-2"> + <Button + type="button" + variant="outline" + size="sm" + onClick={async () => { + if (!newOptionValue || !newOptionText) { + toast.error("option_value와 option_text를 입력하세요."); + return; + } + try { + await createComplianceQuestionOption({ + questionId: question.id, + optionValue: newOptionValue.toUpperCase(), + optionText: newOptionText, + allowsOtherInput: newOptionOther, + displayOrder: (options?.length || 0) + 1, + }); + setNewOptionValue(""); + setNewOptionText(""); + setNewOptionOther(false); + setShowOptionForm(false); + await loadOptions(); + toast.success("옵션이 추가되었습니다."); + } catch (e) { + console.error(e); + toast.error("옵션 추가 중 오류가 발생했습니다."); + } + }} + > + 등록 + </Button> + <Button + type="button" + variant="ghost" + size="sm" + onClick={() => { + setShowOptionForm(false); + setNewOptionValue(""); + setNewOptionText(""); + setNewOptionOther(false); + }} + > + 취소 + </Button> + </div> + </div> + </div> + )} + + <div className="space-y-2"> + {options.length === 0 ? ( + <div className="text-xs text-muted-foreground">등록된 옵션이 없습니다.</div> + ) : ( + options.map((opt) => ( + <div key={opt.id} className="flex items-center gap-3 rounded border p-2"> + <div className="text-xs text-muted-foreground w-10">#{opt.displayOrder}</div> + <div className="text-sm font-mono">{opt.optionValue}</div> + <div className="text-sm flex-1">{opt.optionText}</div> + {opt.allowsOtherInput && <Badge variant="secondary">기타 허용</Badge>} + <Button + type="button" + variant="ghost" + size="icon" + onClick={async () => { + try { + await deleteComplianceQuestionOption(opt.id); + await loadOptions(); + toast.success("옵션이 삭제되었습니다."); + } catch (e) { + console.error(e); + toast.error("옵션 삭제 중 오류가 발생했습니다."); + } + }} + > + <Trash2 className="h-4 w-4" /> + </Button> + </div> + )) + )} + </div> + </div> + )} + + <div className="grid grid-cols-3 gap-4"> + <FormField + control={form.control} + name="isRequired" + render={({ field }) => ( + <FormItem className="flex flex-row items-start space-x-3 space-y-0"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <div className="space-y-1 leading-none"> + <FormLabel>필수 질문</FormLabel> + <FormDescription> + 응답자가 반드시 답변해야 하는 질문 + </FormDescription> + </div> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="hasDetailText" + render={({ field }) => ( + <FormItem className="flex flex-row items-start space-x-3 space-y-0"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <div className="space-y-1 leading-none"> + <FormLabel>상세 설명</FormLabel> + <FormDescription> + 추가 설명 입력 가능 + </FormDescription> + </div> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="hasFileUpload" + render={({ field }) => ( + <FormItem className="flex flex-row items-start space-x-3 space-y-0"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <div className="space-y-1 leading-none"> + <FormLabel>파일 업로드</FormLabel> + <FormDescription> + 파일 첨부 가능 + </FormDescription> + </div> + </FormItem> + )} + /> + </div> + + {/* 조건부 질문 체크박스 */} + <FormField + control={form.control} + name="isConditional" + render={({ field }) => ( + <FormItem className="flex flex-row items-start space-x-3 space-y-0"> + <FormControl> + <Checkbox + checked={field.value} + onCheckedChange={field.onChange} + /> + </FormControl> + <div className="space-y-1 leading-none"> + <FormLabel>조건부 질문</FormLabel> + <FormDescription> + 특정 조건에 따라 표시되는 질문 + </FormDescription> + </div> + </FormItem> + )} + /> + + {/* 조건부 질문일 때만 부모 질문과 조건값 표시 */} + {form.watch("isConditional") && ( + <div className="space-y-2"> + {/* 조건 질문 선택 */} + <div> + <FormLabel>조건 질문</FormLabel> + <Select onValueChange={(v) => setParentQuestionId(Number(v))} value={String(parentQuestionId || "")}> + <SelectTrigger> + <SelectValue placeholder="조건 기준 질문을 선택하세요"> + {parentQuestionId ? ( + <div className="truncate max-w-[300px] text-left"> + {selectableParents.find(p => p.id === parentQuestionId)?.questionText} + </div> + ) : null} + </SelectValue> + </SelectTrigger> + <SelectContent> + {selectableParents.map((p) => ( + <SelectItem key={p.id} value={String(p.id)}> + {p.questionText} + </SelectItem> + ))} + </SelectContent> + </Select> + </div> + + {/* 조건값 선택 */} + <FormField + control={form.control} + name="conditionalValue" + render={({ field }) => ( + <FormItem className="space-y-1"> + <FormLabel>조건값</FormLabel> + {parentOptions.length > 0 ? ( + <> + <Select onValueChange={field.onChange} defaultValue={(field.value || "").toString()}> + <SelectTrigger> + <SelectValue placeholder="조건값을 선택하세요" /> + </SelectTrigger> + <SelectContent> + {parentOptions.map((opt) => ( + <SelectItem key={opt.id} value={opt.optionValue}> + {opt.optionValue} + </SelectItem> + ))} + </SelectContent> + </Select> + </> + ) : ( + <> + <FormControl> + <Input placeholder="먼저 부모 질문을 선택하세요" disabled /> + </FormControl> + <FormDescription>조건 질문을 선택하세요.</FormDescription> + </> + )} + <FormMessage /> + </FormItem> + )} + /> + </div> + )} + + <SheetFooter> + <Button + type="button" + variant="outline" + onClick={() => setOpen(false)} + disabled={isLoading} + > + 취소 + </Button> + <Button type="submit" disabled={isLoading}> + {isLoading ? "수정 중..." : "질문 수정"} + </Button> + </SheetFooter> + </form> + </Form> + </SheetContent> + </Sheet> + ); +} |