diff options
Diffstat (limited to 'lib/rfqs-tech/tbe-table/tbe-table.tsx')
| -rw-r--r-- | lib/rfqs-tech/tbe-table/tbe-table.tsx | 243 |
1 files changed, 243 insertions, 0 deletions
diff --git a/lib/rfqs-tech/tbe-table/tbe-table.tsx b/lib/rfqs-tech/tbe-table/tbe-table.tsx new file mode 100644 index 00000000..a162edbb --- /dev/null +++ b/lib/rfqs-tech/tbe-table/tbe-table.tsx @@ -0,0 +1,243 @@ +"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 { getColumns } from "./tbe-table-columns" +import { vendors } from "@/db/schema/vendors" +import { VendorsTableToolbarActions } from "./tbe-table-toolbar-actions" +import { fetchRfqAttachmentsbyCommentId, getTBE } from "../service" +import { InviteVendorsDialog } from "./invite-vendors-dialog" +import { CommentSheet, TbeComment } from "./comments-sheet" +import { VendorWithTbeFields } from "@/config/vendorTbeColumnsConfig" +import { TBEFileDialog } from "./file-dialog" +import { TbeResultDialog } from "./tbe-result-dialog" +import { VendorContactsDialog } from "./vendor-contact-dialog" +import { useSession } from "next-auth/react" // Next-auth session hook 추가 + +interface VendorsTableProps { + promises: Promise< + [ + Awaited<ReturnType<typeof getTBE>>, + ] + > + rfqId: number +} + + +export function TbeTable({ promises, rfqId }: VendorsTableProps) { + // Suspense로 받아온 데이터 + const [{ data: rawData, pageCount }] = React.use(promises) + + // 벤더별로 데이터 그룹화 + const data = React.useMemo(() => { + const vendorMap = new Map<number, VendorWithTbeFields>() + + rawData.forEach((item) => { + const vendorId = item.vendorId + + if (vendorMap.has(vendorId)) { + // 기존 벤더 데이터가 있으면 파일과 댓글을 합침 + const existing = vendorMap.get(vendorId)! + + // 파일 합치기 (중복 제거) + const existingFileIds = new Set(existing.files.map(f => f.id)) + const newFiles = item.files.filter(f => !existingFileIds.has(f.id)) + existing.files = [...existing.files, ...newFiles] + + // 댓글 합치기 (중복 제거) + const existingCommentIds = new Set(existing.comments.map(c => c.id)) + const newComments = item.comments.filter(c => !existingCommentIds.has(c.id)) + existing.comments = [...existing.comments, ...newComments] + + } else { + // 새로운 벤더 데이터 추가 + vendorMap.set(vendorId, { ...item, vendorResponseId: item.id }) + } + }) + + return Array.from(vendorMap.values()) + }, [rawData]) + + const { data: session } = useSession() // 세션 정보 가져오기 + + const currentUserId = session?.user?.id ? parseInt(session.user.id, 10) : 0 + + + const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorWithTbeFields> | null>(null) + + // **router** 획득 + const router = useRouter() + + const [initialComments, setInitialComments] = React.useState<TbeComment[]>([]) + const [commentSheetOpen, setCommentSheetOpen] = React.useState(false) + + const [isFileDialogOpen, setIsFileDialogOpen] = React.useState(false) + const [selectedVendorId, setSelectedVendorId] = React.useState<number | null>(null) + const [selectedTbeId, setSelectedTbeId] = React.useState<number | null>(null) + const [isContactDialogOpen, setIsContactDialogOpen] = React.useState(false) + const [selectedVendor, setSelectedVendor] = React.useState<VendorWithTbeFields | null>(null) + + // Add handleRefresh function + const handleRefresh = React.useCallback(() => { + router.refresh(); + }, [router]); + + React.useEffect(() => { + if (rowAction?.type === "comments") { + // rowAction가 새로 세팅된 뒤 여기서 openCommentSheet 실행 + openCommentSheet() + } else if (rowAction?.type === "files") { + // Handle files action + const vendorId = rowAction.row.original.vendorId; + const tbeId = rowAction.row.original.tbeId ?? 0; + openFilesDialog(tbeId, vendorId); + } + }, [rowAction]) + + async function openCommentSheet() { + setInitialComments([]) + + const comments = rowAction?.row.original.comments + const vendorId = rowAction?.row.original.vendorId + const tbeId = rowAction?.row.original.tbeId + if (comments && comments.length > 0) { + const commentWithAttachments: TbeComment[] = await Promise.all( + comments.map(async (c) => { + const attachments = await fetchRfqAttachmentsbyCommentId(c.id) + + return { + ...c, + commentedBy: currentUserId, // DB나 API 응답에 있다고 가정 + attachments, + } + }) + ) + // 3) state에 저장 -> CommentSheet에서 initialComments로 사용 + setInitialComments(commentWithAttachments) + } + setSelectedTbeId(tbeId ?? 0) + setSelectedVendorId(vendorId ?? 0) + setCommentSheetOpen(true) + } + + const openFilesDialog = (tbeId: number, vendorId: number) => { + setSelectedTbeId(tbeId) + setSelectedVendorId(vendorId) + setIsFileDialogOpen(true) + } + const openVendorContactsDialog = (vendorId: number, vendor: VendorWithTbeFields) => { + setSelectedVendorId(vendorId) + setSelectedVendor(vendor) + setIsContactDialogOpen(true) + } + + // getColumns() 호출 시, router를 주입 + const columns = React.useMemo( + () => getColumns({ setRowAction, router, openCommentSheet, openFilesDialog, openVendorContactsDialog }), + [setRowAction, router] + ) + + const filterFields: DataTableFilterField<VendorWithTbeFields>[] = [ + ] + + const advancedFilterFields: DataTableAdvancedFilterField<VendorWithTbeFields>[] = [ + { 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: ["comments"] }, + }, + getRowId: (originalRow) => String(originalRow.id), + shallow: false, + clearOnDefault: true, + }) + + + + return ( + <div style={{ maxWidth: '80vw' }}> + <DataTable + table={table} + > + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} + shallow={false} + > + <VendorsTableToolbarActions table={table} rfqId={rfqId} /> + </DataTableAdvancedToolbar> + </DataTable> + <InviteVendorsDialog + vendors={rowAction?.row.original ? [rowAction?.row.original] : []} + onOpenChange={() => setRowAction(null)} + rfqId={rfqId} + open={rowAction?.type === "invite"} + showTrigger={false} + /> + <CommentSheet + currentUserId={currentUserId} + open={commentSheetOpen} + onOpenChange={setCommentSheetOpen} + rfqId={rfqId} + tbeId={selectedTbeId ?? 0} + vendorId={selectedVendorId ?? 0} + initialComments={initialComments} + /> + + <TBEFileDialog + isOpen={isFileDialogOpen} + onOpenChange={setIsFileDialogOpen} + tbeId={selectedTbeId ?? 0} + vendorId={selectedVendorId ?? 0} + rfqId={rfqId} // Use the prop directly instead of data[0]?.rfqId + onRefresh={handleRefresh} + /> + + <TbeResultDialog + open={rowAction?.type === "tbeResult"} + onOpenChange={() => setRowAction(null)} + tbe={rowAction?.row.original ?? null} + /> + + <VendorContactsDialog + isOpen={isContactDialogOpen} + onOpenChange={setIsContactDialogOpen} + vendorId={selectedVendorId} + vendor={selectedVendor} + /> + + </div> + ) +}
\ No newline at end of file |