summaryrefslogtreecommitdiff
path: root/lib/welding/table/ocr-table.tsx
diff options
context:
space:
mode:
authordujinkim <dujin.kim@dtsolution.co.kr>2025-06-05 01:53:35 +0000
committerdujinkim <dujin.kim@dtsolution.co.kr>2025-06-05 01:53:35 +0000
commit610d3bccf1cb640e2a21df28d8d2a954c2bf337e (patch)
treee7e6d72fecf14ddcff1b5b52263d14119b7c488c /lib/welding/table/ocr-table.tsx
parent15969dfedffc4e215c81d507164bc2bb383974e5 (diff)
(대표님) 변경사항 0604 - OCR 관련 및 drizzle generated sqls
Diffstat (limited to 'lib/welding/table/ocr-table.tsx')
-rw-r--r--lib/welding/table/ocr-table.tsx143
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>
+ </>
+ )
+}