diff options
Diffstat (limited to 'lib/b-rfq/attachment/tbe-request-dialog.tsx')
| -rw-r--r-- | lib/b-rfq/attachment/tbe-request-dialog.tsx | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/lib/b-rfq/attachment/tbe-request-dialog.tsx b/lib/b-rfq/attachment/tbe-request-dialog.tsx new file mode 100644 index 00000000..80b20e6f --- /dev/null +++ b/lib/b-rfq/attachment/tbe-request-dialog.tsx @@ -0,0 +1,200 @@ +"use client" + +import * as React from "react" +import { Loader, Send } 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 { requestTbe } from "../service" + +// 첨부파일 타입 +type RfqAttachment = { + id: number + serialNo: string + originalFileName: string + attachmentType: string + currentRevision: string +} + +interface TbeRequestDialogProps + extends React.ComponentPropsWithoutRef<typeof Dialog> { + rfqId: number + attachments: RfqAttachment[] + showTrigger?: boolean + onSuccess?: () => void +} + +export function TbeRequestDialog({ + rfqId, + attachments, + showTrigger = true, + onSuccess, + ...props +}: TbeRequestDialogProps) { + const [isRequestPending, startRequestTransition] = React.useTransition() + const isDesktop = useMediaQuery("(min-width: 640px)") + + function onRequest() { + startRequestTransition(async () => { + const attachmentIds = attachments.map(attachment => attachment.id) + const result = await requestTbe(rfqId, attachmentIds) + + if (!result.success) { + toast.error(result.message) + return + } + + props.onOpenChange?.(false) + toast.success(result.message) + onSuccess?.() + }) + } + + const attachmentCount = attachments.length + const attachmentText = attachmentCount === 1 ? "문서" : "문서들" + + if (isDesktop) { + return ( + <Dialog {...props}> + {showTrigger ? ( + <DialogTrigger asChild> + <Button + variant="outline" + size="sm" + className="gap-2" + disabled={attachmentCount === 0} + > + <Send className="size-4" aria-hidden="true" /> + <span className="hidden sm:inline"> + TBE 요청 {attachmentCount > 0 && `(${attachmentCount})`} + </span> + </Button> + </DialogTrigger> + ) : null} + <DialogContent> + <DialogHeader> + <DialogTitle>TBE 요청을 전송하시겠습니까?</DialogTitle> + <DialogDescription className="space-y-2"> + <div> + 선택된 <span className="font-medium">{attachmentCount}개</span>의 {attachmentText}에 대해 + 벤더들에게 기술평가(TBE) 요청을 전송합니다. + </div> + <div>RFQ 상태가 "TBE started"로 변경됩니다.</div> + {attachmentCount <= 5 && ( + <div className="mt-3 p-2 bg-gray-50 rounded-md"> + <div className="font-medium text-sm">TBE 요청 대상:</div> + <ul className="text-sm text-gray-600 mt-1"> + {attachments.map((attachment) => ( + <li key={attachment.id} className="truncate"> + • {attachment.serialNo}: {attachment.originalFileName} ({attachment.currentRevision}) + </li> + ))} + </ul> + </div> + )} + </DialogDescription> + </DialogHeader> + <DialogFooter className="gap-2 sm:space-x-0"> + <DialogClose asChild> + <Button variant="outline">취소</Button> + </DialogClose> + <Button + aria-label="Request TBE" + onClick={onRequest} + disabled={isRequestPending} + > + {isRequestPending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + TBE 요청 전송 + </Button> + </DialogFooter> + </DialogContent> + </Dialog> + ) + } + + return ( + <Drawer {...props}> + {showTrigger ? ( + <DrawerTrigger asChild> + <Button + variant="outline" + size="sm" + className="gap-2" + disabled={attachmentCount === 0} + > + <Send className="size-4" aria-hidden="true" /> + <span className="hidden sm:inline"> + TBE 요청 {attachmentCount > 0 && `(${attachmentCount})`} + </span> + </Button> + </DrawerTrigger> + ) : null} + <DrawerContent> + <DrawerHeader> + <DrawerTitle>TBE 요청을 전송하시겠습니까?</DrawerTitle> + <DrawerDescription className="space-y-2"> + <div> + 선택된 <span className="font-medium">{attachmentCount}개</span>의 {attachmentText}에 대해 + 벤더들에게 기술평가(TBE) 요청을 전송합니다. + </div> + <div>RFQ 상태가 "TBE started"로 변경됩니다.</div> + {attachmentCount <= 5 && ( + <div className="mt-3 p-2 bg-gray-50 rounded-md"> + <div className="font-medium text-sm">TBE 요청 대상:</div> + <ul className="text-sm text-gray-600 mt-1"> + {attachments.map((attachment) => ( + <li key={attachment.id} className="truncate"> + • {attachment.serialNo}: {attachment.originalFileName} ({attachment.currentRevision}) + </li> + ))} + </ul> + </div> + )} + </DrawerDescription> + </DrawerHeader> + <DrawerFooter className="gap-2 sm:space-x-0"> + <DrawerClose asChild> + <Button variant="outline">취소</Button> + </DrawerClose> + <Button + aria-label="Request TBE" + onClick={onRequest} + disabled={isRequestPending} + > + {isRequestPending && ( + <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" /> + )} + TBE 요청 전송 + </Button> + </DrawerFooter> + </DrawerContent> + </Drawer> + ) +}
\ No newline at end of file |