From f41999dfbcd7e29e2897920c647feeb2283b087f Mon Sep 17 00:00:00 2001 From: fakz9 Date: Fri, 24 May 2024 09:47:24 +0300 Subject: [PATCH] temp image upload --- package.json | 2 +- src/client/index.ts | 2 + .../models/Body_upload_product_image.ts | 8 +++ .../models/ProductUploadImageResponse.ts | 10 ++++ src/client/services/ProductService.ts | 27 ++++++++++ .../ImageDropzone/ImageDropzone.tsx | 54 +++++++++++++++++++ .../CreateProductModal/CreateProductModal.tsx | 7 ++- src/routes/test.lazy.tsx | 5 +- 8 files changed, 112 insertions(+), 3 deletions(-) create mode 100644 src/client/models/Body_upload_product_image.ts create mode 100644 src/client/models/ProductUploadImageResponse.ts create mode 100644 src/components/ImageDropzone/ImageDropzone.tsx diff --git a/package.json b/package.json index edf096e..b84eec1 100644 --- a/package.json +++ b/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", diff --git a/src/client/index.ts b/src/client/index.ts index 5029cf8..98b7b67 100644 --- a/src/client/index.ts +++ b/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'; diff --git a/src/client/models/Body_upload_product_image.ts b/src/client/models/Body_upload_product_image.ts new file mode 100644 index 0000000..2439dbb --- /dev/null +++ b/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; +}; + diff --git a/src/client/models/ProductUploadImageResponse.ts b/src/client/models/ProductUploadImageResponse.ts new file mode 100644 index 0000000..a1f5f82 --- /dev/null +++ b/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); +}; + diff --git a/src/client/services/ProductService.ts b/src/client/services/ProductService.ts index 138c405..7076184 100644 --- a/src/client/services/ProductService.ts +++ b/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 { + 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`, + }, + }); + } } diff --git a/src/components/ImageDropzone/ImageDropzone.tsx b/src/components/ImageDropzone/ImageDropzone.tsx new file mode 100644 index 0000000..a78149e --- /dev/null +++ b/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) => { + const restProps = omit() + return ( + + + + + + + + + + + + +
+ + Drag images here or click to select files + + + Attach as many files as you like, each file should not exceed 5mb + +
+ + + ) +} + +export default ImageDropzone; \ No newline at end of file diff --git a/src/pages/ProductsPage/modals/CreateProductModal/CreateProductModal.tsx b/src/pages/ProductsPage/modals/CreateProductModal/CreateProductModal.tsx index f4c3d36..93acd70 100644 --- a/src/pages/ProductsPage/modals/CreateProductModal/CreateProductModal.tsx +++ b/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')} /> -
+
+ + { + }}/> +
{isEditProps ? diff --git a/src/routes/test.lazy.tsx b/src/routes/test.lazy.tsx index 4668507..d97a9e7 100644 --- a/src/routes/test.lazy.tsx +++ b/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 ( <> - + {}} + /> ); } \ No newline at end of file