uploader and create service

.env

@@ -1,4 +1,4 @@
 VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
-# VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
+VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
-VITE_BASE_URL = 'http://192.168.0.207:3500'
+# VITE_BASE_URL = 'http://192.168.0.207:3500'

src/components/UploadBoxDraggble.tsx

@@ -1,23 +1,42 @@
-import { DocumentUpload, Gallery } from 'iconsax-react'
+import { CloseCircle, DocumentUpload, Gallery } from 'iconsax-react'
-import { FC, useCallback } from 'react'
+import { FC, useCallback, useState } from 'react'
 import { useDropzone } from 'react-dropzone';
 import { useTranslation } from 'react-i18next';
 
 type Props = {
     label: string;
-    onChange: (file: File) => void;
+    onChange: (file: File[]) => void;
+    isMultiple?: boolean;
 }
 
 const UploadBoxDraggble: FC<Props> = (props: Props) => {
+
+    const [files, setFiles] = useState<File[]>([])
     const { t } = useTranslation('global')
 
     const onDrop = useCallback((acceptedFiles: File[]) => {
-        props.onChange(acceptedFiles[0])
+        if (props.isMultiple) {
+            const array = [...files]
+            array.push(acceptedFiles[0])
+            setFiles(array)
+            props.onChange(array)
+        } else {
+            setFiles([acceptedFiles[0]])
+            props.onChange([acceptedFiles[0]])
+        }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [])
+    }, [files])
     const { getRootProps, getInputProps } = useDropzone({ onDrop })
 
+    const handleDelete = (index: number) => {
+        const array = [...files]
+        array.splice(index, 1)
+        setFiles(array)
+        props.onChange(array)
+    }
+
     return (
+        <div>
             <div {...getRootProps()} className='w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl'>
                 <input {...getInputProps()} />
                 <Gallery
@@ -36,6 +55,27 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
                     <div className='text-xs'>{t('upload')}</div>
                 </div>
             </div>
+
+            {
+                files.length > 0 && (
+                    <div className='mt-4 flex gap-4 items-center'>
+                        {
+                            files.map((file, index) => (
+                                <div key={index} className='flex items-center gap-2'>
+                                    <div key={index} className='flex relative items-center gap-2'>
+                                        <img src={URL.createObjectURL(file)} alt={file.name} className='size-10 rounded-full object-cover' />
+                                        <div className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
+                                            <CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
+                                        </div>
+                                    </div>
+                                </div>
+                            ))
+                        }
+                    </div>
+                )
+            }
+
+        </div>
     )
 }
 

src/langs/fa.json

@@ -38,7 +38,8 @@
     "login_with_otp": "ورود با رمز عبور یکبار مصرف"
   },
   "errors": {
-    "required": "این فیلد اجباری می باشد"
+    "required": "این فیلد اجباری می باشد",
+    "upload_image": "تصاویر مربوطه باید انتخاب شوند"
   },
   "description": "توضیحات",
   "sidebar": {
@@ -153,7 +154,9 @@
     "category_parent_2": "دسته بندی مادر",
     "icon_serice_category": "آیکون سرویس مورد نظر را آپلود کنید",
     "active": "فعال",
-    "deactive": "غیرفعال"
+    "deactive": "غیرفعال",
+    "software_langauge": "زبان نرم افزار",
+    "link": "لینک"
   },
   "save": "ذخیره",
   "search": "جستجو",

