1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
|
"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<typeof paymentTerms.$inferSelect | null>(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<string, unknown>) => {
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<typeof paymentTerms.$inferSelect> }) => {
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 (
<>
<DataTable table={table}>
<DataTableAdvancedToolbar table={table} filterFields={[]} shallow={false}>
<PaymentTermsTableToolbar onSuccess={refreshData} />
</DataTableAdvancedToolbar>
</DataTable>
{isEditDialogOpen && selectedRow && (
<PaymentTermsEditSheet
open={isEditDialogOpen}
onOpenChange={setIsEditDialogOpen}
data={selectedRow}
onSuccess={refreshData}
/>
)}
</>
);
}
|
