From e0dfb55c5457aec489fc084c4567e791b4c65eb1 Mon Sep 17 00:00:00 2001 From: dujinkim Date: Wed, 26 Mar 2025 00:37:41 +0000 Subject: 3/25 까지의 대표님 작업사항 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/vendor-document/table/doc-table.tsx | 124 ++++++++++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 lib/vendor-document/table/doc-table.tsx (limited to 'lib/vendor-document/table/doc-table.tsx') diff --git a/lib/vendor-document/table/doc-table.tsx b/lib/vendor-document/table/doc-table.tsx new file mode 100644 index 00000000..dfd906fa --- /dev/null +++ b/lib/vendor-document/table/doc-table.tsx @@ -0,0 +1,124 @@ +"use client" + +import * as React from "react" +import type { + DataTableAdvancedFilterField, + DataTableFilterField, + DataTableRowAction, +} from "@/types/table" + +import { useDataTable } from "@/hooks/use-data-table" +import { DataTable } from "@/components/data-table/data-table" +import { getColumns } from "./doc-table-column" +import { getVendorDocumentLists } from "../service" +import { VendorDocumentsView } from "@/db/schema/vendorDocu" +import { useEffect } from "react" +import { DataTableAdvancedToolbar } from "@/components/data-table/data-table-advanced-toolbar" +import { DocTableToolbarActions } from "./doc-table-toolbar-actions" + +interface DocumentListTableProps { + promises: Promise<[Awaited>]> + selectedPackageId: number + onSelectDocument?: (document: VendorDocumentsView | null) => void +} + +export function DocumentListTable({ + promises, + selectedPackageId, + onSelectDocument +}: DocumentListTableProps) { + // 1) 데이터를 가져옴 (server component -> use(...) pattern) + const [{ data, pageCount }] = React.use(promises) + + console.log(data) + const [rowAction, setRowAction] = React.useState | null>(null) + + // 3) 행 액션 처리 + useEffect(() => { + if (rowAction) { + // 액션 유형에 따라 처리 + switch (rowAction.type) { + case "select": + // 선택된 문서 처리 + if (onSelectDocument) { + onSelectDocument(rowAction.row.original) + } + break; + case "update": + // 업데이트 처리 로직 + console.log("Update document:", rowAction.row.original) + break; + case "delete": + // 삭제 처리 로직 + console.log("Delete document:", rowAction.row.original) + break; + } + + // 액션 처리 후 rowAction 초기화 + setRowAction(null) + } + }, [rowAction, onSelectDocument]) + + const columns = React.useMemo( + () => getColumns({ setRowAction }), + [setRowAction] + ) + + // Filter fields + const filterFields: DataTableFilterField[] = [] + + const advancedFilterFields: DataTableAdvancedFilterField[] = [ + { + id: "docNumber", + label: "Doc Number", + type: "text", + }, + { + id: "title", + label: "Doc Title", + type: "text", + }, + { + id: "createdAt", + label: "Created at", + type: "date", + }, + { + id: "updatedAt", + label: "Updated at", + type: "date", + }, + ] + + // useDataTable 훅으로 react-table 구성 + const { table } = useDataTable({ + data: data, // <-- 여기서 tableData 사용 + columns, + pageCount, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "createdAt", desc: true }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => String(originalRow.id), + shallow: false, + clearOnDefault: true, + columnResizeMode: "onEnd", + + }) + return ( + <> + + + + + + + ) +} \ No newline at end of file -- cgit v1.2.3