crap

src/modals/AddBarcodeModal/AddBarcodeModal.tsx

@@ -0,0 +1,63 @@
+import {ContextModalProps} from "@mantine/modals";
+import {Button, Flex, rem, TextInput} from "@mantine/core";
+import {useEffect, useState} from "react";
+import {ProductService} from "../../client";
+
+type Props = {
+    productId: number;
+    onSubmit: (barcode: string) => void;
+}
+const PrintBarcodeModal = ({
+                               id,
+                               context,
+                               innerProps
+                           }: ContextModalProps<Props>) => {
+    const {productId, onSubmit} = innerProps;
+    const [barcode, setBarcode] = useState<string | undefined>();
+    const [isBarcodeExist, setIsBarcodeExist] = useState<boolean>(true);
+
+    const getErrorMessage = () => {
+        if (!barcode) return "Штрихкод не может быть пустым";
+        if (isBarcodeExist) return "Штрихкод уже существует";
+        return undefined;
+    }
+    useEffect(() => {
+        if (!barcode) return;
+        ProductService.existsProductBarcode({
+            productId: innerProps.productId,
+            barcode: barcode.trim()
+        }).then((response) => {
+            setIsBarcodeExist(response.exists);
+        })
+    }, [productId, barcode]);
+
+    const onSubmitClick = () => {
+        if (!barcode || isBarcodeExist) return;
+        onSubmit(barcode.trim());
+        context.closeModal(id);
+    }
+    return (
+        <Flex
+            gap={rem(10)}
+            direction={"column"}
+        >
+            <TextInput
+                required
+                error={getErrorMessage()}
+                label={"Штрихкод"}
+                placeholder={"Введите или отсканируйте штрихкод"}
+                value={barcode}
+                onChange={(event) => setBarcode(event.currentTarget.value)}
+
+            />
+            <Button
+                onClick={onSubmitClick}
+                disabled={!barcode || isBarcodeExist}
+            >
+                Добавить
+            </Button>
+        </Flex>
+    )
+}
+
+export default PrintBarcodeModal;

src/modals/PrintBarcodeModal/PrintBarcodeModal.module.css

@@ -0,0 +1,9 @@
+.print-only {
+    display: none;
+}
+
+@media print {
+    .print-only {
+        display: block;
+    }
+}

src/modals/PrintBarcodeModal/PrintBarcodeModal.tsx

