update service
This commit is contained in:
hamid zarghami
@@ -1,5 +1,5 @@
|
||||
import { CloseCircle, DocumentUpload, Gallery } from 'iconsax-react'
|
||||
import { FC, useCallback, useState } from 'react'
|
||||
import { FC, useCallback, useEffect, useState } from 'react'
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
@@ -8,12 +8,16 @@ type Props = {
|
||||
onChange: (file: File[]) => void;
|
||||
isMultiple?: boolean;
|
||||
isFile?: boolean,
|
||||
preview?: string[],
|
||||
onChangePreview?: (preview: string[]) => void
|
||||
}
|
||||
|
||||
const UploadBoxDraggble: FC<Props> = (props: Props) => {
|
||||
|
||||
const [files, setFiles] = useState<File[]>([])
|
||||
const { t } = useTranslation('global')
|
||||
const [files, setFiles] = useState<File[]>([])
|
||||
const [perviews, setPerviews] = useState<string[]>(props.preview ? props.preview : [])
|
||||
const [isFill, setIsFill] = useState<boolean>(false)
|
||||
|
||||
const onDrop = useCallback((acceptedFiles: File[]) => {
|
||||
if (props.isMultiple) {
|
||||
@@ -36,6 +40,27 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
|
||||
props.onChange(array)
|
||||
}
|
||||
|
||||
const handleDeletePreview = (index: number) => {
|
||||
const array = [...perviews];
|
||||
array.splice(index, 1);
|
||||
setPerviews(array);
|
||||
if (props.onChangePreview) {
|
||||
props.onChangePreview(array);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (props.preview && props.preview.length > 0 && !isFill) {
|
||||
setPerviews(props.preview)
|
||||
console.log('preview', props.preview);
|
||||
|
||||
setIsFill(true)
|
||||
}
|
||||
|
||||
}, [props.preview, isFill])
|
||||
|
||||
|
||||
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'>
|
||||
@@ -58,8 +83,22 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
|
||||
</div>
|
||||
|
||||
{
|
||||
files.length > 0 && (
|
||||
files.length > 0 || perviews ? (
|
||||
<div className='mt-4 flex gap-4 items-center'>
|
||||
{
|
||||
perviews && perviews.map((item, index) => {
|
||||
return (
|
||||
<div key={index} className='flex items-center gap-2'>
|
||||
<div key={index} className='flex relative items-center gap-2'>
|
||||
<img src={item} className='size-10 rounded-full object-cover' />
|
||||
<div onClick={() => handleDeletePreview(index)} className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
|
||||
<CloseCircle className='size-4 ' color='red' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
{
|
||||
files.map((file, index) => {
|
||||
if (props.isFile) {
|
||||
@@ -88,7 +127,7 @@ const UploadBoxDraggble: FC<Props> = (props: Props) => {
|
||||
})
|
||||
}
|
||||
</div>
|
||||
)
|
||||
) : null
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,7 @@ export const Pages = {
|
||||
mine: "/services",
|
||||
other: "/other-service",
|
||||
detail: "/services/detail/",
|
||||
update: "/services/update/",
|
||||
add: "/services/add",
|
||||
list: "/services/list",
|
||||
category: "/services/category",
|
||||
@@ -72,6 +73,7 @@ export const Pages = {
|
||||
ads: {
|
||||
list: "/ads/list",
|
||||
create: "/ads/create",
|
||||
update: "/ads/update/",
|
||||
},
|
||||
blog: {
|
||||
list: "/blog/list",
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { Add, Eye } from 'iconsax-react'
|
||||
import { Add, Eye, Trash } from 'iconsax-react'
|
||||
import Td from '../../components/Td'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import DatePickerComponent from '../../components/DatePicker'
|
||||
import Select from '../../components/Select'
|
||||
import Input from '../../components/Input'
|
||||
import { useGetAdsList } from './hooks/useAdsData'
|
||||
import { useDeleteAds, useGetAdsList } from './hooks/useAdsData'
|
||||
import { AdsItemType } from './types/AdsTypes'
|
||||
import moment from 'moment-jalaali'
|
||||
import ToggleStatusAds from './components/ToggleStatus'
|
||||
@@ -22,6 +22,15 @@ const AddList: FC = () => {
|
||||
const [since, setSince] = useState<string>('')
|
||||
const [page, setPage] = useState<number>(1)
|
||||
const getAds = useGetAdsList(page, search, isActive, since)
|
||||
const deleteAds = useDeleteAds()
|
||||
|
||||
const handleDelete = (id: string) => {
|
||||
deleteAds.mutate(id, {
|
||||
onSuccess: () => {
|
||||
getAds.refetch()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mt-4 min-h-[500px]'>
|
||||
@@ -120,9 +129,12 @@ const AddList: FC = () => {
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<div className='flex gap-3'>
|
||||
<Link to={Pages.ads.update + item.id}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
<Trash onClick={() => handleDelete(item.id)} size={20} color='#8C90A3' />
|
||||
</div>
|
||||
</Td>
|
||||
</tr>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,258 @@
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../components/Input'
|
||||
import Button from '../../components/Button'
|
||||
import SwitchComponent from '../../components/Switch'
|
||||
import { TickCircle, Link2 } from 'iconsax-react'
|
||||
import DatePickerComponent from '../../components/DatePicker'
|
||||
import { useFormik } from 'formik'
|
||||
import { AdsDisplayLocation, CreateAdsType } from './types/AdsTypes'
|
||||
import * as Yup from 'yup'
|
||||
import UploadBoxDraggble from '../../components/UploadBoxDraggble'
|
||||
import CheckBoxComponent from '../../components/CheckBoxComponent'
|
||||
import { useSingleUpload } from '../service/hooks/useServiceData'
|
||||
import { useGetDetailAds, useUpdateAds } from './hooks/useAdsData'
|
||||
import { ErrorType } from '../../helpers/types'
|
||||
import { toast } from 'react-toastify'
|
||||
import { clx } from '../../helpers/utils'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import moment from 'moment-jalaali'
|
||||
|
||||
const UpdateAds: FC = () => {
|
||||
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const { t } = useTranslation('global')
|
||||
const [file, setFile] = useState<File>()
|
||||
const singleUpload = useSingleUpload()
|
||||
const updateAds = useUpdateAds(id ? id : '')
|
||||
const getDetail = useGetDetailAds(id)
|
||||
|
||||
const formik = useFormik<CreateAdsType>({
|
||||
initialValues: {
|
||||
displayLocation: '',
|
||||
endDate: '',
|
||||
imageUrl: '',
|
||||
isActive: true,
|
||||
link: '',
|
||||
serviceId: undefined,
|
||||
startDate: '',
|
||||
title: ''
|
||||
},
|
||||
validationSchema: Yup.object().shape({
|
||||
title: Yup.string().required(t('errors.required')),
|
||||
displayLocation: Yup.string().required(t('errors.required')),
|
||||
endDate: Yup.string().required(t('errors.required')),
|
||||
link: Yup.string().required(t('errors.required')),
|
||||
startDate: Yup.string().required(t('errors.required'))
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
if (file) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
await singleUpload.mutateAsync(formData, {
|
||||
onSuccess: (data) => {
|
||||
values.imageUrl = data?.data?.url
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
updateAds.mutate(values, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('success'))
|
||||
navigate(Pages.ads.list)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (getDetail.data) {
|
||||
console.log(getDetail.data);
|
||||
|
||||
formik.setValues({
|
||||
displayLocation: getDetail.data?.data?.ads?.displayLocation,
|
||||
endDate: moment(getDetail.data?.data?.ads?.endDate).format('jYYYY-jMM-jDD'),
|
||||
imageUrl: getDetail.data?.data?.ads?.imageUrl,
|
||||
isActive: getDetail.data?.data?.ads?.isActive,
|
||||
link: getDetail.data?.data?.ads?.link,
|
||||
serviceId: getDetail.data?.data?.ads?.serviceId,
|
||||
startDate: moment(getDetail.data?.data?.ads?.startDate).format('jYYYY-jMM-jDD'),
|
||||
title: getDetail.data?.data?.ads?.title
|
||||
})
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [getDetail.data])
|
||||
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('ads.new_ads')}
|
||||
</div>
|
||||
<Button
|
||||
className='w-[172px]'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={updateAds.isPending || singleUpload.isPending}
|
||||
>
|
||||
<div className='flex gap-2 items-center'>
|
||||
<TickCircle size={20} color='white' />
|
||||
<div>
|
||||
{t('ads.submit')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className='flex flex-col-reverse xl:flex-row gap-6 xl:mt-8 mt-4'>
|
||||
<div className='flex-1 min-h-[calc(100vh-201px)] bg-white py-8 xl:px-10 px-4 rounded-3xl'>
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('ads.title')}
|
||||
placeholder={t('ads.enter_your_title')}
|
||||
{...formik.getFieldProps('title')}
|
||||
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6 rowTwoInput'>
|
||||
<DatePickerComponent
|
||||
label={t('ads.startDate')}
|
||||
onChange={(value) => formik.setFieldValue('startDate', moment(value, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'))}
|
||||
placeholder=''
|
||||
error_text={formik.touched.startDate && formik.errors.startDate ? formik.errors.startDate : ''}
|
||||
defaulValue={formik.values.startDate}
|
||||
/>
|
||||
<DatePickerComponent
|
||||
label={t('ads.endDate')}
|
||||
onChange={(value) => formik.setFieldValue('endDate', moment(value, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'))}
|
||||
placeholder=''
|
||||
error_text={formik.touched.endDate && formik.errors.endDate ? formik.errors.endDate : ''}
|
||||
defaulValue={formik.values.endDate}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6 relative'>
|
||||
<Input
|
||||
label={t('ads.link')}
|
||||
placeholder={t('ads.enter_your_link')}
|
||||
{...formik.getFieldProps('link')}
|
||||
error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
|
||||
/>
|
||||
<Link2 size={20} color='blue' className={clx(
|
||||
'absolute left-4 bottom-[10px] cursor-pointer',
|
||||
formik.touched.link && formik.errors.link ? 'bottom-[31px]' : ''
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
<div className='min-h-[calc(100vh-201px)] bg-white w-full xl:w-sidebar py-10 px-5 h-fit rounded-3xl'>
|
||||
<div className='text-sm flex items-center justify-between'>
|
||||
<p>
|
||||
وضعیت تبلیغ
|
||||
</p>
|
||||
<div className='flex gap-1 text-xs items-center text-description'>
|
||||
<div>
|
||||
{t('ads.deactive')}
|
||||
</div>
|
||||
<SwitchComponent
|
||||
active={formik.values.isActive}
|
||||
onChange={(value) => formik.setFieldValue('isActive', value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<p className='mt-6 text-sm'>{t('ads.location')}</p>
|
||||
|
||||
<div className='p-2 border border-[##D0D0D0] rounded-lg mt-1'>
|
||||
<div className='flex items-center py-2'>
|
||||
<div>
|
||||
<CheckBoxComponent
|
||||
checked={formik.values.displayLocation === AdsDisplayLocation.HOMEPAGE_TOP}
|
||||
onChange={() => formik.setFieldValue('displayLocation', AdsDisplayLocation.HOMEPAGE_TOP)}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
{t(`ads.${AdsDisplayLocation.HOMEPAGE_TOP}`)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center py-2'>
|
||||
<div>
|
||||
<CheckBoxComponent
|
||||
checked={formik.values.displayLocation === AdsDisplayLocation.SINGLE_SERVICE_PAGE}
|
||||
onChange={() => formik.setFieldValue('displayLocation', AdsDisplayLocation.SINGLE_SERVICE_PAGE)}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
{t(`ads.${AdsDisplayLocation.SINGLE_SERVICE_PAGE}`)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center py-2'>
|
||||
<div>
|
||||
<CheckBoxComponent
|
||||
checked={formik.values.displayLocation === AdsDisplayLocation.MY_SERVICES_PAGE}
|
||||
onChange={() => formik.setFieldValue('displayLocation', AdsDisplayLocation.MY_SERVICES_PAGE)}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
{t(`ads.${AdsDisplayLocation.MY_SERVICES_PAGE}`)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center py-2'>
|
||||
<div>
|
||||
<CheckBoxComponent
|
||||
checked={formik.values.displayLocation === AdsDisplayLocation.OTHER_SERVICES_TOP}
|
||||
onChange={() => formik.setFieldValue('displayLocation', AdsDisplayLocation.OTHER_SERVICES_TOP)}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
{t(`ads.${AdsDisplayLocation.OTHER_SERVICES_TOP}`)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center py-2'>
|
||||
<div>
|
||||
<CheckBoxComponent
|
||||
checked={formik.values.displayLocation === AdsDisplayLocation.OTHER_SERVICES_LEFT}
|
||||
onChange={() => formik.setFieldValue('displayLocation', AdsDisplayLocation.OTHER_SERVICES_LEFT)}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
{t(`ads.${AdsDisplayLocation.OTHER_SERVICES_LEFT}`)}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center py-2'>
|
||||
<div>
|
||||
<CheckBoxComponent
|
||||
checked={formik.values.displayLocation === AdsDisplayLocation.SERVICE}
|
||||
onChange={() => formik.setFieldValue('displayLocation', AdsDisplayLocation.SERVICE)}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-description text-xs leading-5'>
|
||||
{t(`ads.${AdsDisplayLocation.SERVICE}`)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='mt-8'>
|
||||
<UploadBoxDraggble
|
||||
label={t('ads.upload_picture')}
|
||||
onChange={(value) => setFile(value[0])}
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-4'>
|
||||
<img src={formik.values.imageUrl} alt='ads' className='size-8 object-cover rounded-lg' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default UpdateAds
|
||||
@@ -25,3 +25,23 @@ export const useToggleStatusAds = () => {
|
||||
mutationFn: (variables: string) => api.toggleStatusAds(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetDetailAds = (id?: string) => {
|
||||
return useQuery({
|
||||
queryKey: ["ads-detail", id],
|
||||
queryFn: () => api.getDetailAds(id ? id : ""),
|
||||
enabled: !!id,
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateAds = (id: string) => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: CreateAdsType) => api.updateAds(id, variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useDeleteAds = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: string) => api.deleteAds(variables),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -31,3 +31,18 @@ export const toggleStatusAds = async (id: string) => {
|
||||
const { data } = await axios.patch(`/advertise/toggle-status/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getDetailAds = async (id: string) => {
|
||||
const { data } = await axios.get(`/advertise/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updateAds = async (id: string, params: CreateAdsType) => {
|
||||
const { data } = await axios.patch(`/advertise/${id}`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const deleteAds = async (id: string) => {
|
||||
const { data } = await axios.delete(`/advertise/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -154,7 +154,7 @@ const ListService: FC = () => {
|
||||
/>
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + item.id}>
|
||||
<Link to={Pages.services.update + item.id}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
|
||||
@@ -0,0 +1,284 @@
|
||||
import { FC, useEffect, useRef, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Input from '../../components/Input'
|
||||
import Select from '../../components/Select'
|
||||
import Quill from 'quill';
|
||||
import Button from '../../components/Button';
|
||||
import { TickCircle } from 'iconsax-react';
|
||||
import { useFormik } from 'formik';
|
||||
import { CreateServiceType } from './types/ServiceTypes';
|
||||
import DatePickerComponent from '../../components/DatePicker';
|
||||
import * as Yup from 'yup'
|
||||
import { useGetDetailService, useMultiUpload, useSingleUpload, useUpdateService } from './hooks/useServiceData';
|
||||
import moment from 'moment-jalaali';
|
||||
import { ErrorType } from '../../helpers/types';
|
||||
import { toast } from 'react-toastify';
|
||||
import { useNavigate, useParams } from 'react-router-dom';
|
||||
import { Pages } from '../../config/Pages';
|
||||
import UpdateServiceSidebar from './components/UpdateServiceSidebar';
|
||||
|
||||
const UpdateService: FC = () => {
|
||||
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const { t } = useTranslation('global')
|
||||
const singleUpload = useSingleUpload()
|
||||
const multiUpload = useMultiUpload()
|
||||
const editorRef = useRef<HTMLDivElement | null>(null);
|
||||
const createService = useUpdateService(id ? id : '')
|
||||
const [iconFile, setIconFile] = useState<File>()
|
||||
const [imagesFile, setImagesFile] = useState<File[]>()
|
||||
const getDetailService = useGetDetailService(id)
|
||||
|
||||
useEffect(() => {
|
||||
const quill = new Quill('#editor', {
|
||||
theme: 'snow',
|
||||
modules: {
|
||||
toolbar: [
|
||||
[{ header: '1' }, { header: '2' }, { font: [] }],
|
||||
[{ list: 'ordered' }, { list: 'bullet' }],
|
||||
['bold', 'italic', 'underline'],
|
||||
['link', 'image'],
|
||||
[{ align: [] }],
|
||||
['clean']
|
||||
]
|
||||
}
|
||||
});
|
||||
quill.on('text-change', () => {
|
||||
if (editorRef.current) {
|
||||
const html = editorRef.current?.querySelector('.ql-editor')?.innerHTML || '';
|
||||
formik.setFieldValue('metaDescription', html);
|
||||
}
|
||||
});
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
const formik = useFormik<CreateServiceType>({
|
||||
initialValues: {
|
||||
author: '',
|
||||
categoryId: '',
|
||||
description: '',
|
||||
icon: '',
|
||||
images: [],
|
||||
isDanakSuggest: false,
|
||||
link: '',
|
||||
metaDescription: '',
|
||||
name: '',
|
||||
title: '',
|
||||
serviceLanguage: '',
|
||||
softwareLanguage: '',
|
||||
userCount: 0,
|
||||
createDate: ''
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
name: Yup.string().required(t('errors.required')),
|
||||
title: Yup.string().required(t('errors.required')),
|
||||
description: Yup.string().required(t('errors.required')),
|
||||
author: Yup.string().required(t('errors.required')),
|
||||
createDate: Yup.date().required(t('errors.required')),
|
||||
userCount: Yup.number().required(t('errors.required')),
|
||||
serviceLanguage: Yup.string().required(t('errors.required')),
|
||||
metaDescription: Yup.string().required(t('errors.required')),
|
||||
link: Yup.string().required(t('errors.required')),
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
|
||||
|
||||
if (iconFile) {
|
||||
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])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if (imagesFile && imagesFile.length > 0) {
|
||||
const images = new FormData()
|
||||
imagesFile.forEach(file => {
|
||||
images.append('files', file)
|
||||
})
|
||||
await multiUpload.mutateAsync(images, {
|
||||
onSuccess: async (data) => {
|
||||
console.log('values.images', values.images);
|
||||
|
||||
values.images = [...(values.images || []), ...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])
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (getDetailService.data) {
|
||||
const data = getDetailService.data?.data?.danakService;
|
||||
formik.setValues({
|
||||
author: data?.author,
|
||||
categoryId: data?.category?.id,
|
||||
description: data?.description,
|
||||
icon: data?.icon,
|
||||
images: data?.images?.map((image: { imageUrl: string }) => image.imageUrl),
|
||||
isDanakSuggest: data?.isDanakSuggest,
|
||||
link: data?.link,
|
||||
metaDescription: data?.metaDescription,
|
||||
name: data?.name,
|
||||
title: data?.title,
|
||||
serviceLanguage: data?.serviceLanguage,
|
||||
softwareLanguage: data?.softwareLanguage,
|
||||
userCount: data?.userCount || 0,
|
||||
createDate: moment(data?.createDate).format('YYYY-MM-DD'),
|
||||
});
|
||||
const editorElement = editorRef.current?.querySelector('.ql-editor');
|
||||
if (editorElement) {
|
||||
editorElement.innerHTML = data?.metaDescription || '';
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [getDetailService.data]);
|
||||
|
||||
return (
|
||||
<div className='w-full mt-4'>
|
||||
|
||||
<div className='flex w-full justify-between items-center'>
|
||||
<div>
|
||||
{t('service.add_service')}
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
className='px-5'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createService.isPending || singleUpload.isPending || multiUpload.isPending}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<TickCircle
|
||||
className='size-5'
|
||||
color='#fff'
|
||||
/>
|
||||
<div>{t('service.submit_service')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex gap-6'>
|
||||
<div className='flex-1'>
|
||||
|
||||
|
||||
<div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
|
||||
<div className='rowTwoInput'>
|
||||
<Input
|
||||
label={t('service.service_name')}
|
||||
{...formik.getFieldProps('name')}
|
||||
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('service.title')}
|
||||
{...formik.getFieldProps('title')}
|
||||
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 rowTwoInput'>
|
||||
<Input
|
||||
label={t('service.description_short')}
|
||||
{...formik.getFieldProps('description')}
|
||||
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
|
||||
/>
|
||||
|
||||
<Input
|
||||
label={t('service.software_langauge')}
|
||||
{...formik.getFieldProps('softwareLanguage')}
|
||||
error_text={formik.touched.softwareLanguage && formik.errors.softwareLanguage ? formik.errors.softwareLanguage : ''}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
<div className='mt-8 rowTwoInput'>
|
||||
<Input
|
||||
label={t('service.company_developed')}
|
||||
{...formik.getFieldProps('author')}
|
||||
error_text={formik.touched.author && formik.errors.author ? formik.errors.author : ''}
|
||||
/>
|
||||
|
||||
<DatePickerComponent
|
||||
label={t('service.year_make')}
|
||||
onChange={(d) => formik.setFieldValue('createDate', d)}
|
||||
placeholder={t('select')}
|
||||
error_text={formik.touched.createDate && formik.errors.createDate ? formik.errors.createDate : ''}
|
||||
defaulValue={formik.values.createDate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8 rowTwoInput'>
|
||||
<Input
|
||||
label={t('service.user_count')}
|
||||
{...formik.getFieldProps('userCount')}
|
||||
error_text={formik.touched.userCount && formik.errors.userCount ? formik.errors.userCount : ''}
|
||||
/>
|
||||
|
||||
<Select
|
||||
label={t('service.lang_app')}
|
||||
items={[
|
||||
{
|
||||
label: 'فارسی',
|
||||
value: 'fa'
|
||||
},
|
||||
{
|
||||
label: 'انگلیسی',
|
||||
value: 'en'
|
||||
},
|
||||
]}
|
||||
placeholder={t('select')}
|
||||
name='serviceLanguage'
|
||||
onChange={formik.handleChange}
|
||||
error_text={formik.touched.serviceLanguage && formik.errors.serviceLanguage ? formik.errors.serviceLanguage : ''}
|
||||
value={formik.values.serviceLanguage}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<div ref={editorRef} id='editor' style={{ minHeight: '120px' }}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
getDetailService.data && (
|
||||
<UpdateServiceSidebar
|
||||
formik={formik}
|
||||
onChangeIconFile={(file: File) => setIconFile(file)}
|
||||
onChangeImagesFile={(file: File[]) => setImagesFile(file)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default UpdateService
|
||||
@@ -46,8 +46,7 @@ const AddServiceSidebar: FC<Props> = (props: Props) => {
|
||||
<div className='mt-8'>
|
||||
<Input
|
||||
label={t('service.service_link')}
|
||||
name='link'
|
||||
onChange={formik.handleChange}
|
||||
{...formik.getFieldProps('link')}
|
||||
error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import CheckBoxComponent from '../../../components/CheckBoxComponent'
|
||||
import Input from '../../../components/Input'
|
||||
import UploadBoxDraggble from '../../../components/UploadBoxDraggble'
|
||||
import { FormikProps } from 'formik'
|
||||
import { CreateServiceType, ServiceCategoryType } from '../types/ServiceTypes'
|
||||
import { useGetCategoryParents, useGetDetailService } from '../hooks/useServiceData'
|
||||
import { useParams } from 'react-router-dom'
|
||||
|
||||
type Props = {
|
||||
formik: FormikProps<CreateServiceType>,
|
||||
onChangeIconFile: (file: File) => void,
|
||||
onChangeImagesFile: (file: File[]) => void
|
||||
}
|
||||
|
||||
const UpdateServiceSidebar: FC<Props> = (props: Props) => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const { id } = useParams()
|
||||
const { formik } = props
|
||||
|
||||
const getCategory = useGetCategoryParents()
|
||||
const { data } = useGetDetailService(id)
|
||||
|
||||
|
||||
return (
|
||||
<div className='bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl'>
|
||||
<div className='flex justify-between'>
|
||||
<div className='text-sm'>
|
||||
{t('service.service_status')}
|
||||
</div>
|
||||
{/* <div className='flex gap-1'>
|
||||
<SwitchComponent
|
||||
active={formik.values.isDanakSuggest}
|
||||
onChange={(e) => formik.setFieldValue('isDanakSuggest', e)}
|
||||
/>
|
||||
</div> */}
|
||||
</div>
|
||||
|
||||
<div className='mt-8 items-center flex '>
|
||||
<CheckBoxComponent
|
||||
checked={formik.values.isDanakSuggest}
|
||||
onChange={(e) => formik.setFieldValue('isDanakSuggest', e.target.checked)}
|
||||
/>
|
||||
<div>{t('service.special_danak')}</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Input
|
||||
label={t('service.service_link')}
|
||||
{...formik.getFieldProps('link')}
|
||||
error_text={formik.touched.link && formik.errors.link ? formik.errors.link : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<div>{t('service.category')}</div>
|
||||
<div className='mt-2 border border-border rounded-xl p-4'>
|
||||
{
|
||||
getCategory.data?.data?.categories?.map((item: ServiceCategoryType) => {
|
||||
return (
|
||||
<div key={item.id} className='flex items-center'>
|
||||
<CheckBoxComponent
|
||||
checked={formik.values.categoryId === item.id}
|
||||
onChange={(e) => formik.setFieldValue('categoryId', e.target.checked ? item.id : '')}
|
||||
/>
|
||||
<div>{item.title}</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<div>{t('service.service_icon')}</div>
|
||||
<div className='mt-2'>
|
||||
<UploadBoxDraggble
|
||||
label={t('service.upload_icon_service')}
|
||||
onChange={(file: File[]) => props.onChangeIconFile(file[0])}
|
||||
preview={[data?.data?.danakService?.icon]}
|
||||
onChangePreview={(images: string[]) => formik.setFieldValue('icon', images[0])}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className='mt-8'>
|
||||
<div>{t('service.service_images')}</div>
|
||||
<div className='mt-2'>
|
||||
<UploadBoxDraggble
|
||||
label={t('service.upload_images_service')}
|
||||
onChange={props.onChangeImagesFile}
|
||||
isMultiple
|
||||
preview={data?.data?.danakService?.images?.map((image: { imageUrl: string }) => image.imageUrl) || []}
|
||||
onChangePreview={(images: string[]) => formik.setFieldValue('images', images)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default UpdateServiceSidebar
|
||||
@@ -146,3 +146,18 @@ export const useChangeStatusReview = () => {
|
||||
api.changeStatusReview(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetDetailService = (id?: string) => {
|
||||
return useQuery({
|
||||
queryKey: ["service-detail", id],
|
||||
queryFn: () => api.getServiceDetail(id ? id : ""),
|
||||
enabled: !!id,
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateService = (id: string) => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: CreateServiceType) =>
|
||||
api.updateService(id, variables),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -130,3 +130,13 @@ export const changeStatusReview = async (params: {
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getServiceDetail = async (id: string) => {
|
||||
const { data } = await axios.get(`/danak-services/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updateService = async (id: string, params: CreateServiceType) => {
|
||||
const { data } = await axios.patch(`/danak-services/${id}`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -55,6 +55,8 @@ import Plans from '../pages/service/Plans'
|
||||
import GroupCreate from '../pages/users/GroupCreate'
|
||||
import GroupList from '../pages/users/GroupList'
|
||||
import Reviews from '../pages/service/Reviews'
|
||||
import UpdateAds from '../pages/ads/Update'
|
||||
import UpdateService from '../pages/service/UpdateService'
|
||||
|
||||
const MainRouter: FC = () => {
|
||||
|
||||
@@ -79,6 +81,7 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.services.detail + ':id'} element={<DetailService />} />
|
||||
<Route path={Pages.services.add} element={<AddService />} />
|
||||
<Route path={Pages.services.list} element={<ListService />} />
|
||||
<Route path={Pages.services.update + ':id'} element={<UpdateService />} />
|
||||
<Route path={Pages.services.category} element={<Category />} />
|
||||
<Route path={Pages.services.plan + ':id'} element={<Plans />} />
|
||||
<Route path={Pages.services.review} element={<Reviews />} />
|
||||
@@ -88,6 +91,7 @@ const MainRouter: FC = () => {
|
||||
<Route path={Pages.ticket.detail + ':id'} element={<TicketDetail />} />
|
||||
<Route path={Pages.ads.list} element={<AdsList />} />
|
||||
<Route path={Pages.ads.create} element={<CreateAds />} />
|
||||
<Route path={Pages.ads.update + ':id'} element={<UpdateAds />} />
|
||||
<Route path={Pages.discount.list} element={<DiscountsList />} />
|
||||
<Route path={Pages.discount.create} element={<CreateDiscount />} />
|
||||
<Route path={Pages.blog.list} element={<BlogList />} />
|
||||
|
||||
Reference in New Issue
Block a user