diff options
Diffstat (limited to 'lib/incoterms/table/incoterms-table.tsx')
| -rw-r--r-- | lib/incoterms/table/incoterms-table.tsx | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/lib/incoterms/table/incoterms-table.tsx b/lib/incoterms/table/incoterms-table.tsx new file mode 100644 index 00000000..c5b5bba4 --- /dev/null +++ b/lib/incoterms/table/incoterms-table.tsx @@ -0,0 +1,116 @@ +"use client"; +import * as React from "react"; +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 "./incoterms-table-columns"; +import { incoterms } from "@/db/schema/procurementRFQ"; +import { IncotermsTableToolbar } from "./incoterms-table-toolbar"; +import { toast } from "sonner"; +import { IncotermsEditSheet } from "./incoterms-edit-sheet"; +import { Row } from "@tanstack/react-table"; +import { getIncoterms } from "../service"; + +interface IncotermsTableProps { + promises?: Promise<[{ data: typeof incoterms.$inferSelect[]; pageCount: number }] >; +} + +export function IncotermsTable({ promises }: IncotermsTableProps) { + const [rawData, setRawData] = React.useState<{ data: typeof incoterms.$inferSelect[]; pageCount: number }>({ data: [], pageCount: 0 }); + const [isEditSheetOpen, setIsEditSheetOpen] = React.useState(false); + const [selectedRow, setSelectedRow] = React.useState<typeof incoterms.$inferSelect | null>(null); + + React.useEffect(() => { + if (promises) { + promises.then(([result]) => { + setRawData(result); + }); + } else { + // fallback: 클라이언트에서 직접 fetch (CSR) + (async () => { + try { + const result = await getIncoterms({ + page: 1, + perPage: 10, + search: "", + sort: [{ id: "createdAt", desc: true }], + filters: [], + joinOperator: "and", + flags: ["advancedTable"], + code: "", + description: "", + isActive: "" + }); + setRawData(result); + } catch (error) { + console.error("Error refreshing data:", error); + toast.error("데이터를 불러오는 중 오류가 발생했습니다."); + } + })(); + } + }, [promises]); + + const refreshData = React.useCallback(async () => { + try { + const result = await getIncoterms({ + page: 1, + perPage: 10, + search: "", + sort: [{ id: "createdAt", desc: true }], + filters: [], + joinOperator: "and", + flags: ["advancedTable"], + code: "", + description: "", + isActive: "" + }); + setRawData(result); + } catch (error) { + console.error("Error refreshing data:", error); + toast.error("데이터를 불러오는 중 오류가 발생했습니다."); + } + }, []); + + const handleRowAction = async (action: { type: string; row: Row<typeof incoterms.$inferSelect> }) => { + if (action.type === "edit") { + setSelectedRow(action.row.original); + setIsEditSheetOpen(true); + } + }; + + const columns = React.useMemo(() => getColumns({ setRowAction: handleRowAction, onSuccess: refreshData }), [refreshData]); + + const { table } = useDataTable({ + data: rawData.data, + columns, + pageCount: rawData.pageCount, + filterFields: [], + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "createdAt", desc: true }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => String(originalRow.code), + shallow: false, + clearOnDefault: true, + }); + + return ( + <> + <DataTable table={table}> + <DataTableAdvancedToolbar table={table} filterFields={[]} shallow={false}> + <IncotermsTableToolbar onSuccess={refreshData} /> + </DataTableAdvancedToolbar> + </DataTable> + {isEditSheetOpen && selectedRow && ( + <IncotermsEditSheet + open={isEditSheetOpen} + onOpenChange={setIsEditSheetOpen} + data={selectedRow} + onSuccess={refreshData} + /> + )} + </> + ); +}
\ No newline at end of file |
