update service
This commit is contained in:
hamid zarghami
@@ -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'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
<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;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user