From 50ae0b8f02c034e60d4cbb504620dfa1575a836f Mon Sep 17 00:00:00 2001 From: dujinkim Date: Mon, 28 Jul 2025 09:19:42 +0000 Subject: (박서영) 설계 document Numbering Rule 개발-최겸 업로드 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../code-groups/table/code-groups-table.tsx | 110 +++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 lib/docu-list-rule/code-groups/table/code-groups-table.tsx (limited to 'lib/docu-list-rule/code-groups/table/code-groups-table.tsx') diff --git a/lib/docu-list-rule/code-groups/table/code-groups-table.tsx b/lib/docu-list-rule/code-groups/table/code-groups-table.tsx new file mode 100644 index 00000000..6d8bb907 --- /dev/null +++ b/lib/docu-list-rule/code-groups/table/code-groups-table.tsx @@ -0,0 +1,110 @@ +"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 type { + DataTableAdvancedFilterField, + DataTableFilterField, + DataTableRowAction, +} from "@/types/table" +import { getCodeGroups } from "../service"; +import { getColumns } from "./code-groups-table-columns"; +import { DeleteCodeGroupsDialog } from "./delete-code-groups-dialog"; +import { CodeGroupsEditSheet } from "./code-groups-edit-sheet"; +import { CodeGroupsTableToolbarActions } from "./code-groups-table-toolbar"; +import { codeGroups } from "@/db/schema/docu-list-rule"; + +interface CodeGroupsTableProps { + promises?: Promise<[{ data: typeof codeGroups.$inferSelect[]; pageCount: number }] >; +} + +export function CodeGroupsTable({ promises }: CodeGroupsTableProps) { + const [rowAction, setRowAction] = React.useState | null>(null); + + const [{ data, pageCount }] = promises ? React.use(promises) : [{ data: [], pageCount: 0 }]; + + const refreshData = React.useCallback(async () => { + // 페이지 새로고침으로 처리 + window.location.reload(); + }, []); + + // 컬럼 설정 - 외부 파일에서 가져옴 + const columns = React.useMemo( + () => getColumns({ setRowAction }), + [setRowAction] + ) + + // 필터 필드 설정 + const filterFields: DataTableFilterField[] = []; + + // 고급 필터 필드 설정 + const advancedFilterFields: DataTableAdvancedFilterField[] = [ + { id: "groupId", label: "Group ID", type: "text" }, + { id: "description", label: "Description", type: "text" }, + { id: "codeFormat", label: "Code Format", type: "text" }, + { + id: "controlType", label: "Control Type", type: "select", options: [ + { label: "Textbox", value: "textbox" }, + { label: "Combobox", value: "combobox" }, + { label: "Date", value: "date" }, + { label: "Number", value: "number" }, + ] + }, + { + id: "isActive", label: "Status", type: "select", options: [ + { label: "Active", value: "true" }, + { label: "Inactive", value: "false" }, + ] + }, + { id: "createdAt", label: "Created At", type: "date" }, + ]; + + const { table } = useDataTable({ + data, + columns, + pageCount, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "createdAt", desc: true }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => String(originalRow.groupId), + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + + + + + + + setRowAction(null)} + codeGroups={rowAction?.row.original ? [rowAction?.row.original] : []} + showTrigger={false} + onSuccess={() => { + rowAction?.row.toggleSelected(false) + refreshData() + }} + /> + + setRowAction(null)} + data={rowAction?.row.original ?? null} + onSuccess={refreshData} + /> + + ); +} \ No newline at end of file -- cgit v1.2.3