diff options
Diffstat (limited to 'lib/vendor-rfq-response/vendor-cbe-table/cbe-table-columns.tsx')
| -rw-r--r-- | lib/vendor-rfq-response/vendor-cbe-table/cbe-table-columns.tsx | 365 |
1 files changed, 0 insertions, 365 deletions
diff --git a/lib/vendor-rfq-response/vendor-cbe-table/cbe-table-columns.tsx b/lib/vendor-rfq-response/vendor-cbe-table/cbe-table-columns.tsx deleted file mode 100644 index c7be0bf4..00000000 --- a/lib/vendor-rfq-response/vendor-cbe-table/cbe-table-columns.tsx +++ /dev/null @@ -1,365 +0,0 @@ -"use client" - -import * as React from "react" -import { type DataTableRowAction } from "@/types/table" -import { type ColumnDef } from "@tanstack/react-table" -import { Download, Loader2, MessageSquare, FileEdit } from "lucide-react" -import { formatDate } from "@/lib/utils" -import { Badge } from "@/components/ui/badge" -import { Button } from "@/components/ui/button" -import { Checkbox } from "@/components/ui/checkbox" -import { DataTableColumnHeaderSimple } from "@/components/data-table/data-table-column-simple-header" -import { useRouter } from "next/navigation" -import { VendorWithCbeFields, vendorResponseCbeColumnsConfig } from "@/config/vendorCbeColumnsConfig" -import { toast } from "sonner" - - -type NextRouter = ReturnType<typeof useRouter> - -interface GetColumnsProps { - setRowAction: React.Dispatch< - React.SetStateAction<DataTableRowAction<VendorWithCbeFields> | null> - > - router: NextRouter - openCommentSheet: (vendorId: number) => void - handleDownloadCbeFiles: (vendorId: number, rfqId: number) => void - loadingVendors: Record<string, boolean> - openVendorContactsDialog: (rfqId: number, rfq: VendorWithCbeFields) => void - // New prop for handling commercial response - openCommercialResponseSheet: (responseId: number, rfq: VendorWithCbeFields) => void -} - -/** - * tanstack table 컬럼 정의 (중첩 헤더 버전) - */ -export function getColumns({ - setRowAction, - router, - openCommentSheet, - handleDownloadCbeFiles, - loadingVendors, - openVendorContactsDialog, - openCommercialResponseSheet -}: GetColumnsProps): ColumnDef<VendorWithCbeFields>[] { - // ---------------------------------------------------------------- - // 1) Select 컬럼 (체크박스) - // ---------------------------------------------------------------- - const selectColumn: ColumnDef<VendorWithCbeFields> = { - id: "select", - header: ({ table }) => ( - <Checkbox - checked={ - table.getIsAllPageRowsSelected() || - (table.getIsSomePageRowsSelected() && "indeterminate") - } - onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)} - aria-label="Select all" - className="translate-y-0.5" - /> - ), - cell: ({ row }) => ( - <Checkbox - checked={row.getIsSelected()} - onCheckedChange={(value) => row.toggleSelected(!!value)} - aria-label="Select row" - className="translate-y-0.5" - /> - ), - size: 40, - enableSorting: false, - enableHiding: false, - } - - // ---------------------------------------------------------------- - // 2) 그룹화(Nested) 컬럼 구성 - // ---------------------------------------------------------------- - const groupMap: Record<string, ColumnDef<VendorWithCbeFields>[]> = {} - - vendorResponseCbeColumnsConfig.forEach((cfg) => { - const groupName = cfg.group || "_noGroup" - if (!groupMap[groupName]) { - groupMap[groupName] = [] - } - - // childCol: ColumnDef<VendorWithCbeFields> - const childCol: ColumnDef<VendorWithCbeFields> = { - accessorKey: cfg.id, - enableResizing: true, - header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title={cfg.label} /> - ), - meta: { - excelHeader: cfg.excelHeader, - group: cfg.group, - type: cfg.type, - }, - maxSize: 120, - // 셀 렌더링 - cell: ({ row, getValue }) => { - // 1) 필드값 가져오기 - const val = getValue() - - - if (cfg.id === "rfqCode") { - const rfq = row.original; - const rfqId = rfq.rfqId; - - // 협력업체 이름을 클릭할 수 있는 버튼으로 렌더링 - const handleVendorNameClick = () => { - if (rfqId) { - openVendorContactsDialog(rfqId, rfq); // vendor 전체 객체 전달 - } else { - toast.error("협력업체 ID를 찾을 수 없습니다."); - } - }; - - return ( - <Button - variant="link" - className="p-0 h-auto text-left font-normal justify-start hover:underline" - onClick={handleVendorNameClick} - > - {val as string} - </Button> - ); - } - - // Commercial Response Status에 배지 적용 - if (cfg.id === "commercialResponseStatus") { - const status = val as string; - - if (!status) return <span className="text-muted-foreground">-</span>; - - let variant: "default" | "outline" | "secondary" | "destructive" = "outline"; - - switch (status) { - case "SUBMITTED": - variant = "default"; // Green - break; - case "IN_PROGRESS": - variant = "secondary"; // Orange/Yellow - break; - case "PENDING": - variant = "outline"; // Gray - break; - default: - variant = "outline"; - } - - return ( - <Badge variant={variant} className="capitalize"> - {status.toLowerCase().replace("_", " ")} - </Badge> - ); - } - - // 예) TBE Updated (날짜) - if (cfg.id === "respondedAt" || cfg.id === "rfqDueDate" ) { - const dateVal = val as Date | undefined - if (!dateVal) return null - return formatDate(dateVal) - } - - // 그 외 필드는 기본 값 표시 - return val ?? "" - }, - } - - groupMap[groupName].push(childCol) - }) - - // groupMap → nestedColumns - const nestedColumns: ColumnDef<VendorWithCbeFields>[] = [] - Object.entries(groupMap).forEach(([groupName, colDefs]) => { - if (groupName === "_noGroup") { - nestedColumns.push(...colDefs) - } else { - nestedColumns.push({ - id: groupName, - header: groupName, - columns: colDefs, - }) - } - }) - - // ---------------------------------------------------------------- - // 3) Respond 컬럼 (새로 추가) - // ---------------------------------------------------------------- - const respondColumn: ColumnDef<VendorWithCbeFields> = { - id: "respond", - header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="Response" /> - ), - cell: ({ row }) => { - const vendor = row.original - const responseId = vendor.responseId - - if (!responseId) { - return <div className="text-center text-muted-foreground">-</div> - } - - const handleClick = () => { - openCommercialResponseSheet(responseId, vendor) - } - - // Status에 따라 버튼 variant 변경 - let variant: "default" | "outline" | "ghost" | "secondary" = "default" - let buttonText = "Respond" - - if (vendor.commercialResponseStatus === "SUBMITTED") { - variant = "outline" - buttonText = "Update" - } else if (vendor.commercialResponseStatus === "IN_PROGRESS") { - variant = "secondary" - buttonText = "Continue" - } - - return ( - <Button - variant={variant} - size="sm" - // className="w-20" - onClick={handleClick} - > - <FileEdit className="h-3.5 w-3.5 mr-1" /> - {buttonText} - </Button> - ) - }, - enableSorting: false, - maxSize: 200, - minSize: 115, - } - - // ---------------------------------------------------------------- - // 4) Comments 컬럼 - // ---------------------------------------------------------------- - const commentsColumn: ColumnDef<VendorWithCbeFields> = { - id: "comments", - header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="Comments" /> - ), - cell: ({ row }) => { - const vendor = row.original - const commCount = vendor.comments?.length ?? 0 - - function handleClick() { - // rowAction + openCommentSheet - setRowAction({ row, type: "comments" }) - openCommentSheet(vendor.responseId ?? 0) - } - - return ( - <Button - variant="ghost" - size="sm" - className="relative h-8 w-8 p-0 group" - onClick={handleClick} - aria-label={ - commCount > 0 ? `View ${commCount} comments` : "No comments" - } - > - <MessageSquare className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" /> - {commCount > 0 && ( - <Badge - variant="secondary" - className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center" - > - {commCount} - </Badge> - )} - <span className="sr-only"> - {commCount > 0 ? `${commCount} Comments` : "No Comments"} - </span> - </Button> - ) - }, - enableSorting: false, - maxSize: 80 - } - - // ---------------------------------------------------------------- - // 5) 파일 다운로드 컬럼 (개별 로딩 상태 적용) - // ---------------------------------------------------------------- - const downloadColumn: ColumnDef<VendorWithCbeFields> = { - id: "attachDownload", - header: ({ column }) => ( - <DataTableColumnHeaderSimple column={column} title="Attach Download" /> - ), - cell: ({ row }) => { - const vendor = row.original - const vendorId = vendor.vendorId - const rfqId = vendor.rfqId - const files = vendor.files?.length || 0 - - if (!vendorId || !rfqId) { - return <div className="text-center text-muted-foreground">-</div> - } - - // 각 행별로 로딩 상태 확인 (vendorId_rfqId 형식의 키 사용) - const rowKey = `${vendorId}_${rfqId}` - const isRowLoading = loadingVendors[rowKey] === true - - // 템플릿 파일이 없으면 다운로드 버튼 비활성화 - const isDisabled = files <= 0 || isRowLoading - - return ( - <Button - variant="ghost" - size="sm" - className="relative h-8 w-8 p-0 group" - onClick={ - isDisabled - ? undefined - : () => handleDownloadCbeFiles(vendorId, rfqId) - } - aria-label={ - isRowLoading - ? "다운로드 중..." - : files > 0 - ? `CBE 첨부 다운로드 (${files}개)` - : "다운로드할 파일 없음" - } - disabled={isDisabled} - > - {isRowLoading ? ( - <Loader2 className="h-4 w-4 animate-spin" /> - ) : ( - <Download className="h-4 w-4 text-muted-foreground group-hover:text-primary transition-colors" /> - )} - - {/* 파일이 1개 이상인 경우 뱃지로 개수 표시 (로딩 중이 아닐 때만) */} - {!isRowLoading && files > 0 && ( - <Badge - variant="secondary" - className="pointer-events-none absolute -top-1 -right-1 h-4 min-w-[1rem] p-0 text-[0.625rem] leading-none flex items-center justify-center" - > - {files} - </Badge> - )} - - <span className="sr-only"> - {isRowLoading - ? "다운로드 중..." - : files > 0 - ? `CBE 첨부 다운로드 (${files}개)` - : "다운로드할 파일 없음"} - </span> - </Button> - ) - }, - enableSorting: false, - maxSize: 80, - } - - // ---------------------------------------------------------------- - // 6) 최종 컬럼 배열 (respondColumn 추가) - // ---------------------------------------------------------------- - return [ - selectColumn, - ...nestedColumns, - respondColumn, // 응답 컬럼 추가 - downloadColumn, - commentsColumn, - ] -}
\ No newline at end of file |