temp image upload

src/client/models/ProductCreateRequest.ts

@@ -14,5 +14,6 @@ export type ProductCreateRequest = {
     composition?: (string | null);
     size?: (string | null);
     additionalInfo?: (string | null);
+    imageUrl?: (string | null);
 };
 

src/client/models/ProductSchema.ts

@@ -14,6 +14,7 @@ export type ProductSchema = {
     composition?: (string | null);
     size?: (string | null);
     additionalInfo?: (string | null);
+    imageUrl?: (string | null);
     id: number;
 };
 

src/components/ImageDropzone/ImageDropzone.tsx

@@ -1,22 +1,59 @@
-import {Dropzone, DropzoneProps} from "@mantine/dropzone";
+import {Dropzone, DropzoneProps, FileWithPath} from "@mantine/dropzone";
-import {FC} from "react";
+import {FC, useState} from "react";
-import {Group, rem, Text} from "@mantine/core";
+import {Button, Fieldset, Flex, Group, Image, rem, Text} from "@mantine/core";
 import {IconPhoto, IconUpload, IconX} from "@tabler/icons-react";
 import {omit} from "lodash";
+import {BaseFormInputProps} from "../../types/utils.ts";
+import {notifications} from "../../shared/lib/notifications.ts";
+import {ProductService} from "../../client";
 
-type RestProps = {
+interface RestProps {
-    imageUrl?: string;
+    imageUrlInputProps?: BaseFormInputProps<string>;
-};
+    productId?: number;
-const ALL_PROPERTIES = Object.keys(colDefProperties) as (keyof ColDef)[];
+}
 
 
-type Props = DropzoneProps & RestProps;
+type Props = Omit<DropzoneProps, 'onDrop'> & RestProps;
 
 const ImageDropzone: FC<Props> = (props: Props) => {
-    const restProps = omit()
+    const [showDropzone, setShowDropzone] = useState(
-    return (
+        !(typeof props.imageUrlInputProps?.value === 'string' &&
+            props.imageUrlInputProps.value.trim() !== '')
+    );
+    console.log(props.imageUrlInputProps);
+    console.log(showDropzone);
+    const restProps = omit(props, ['imageUrl', 'productId', 'imageUrlInputProps']);
+    const onDrop = (files: FileWithPath[]) => {
+        if (!props.productId || !props.imageUrlInputProps) return;
+        if (files.length > 1) {
+            notifications.error({message: "Прикрепите одно изображение"});
+            return;
+        }
+        const file = files[0];
+        // TODO check if file is image
+        ProductService.uploadProductImage({
+            productId: props.productId,
+            formData: {
+                upload_file: file
+            }
+        }).then(({ok, message, imageUrl}) => {
+            notifications.guess(ok, {message});
+            if (!ok || !imageUrl) {
+                return;
+            }
+            props.imageUrlInputProps?.onChange(imageUrl);
+            setShowDropzone(false);
+        });
+    }
+    const getBody = () => {
+        return props.imageUrlInputProps?.value && showDropzone ? (
+            <Image src={props.imageUrlInputProps.value}/>
+        ) : (
             <Dropzone
-            {...props}
+                {...restProps}
+                multiple={false}
+                onDrop={onDrop}
+
             >
                 <Group justify="center" gap="xl" style={{pointerEvents: 'none'}}>
                     <Dropzone.Accept>
@@ -48,6 +85,17 @@ const ImageDropzone: FC<Props> = (props: Props) => {
                     </div>
                 </Group>
             </Dropzone>
+        );
+    }
+    return (
+        <Flex gap={rem(10)} direction={"column"}>
+            <Fieldset legend={'Изображение'}>
+                {getBody()}
+            </Fieldset>
+            {!showDropzone &&
+                <Button variant={"default"}>Заменить изображение {}</Button>
+            }
+        </Flex>
     )
 }
 

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

@@ -5,6 +5,7 @@ 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";
 
 type CreateProps = {
     clientId: number;
@@ -25,12 +26,13 @@ const CreateProductModal = ({
                             }: ContextModalProps<Props>) => {
     const isEditProps = 'product' in innerProps;
     const isCreatingProps = 'clientId' in innerProps;
-    const initialValues = isEditProps ? innerProps.product : {
+    const initialValues: Omit<ProductSchema, 'id'> = isEditProps ? innerProps.product : {
         name: '',
         article: '',
-        barcodes: []
+        barcodes: [],
+        clientId: innerProps.clientId
     };
-    const form = useForm({
+    const form = useForm<Omit<ProductSchema, 'id'>>({
         initialValues: initialValues,
         validate: {
             name: (name) => name.trim() !== '' ? null : "Необходимо ввести название товара",
@@ -99,11 +101,15 @@ const CreateProductModal = ({
                             label={"Доп. информация"}
                             {...form.getInputProps('additionalInfo')} />
                     </Fieldset>
-                    <Fieldset legend={"Изображение"}>
 
-                        <ImageDropzone onDrop={(data) => {
+                    {isEditProps &&
-                        }}/>
+                        // <Fieldset legend={"Изображение"}>
-                    </Fieldset>
+                        <ImageDropzone
+                            imageUrlInputProps={form.getInputProps('imageUrl') as BaseFormInputProps<string>}
+                            productId={innerProps.product.id}
+                        />
+                        // </Fieldset>
+                    }
                     <Flex justify={"flex-end"} mt={rem(5)} gap={rem(10)}>
                         <Button onClick={() => onCancelClick()} variant={"subtle"}>Отменить</Button>
                         {isEditProps ?