src/pages/service/AddService.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useRef } from 'react'
+import { FC, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '../../components/Input'
 import Select from '../../components/Select'
@@ -10,11 +10,23 @@ import { CreateServiceType } from './types/ServiceTypes';
 import DatePickerComponent from '../../components/DatePicker';
 import AddServiceSidebar from './components/AddServiceSidebar';
 import * as Yup from 'yup'
+import { useCreateService, useMultiUpload, useSingleUpload } from './hooks/useServiceData';
+import moment from 'moment-jalaali';
+import { ErrorType } from '../../helpers/types';
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router-dom';
+import { Pages } from '../../config/Pages';
 
 const AddService: FC = () => {
 
+    const navigate = useNavigate()
     const { t } = useTranslation('global')
+    const singleUpload = useSingleUpload()
+    const multiUpload = useMultiUpload()
     const editorRef = useRef<HTMLDivElement | null>(null);
+    const createService = useCreateService()
+    const [iconFile, setIconFile] = useState<File>()
+    const [imagesFile, setImagesFile] = useState<File[]>()
 
     useEffect(() => {
         const quill = new Quill('#editor', {
@@ -63,12 +75,55 @@ const AddService: FC = () => {
             metaDescription: Yup.string().required(t('errors.required')),
             link: Yup.string().required(t('errors.required')),
         }),
-        onSubmit(values) {
+        onSubmit: async (values) => {
-            console.log(values);
+            if (iconFile && imagesFile) {
 
+                const formData = new FormData()
+                formData.append('file', iconFile)
+                await singleUpload.mutateAsync(formData, {
+                    onSuccess: (data) => {
+                        values.icon = data?.data?.url
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+
+                const images = new FormData()
+                imagesFile.forEach(file => {
+                    images.append('files', file)
+                })
+                await multiUpload.mutateAsync(images, {
+                    onSuccess: async (data) => {
+                        values.images = await data.data.map((item: { url: string }) => item?.url)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+
+                const params = {
+                    ...values,
+                    userCount: +values.userCount,
+                    createDate: moment(values.createDate).format('YYYY-MM-DD'),
+                }
+                createService.mutate(params, {
+                    onSuccess: () => {
+                        formik.resetForm()
+                        toast.success(t('success'))
+                        navigate(Pages.services.list)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                toast.error(t('errors.upload_image'))
+            }
         },
     })
 
+
     return (
         <div className='w-full mt-4'>
             <div className='flex w-full justify-between items-center'>
@@ -79,6 +134,7 @@ const AddService: FC = () => {
                     <Button
                         className='px-5'
                         onClick={() => formik.handleSubmit()}
+                        isLoading={createService.isPending || singleUpload.isPending || multiUpload.isPending}
                     >
                         <div className='flex gap-2'>
                             <TickCircle
@@ -101,13 +157,21 @@ const AddService: FC = () => {
                             onChange={formik.handleChange}
                             error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
                         />
-                        <div className='mt-8'>
+                        <div className='mt-8 rowTwoInput'>
                             <Input
                                 label={t('service.description_short')}
                                 name='description'
                                 onChange={formik.handleChange}
                                 error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
                             />
+
+                            <Input
+                                label={t('service.software_langauge')}
+                                name='softwareLanguage'
+                                onChange={formik.handleChange}
+                                error_text={formik.touched.softwareLanguage && formik.errors.softwareLanguage ? formik.errors.softwareLanguage : ''}
+                            />
+
                         </div>
 
                         <div className='mt-8 rowTwoInput'>
@@ -139,8 +203,12 @@ const AddService: FC = () => {
                                 items={[
                                     {
                                         label: 'فارسی',
-                                        value: ''
+                                        value: 'fa'
-                                    }
+                                    },
+                                    {
+                                        label: 'انگلیسی',
+                                        value: 'en'
+                                    },
                                 ]}
                                 placeholder={t('select')}
                                 name='serviceLanguage'
@@ -157,6 +225,8 @@ const AddService: FC = () => {
 
                 <AddServiceSidebar
                     formik={formik}
+                    onChangeIconFile={(file: File) => setIconFile(file)}
+                    onChangeImagesFile={(file: File[]) => setImagesFile(file)}
                 />
             </div>
         </div>

src/pages/service/List.tsx

@@ -20,6 +20,7 @@ const ListService: FC = () => {
                     {t('service.list_service')}
                 </div>
                 <div>
+                    <Link to={Pages.services.add}>
                         <Button
                             className='px-5'
                         >
@@ -31,6 +32,7 @@ const ListService: FC = () => {
                                 <div>{t('service.submit_service')}</div>
                             </div>
                         </Button>
+                    </Link>
                 </div>
             </div>
 

src/pages/service/components/AddServiceSidebar.tsx

@@ -9,7 +9,9 @@ import { CreateServiceType, ServiceCategoryType } from '../types/ServiceTypes'
 import { useGetCategoryParents } from '../hooks/useServiceData'
 
 type Props = {
-    formik: FormikProps<CreateServiceType>
+    formik: FormikProps<CreateServiceType>,
+    onChangeIconFile: (file: File) => void,
+    onChangeImagesFile: (file: File[]) => void
 }
 
 const AddServiceSidebar: FC<Props> = (props: Props) => {
@@ -76,7 +78,7 @@ const AddServiceSidebar: FC<Props> = (props: Props) => {
                 <div className='mt-2'>
                     <UploadBoxDraggble
                         label={t('service.upload_icon_service')}
-                        onChange={() => null}
+                        onChange={(file: File[]) => props.onChangeIconFile(file[0])}
                     />
                 </div>
             </div>
@@ -85,7 +87,8 @@ const AddServiceSidebar: FC<Props> = (props: Props) => {
                 <div className='mt-2'>
                     <UploadBoxDraggble
                         label={t('service.upload_images_service')}
-                        onChange={() => null}
+                        onChange={props.onChangeImagesFile}
+                        isMultiple
                     />
                 </div>
             </div>

src/pages/service/hooks/useServiceData.ts

@@ -2,6 +2,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/ServiceService";
 import {
   CreateServiceCategoryType,
+  CreateServiceType,
   ToggleStatusCategoryType,
 } from "../types/ServiceTypes";
 
@@ -42,3 +43,20 @@ export const useChangeStatusCategory = () => {
       api.changeStatusCategory(variables),
   });
 };
+
+export const useCreateService = () => {
+  return useMutation({
+    mutationFn: (variables: CreateServiceType) => api.createService(variables),
+  });
+};
+
+export const useSingleUpload = () => {
+  return useMutation({
+    mutationFn: (variables: FormData) => api.uploadSingle(variables),
+  });
+};
+export const useMultiUpload = () => {
+  return useMutation({
+    mutationFn: (variables: FormData) => api.uploadMultiple(variables),
+  });
+};

src/pages/service/service/ServiceService.ts

@@ -1,6 +1,7 @@
 import axios from "../../../config/axios";
 import {
   CreateServiceCategoryType,
+  CreateServiceType,
   ToggleStatusCategoryType,
 } from "../types/ServiceTypes";
 
@@ -37,3 +38,18 @@ export const changeStatusCategory = async (
   );
   return data;
 };
+
+export const createService = async (params: CreateServiceType) => {
+  const { data } = await axios.post(`/services`, params);
+  return data;
+};
+
+export const uploadSingle = async (params: FormData) => {
+  const { data } = await axios.post(`/uploader/single-file`, params);
+  return data;
+};
+
+export const uploadMultiple = async (params: FormData) => {
+  const { data } = await axios.post(`/uploader/multi-file`, params);
+  return data;
+};