diff options
Diffstat (limited to 'lib/gtc-contract/status/delete-gtc-documents-dialog.tsx')
| -rw-r--r-- | lib/gtc-contract/status/delete-gtc-documents-dialog.tsx | 168 |
1 files changed, 168 insertions, 0 deletions
diff --git a/lib/gtc-contract/status/delete-gtc-documents-dialog.tsx b/lib/gtc-contract/status/delete-gtc-documents-dialog.tsx new file mode 100644 index 00000000..5779a2b6 --- /dev/null +++ b/lib/gtc-contract/status/delete-gtc-documents-dialog.tsx @@ -0,0 +1,168 @@ +"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 { deleteGtcDocuments } from "@/lib/gtc-contract/service" +import { type GtcDocumentWithRelations } from "@/db/schema/gtc" + +interface DeleteGtcDocumentsDialogProps + extends React.ComponentPropsWithoutRef<typeof Dialog> { + gtcDocuments: Row<GtcDocumentWithRelations>["original"][] + showTrigger?: boolean + onSuccess?: () => void +} + +export function DeleteGtcDocumentsDialog({ + gtcDocuments, + showTrigger = true, + onSuccess, + ...props +}: DeleteGtcDocumentsDialogProps) { + const [isDeletePending, startDeleteTransition] = React.useTransition() + const isDesktop = useMediaQuery("(min-width: 640px)") + + function onDelete() { + startDeleteTransition(async () => { + const { error } = await deleteGtcDocuments({ + ids: gtcDocuments.map((doc) => doc.id), + }) + + if (error) { + toast.error(error) + return + } + + props.onOpenChange?.(false) + toast.success( + `${gtcDocuments.length}개의 GTC 문서가 삭제되었습니다.` + ) + onSuccess?.() + }) + } + + const title = "Are you absolutely sure?" + const description = ( + <> + 이 작업은 되돌릴 수 없습니다. 선택된{" "} + <span className="font-medium">{gtcDocuments.length}개</span>의 GTC 문서가 영구적으로 삭제됩니다. + {gtcDocuments.length > 0 && ( + <div className="mt-2 max-h-32 overflow-y-auto"> + <div className="text-sm text-muted-foreground">삭제될 문서:</div> + <ul className="mt-1 text-sm"> + {gtcDocuments.slice(0, 5).map((doc) => ( + <li key={doc.id} className="truncate"> + • {doc.fileName} (v{doc.revision}) + </li> + ))} + {gtcDocuments.length > 5 && ( + <li className="text-muted-foreground"> + ... 외 {gtcDocuments.length - 5}개 + </li> + )} + </ul> + </div> + )} + </> + ) + + if (isDesktop) { + return ( + <Dialog {...props}> + {showTrigger ? ( + <DialogTrigger asChild> + <Button variant="outline" size="sm"> + <Trash className="mr-2 size-4" aria-hidden="true" /> + Delete ({gtcDocuments.length}) + </Button> + </DialogTrigger> + ) : null} + <DialogContent> + <DialogHeader> + <DialogTitle>{title}</DialogTitle> + <DialogDescription>{description}</DialogDescription> + </DialogHeader> + <DialogFooter className="gap-2 sm:space-x-0"> + <DialogClose asChild> + <Button variant="outline">Cancel</Button> + </DialogClose> + <Button + aria-label="Delete selected documents" + variant="destructive" + onClick={onDelete} + disabled={isDeletePending} + > + {isDeletePending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + Delete + </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 ({gtcDocuments.length}) + </Button> + </DrawerTrigger> + ) : null} + <DrawerContent> + <DrawerHeader> + <DrawerTitle>{title}</DrawerTitle> + <DrawerDescription>{description}</DrawerDescription> + </DrawerHeader> + <DrawerFooter className="gap-2 sm:space-x-0"> + <DrawerClose asChild> + <Button variant="outline">Cancel</Button> + </DrawerClose> + <Button + aria-label="Delete selected documents" + 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 |