From bb20046890dbab9fd5bcbcd443322b5f5427c5cf Mon Sep 17 00:00:00 2001 From: Blake Matthes Date: Mon, 14 Apr 2025 12:28:11 -0500 Subject: [PATCH] test(printers): added in management tab for printers --- .../tableData/printers/printerColumns.tsx | 68 +++++++++ .../utils/tableData/printers/printerData.tsx | 134 ++++++++++++++++++ 2 files changed, 202 insertions(+) create mode 100644 frontend/src/utils/tableData/printers/printerColumns.tsx create mode 100644 frontend/src/utils/tableData/printers/printerData.tsx diff --git a/frontend/src/utils/tableData/printers/printerColumns.tsx b/frontend/src/utils/tableData/printers/printerColumns.tsx new file mode 100644 index 0000000..f640563 --- /dev/null +++ b/frontend/src/utils/tableData/printers/printerColumns.tsx @@ -0,0 +1,68 @@ +import { ColumnDef } from "@tanstack/react-table"; +import { format } from "date-fns"; + +// This type is used to define the shape of our data. +// You can use a Zod schema here if you want. +export type Adjustmnets = { + siloAdjust_id: string; + currentStockLevel: string; + newLevel: number; + dateAdjusted: string; + lastDateAdjusted: string; + comment: string; + commentAddedBy: string; + commentDate: string; + add_user: string; +}; + +export const notifyColumns: ColumnDef[] = [ + { + accessorKey: "name", + header: () =>
Name
, + }, + { + accessorKey: "description", + header: "Description", + cell: ({ row }) => { + return ( +
+

+ {row.getValue("description")} +

+
+ ); + }, + }, + + { + accessorKey: "checkInterval", + header: "Check Interval", + }, + { + accessorKey: "timeType", + header: "Time tpye", + }, + { + accessorKey: "emails", + header: "Emails", + }, + { + accessorKey: "active", + header: "Active", + }, + { + accessorKey: "lastRan", + header: "Last Ran", + cell: ({ row }) => { + if (row.getValue("lastRan")) { + const correctDate = format( + row.getValue("lastRan"), + "M/d/yyyy hh:mm" + ); + return ( +
{correctDate}
+ ); + } + }, + }, +]; diff --git a/frontend/src/utils/tableData/printers/printerData.tsx b/frontend/src/utils/tableData/printers/printerData.tsx new file mode 100644 index 0000000..6db143a --- /dev/null +++ b/frontend/src/utils/tableData/printers/printerData.tsx @@ -0,0 +1,134 @@ +import { + ColumnDef, + flexRender, + getCoreRowModel, + useReactTable, + getPaginationRowModel, +} from "@tanstack/react-table"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import { Button } from "@/components/ui/button"; +import { useState } from "react"; + +interface DataTableProps { + columns: ColumnDef[]; + data: TData[]; + //style: any; +} + +export function NotifyTable({ + columns, + data, + //style, +}: DataTableProps) { + const [pagination, setPagination] = useState({ + pageIndex: 0, //initial page index + pageSize: 5, //default page size + }); + const table = useReactTable({ + data, + columns, + getCoreRowModel: getCoreRowModel(), + getPaginationRowModel: getPaginationRowModel(), + onPaginationChange: setPagination, + state: { + //... + pagination, + }, + }); + + // console.log(parseInt(style.height.replace("px", "")) - 50); + return ( +
+
+ + + {table.getHeaderGroups().map((headerGroup) => ( + + {headerGroup.headers.map((header) => { + return ( + + {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef + .header, + header.getContext() + )} + + ); + })} + + ))} + + + {table.getRowModel().rows?.length ? ( + table.getRowModel().rows.map((row) => ( + + {row.getVisibleCells().map((cell) => ( + + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + + ))} + + )) + ) : ( + + + No results. + + + )} + +
+
+
+ + +
+
+ ); +}