cowch/lstV2
1
0
Fork 0
Code Issues 37 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

refactor(label logs): changed to tanstack table

Browse Source
This commit is contained in:
Blake Matthes
2025-04-14 13:43:56 -05:00
parent 450e5acd34
commit 1bc7949f30
3 changed files with 234 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
frontend/src/components/production/ocp/LabelLog.tsx
View File

@@ -1,155 +1,27 @@
import { LstCard } from "@/components/extendedUI/LstCard";
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
// import {useSessionStore} from "@/lib/store/sessionStore";
// import {useSettingStore} from "@/lib/store/useSettings";
import { useQuery } from "@tanstack/react-query";
import { getlabels } from "@/utils/querys/production/labels";
import { format } from "date-fns";
const labelLogs = [
{ key: "line", label: "Line" },
{ key: "printerName", label: "Printer" },
{ key: "runningNr", label: "Running #" },
{ key: "upd_date", label: "Label date" },
{ key: "status", label: "Label Status" },
//{key: "reprint", label: "Reprint"}, // removing the reprint button for now until repritning is working as intended
];
import { LabelTable } from "@/utils/tableData/production/labels/labelData";
import { labelolumns } from "@/utils/tableData/production/labels/labelColumns";
export default function LabelLog() {
const { data, isError, isLoading } = useQuery(getlabels("4"));
if (isError) {
return (
<div className="m-2 p-2 min-h-2/5">
<LstCard>
<p className="text-center">Labels for the last 2 hours</p>
if (isError) return <div>Error</div>;
<Table>
<TableHeader>
<TableRow>
{labelLogs.map((l) => (
<TableHead key={l.key}>{l.label}</TableHead>
))}
</TableRow>
</TableHeader>
<TableBody>
{Array(7)
.fill(0)
.map((_, i) => (
<TableRow key={i}>
<TableCell className="font-medium">
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</LstCard>
</div>
);
}
if (isLoading) return <div>Loading</div>;
const labelData = data ? data : [];
return (
<LstCard className="m-2 p-2 min-h-2/5">
<p className="text-center">
{labelData.length === 0 ? (
<span>No labels have been printed in the last 2 hours</span>
) : (
<span>Labels for the last 2 hours</span>
)}
</p>
<Table>
<TableHeader>
<TableRow>
{labelLogs.map((l) => (
<TableHead key={l.key}>{l.label}</TableHead>
))}
</TableRow>
</TableHeader>
{isLoading ? (
<>
<TableBody>
{Array(7)
.fill(0)
.map((_, i) => (
<TableRow key={i}>
<TableCell className="font-medium">
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
<TableCell>
<Skeleton className="h-4" />
</TableCell>
</TableRow>
))}
</TableBody>
</>
) : (
<TableBody>
{labelData.map((label: any) => (
<TableRow key={label.label_id}>
<TableCell className="font-medium">
{label.line}
</TableCell>
<TableCell className="font-medium">
{label.printerName}
</TableCell>
<TableCell className="font-medium">
{label.runningNr}
</TableCell>
<TableCell className="font-medium">
{format(
label?.upd_date.replace("Z", ""),
"M/d/yyyy hh:mm"
)}
</TableCell>
<TableCell className="font-medium">
{label.status}
</TableCell>
</TableRow>
))}
</TableBody>
)}
{/* <TableFooter>
{labelData.length === 0 && (
<div className="flex justify-center">
<h2 className="text-center text-2xl">
No labels have been printed in the last 2 hours
</h2>
</div>
)}
</TableFooter> */}
</Table>
<LabelTable
columns={labelolumns}
data={labelData}
//style={style}
/>
</LstCard>
);
}