feat(migration): moved barcode generator
This commit is contained in:
@@ -1,165 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
pdf,
|
||||
Page,
|
||||
Text,
|
||||
View,
|
||||
Document,
|
||||
StyleSheet,
|
||||
Image,
|
||||
} from "@react-pdf/renderer";
|
||||
import JsBarcode from "jsbarcode";
|
||||
|
||||
export const BarcodePDFExport = ({
|
||||
barcodeValue,
|
||||
data,
|
||||
}: {
|
||||
barcodeValue: any;
|
||||
data: any;
|
||||
}) => {
|
||||
const generatePDF = () => {
|
||||
//const barcodeValue = data; // Barcode value
|
||||
const canvas = document.createElement("canvas");
|
||||
|
||||
// Generate barcode on the canvas
|
||||
JsBarcode(canvas, barcodeValue, {
|
||||
format: "CODE128",
|
||||
displayValue: false,
|
||||
});
|
||||
|
||||
// Convert canvas to base64 image data
|
||||
const barcodeImage = canvas.toDataURL("image/png");
|
||||
|
||||
// Define the document styles using @react-pdf/renderer
|
||||
const styles = StyleSheet.create({
|
||||
page: {
|
||||
padding: 30,
|
||||
},
|
||||
centerContent: {
|
||||
display: "flex",
|
||||
justifyContent: "center", // Center horizontally
|
||||
alignItems: "center", // Center vertically
|
||||
flexDirection: "column", // Stack items (barcode and description) vertically
|
||||
height: "75%", // Ensure the container takes full page height
|
||||
textAlign: "center",
|
||||
},
|
||||
section: {
|
||||
marginBottom: 10,
|
||||
textAlign: "center",
|
||||
},
|
||||
barcode: {
|
||||
width: 800, // Width of the barcode
|
||||
height: 200, // Height of the barcode
|
||||
marginBottom: 10,
|
||||
},
|
||||
description: {
|
||||
fontSize: 28,
|
||||
fontWeight: "bold",
|
||||
marginTop: 10,
|
||||
marginBottom: 20, // Ensure there's space below the text
|
||||
},
|
||||
});
|
||||
|
||||
// Create the document
|
||||
const MyDocument = (
|
||||
<Document>
|
||||
<Page style={styles.page} orientation="landscape" size="A4">
|
||||
<View style={styles.centerContent}>
|
||||
<View style={styles.section}>
|
||||
<Image src={barcodeImage} style={styles.barcode} />
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.description}>
|
||||
Lane: {data.laneDescription}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</Page>
|
||||
</Document>
|
||||
);
|
||||
|
||||
// Generate the PDF and trigger download
|
||||
pdf(MyDocument)
|
||||
.toBlob()
|
||||
.then((blob) => {
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `${data.warehouseDescription}-${data.laneDescription}.pdf`;
|
||||
link.click();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={() => generatePDF()} color="primary">
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,127 +0,0 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
pdf,
|
||||
Page,
|
||||
Text,
|
||||
View,
|
||||
Document,
|
||||
StyleSheet,
|
||||
Image,
|
||||
} from "@react-pdf/renderer";
|
||||
import JsBarcode from "jsbarcode";
|
||||
|
||||
export const BulkBarcodePDFExport = ({ data }: { data: any }) => {
|
||||
const createBarcode = (barcodeValue: any) => {
|
||||
//const barcodeValue = data; // Barcode value
|
||||
const canvas = document.createElement("canvas");
|
||||
|
||||
// Generate barcode on the canvas
|
||||
JsBarcode(canvas, barcodeValue, {
|
||||
format: "CODE128",
|
||||
displayValue: false,
|
||||
});
|
||||
|
||||
// Convert canvas to base64 image data
|
||||
const barcodeImage = canvas.toDataURL("image/png");
|
||||
|
||||
return barcodeImage;
|
||||
};
|
||||
const generatePDF = () => {
|
||||
// Define the document styles using @react-pdf/renderer
|
||||
const styles = StyleSheet.create({
|
||||
page: {
|
||||
padding: 30,
|
||||
},
|
||||
centerContent: {
|
||||
display: "flex",
|
||||
justifyContent: "flex-start", // Center horizontally
|
||||
alignItems: "center", // Center vertically
|
||||
flexDirection: "row", // Stack items (barcode and description) vertically
|
||||
//height: "5%", // Ensure the container takes full page height
|
||||
textAlign: "center",
|
||||
},
|
||||
section: {
|
||||
marginBottom: 10,
|
||||
textAlign: "center",
|
||||
},
|
||||
barcode: {
|
||||
width: 275, // Width of the barcode
|
||||
height: 75, // Height of the barcode
|
||||
marginBottom: 10,
|
||||
},
|
||||
description: {
|
||||
fontSize: 14,
|
||||
fontWeight: "bold",
|
||||
marginTop: 10,
|
||||
marginBottom: 20, // Ensure there's space below the text
|
||||
},
|
||||
|
||||
headerText: {
|
||||
fontSize: 28,
|
||||
fontWeight: "bold",
|
||||
marginTop: 10,
|
||||
marginBottom: 20, // Ensure there's space below the text
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
//height: "15%", // Ensure the container takes full page height
|
||||
textAlign: "center",
|
||||
},
|
||||
|
||||
horizontalLine: {
|
||||
borderBottom: "#000000",
|
||||
borderBottomWidth: 1,
|
||||
},
|
||||
});
|
||||
|
||||
// Create the document
|
||||
const MyDocument = (
|
||||
<Document>
|
||||
<Page style={styles.page} orientation="portrait" size="A4">
|
||||
<View style={styles.headerText}>
|
||||
<Text>Multi Lane export.</Text>
|
||||
</View>
|
||||
<View style={styles.horizontalLine} />
|
||||
|
||||
{data.map((i: any, index: any) => {
|
||||
return (
|
||||
<View style={styles.centerContent} key={index}>
|
||||
<View style={styles.section}>
|
||||
<Image
|
||||
src={createBarcode(
|
||||
`loc#${i.warehouseId}#${i.laneId}`
|
||||
)}
|
||||
style={styles.barcode}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<View style={styles.section}>
|
||||
<Text style={styles.description}>
|
||||
Lane: {i.laneDescription}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
})}
|
||||
</Page>
|
||||
</Document>
|
||||
);
|
||||
|
||||
// Generate the PDF and trigger download
|
||||
pdf(MyDocument)
|
||||
.toBlob()
|
||||
.then((blob) => {
|
||||
const link = document.createElement("a");
|
||||
link.href = URL.createObjectURL(blob);
|
||||
link.download = `MultipleBarcodes.pdf`;
|
||||
link.click();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={() => generatePDF()} color="primary">
|
||||
Export All Selected
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,107 +0,0 @@
|
||||
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 },
|
||||
//-{ name: "Stock in", commandId: 22 },
|
||||
];
|
||||
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