diff options
Diffstat (limited to 'lib/rfqs/cbe-table/cbe-table.tsx')
| -rw-r--r-- | lib/rfqs/cbe-table/cbe-table.tsx | 161 |
1 files changed, 161 insertions, 0 deletions
diff --git a/lib/rfqs/cbe-table/cbe-table.tsx b/lib/rfqs/cbe-table/cbe-table.tsx new file mode 100644 index 00000000..243b91ed --- /dev/null +++ b/lib/rfqs/cbe-table/cbe-table.tsx @@ -0,0 +1,161 @@ +"use client" + +import * as React from "react" +import { useRouter } from "next/navigation" +import type { + DataTableAdvancedFilterField, + DataTableFilterField, + DataTableRowAction, +} from "@/types/table" + +import { toSentenceCase } from "@/lib/utils" +import { useDataTable } from "@/hooks/use-data-table" +import { DataTable } from "@/components/data-table/data-table" +import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar" +import { useFeatureFlags } from "./feature-flags-provider" +import { Vendor, vendors } from "@/db/schema/vendors" +import { fetchRfqAttachmentsbyCommentId, getCBE } from "../service" +import { TbeComment } from "../tbe-table/comments-sheet" +import { getColumns } from "./cbe-table-columns" +import { VendorWithCbeFields } from "@/config/vendorCbeColumnsConfig" + +interface VendorsTableProps { + promises: Promise< + [ + Awaited<ReturnType<typeof getCBE>>, + ] + > + rfqId: number +} + + +export function CbeTable({ promises, rfqId }: VendorsTableProps) { + const { featureFlags } = useFeatureFlags() + + // Suspense로 받아온 데이터 + const [{ data, pageCount }] = React.use(promises) + + console.log(data, "data") + + const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorWithCbeFields> | null>(null) + + // **router** 획득 + const router = useRouter() + + const [initialComments, setInitialComments] = React.useState<TbeComment[]>([]) + const [commentSheetOpen, setCommentSheetOpen] = React.useState(false) + const [selectedRfqIdForComments, setSelectedRfqIdForComments] = React.useState<number | null>(null) + + const [isFileDialogOpen, setIsFileDialogOpen] = React.useState(false) + const [selectedVendorId, setSelectedVendorId] = React.useState<number | null>(null) + const [selectedTbeId, setSelectedTbeId] = React.useState<number | null>(null) + + // Add handleRefresh function + const handleRefresh = React.useCallback(() => { + router.refresh(); + }, [router]); + + React.useEffect(() => { + if (rowAction?.type === "comments") { + // rowAction가 새로 세팅된 뒤 여기서 openCommentSheet 실행 + openCommentSheet(Number(rowAction.row.original.id)) + } else if (rowAction?.type === "files") { + // Handle files action + const vendorId = rowAction.row.original.vendorId; + const cbeId = rowAction.row.original.cbeId ?? 0; + openFilesDialog(cbeId, vendorId); + } + }, [rowAction]) + + async function openCommentSheet(vendorId: number) { + setInitialComments([]) + + const comments = rowAction?.row.original.comments + + if (comments && comments.length > 0) { + const commentWithAttachments: TbeComment[] = await Promise.all( + comments.map(async (c) => { + const attachments = await fetchRfqAttachmentsbyCommentId(c.id) + + return { + ...c, + commentedBy: 1, // DB나 API 응답에 있다고 가정 + attachments, + } + }) + ) + // 3) state에 저장 -> CommentSheet에서 initialComments로 사용 + setInitialComments(commentWithAttachments) + } + + setSelectedRfqIdForComments(vendorId) + setCommentSheetOpen(true) + } + + const openFilesDialog = (cbeId: number, vendorId: number) => { + setSelectedTbeId(cbeId) + setSelectedVendorId(vendorId) + setIsFileDialogOpen(true) + } + + + // getColumns() 호출 시, router를 주입 + const columns = React.useMemo( + () => getColumns({ setRowAction, router, openCommentSheet, openFilesDialog }), + [setRowAction, router] + ) + + const filterFields: DataTableFilterField<VendorWithCbeFields>[] = [ + ] + + const advancedFilterFields: DataTableAdvancedFilterField<VendorWithCbeFields>[] = [ + { id: "vendorName", label: "Vendor Name", type: "text" }, + { id: "vendorCode", label: "Vendor Code", type: "text" }, + { id: "email", label: "Email", type: "text" }, + { id: "country", label: "Country", type: "text" }, + { + id: "vendorStatus", + label: "Vendor Status", + type: "multi-select", + options: vendors.status.enumValues.map((status) => ({ + label: toSentenceCase(status), + value: status, + })), + }, + { id: "rfqVendorUpdated", label: "Updated at", type: "date" }, + ] + + + const { table } = useDataTable({ + data, + columns, + pageCount, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "rfqVendorUpdated", desc: true }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => String(originalRow.id), + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + <DataTable + table={table} + > + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} + shallow={false} + > + {/* <VendorsTableToolbarActions table={table} rfqId={rfqId} /> */} + </DataTableAdvancedToolbar> + </DataTable> + + </> + ) +}
\ No newline at end of file |