@@ -0,0 +1,132 @@
+import {ContextModalProps, modals} from "@mantine/modals";
+import {Button, Divider, Flex, NumberInput, rem, Select, Spoiler} from "@mantine/core";
+import Barcode from "react-barcode";
+import {useEffect, useRef, useState} from "react";
+import {useReactToPrint} from "react-to-print";
+import {ProductService} from "../../client";
+import styles from "./PrintBarcodeModal.module.css";
+import {useGetProductById} from "../../api/product/useGetProductById.tsx";
+import {notifications} from "../../shared/lib/notifications.ts";
+
+type Props = {
+    productId: number;
+    defaultQuantity?: number;
+}
+const PrintBarcodeModal = ({
+                               innerProps
+                           }: ContextModalProps<Props>) => {
+    const {productId, defaultQuantity = 1} = innerProps;
+    const [quantity, setQuantity] = useState(defaultQuantity);
+    const [barcode, setBarcode] = useState<string | undefined>()
+
+    const {product, refetch} = useGetProductById(productId);
+
+    const barcodeRef = useRef(null);
+    const handlePrint = useReactToPrint({
+        content: () => barcodeRef.current
+    });
+
+    const onAdd = (newBarcode: string) => {
+        ProductService.addProductBarcode({requestBody: {productId, barcode: newBarcode}})
+            .then(async ({ok, message}) => {
+                notifications.guess(ok, {message});
+            })
+    }
+    const onAddClick = () => {
+        if (!product) return;
+        modals.openContextModal({
+            modal: "addBarcode",
+            title: 'Добавление штрихкода',
+            withCloseButton: true,
+            innerProps: {
+                productId: product.id,
+                onSubmit: onAdd
+            }
+        })
+    }
+
+    const onGenerateClick = () => {
+        if (!product) return;
+        ProductService.generateProductBarcode({requestBody: {productId}})
+            .then(async ({ok, message, barcode}) => {
+                notifications.guess(ok, {message});
+                if (!ok) return;
+                await refetch();
+                setBarcode(barcode);
+            })
+    }
+    useEffect(() => {
+        if (!product) return;
+        if (product.barcodes.length === 1)
+            setBarcode(product.barcodes[0]);
+    }, [product]);
+    return (
+        <>
+            <Flex
+                gap={rem(10)}
+                direction={"column"}
+            >
+                <Select
+                    value={barcode}
+                    onChange={(value) => setBarcode(value || undefined)}
+                    data={product?.barcodes}
+                    label={"Штрихкод"}
+                    placeholder={"Выберите штрихкод"}
+                />
+                <NumberInput
+                    label={"Количество копий"}
+                    placeholder={"Введите количество копий"}
+                    value={quantity}
+                    onChange={(value) => typeof value === "number" && setQuantity(value)}
+                    min={1}
+                />
+                <Spoiler
+                    w={"100%"}
+                    style={{
+                        textAlign: "center",
+                    }}
+                    styles={{control: {width: "100%"}}}
+                    showLabel={"Показать предпросмотр"}
+                    hideLabel={"Скрыть предпросмотр"}
+                    maxHeight={0}>
+                    <div>
+                        {barcode &&
+                            <Barcode value={barcode}/>
+                        }
+                    </div>
+                </Spoiler>
+                <Divider
+                    my={rem(10)}
+                />
+                <Flex direction={"column"} gap={rem(10)}>
+                    <Flex gap={rem(10)}>
+                        <Button
+                            onClick={() => onAddClick()}
+                            variant={"default"}
+                            fullWidth>
+                            Добавить вручную
+                        </Button>
+                        <Button
+                            onClick={() => onGenerateClick()}
+                            variant={"default"}
+                            fullWidth>
+                            Сгенерировать
+                        </Button>
+                    </Flex>
+                    <Button
+                        size={"lg"}
+                        disabled={!barcode}
+                        onClick={() => handlePrint()}
+                    >Печать</Button>
+                </Flex>
+            </Flex>
+            <div className={styles['print-only']} ref={barcodeRef}>
+                {barcode && Array.from({length: quantity}).map((_, index) => (
+                    <Barcode key={index} value={barcode}/>
+                ))}
+            </div>
+        </>
+    )
+}
+
+export default PrintBarcodeModal;

src/modals/modals.ts

@@ -5,6 +5,8 @@ import createProductModal from "../pages/ProductsPage/modals/CreateProductModal/
 import ProductFormModal from "../pages/ClientsPage/modals/ClientFormModal/ClientFormModal.tsx";
 import AddDealServiceModal from "../pages/LeadsPage/modals/AddDealServiceModal.tsx";
 import AddDealProductModal from "../pages/LeadsPage/modals/AddDealProductModal.tsx";
+import PrintBarcodeModal from "./PrintBarcodeModal/PrintBarcodeModal.tsx";
+import AddBarcodeModal from "./AddBarcodeModal/AddBarcodeModal.tsx";
 
 export const modals = {
     enterDeadline: EnterDeadlineModal,
@@ -13,5 +15,7 @@ export const modals = {
     createProduct: createProductModal,
     productFormModal: ProductFormModal,
     addDealService: AddDealServiceModal,
-    addDealProduct: AddDealProductModal
+    addDealProduct: AddDealProductModal,
+    printBarcode: PrintBarcodeModal,
+    addBarcode: AddBarcodeModal
 }