"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 "./payment-terms-table-columns"; import { paymentTerms } from "@/db/schema/procurementRFQ"; import { PaymentTermsTableToolbar } from "./payment-terms-table-toolbar"; import { toast } from "sonner"; import { PaymentTermsEditSheet } from "./payment-terms-edit-sheet"; import { Row } from "@tanstack/react-table"; import { getPaymentTerms } from "../service"; import { GetPaymentTermsSchema } from "../validations"; interface PaymentTermsTableProps { promises?: Promise<[{ data: typeof paymentTerms.$inferSelect[]; pageCount: number }] >; } export function PaymentTermsTable({ promises }: PaymentTermsTableProps) { const [rawData, setRawData] = React.useState<{ data: typeof paymentTerms.$inferSelect[]; pageCount: number }>({ data: [], pageCount: 0 }); const [isEditDialogOpen, setIsEditDialogOpen] = React.useState(false); const [selectedRow, setSelectedRow] = React.useState(null); React.useEffect(() => { if (promises) { promises.then(([result]) => { setRawData(result); }); } else { // fallback: 클라이언트에서 직접 fetch (CSR) (async () => { try { const result = await getPaymentTerms({ 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 fetchPaymentTerms = React.useCallback(async (params: Record) => { try { const result = await getPaymentTerms(params as GetPaymentTermsSchema); return result; } catch (error) { console.error("Error fetching payment terms:", error); throw error; } }, []); const refreshData = React.useCallback(async () => { try { const result = await fetchPaymentTerms({ 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("데이터를 불러오는 중 오류가 발생했습니다."); } }, [fetchPaymentTerms]); const handleRowAction = async (action: { type: string; row: Row }) => { if (action.type === "edit") { setSelectedRow(action.row.original); setIsEditDialogOpen(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 ( <> {isEditDialogOpen && selectedRow && ( )} ); }