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