diff options
Diffstat (limited to 'lib/itb/table/delete-purchase-request-dialog.tsx')
| -rw-r--r-- | lib/itb/table/delete-purchase-request-dialog.tsx | 225 |
1 files changed, 225 insertions, 0 deletions
diff --git a/lib/itb/table/delete-purchase-request-dialog.tsx b/lib/itb/table/delete-purchase-request-dialog.tsx new file mode 100644 index 00000000..2f09cf70 --- /dev/null +++ b/lib/itb/table/delete-purchase-request-dialog.tsx @@ -0,0 +1,225 @@ +// components/purchase-requests/delete-purchase-request-dialog.tsx +"use client" + +import * as React from "react" +import { type PurchaseRequestView } from "@/db/schema/purchase-requests-view" +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 { deletePurchaseRequests } from "../service" + +interface DeletePurchaseRequestDialogProps + extends React.ComponentPropsWithoutRef<typeof Dialog> { + requests?: Row<PurchaseRequestView>["original"][] | PurchaseRequestView[] + request?: PurchaseRequestView // 단일 삭제용 + showTrigger?: boolean + onSuccess?: () => void +} + +export function DeletePurchaseRequestDialog({ + requests: requestsProp, + request, + showTrigger = true, + onSuccess, + ...props +}: DeletePurchaseRequestDialogProps) { + const [isDeletePending, startDeleteTransition] = React.useTransition() + const isDesktop = useMediaQuery("(min-width: 640px)") + + // 단일 또는 복수 요청 처리 + const requests = requestsProp || (request ? [request] : []) + const isMultiple = requests.length > 1 + + // 삭제 불가능한 상태 체크 + const nonDeletableRequests = requests.filter( + req => req.status !== "작성중" + ) + const canDelete = nonDeletableRequests.length === 0 + + function onDelete() { + if (!canDelete) { + toast.error("작성중 상태의 요청만 삭제할 수 있습니다.") + return + } + + startDeleteTransition(async () => { + const { error } = await deletePurchaseRequests({ + ids: requests.map((req) => req.id), + }) + + if (error) { + toast.error(error) + return + } + + props.onOpenChange?.(false) + toast.success( + isMultiple + ? `${requests.length}개의 구매요청이 삭제되었습니다.` + : "구매요청이 삭제되었습니다." + ) + onSuccess?.() + }) + } + + const dialogContent = ( + <> + <div className="space-y-4"> + <div> + <p className="text-sm text-muted-foreground"> + 이 작업은 되돌릴 수 없습니다. + {isMultiple ? ( + <> + 선택한 <span className="font-medium text-foreground">{requests.length}개</span>의 구매요청이 영구적으로 삭제됩니다. + </> + ) : ( + <> + 구매요청 <span className="font-medium text-foreground">{requests[0]?.requestCode}</span>이(가) 영구적으로 삭제됩니다. + </> + )} + </p> + </div> + + {/* 삭제할 요청 목록 표시 (복수인 경우) */} + {isMultiple && ( + <div className="rounded-lg border bg-muted/30 p-3"> + <p className="text-sm font-medium mb-2">삭제할 구매요청:</p> + <ul className="space-y-1 max-h-32 overflow-y-auto"> + {requests.map((req) => ( + <li key={req.id} className="text-sm text-muted-foreground"> + <span className="font-mono">{req.requestCode}</span> + {" - "} + <span className="truncate">{req.requestTitle}</span> + </li> + ))} + </ul> + </div> + )} + + {/* 삭제 불가능한 요청이 있는 경우 경고 */} + {nonDeletableRequests.length > 0 && ( + <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-3"> + <p className="text-sm font-medium text-destructive mb-2"> + 삭제할 수 없는 요청: + </p> + <ul className="space-y-1"> + {nonDeletableRequests.map((req) => ( + <li key={req.id} className="text-sm text-destructive/80"> + <span className="font-mono">{req.requestCode}</span> + {" - 상태: "} + <span className="font-medium">{req.status}</span> + </li> + ))} + </ul> + <p className="text-xs text-destructive/60 mt-2"> + ※ 작성중 상태의 요청만 삭제할 수 있습니다. + </p> + </div> + )} + </div> + </> + ) + + if (isDesktop) { + return ( + <Dialog {...props}> + {showTrigger ? ( + <DialogTrigger asChild> + <Button variant="outline" size="sm" disabled={requests.length === 0}> + <Trash className="mr-2 size-4" aria-hidden="true" /> + 삭제 {requests.length > 0 && `(${requests.length})`} + </Button> + </DialogTrigger> + ) : null} + <DialogContent> + <DialogHeader> + <DialogTitle>구매요청을 삭제하시겠습니까?</DialogTitle> + <DialogDescription> + {dialogContent} + </DialogDescription> + </DialogHeader> + <DialogFooter className="gap-2 sm:space-x-0"> + <DialogClose asChild> + <Button variant="outline">취소</Button> + </DialogClose> + <Button + aria-label="Delete selected requests" + variant="destructive" + onClick={onDelete} + disabled={isDeletePending || !canDelete} + > + {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" disabled={requests.length === 0}> + <Trash className="mr-2 size-4" aria-hidden="true" /> + 삭제 {requests.length > 0 && `(${requests.length})`} + </Button> + </DrawerTrigger> + ) : null} + <DrawerContent> + <DrawerHeader> + <DrawerTitle>구매요청을 삭제하시겠습니까?</DrawerTitle> + <DrawerDescription> + {dialogContent} + </DrawerDescription> + </DrawerHeader> + <DrawerFooter className="gap-2 sm:space-x-0"> + <DrawerClose asChild> + <Button variant="outline">취소</Button> + </DrawerClose> + <Button + aria-label="Delete selected requests" + variant="destructive" + onClick={onDelete} + disabled={isDeletePending || !canDelete} + > + {isDeletePending && ( + <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" /> + )} + 삭제 + </Button> + </DrawerFooter> + </DrawerContent> + </Drawer> + ) +}
\ No newline at end of file |