feat: barcode templates

src/modals/PrintBarcodeModal/PrintBarcodeContainer.tsx

@@ -0,0 +1,63 @@
+import {BarcodeAttributeSchema} from "../../client";
+import {forwardRef} from "react";
+import styles from "./PrintBarcodeModal.module.css";
+import {Flex, Text} from "@mantine/core";
+import Barcode from "react-barcode";
+
+type Props = {
+    attributes: BarcodeAttributeSchema[]
+    barcode?: string;
+    quantity: number;
+}
+type Ref = HTMLDivElement;
+const PrintBarcodeContainer = forwardRef<Ref, Props>(function PrintBarcodeContainer(props: Props, ref) {
+    const {attributes, barcode, quantity} = props;
+
+    const MAX_ATTRIBUTES = 6;
+    const MIN_BARCODE_SIZE = 30;
+    const MAX_BARCODE_SIZE = 100;
+    const STEP = (MAX_BARCODE_SIZE - MIN_BARCODE_SIZE) / MAX_ATTRIBUTES;
+    const MAX_ATTRIBUTE_LENGTH = 35;
+
+    const getBarcodeHeight = () => {
+        return MIN_BARCODE_SIZE + (MAX_ATTRIBUTES - attributes.length) * STEP;
+    }
+    const getAttributeText = (attribute: BarcodeAttributeSchema) => {
+        let result = `${attribute.name}: ${attribute.value}`;
+        if (result.length > MAX_ATTRIBUTE_LENGTH) {
+            result = result.slice(0, MAX_ATTRIBUTE_LENGTH - 1) + ".";
+        }
+        return result;
+    }
+
+    return (
+        <div className={styles['print-only']} ref={ref}>
+            {barcode && Array.from({length: quantity}).map((_, index) => (
+                <>
+                    <Flex
+                        className={styles['barcode-container']}
+                        key={index}
+                        justify={"center"}
+                        direction={"column"}
+                    >
+                        <Flex align={"center"} justify={"center"}>
+                            <Barcode margin={0} height={getBarcodeHeight()} value={barcode}/>
+                        </Flex>
+                        {attributes.slice(0, MAX_ATTRIBUTES).map((attr) => (
+                            <Text
+                                key={attr.name}
+                                className={styles['barcode-attribute-text']}
+                                size={"xs"}
+                            >
+                                {getAttributeText(attr)}
+                            </Text>
+                        ))}
+                    </Flex>
+                </>
+            ))}
+        </div>
+
+    )
+});
+
+export default PrintBarcodeContainer;