diff options
Diffstat (limited to 'lib/docu-list-rule/code-groups/table/delete-code-groups-dialog.tsx')
| -rw-r--r-- | lib/docu-list-rule/code-groups/table/delete-code-groups-dialog.tsx | 203 |
1 files changed, 203 insertions, 0 deletions
diff --git a/lib/docu-list-rule/code-groups/table/delete-code-groups-dialog.tsx b/lib/docu-list-rule/code-groups/table/delete-code-groups-dialog.tsx new file mode 100644 index 00000000..66a8d7c2 --- /dev/null +++ b/lib/docu-list-rule/code-groups/table/delete-code-groups-dialog.tsx @@ -0,0 +1,203 @@ +"use client" + +import * as React from "react" +import { type Row } from "@tanstack/react-table" +import { Loader, Trash } from "lucide-react" +import { toast } from "sonner" + +import { useMediaQuery } from "@/hooks/use-media-query" +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" +import { + Drawer, + DrawerClose, + DrawerContent, + DrawerDescription, + DrawerFooter, + DrawerHeader, + DrawerTitle, + DrawerTrigger, +} from "@/components/ui/drawer" +import { codeGroups } from "@/db/schema/codeGroups" +import { deleteCodeGroup } from "../service" + +interface DeleteCodeGroupsDialogProps + extends React.ComponentPropsWithoutRef<typeof Dialog> { + codeGroups: Row<typeof codeGroups.$inferSelect>["original"][] + showTrigger?: boolean + onSuccess?: () => void +} + +export function DeleteCodeGroupsDialog({ + codeGroups, + showTrigger = true, + onSuccess, + ...props +}: DeleteCodeGroupsDialogProps) { + const [isDeletePending, startDeleteTransition] = React.useTransition() + const isDesktop = useMediaQuery("(min-width: 640px)") + + // Combo Box Code Group이 있는지 확인 + const hasComboBoxGroups = codeGroups.some(group => group.controlType === 'combobox') + const comboBoxGroups = codeGroups.filter(group => group.controlType === 'combobox') + + function onDelete() { + startDeleteTransition(async () => { + try { + // 각 Code Group을 순차적으로 삭제 + for (const codeGroup of codeGroups) { + const result = await deleteCodeGroup(codeGroup.id) + if (!result.success) { + toast.error(`Code Group ${codeGroup.description} 삭제 실패: ${result.error}`) + return + } + } + + props.onOpenChange?.(false) + toast.success("Code Group이 성공적으로 삭제되었습니다.") + onSuccess?.() + } catch (error) { + console.error("Delete error:", error) + toast.error("Code Group 삭제 중 오류가 발생했습니다.") + } + }) + } + + if (isDesktop) { + return ( + <Dialog {...props}> + {showTrigger ? ( + <DialogTrigger asChild> + <Button variant="outline" size="sm"> + <Trash className="mr-2 size-4" aria-hidden="true" /> + delete ({codeGroups.length}) + </Button> + </DialogTrigger> + ) : null} + <DialogContent> + <DialogHeader> + <DialogTitle>정말로 삭제하시겠습니까?</DialogTitle> + <DialogDescription className="space-y-2"> + <p> + 이 작업은 되돌릴 수 없습니다. 선택된{" "} + <span className="font-medium">{codeGroups.length}</span> + 개의 Code Group을 서버에서 영구적으로 삭제합니다. + </p> + + {hasComboBoxGroups && ( + <div className="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-md"> + <p className="text-sm font-medium text-amber-800 mb-1"> + ⚠️ Combo Box 옵션 삭제 경고 + </p> + <p className="text-sm text-amber-700"> + 다음 {comboBoxGroups.length}개의 Combo Box Code Group이 포함되어 있습니다: + </p> + <ul className="text-sm text-amber-700 mt-1 ml-4 list-disc"> + {comboBoxGroups.map((group) => ( + <li key={group.id}> + <strong>{group.description}</strong> ({group.groupId}) + </li> + ))} + </ul> + <p className="text-sm text-amber-700 mt-2"> + 이 Code Group들을 삭제하면 관련된 모든 Combo Box 옵션들도 함께 삭제됩니다. + </p> + </div> + )} + </DialogDescription> + </DialogHeader> + <DialogFooter className="gap-2 sm:space-x-0"> + <DialogClose asChild> + <Button variant="outline">취소</Button> + </DialogClose> + <Button + aria-label="선택된 행 삭제" + variant="destructive" + onClick={onDelete} + disabled={isDeletePending} + > + {isDeletePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + 삭제 + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + ) + } + + return ( + <Drawer {...props}> + {showTrigger ? ( + <DrawerTrigger asChild> + <Button variant="outline" size="sm"> + <Trash className="mr-2 size-4" aria-hidden="true" /> + delete ({codeGroups.length}) + </Button> + </DrawerTrigger> + ) : null} + <DrawerContent> + <DrawerHeader> + <DrawerTitle>정말로 삭제하시겠습니까?</DrawerTitle> + <DrawerDescription className="space-y-2"> + <p> + 이 작업은 되돌릴 수 없습니다. 선택된{" "} + <span className="font-medium">{codeGroups.length}</span> + 개의 Code Group을 서버에서 영구적으로 삭제합니다. + </p> + + {hasComboBoxGroups && ( + <div className="mt-4 p-3 bg-amber-50 border border-amber-200 rounded-md"> + <p className="text-sm font-medium text-amber-800 mb-1"> + ⚠️ Combo Box 옵션 삭제 경고 + </p> + <p className="text-sm text-amber-700"> + 다음 {comboBoxGroups.length}개의 Combo Box Code Group이 포함되어 있습니다: + </p> + <ul className="text-sm text-amber-700 mt-1 ml-4 list-disc"> + {comboBoxGroups.map((group) => ( + <li key={group.id}> + <strong>{group.description}</strong> ({group.groupId}) + </li> + ))} + </ul> + <p className="text-sm text-amber-700 mt-2"> + 이 Code Group들을 삭제하면 관련된 모든 Combo Box 옵션들도 함께 삭제됩니다. + </p> + </div> + )} + </DrawerDescription> + </DrawerHeader> + <DrawerFooter className="gap-2 sm:space-x-0"> + <DrawerClose asChild> + <Button variant="outline">취소</Button> + </DrawerClose> + <Button + aria-label="선택된 행 삭제" + variant="destructive" + onClick={onDelete} + disabled={isDeletePending} + > + {isDeletePending && ( + <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" /> + )} + delete + </Button> + </DrawerFooter> + </DrawerContent> + </Drawer> + ) +}
\ No newline at end of file |