diff options
Diffstat (limited to 'lib/docu-list-rule/document-class/table/delete-document-class-dialog.tsx')
| -rw-r--r-- | lib/docu-list-rule/document-class/table/delete-document-class-dialog.tsx | 88 |
1 files changed, 76 insertions, 12 deletions
diff --git a/lib/docu-list-rule/document-class/table/delete-document-class-dialog.tsx b/lib/docu-list-rule/document-class/table/delete-document-class-dialog.tsx index 677fe8ef..e81e4df6 100644 --- a/lib/docu-list-rule/document-class/table/delete-document-class-dialog.tsx +++ b/lib/docu-list-rule/document-class/table/delete-document-class-dialog.tsx @@ -28,8 +28,8 @@ import { DrawerTrigger, } from "@/components/ui/drawer" -import { deleteDocumentClassCodeGroup } from "@/lib/docu-list-rule/document-class/service" -import { documentClasses } from "@/db/schema/documentClasses" +import { deleteDocumentClassCodeGroup, getDocumentClassOptionsCount } from "@/lib/docu-list-rule/document-class/service" +import { documentClasses } from "@/db/schema" interface DeleteDocumentClassDialogProps extends React.ComponentPropsWithoutRef<typeof Dialog> { @@ -45,8 +45,32 @@ export function DeleteDocumentClassDialog({ ...props }: DeleteDocumentClassDialogProps) { const [isDeletePending, startDeleteTransition] = React.useTransition() + const [optionsCounts, setOptionsCounts] = React.useState<Record<number, number>>({}) + const [isLoadingOptions, setIsLoadingOptions] = React.useState(false) const isDesktop = useMediaQuery("(min-width: 640px)") + // Document Class들의 옵션 개수 조회 + React.useEffect(() => { + const fetchOptionsCounts = async () => { + setIsLoadingOptions(true) + const counts: Record<number, number> = {} + + for (const docClass of documentClasses) { + const result = await getDocumentClassOptionsCount(docClass.id) + if (result.success) { + counts[docClass.id] = result.count + } + } + + setOptionsCounts(counts) + setIsLoadingOptions(false) + } + + if (documentClasses.length > 0) { + fetchOptionsCounts() + } + }, [documentClasses]) + function onDelete() { startDeleteTransition(async () => { try { @@ -76,7 +100,7 @@ export function DeleteDocumentClassDialog({ <DialogTrigger asChild> <Button variant="outline" size="sm"> <Trash className="mr-2 size-4" aria-hidden="true" /> - 삭제 ({documentClasses.length}) + delete ({documentClasses.length}) </Button> </DialogTrigger> ) : null} @@ -87,6 +111,26 @@ export function DeleteDocumentClassDialog({ 이 작업은 되돌릴 수 없습니다. 선택된{" "} <span className="font-medium">{documentClasses.length}</span> 개의 Document Class를 서버에서 영구적으로 삭제합니다. + {isLoadingOptions ? ( + <div className="mt-2 text-sm text-muted-foreground"> + 옵션 정보를 확인하는 중... + </div> + ) : ( + documentClasses.some(docClass => optionsCounts[docClass.id] > 0) && ( + <div className="mt-2 text-sm text-orange-600"> + ⚠️ 다음 Document Class들은 옵션을 가지고 있어 함께 삭제됩니다: + <ul className="mt-1 ml-4 list-disc"> + {documentClasses + .filter(docClass => optionsCounts[docClass.id] > 0) + .map(docClass => ( + <li key={docClass.id}> + {docClass.code} ({optionsCounts[docClass.id]}개 옵션) + </li> + ))} + </ul> + </div> + ) + )} </DialogDescription> </DialogHeader> <DialogFooter className="gap-2 sm:space-x-0"> @@ -123,15 +167,35 @@ export function DeleteDocumentClassDialog({ </Button> </DrawerTrigger> ) : null} - <DrawerContent> - <DrawerHeader> - <DrawerTitle>정말로 삭제하시겠습니까?</DrawerTitle> - <DrawerDescription> - 이 작업은 되돌릴 수 없습니다. 선택된{" "} - <span className="font-medium">{documentClasses.length}</span> - 개의 Document Class를 서버에서 영구적으로 삭제합니다. - </DrawerDescription> - </DrawerHeader> + <DrawerContent> + <DrawerHeader> + <DrawerTitle>정말로 삭제하시겠습니까?</DrawerTitle> + <DrawerDescription> + 이 작업은 되돌릴 수 없습니다. 선택된{" "} + <span className="font-medium">{documentClasses.length}</span> + 개의 Document Class를 서버에서 영구적으로 삭제합니다. + {isLoadingOptions ? ( + <div className="mt-2 text-sm text-muted-foreground"> + 옵션 정보를 확인하는 중... + </div> + ) : ( + documentClasses.some(docClass => optionsCounts[docClass.id] > 0) && ( + <div className="mt-2 text-sm text-orange-600"> + ⚠️ 다음 Document Class들은 옵션을 가지고 있어 함께 삭제됩니다: + <ul className="mt-1 ml-4 list-disc"> + {documentClasses + .filter(docClass => optionsCounts[docClass.id] > 0) + .map(docClass => ( + <li key={docClass.id}> + {docClass.code} ({optionsCounts[docClass.id]}개 옵션) + </li> + ))} + </ul> + </div> + ) + )} + </DrawerDescription> + </DrawerHeader> <DrawerFooter className="gap-2 sm:space-x-0"> <DrawerClose asChild> <Button variant="outline">취소</Button> |
