summaryrefslogtreecommitdiff
path: root/lib/payment-terms/table/payment-terms-table.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'lib/payment-terms/table/payment-terms-table.tsx')
-rw-r--r--lib/payment-terms/table/payment-terms-table.tsx102
1 files changed, 62 insertions, 40 deletions
diff --git a/lib/payment-terms/table/payment-terms-table.tsx b/lib/payment-terms/table/payment-terms-table.tsx
index 589acb52..ddf270ce 100644
--- a/lib/payment-terms/table/payment-terms-table.tsx
+++ b/lib/payment-terms/table/payment-terms-table.tsx
@@ -3,13 +3,16 @@ 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 type {
+ DataTableAdvancedFilterField,
+ DataTableRowAction,
+} from "@/types/table"
+import { getPaymentTerms } from "../service";
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 { DeletePaymentTermsDialog } from "./delete-payment-terms-dialog";
import { PaymentTermsEditSheet } from "./payment-terms-edit-sheet";
-import { Row } from "@tanstack/react-table";
-import { getPaymentTerms } from "../service";
+import { PaymentTermsTableToolbarActions } from "./payment-terms-table-toolbar";
+import { paymentTerms } from "@/db/schema/procurementRFQ";
import { GetPaymentTermsSchema } from "../validations";
interface PaymentTermsTableProps {
@@ -18,8 +21,7 @@ interface PaymentTermsTableProps {
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);
+ const [rowAction, setRowAction] = React.useState<DataTableRowAction<typeof paymentTerms.$inferSelect> | null>(null);
React.useEffect(() => {
if (promises) {
@@ -45,7 +47,6 @@ export function PaymentTermsTable({ promises }: PaymentTermsTableProps) {
setRawData(result);
} catch (error) {
console.error("Error refreshing data:", error);
- toast.error("데이터를 불러오는 중 오류가 발생했습니다.");
}
})();
}
@@ -78,50 +79,71 @@ export function PaymentTermsTable({ promises }: PaymentTermsTableProps) {
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 }),
+ [setRowAction]
+ )
- const columns = React.useMemo(() => getColumns({ setRowAction: handleRowAction, onSuccess: refreshData }), [refreshData]);
+ // 고급 필터 필드 설정
+ const advancedFilterFields: DataTableAdvancedFilterField<typeof paymentTerms.$inferSelect>[] = [
+ { id: "code", label: "코드", type: "text" },
+ {
+ id: "isActive", label: "상태", type: "select", options: [
+ { label: "활성", value: "true" },
+ { label: "비활성", value: "false" },
+ ]
+ },
+ { id: "description", label: "설명", type: "text" },
+ { id: "createdAt", label: "생성일", type: "date" },
+ ];
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,
- });
+ data: rawData.data,
+ columns,
+ pageCount: rawData.pageCount,
+ 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
+ table={table}
+ filterFields={advancedFilterFields}
+ >
+ <PaymentTermsTableToolbarActions table={table} onSuccess={refreshData} />
</DataTableAdvancedToolbar>
</DataTable>
- {isEditDialogOpen && selectedRow && (
- <PaymentTermsEditSheet
- open={isEditDialogOpen}
- onOpenChange={setIsEditDialogOpen}
- data={selectedRow}
- onSuccess={refreshData}
- />
- )}
+
+ <DeletePaymentTermsDialog
+ open={rowAction?.type === "delete"}
+ onOpenChange={() => setRowAction(null)}
+ paymentTerms={rowAction?.row.original ? [rowAction?.row.original] : []}
+ showTrigger={false}
+ onSuccess={() => {
+ rowAction?.row.toggleSelected(false)
+ refreshData()
+ }}
+ />
+
+ <PaymentTermsEditSheet
+ open={rowAction?.type === "update"}
+ onOpenChange={() => setRowAction(null)}
+ data={rowAction?.row.original ?? null}
+ onSuccess={refreshData}
+ />
</>
);
} \ No newline at end of file