danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

uploader and create service

Browse Source
This commit is contained in:
hamid zarghami
2025-01-29 11:51:09 +03:30
parent ce0019fde0
commit 9c8b15a2cf
8 changed files with 196 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+2 -2
View File
@@ -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 = 'http://192.168.0.207:3500'
VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
# VITE_BASE_URL = 'http://192.168.0.207:3500'
src/components/UploadBoxDraggble.tsx
+60 -20
View File
@@ -1,40 +1,80 @@
import { DocumentUpload, Gallery } from 'iconsax-react'
import { FC, useCallback } from 'react'
import { CloseCircle, DocumentUpload, Gallery } from 'iconsax-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 {...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
className='size-8'
color='#8C90A3'
/>
<div className='text-description text-xs'>
{props.label}
<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
className='size-8'
color='#8C90A3'
/>
<div className='text-description text-xs'>
{props.label}
</div>
<div className='flex items-center gap-2'>
<DocumentUpload
className='size-4'
color='black'
/>
<div className='text-xs'>{t('upload')}</div>
</div>
</div>
<div className='flex items-center gap-2'>
<DocumentUpload
className='size-4'
color='black'
/>
<div className='text-xs'>{t('upload')}</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
+5 -2
View File
@@ -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
+76 -6
View File
@@ -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) {
console.log(values);
onSubmit: async (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
+13 -11
View File
@@ -20,17 +20,19 @@ const ListService: FC = () => {
{t('service.list_service')}
</div>
<div>
<Button
className='px-5'
>
<div className='flex gap-2'>
<Add
className='size-5'
color='#fff'
/>
<div>{t('service.submit_service')}</div>
</div>
</Button>
<Link to={Pages.services.add}>
<Button
className='px-5'
>
<div className='flex gap-2'>
<Add
className='size-5'
color='#fff'
/>
<div>{t('service.submit_service')}</div>
</div>
</Button>
</Link>
</div>
</div>
src/pages/service/components/AddServiceSidebar.tsx
+6 -3
View File
@@ -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
+18
View File
@@ -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
+16
View File
@@ -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;
};