diff options
| author | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-06-05 01:53:35 +0000 |
|---|---|---|
| committer | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-06-05 01:53:35 +0000 |
| commit | 610d3bccf1cb640e2a21df28d8d2a954c2bf337e (patch) | |
| tree | e7e6d72fecf14ddcff1b5b52263d14119b7c488c /lib/welding/table/ocr-table.tsx | |
| parent | 15969dfedffc4e215c81d507164bc2bb383974e5 (diff) | |
(대표님) 변경사항 0604 - OCR 관련 및 drizzle generated sqls
Diffstat (limited to 'lib/welding/table/ocr-table.tsx')
| -rw-r--r-- | lib/welding/table/ocr-table.tsx | 143 |
1 files changed, 143 insertions, 0 deletions
diff --git a/lib/welding/table/ocr-table.tsx b/lib/welding/table/ocr-table.tsx new file mode 100644 index 00000000..91af1c67 --- /dev/null +++ b/lib/welding/table/ocr-table.tsx @@ -0,0 +1,143 @@ +"use client" + +import * as React from "react" +import type { + DataTableAdvancedFilterField, + DataTableFilterField, + DataTableRowAction, +} from "@/types/table" + +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 { OcrTableToolbarActions } from "./ocr-table-toolbar-actions" +import { getColumns } from "./ocr-table-columns" +import { OcrRow } from "@/db/schema" +import { getOcrRows } from "../service" + +interface ItemsTableProps { + promises: Promise< + [ + Awaited<ReturnType<typeof getOcrRows>>, + ] + > +} + +export function OcrTable({ promises }: ItemsTableProps) { + const [{ data, pageCount }] = + React.use(promises) + + const [rowAction, setRowAction] = + React.useState<DataTableRowAction<OcrRow> | null>(null) + + const columns = React.useMemo( + () => getColumns({ setRowAction }), + [setRowAction] + ) + + /** + * This component can render either a faceted filter or a search filter based on the `options` prop. + * + * @prop options - An array of objects, each representing a filter option. If provided, a faceted filter is rendered. If not, a search filter is rendered. + * + * Each `option` object has the following properties: + * @prop {string} label - The label for the filter option. + * @prop {string} value - The value for the filter option. + * @prop {React.ReactNode} [icon] - An optional icon to display next to the label. + * @prop {boolean} [withCount] - An optional boolean to display the count of the filter option. + */ + const filterFields: DataTableFilterField<OcrRow>[] = [ + + ] + + /** + * Advanced filter fields for the data table. + * These fields provide more complex filtering options compared to the regular filterFields. + * + * Key differences from regular filterFields: + * 1. More field types: Includes 'text', 'multi-select', 'date', and 'boolean'. + * 2. Enhanced flexibility: Allows for more precise and varied filtering options. + * 3. Used with DataTableAdvancedToolbar: Enables a more sophisticated filtering UI. + * 4. Date and boolean types: Adds support for filtering by date ranges and boolean values. + */ + const advancedFilterFields: DataTableAdvancedFilterField<OcrRow>[] = [ + { + id: "reportNo", + label: "Report No", + type: "text", + // group: "Basic Info", + }, + { + id: "no", + label: "No", + type: "text", + // group: "Basic Info", + }, + + + { + id: "identificationNo", + label: "Identification No", + type: "text", + // group: "Metadata",a + }, + { + id: "tagNo", + label: "Tag No", + type: "text", + // group: "Metadata", + }, + { + id: "jointNo", + label: "Joint No", + type: "text", + // group: "Metadata", + }, + { + id: "weldingDate", + label: "Welding Date", + type: "date", + // group: "Metadata", + }, + { + id: "createdAt", + label: "생성일", + type: "date", + // group: "Metadata", + }, + ] + + + const { table } = useDataTable({ + data, + columns, + pageCount, + filterFields, + enablePinning: true, + enableAdvancedFilter: true, + initialState: { + sorting: [{ id: "createdAt", desc: true }], + columnPinning: { right: ["actions"] }, + }, + getRowId: (originalRow) => String(originalRow.id), + shallow: false, + clearOnDefault: true, + }) + + return ( + <> + <DataTable + table={table} + > + <DataTableAdvancedToolbar + table={table} + filterFields={advancedFilterFields} + shallow={false} + > + <OcrTableToolbarActions table={table} /> + </DataTableAdvancedToolbar> + </DataTable> + </> + ) +} |
