diff options
Diffstat (limited to 'lib/rfqs-tech/cbe-table/cbe-table.tsx')
| -rw-r--r-- | lib/rfqs-tech/cbe-table/cbe-table.tsx | 178 |
1 files changed, 178 insertions, 0 deletions
diff --git a/lib/rfqs-tech/cbe-table/cbe-table.tsx b/lib/rfqs-tech/cbe-table/cbe-table.tsx new file mode 100644 index 00000000..37fbc3f4 --- /dev/null +++ b/lib/rfqs-tech/cbe-table/cbe-table.tsx @@ -0,0 +1,178 @@ +"use client" + +import * as React from "react" +import { useRouter } from "next/navigation" +import type { + DataTableAdvancedFilterField, + DataTableFilterField, + DataTableRowAction, +} from "@/types/table" + +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 { fetchRfqAttachmentsbyCommentId, getCBE } from "../service" +import { getColumns } from "./cbe-table-columns" +import { VendorWithCbeFields } from "@/config/vendorCbeColumnsConfig" +import { CommentSheet, CbeComment } from "./comments-sheet" +import { useSession } from "next-auth/react" // Next-auth session hook 추가 +import { VendorContactsDialog } from "./vendor-contact-dialog" +import { InviteVendorsDialog } from "./invite-vendors-dialog" +import { VendorsTableToolbarActions } from "./cbe-table-toolbar-actions" + +interface VendorsTableProps { + promises: Promise< + [ + Awaited<ReturnType<typeof getCBE>>, + ] + > + rfqId: number +} + + +export function CbeTable({ promises, rfqId }: VendorsTableProps) { + + // Suspense로 받아온 데이터 + const [{ data, pageCount }] = React.use(promises) + const { data: session } = useSession() // 세션 정보 가져오기 + + const currentUserId = session?.user?.id ? parseInt(session.user.id, 10) : 0 + const currentUser = session?.user + + + const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorWithCbeFields> | null>(null) + + // **router** 획득 + const router = useRouter() + + const [initialComments, setInitialComments] = React.useState<CbeComment[]>([]) + const [commentSheetOpen, setCommentSheetOpen] = React.useState(false) + const [isLoadingComments, setIsLoadingComments] = React.useState(false) + // const [selectedRfqIdForComments, setSelectedRfqIdForComments] = React.useState<number | null>(null) + + const [selectedVendorId, setSelectedVendorId] = React.useState<number | null>(null) + const [selectedCbeId, setSelectedCbeId] = React.useState<number | null>(null) + const [isContactDialogOpen, setIsContactDialogOpen] = React.useState(false) + const [selectedVendor, setSelectedVendor] = React.useState<VendorWithCbeFields | null>(null) + // console.log("selectedVendorId", selectedVendorId) + // console.log("selectedCbeId", selectedCbeId) + + React.useEffect(() => { + if (rowAction?.type === "comments") { + // rowAction가 새로 세팅된 뒤 여기서 openCommentSheet 실행 + openCommentSheet(Number(rowAction.row.original.responseId)) + } + }, [rowAction]) + + async function openCommentSheet(responseId: number) { + setInitialComments([]) + setIsLoadingComments(true) + const comments = rowAction?.row.original.comments + // const rfqId = rowAction?.row.original.rfqId + const vendorId = rowAction?.row.original.vendorId + + if (comments && comments.length > 0) { + const commentWithAttachments: CbeComment[] = 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) + } + + // if(rfqId){ setSelectedRfqIdForComments(rfqId)} + if(vendorId){ setSelectedVendorId(vendorId)} + setSelectedCbeId(responseId) + setCommentSheetOpen(true) + setIsLoadingComments(false) + } + + const openVendorContactsDialog = (vendorId: number, vendor: VendorWithCbeFields) => { + setSelectedVendorId(vendorId) + setSelectedVendor(vendor) + setIsContactDialogOpen(true) + } + + // getColumns() 호출 시, router를 주입 + const columns = React.useMemo( + () => getColumns({ setRowAction, router, openCommentSheet, openVendorContactsDialog }), + [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: "respondedAt", label: "Updated at", type: "date" }, + ] + + + const { table } = useDataTable({ + data, + columns, + pageCount, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "respondedAt", desc: true }], + columnPinning: { right: ["comments"] }, + }, + getRowId: (originalRow) => String(originalRow.responseId), + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + <DataTable + table={table} + > + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} + shallow={false} + > + <VendorsTableToolbarActions table={table} rfqId={rfqId} /> + </DataTableAdvancedToolbar> + </DataTable> + + <CommentSheet + currentUserId={currentUserId} + open={commentSheetOpen} + onOpenChange={setCommentSheetOpen} + rfqId={rfqId} + cbeId={selectedCbeId ?? 0} + vendorId={selectedVendorId ?? 0} + isLoading={isLoadingComments} + initialComments={initialComments} + /> + + <InviteVendorsDialog + vendors={rowAction?.row.original ? [rowAction?.row.original] : []} + onOpenChange={() => setRowAction(null)} + rfqId={rfqId} + open={rowAction?.type === "invite"} + showTrigger={false} + currentUser={currentUser} + /> + + <VendorContactsDialog + isOpen={isContactDialogOpen} + onOpenChange={setIsContactDialogOpen} + vendorId={selectedVendorId} + vendor={selectedVendor} + /> + + </> + ) +}
\ No newline at end of file |