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

feat(common commands): added in a common commands just the barecode

Browse Source
This commit is contained in:
Blake Matthes
2025-06-11 20:49:18 -05:00
parent 826c44c996
commit 6156a1a5bb
2 changed files with 201 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
frontend/src/components/logistics/barcodeGenerator/BGPage.tsx
View File

@@ -9,6 +9,7 @@ import { useState } from "react";
import Barcode from "react-barcode";
import { BarcodePDFExport } from "./BarcodeExport";
import { BulkBarcodePDFExport } from "./BulkExport";
import CommonCommands from "./CommonCommands";
export default function BGPage() {
const { data, isError, isLoading } = useQuery(getLanes());
@@ -53,98 +54,112 @@ export default function BGPage() {
return (
<div className="flex flex-row m-2">
<div className="m-2">
<LstCard>
<CardHeader>Warehouse Barcodes</CardHeader>
<CardContent>
{warehouseArray.map((i: any) => {
const lanes = data?.filter(
(wid: any) => wid.warehouseId === i.warehouseId
);
return (
<div className="m-2" key={i.warehouseId}>
<Collapsible>
<CollapsibleTrigger>
{i.warehouseDescription}
</CollapsibleTrigger>
<CollapsibleContent>
<div className="ml-2">
{lanes?.map((l: any) => {
return (
<div key={l.laneId}>
<Checkbox
id={l.laneId}
// checked={checked.includes(
// l
// )}
onCheckedChange={() =>
changeBox(l)
}
/>
<label
id={l.laneId}
className="ml-2"
>
{
l.laneDescription
}
</label>
</div>
);
})}
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
})}
</CardContent>
</LstCard>
</div>
{checked.length > 0 && (
<div className="flex flex-row">
<div className="m-2">
<LstCard>
<CardHeader>Current selected lanes</CardHeader>
<CardHeader>Warehouse Barcodes</CardHeader>
<CardContent>
{checked.map((c: any) => {
{warehouseArray.map((i: any) => {
const lanes = data?.filter(
(wid: any) =>
wid.warehouseId === i.warehouseId
);
return (
<div
className="flex justify-center"
key={`${c.warehouseId}-${c.laneId}`}
>
<div>
<Barcode
value={`loc#${c.warehouseId}#${c.laneId}`}
width={2}
height={50}
displayValue={false}
/>
<p className="flex justify-center">
Lane: {c.laneDescription}
</p>
</div>
<div className="ml-2 mt-4">
<BarcodePDFExport
barcodeValue={`loc#${c.warehouseId}#${c.laneId}`}
data={c}
/>
</div>
<div className="m-2" key={i.warehouseId}>
<Collapsible>
<CollapsibleTrigger>
{i.warehouseDescription}
</CollapsibleTrigger>
<CollapsibleContent>
<div className="ml-2">
{lanes?.map((l: any) => {
return (
<div key={l.laneId}>
<Checkbox
id={
l.laneId
}
// checked={checked.includes(
// l
// )}
onCheckedChange={() =>
changeBox(
l
)
}
/>
<label
id={
l.laneId
}
className="ml-2"
>
{
l.laneDescription
}
</label>
</div>
);
})}
</div>
</CollapsibleContent>
</Collapsible>
</div>
);
})}
</CardContent>
<CardFooter>
<div className="flex justify-end">
{checked.length > 1 && (
<div>
<BulkBarcodePDFExport data={checked} />
</div>
)}
</div>
</CardFooter>
</LstCard>
</div>
)}
{checked.length > 0 && (
<div className="m-2">
<LstCard>
<CardHeader>Current selected lanes</CardHeader>
<CardContent>
{checked.map((c: any) => {
return (
<div
className="flex justify-center"
key={`${c.warehouseId}-${c.laneId}`}
>
<div>
<Barcode
value={`loc#${c.warehouseId}#${c.laneId}`}
width={2}
height={50}
displayValue={false}
/>
<p className="flex justify-center">
Lane: {c.laneDescription}
</p>
</div>
<div className="ml-2 mt-4">
<BarcodePDFExport
barcodeValue={`loc#${c.warehouseId}#${c.laneId}`}
data={c}
/>
</div>
</div>
);
})}
</CardContent>
<CardFooter>
<div className="flex justify-end">
{checked.length > 1 && (
<div>
<BulkBarcodePDFExport
data={checked}
/>
</div>
)}
</div>
</CardFooter>
</LstCard>
</div>
)}
</div>
<div className="m-2">
<CommonCommands />
</div>
</div>
);
}

104
frontend/src/components/logistics/barcodeGenerator/CommonCommands.tsx Normal file
View File

@@ -0,0 +1,104 @@
import { LstCard } from "@/components/extendedUI/LstCard";
import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { useState } from "react";
import Barcode from "react-barcode";
import { BarcodePDFExport } from "./BarcodeExport";
import { BulkBarcodePDFExport } from "./BulkExport";
const commoncmd = [{ name: "Relocate", commandId: 33 }];
export default function CommonCommands() {
const [checked, setChecked] = useState([]);
// handle the onchange
const changeBox = (d: any) => {
setChecked((prev: any) => {
if (prev.includes(d)) {
return prev.filter((name: any) => name !== d);
} else {
return [...prev, d];
}
});
};
return (
<div>
<div>
<LstCard>
<CardHeader>Common Barcodes</CardHeader>
<CardContent>
{commoncmd.map((i: any) => {
return (
<div className="flex flex-row">
<div>
<Checkbox
id={i.commandId}
// checked={checked.includes(
// l
// )}
onCheckedChange={() => changeBox(i)}
/>
<label
id={i.commandId}
className="ml-2"
>
{i.name}
</label>
</div>
</div>
);
})}
</CardContent>
</LstCard>
</div>
<div>
{checked.length > 0 && (
<div className="m-2">
<LstCard>
<CardHeader>Current selected Barcodes</CardHeader>
<CardContent>
{checked.map((c: any) => {
return (
<div
className="flex justify-center"
key={`${c.name}`}
>
<div>
<Barcode
value={`AlplaPRODcmd${c.commandId}`}
width={2}
height={50}
displayValue={false}
/>
<p className="flex justify-center">
Bacrode: {c.name}
</p>
</div>
<div className="ml-2 mt-4">
<BarcodePDFExport
barcodeValue={`AlplaPRODcmd${c.commandId}`}
data={c}
/>
</div>
</div>
);
})}
</CardContent>
<CardFooter>
<div className="flex justify-end">
{checked.length > 1 && (
<div>
<BulkBarcodePDFExport
data={checked}
/>
</div>
)}
</div>
</CardFooter>
</LstCard>
</div>
)}
</div>
</div>
);
}