diff options
Diffstat (limited to 'lib/vendors/table/request-project-pq-dialog.tsx')
| -rw-r--r-- | lib/vendors/table/request-project-pq-dialog.tsx | 242 |
1 files changed, 242 insertions, 0 deletions
diff --git a/lib/vendors/table/request-project-pq-dialog.tsx b/lib/vendors/table/request-project-pq-dialog.tsx new file mode 100644 index 00000000..c590d7ec --- /dev/null +++ b/lib/vendors/table/request-project-pq-dialog.tsx @@ -0,0 +1,242 @@ +"use client" + +import * as React from "react" +import { type Row } from "@tanstack/react-table" +import { Loader, ChevronDown, BuildingIcon } 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 { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu" +import { Label } from "@/components/ui/label" +import { Vendor } from "@/db/schema/vendors" +import { requestPQVendors } from "../service" +import { getProjects, type Project } from "@/lib/rfqs/service" + +interface RequestProjectPQDialogProps + extends React.ComponentPropsWithoutRef<typeof Dialog> { + vendors: Row<Vendor>["original"][] + showTrigger?: boolean + onSuccess?: () => void +} + +export function RequestProjectPQDialog({ + vendors, + showTrigger = true, + onSuccess, + ...props +}: RequestProjectPQDialogProps) { + const [isApprovePending, startApproveTransition] = React.useTransition() + const isDesktop = useMediaQuery("(min-width: 640px)") + const [projects, setProjects] = React.useState<Project[]>([]) + const [selectedProjectId, setSelectedProjectId] = React.useState<number | null>(null) + const [isLoadingProjects, setIsLoadingProjects] = React.useState(false) + + // 프로젝트 목록 로드 + React.useEffect(() => { + async function loadProjects() { + setIsLoadingProjects(true) + try { + const projectsList = await getProjects() + setProjects(projectsList) + } catch (error) { + console.error("프로젝트 목록 로드 오류:", error) + toast.error("프로젝트 목록을 불러오는 중 오류가 발생했습니다.") + } finally { + setIsLoadingProjects(false) + } + } + + loadProjects() + }, []) + + // 다이얼로그가 닫힐 때 선택된 프로젝트 초기화 + React.useEffect(() => { + if (!props.open) { + setSelectedProjectId(null) + } + }, [props.open]) + + // 프로젝트 선택 처리 + const handleProjectChange = (value: string) => { + setSelectedProjectId(Number(value)) + } + + function onApprove() { + if (!selectedProjectId) { + toast.error("프로젝트를 선택해주세요.") + return + } + + startApproveTransition(async () => { + const { error } = await requestPQVendors({ + ids: vendors.map((vendor) => vendor.id), + projectId: selectedProjectId, + }) + + if (error) { + toast.error(error) + return + } + + props.onOpenChange?.(false) + + toast.success(`벤더에게 프로젝트 PQ가 성공적으로 요청되었습니다.`) + onSuccess?.() + }) + } + + const dialogContent = ( + <> + <div className="space-y-4 py-2"> + <div className="space-y-2"> + <Label htmlFor="project-selection">프로젝트 선택</Label> + <Select + onValueChange={handleProjectChange} + disabled={isLoadingProjects || isApprovePending} + > + <SelectTrigger id="project-selection" className="w-full"> + <SelectValue placeholder="프로젝트를 선택하세요" /> + </SelectTrigger> + <SelectContent> + {isLoadingProjects ? ( + <SelectItem value="loading" disabled>프로젝트 로딩 중...</SelectItem> + ) : projects.length === 0 ? ( + <SelectItem value="empty" disabled>등록된 프로젝트가 없습니다</SelectItem> + ) : ( + projects.map((project) => ( + <SelectItem key={project.id} value={project.id.toString()}> + {project.projectCode} - {project.projectName} + </SelectItem> + )) + )} + </SelectContent> + </Select> + </div> + </div> + </> + ) + + if (isDesktop) { + return ( + <Dialog {...props}> + {showTrigger ? ( + <DialogTrigger asChild> + <Button variant="outline" size="sm" className="gap-2"> + <BuildingIcon className="size-4" aria-hidden="true" /> + 프로젝트 PQ 요청 ({vendors.length}) + </Button> + </DialogTrigger> + ) : null} + <DialogContent> + <DialogHeader> + <DialogTitle>프로젝트 PQ 요청 확인</DialogTitle> + <DialogDescription> + <span className="font-medium">{vendors.length}</span> + {vendors.length === 1 ? "개의 벤더" : "개의 벤더들"}에게 프로젝트 PQ 제출을 요청하시겠습니까? + 요청을 보내면 벤더에게 알림이 발송되고 프로젝트 PQ 정보를 입력할 수 있게 됩니다. + </DialogDescription> + </DialogHeader> + + {dialogContent} + + <DialogFooter className="gap-2 sm:space-x-0"> + <DialogClose asChild> + <Button variant="outline">취소</Button> + </DialogClose> + <Button + aria-label="선택한 벤더에게 요청하기" + variant="default" + onClick={onApprove} + disabled={isApprovePending || !selectedProjectId} + > + {isApprovePending && ( + <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" className="gap-2"> + <BuildingIcon className="size-4" aria-hidden="true" /> + 프로젝트 PQ 요청 ({vendors.length}) + </Button> + </DrawerTrigger> + ) : null} + <DrawerContent> + <DrawerHeader> + <DrawerTitle>프로젝트 PQ 요청 확인</DrawerTitle> + <DrawerDescription> + <span className="font-medium">{vendors.length}</span> + {vendors.length === 1 ? "개의 벤더" : "개의 벤더들"}에게 프로젝트 PQ 제출을 요청하시겠습니까? + 요청을 보내면 벤더에게 알림이 발송되고 프로젝트 PQ 정보를 입력할 수 있게 됩니다. + </DrawerDescription> + </DrawerHeader> + + <div className="px-4"> + {dialogContent} + </div> + + <DrawerFooter className="gap-2 sm:space-x-0"> + <DrawerClose asChild> + <Button variant="outline">취소</Button> + </DrawerClose> + <Button + aria-label="선택한 벤더에게 요청하기" + variant="default" + onClick={onApprove} + disabled={isApprovePending || !selectedProjectId} + > + {isApprovePending && ( + <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" /> + )} + 요청하기 + </Button> + </DrawerFooter> + </DrawerContent> + </Drawer> + ) +}
\ No newline at end of file |