diff options
Diffstat (limited to 'lib/payment-terms/table/payment-terms-table.tsx')
| -rw-r--r-- | lib/payment-terms/table/payment-terms-table.tsx | 102 |
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 |
