166 lines
7.9 KiB
TypeScript
166 lines
7.9 KiB
TypeScript
import { LstCard } from "@/components/extendedUI/LstCard";
|
|
import { CardContent, CardFooter, CardHeader } from "@/components/ui/card";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Collapsible, CollapsibleContent } from "@/components/ui/collapsible";
|
|
import { getLanes } from "@/utils/querys/logistics/getWarehouseLanes";
|
|
import { CollapsibleTrigger } from "@radix-ui/react-collapsible";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
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());
|
|
const [checked, setChecked] = useState([]);
|
|
|
|
if (isLoading) return <div>Loading Data</div>;
|
|
|
|
if (isError)
|
|
return <div>There was an error getting the warehouse lane data.</div>;
|
|
|
|
/**
|
|
* get the warehouse names only
|
|
*/
|
|
|
|
const warhouses = new Map();
|
|
|
|
data?.forEach((item: any) => {
|
|
// if the warhouse is not already included add it to the map
|
|
if (!warhouses.has(item.warehouseId)) {
|
|
warhouses.set(item.warehouseId, item.warehouseDescription);
|
|
}
|
|
});
|
|
|
|
// convert the map to an array
|
|
const warehouseArray = Array.from(warhouses).map(([wid, wname]) => ({
|
|
warehouseId: wid,
|
|
warehouseDescription: wname,
|
|
}));
|
|
|
|
//console.log(warehouseArray);
|
|
|
|
// 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 className="flex flex-row m-2">
|
|
<div className="flex flex-row">
|
|
<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="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>
|
|
);
|
|
}
|