feat: CRUD for product barcode images

src/pages/ProductsPage/modals/CreateProductModal/CreateProductModal.tsx

@@ -1,18 +1,12 @@
 import { ContextModalProps } from "@mantine/modals";
-import {
-    Button,
-    Fieldset,
-    Flex,
-    rem,
-    TagsInput,
-    TextInput,
-} from "@mantine/core";
+import { Button, Fieldset, Flex, rem, TagsInput, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
 import { BaseProduct, CreateProductRequest } from "../../types.ts";
 import { ProductSchema } from "../../../../client";
 import BarcodeTemplateSelect from "../../../../components/Selects/BarcodeTemplateSelect/BarcodeTemplateSelect.tsx";
 import ImageDropzone from "../../../../components/ImageDropzone/ImageDropzone.tsx";
 import { BaseFormInputProps } from "../../../../types/utils.ts";
+import BarcodeImageDropzone from "../../../../components/BarcodeImageDropzone/BarcodeImageDropzone.tsx";
 
 type CreateProps = {
     clientId: number;
@@ -26,20 +20,20 @@ type EditProps = {
 type Props = CreateProps | EditProps;
 
 const CreateProductModal = ({
-    context,
-    id,
-    innerProps,
-}: ContextModalProps<Props>) => {
+                                context,
+                                id,
+                                innerProps,
+                            }: ContextModalProps<Props>) => {
     const isEditProps = "product" in innerProps;
     const isCreatingProps = "clientId" in innerProps;
     const initialValues: Omit<ProductSchema, "id"> = isEditProps
         ? innerProps.product
         : {
-              name: "",
-              article: "",
-              barcodes: [],
-              clientId: innerProps.clientId,
-          };
+            name: "",
+            article: "",
+            barcodes: [],
+            clientId: innerProps.clientId,
+        };
     const form = useForm<Omit<ProductSchema, "id">>({
         initialValues: initialValues,
         validate: {
@@ -122,14 +116,19 @@ const CreateProductModal = ({
                     {
                         isEditProps && (
                             // <Fieldset legend={"Изображение"}>
-                            <ImageDropzone
-                                imageUrlInputProps={
-                                    form.getInputProps(
-                                        "imageUrl"
-                                    ) as BaseFormInputProps<string>
-                                }
-                                productId={innerProps.product.id}
-                            />
+                            <>
+                                <ImageDropzone
+                                    imageUrlInputProps={
+                                        form.getInputProps(
+                                            "imageUrl",
+                                        ) as BaseFormInputProps<string>
+                                    }
+                                    productId={innerProps.product.id}
+                                />
+                                <BarcodeImageDropzone
+                                    productId={innerProps.product.id}
+                                />
+                            </>
                         )
                         // </Fieldset>
                     }