hamid zarghami
90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
import PageTitle from '@/components/PageTitle'
|
||
import { useFormik } from 'formik'
|
||
import { type FC } from 'react'
|
||
import type { CreateThemeType } from './type/Types'
|
||
import { ThemeInputType } from './enum/Enum'
|
||
import * as Yup from 'yup'
|
||
import Input from '@/components/Input'
|
||
import Select from '@/components/Select'
|
||
import { useCreateTheme } from './hooks/useThemeData'
|
||
import { useNavigate } from 'react-router-dom'
|
||
import { Pages } from '@/config/Pages'
|
||
import { extractErrorMessage } from '@/helpers/utils'
|
||
import { toast } from 'react-toastify'
|
||
import Button from '@/components/Button'
|
||
import { TickCircle } from 'iconsax-react'
|
||
|
||
const CreateTheme: FC = () => {
|
||
|
||
const navigate = useNavigate()
|
||
const { mutate: createTheme, isPending } = useCreateTheme();
|
||
|
||
|
||
const formik = useFormik<CreateThemeType>({
|
||
initialValues: {
|
||
title: '',
|
||
inputType: ThemeInputType.Color,
|
||
},
|
||
validationSchema: Yup.object({
|
||
title: Yup.string().required('عنوان تم الزامی است'),
|
||
inputType: Yup.string().required('نوع ورودی تم الزامی است'),
|
||
}),
|
||
onSubmit: (values) => {
|
||
createTheme(values, {
|
||
onSuccess: () => {
|
||
navigate(Pages.products.theme.list)
|
||
},
|
||
onError: (error) => {
|
||
toast.error(extractErrorMessage(error))
|
||
}
|
||
})
|
||
},
|
||
})
|
||
|
||
return (
|
||
<div>
|
||
<PageTitle title1='افزودن تم' />
|
||
|
||
<div className='bg-white p-8 rounded-4xl'>
|
||
<div>
|
||
<Input
|
||
label='عنوان تم'
|
||
placeholder='عنوان تم را وارد کنید'
|
||
{...formik.getFieldProps('title')}
|
||
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-5'>
|
||
<Select
|
||
label='نوع ورودی تم'
|
||
placeholder='انتخاب نوع ورودی تم'
|
||
value={formik.values.inputType}
|
||
onChange={(e) => formik.setFieldValue('inputType', e.target.value)}
|
||
items={[
|
||
{ value: ThemeInputType.Color, label: 'رنگ' },
|
||
{ value: ThemeInputType.Text, label: 'متن' },
|
||
]}
|
||
error_text={formik.touched.inputType && formik.errors.inputType ? formik.errors.inputType : ''}
|
||
/>
|
||
</div>
|
||
|
||
<div className='mt-5 flex justify-end'>
|
||
<Button
|
||
onClick={() => formik.handleSubmit()}
|
||
isLoading={isPending}
|
||
disabled={!formik.isValid || isPending}
|
||
className='w-fit'
|
||
>
|
||
<div className='flex gap-2 items-center'>
|
||
<TickCircle size={16} color='#fff' />
|
||
<div>ذخیره</div>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default CreateTheme |