summaryrefslogtreecommitdiff
path: root/lib/incoterms/table/incoterms-table.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'lib/incoterms/table/incoterms-table.tsx')
-rw-r--r--lib/incoterms/table/incoterms-table.tsx116
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