temp image upload

package.json

@@ -14,7 +14,7 @@
     "@hello-pangea/dnd": "^16.5.0",
     "@mantine/core": "^7.6.1",
     "@mantine/dates": "^7.6.1",
-    "@mantine/dropzone": "^7.6.1",
+    "@mantine/dropzone": "^7.9.2",
     "@mantine/form": "^7.6.1",
     "@mantine/hooks": "^7.6.1",
     "@mantine/modals": "^7.6.1",

src/client/index.ts

@@ -23,6 +23,7 @@ export type { BarcodeTemplateUpdateRequest } from './models/BarcodeTemplateUpdat
 export type { BarcodeTemplateUpdateResponse } from './models/BarcodeTemplateUpdateResponse';
 export type { BaseEnumListSchema } from './models/BaseEnumListSchema';
 export type { BaseEnumSchema } from './models/BaseEnumSchema';
+export type { Body_upload_product_image } from './models/Body_upload_product_image';
 export type { ClientCreateRequest } from './models/ClientCreateRequest';
 export type { ClientCreateResponse } from './models/ClientCreateResponse';
 export type { ClientDeleteRequest } from './models/ClientDeleteRequest';
@@ -98,6 +99,7 @@ export type { ProductGetResponse } from './models/ProductGetResponse';
 export type { ProductSchema } from './models/ProductSchema';
 export type { ProductUpdateRequest } from './models/ProductUpdateRequest';
 export type { ProductUpdateResponse } from './models/ProductUpdateResponse';
+export type { ProductUploadImageResponse } from './models/ProductUploadImageResponse';
 export type { ServiceCategorySchema } from './models/ServiceCategorySchema';
 export type { ServiceCreateCategoryRequest } from './models/ServiceCreateCategoryRequest';
 export type { ServiceCreateCategoryResponse } from './models/ServiceCreateCategoryResponse';

src/client/models/Body_upload_product_image.ts

@@ -0,0 +1,8 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type Body_upload_product_image = {
+    upload_file: Blob;
+};
+

src/client/models/ProductUploadImageResponse.ts

@@ -0,0 +1,10 @@
+/* generated using openapi-typescript-codegen -- do no edit */
+/* istanbul ignore file */
+/* tslint:disable */
+/* eslint-disable */
+export type ProductUploadImageResponse = {
+    ok: boolean;
+    message: string;
+    imageUrl?: (string | null);
+};
+

src/client/services/ProductService.ts

@@ -2,6 +2,7 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { Body_upload_product_image } from '../models/Body_upload_product_image';
 import type { GetProductBarcodeRequest } from '../models/GetProductBarcodeRequest';
 import type { GetProductBarcodeResponse } from '../models/GetProductBarcodeResponse';
 import type { ProductAddBarcodeRequest } from '../models/ProductAddBarcodeRequest';
@@ -17,6 +18,7 @@ import type { ProductGetResponse } from '../models/ProductGetResponse';
 import type { ProductSchema } from '../models/ProductSchema';
 import type { ProductUpdateRequest } from '../models/ProductUpdateRequest';
 import type { ProductUpdateResponse } from '../models/ProductUpdateResponse';
+import type { ProductUploadImageResponse } from '../models/ProductUploadImageResponse';
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
 import { request as __request } from '../core/request';
@@ -213,4 +215,29 @@ export class ProductService {
             },
         });
     }
+    /**
+     * Upload Product Image
+     * @returns ProductUploadImageResponse Successful Response
+     * @throws ApiError
+     */
+    public static uploadProductImage({
+        productId,
+        formData,
+    }: {
+        productId: number,
+        formData: Body_upload_product_image,
+    }): CancelablePromise<ProductUploadImageResponse> {
+        return __request(OpenAPI, {
+            method: 'POST',
+            url: '/product/images/upload/{product_id}',
+            path: {
+                'product_id': productId,
+            },
+            formData: formData,
+            mediaType: 'multipart/form-data',
+            errors: {
+                422: `Validation Error`,
+            },
+        });
+    }
 }

src/components/ImageDropzone/ImageDropzone.tsx

@@ -0,0 +1,54 @@
+import {Dropzone, DropzoneProps} from "@mantine/dropzone";
+import {FC} from "react";
+import {Group, rem, Text} from "@mantine/core";
+import {IconPhoto, IconUpload, IconX} from "@tabler/icons-react";
+import {omit} from "lodash";
+
+type RestProps = {
+    imageUrl?: string;
+};
+const ALL_PROPERTIES = Object.keys(colDefProperties) as (keyof ColDef)[];
+
+
+type Props = DropzoneProps & RestProps;
+
+const ImageDropzone: FC<Props> = (props: Props) => {
+    const restProps = omit()
+    return (
+        <Dropzone
+            {...props}
+        >
+            <Group justify="center" gap="xl" style={{pointerEvents: 'none'}}>
+                <Dropzone.Accept>
+                    <IconUpload
+                        style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)'}}
+                        stroke={1.5}
+                    />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                    <IconX
+                        style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)'}}
+                        stroke={1.5}
+                    />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                    <IconPhoto
+                        style={{width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)'}}
+                        stroke={1.5}
+                    />
+                </Dropzone.Idle>
+
+                <div>
+                    <Text size="xl" inline>
+                        Drag images here or click to select files
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                        Attach as many files as you like, each file should not exceed 5mb
+                    </Text>
+                </div>
+            </Group>
+        </Dropzone>
+    )
+}
+
+export default ImageDropzone;

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

@@ -4,6 +4,7 @@ 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";
 
 type CreateProps = {
     clientId: number;
@@ -72,7 +73,6 @@ const CreateProductModal = ({
                             {...form.getInputProps('barcodeTemplate')}
                         />
                     </Fieldset>
-
                     <Fieldset legend={"Дополнительные характеристики"}>
                         <TextInput
                             placeholder={"Введите бренд"}
@@ -99,6 +99,11 @@ const CreateProductModal = ({
                             label={"Доп. информация"}
                             {...form.getInputProps('additionalInfo')} />
                     </Fieldset>
+                    <Fieldset legend={"Изображение"}>
+
+                        <ImageDropzone onDrop={(data) => {
+                        }}/>
+                    </Fieldset>
                     <Flex justify={"flex-end"} mt={rem(5)} gap={rem(10)}>
                         <Button onClick={() => onCancelClick()} variant={"subtle"}>Отменить</Button>
                         {isEditProps ?

src/routes/test.lazy.tsx

@@ -1,4 +1,5 @@
 import {createLazyFileRoute} from "@tanstack/react-router";
+import ImageDropzone from "../components/ImageDropzone/ImageDropzone.tsx";
 
 export const Route = createLazyFileRoute('/test')({
     component: TestPage
@@ -8,7 +9,9 @@ export const Route = createLazyFileRoute('/test')({
 function TestPage() {
     return (
         <>
-
+            <ImageDropzone
+                onDrop={(data) => {}}
+            />
         </>
     );
 }