formik and yup in request design
This commit is contained in:
hamid zarghami
+174
-75
@@ -1,11 +1,15 @@
|
||||
import { usePageTitle } from '@/hooks/usePageTitle'
|
||||
import { useMemo, useState, type FC } from 'react'
|
||||
import { type FC } from 'react'
|
||||
import { Form, Formik, type FormikProps } from 'formik'
|
||||
import * as Yup from 'yup'
|
||||
import Button from '@/components/Button'
|
||||
import DatePicker from '@/components/DatePicker'
|
||||
import Input from '@/components/Input'
|
||||
import Select from '@/components/Select'
|
||||
import Textarea from '@/components/Textarea'
|
||||
import UploadBoxDraggble from '@/components/UploadBoxDraggble'
|
||||
import Error from '@/components/Error'
|
||||
import { useSingleUpload } from '@/pages/uploader/hooks/useUploaderData'
|
||||
|
||||
const PRICE_PER_PAGE = 1000
|
||||
|
||||
@@ -17,90 +21,185 @@ const pageCountOptions = Array.from({ length: 20 }, (_, index) => {
|
||||
}
|
||||
})
|
||||
|
||||
export type DesignerRequestFormValues = {
|
||||
title: string
|
||||
count: number
|
||||
desc: string
|
||||
expectedDate: string
|
||||
attachments: string[]
|
||||
}
|
||||
|
||||
const initialValues: DesignerRequestFormValues = {
|
||||
title: '',
|
||||
count: 1,
|
||||
desc: '',
|
||||
expectedDate: '',
|
||||
attachments: [],
|
||||
}
|
||||
|
||||
const validationSchema = Yup.object({
|
||||
title: Yup.string().trim().required('عنوان کاتالوگ الزامی است'),
|
||||
count: Yup.number()
|
||||
.min(1, 'حداقل تعداد صفحات ۱ است')
|
||||
.max(20, 'حداکثر تعداد صفحات ۲۰ است')
|
||||
.required('تعداد صفحات الزامی است'),
|
||||
desc: Yup.string().trim(),
|
||||
expectedDate: Yup.string().required('زمان تحویل الزامی است'),
|
||||
attachments: Yup.array().of(Yup.string()),
|
||||
})
|
||||
|
||||
type DesignerRequestFormFieldsProps = FormikProps<DesignerRequestFormValues> & {
|
||||
uploadFile: ReturnType<typeof useSingleUpload>['mutateAsync']
|
||||
isUploading: boolean
|
||||
}
|
||||
|
||||
const DesignerRequestFormFields: FC<DesignerRequestFormFieldsProps> = ({
|
||||
values,
|
||||
errors,
|
||||
touched,
|
||||
isSubmitting,
|
||||
setFieldValue,
|
||||
setFieldTouched,
|
||||
handleChange,
|
||||
handleBlur,
|
||||
uploadFile,
|
||||
isUploading,
|
||||
}) => {
|
||||
const totalPrice = values.count * PRICE_PER_PAGE
|
||||
|
||||
const handleAttachmentChange = async (files: File[]) => {
|
||||
if (files.length === 0) {
|
||||
await setFieldValue('attachments', [])
|
||||
setFieldTouched('attachments', true)
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await uploadFile(files[0])
|
||||
await setFieldValue('attachments', [response.data.url])
|
||||
} catch {
|
||||
await setFieldValue('attachments', [])
|
||||
} finally {
|
||||
setFieldTouched('attachments', true)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Form className='mt-6 space-y-5'>
|
||||
<Input
|
||||
label='عنوان کاتالوگ'
|
||||
name='title'
|
||||
value={values.title}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
error_text={touched.title ? errors.title : undefined}
|
||||
/>
|
||||
|
||||
<div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
|
||||
<DatePicker
|
||||
label='زمان تحویل موردنظر'
|
||||
placeholder='تاریخ را انتخاب کنید'
|
||||
defaulValue={values.expectedDate}
|
||||
onChange={(date) => {
|
||||
setFieldValue('expectedDate', date)
|
||||
setFieldTouched('expectedDate', true)
|
||||
}}
|
||||
error_text={touched.expectedDate ? errors.expectedDate : undefined}
|
||||
/>
|
||||
<Select
|
||||
label='تعداد صفحات'
|
||||
name='count'
|
||||
value={String(values.count)}
|
||||
items={pageCountOptions}
|
||||
onChange={(event) => setFieldValue('count', Number(event.target.value))}
|
||||
onBlur={handleBlur}
|
||||
error_text={touched.count ? errors.count : undefined}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Textarea
|
||||
label='توضیحات'
|
||||
name='desc'
|
||||
value={values.desc}
|
||||
onChange={handleChange}
|
||||
onBlur={handleBlur}
|
||||
className='min-h-[96px]'
|
||||
error_text={touched.desc ? errors.desc : undefined}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div className='mb-2 text-sm'>فایل های ضمیمه</div>
|
||||
<UploadBoxDraggble
|
||||
label='فایل مورد نظر را آپلود کنید'
|
||||
onChange={handleAttachmentChange}
|
||||
isMultiple={false}
|
||||
isFile
|
||||
isLoading={isUploading}
|
||||
/>
|
||||
{touched.attachments && errors.attachments ? (
|
||||
<Error errorText={String(errors.attachments)} />
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className='flex'>
|
||||
<div className='flex-1'></div>
|
||||
<div className='flex-1 flex gap-4'>
|
||||
<div className='w-[250px]'>
|
||||
<Input
|
||||
label='قیمت به ازای هر صفحه'
|
||||
value={`${PRICE_PER_PAGE.toLocaleString('fa-IR')} تومان`}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
label='مبلغ قابل پرداخت برای شما'
|
||||
value={`${totalPrice.toLocaleString('fa-IR')} تومان`}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex justify-end mt-5'>
|
||||
<Button
|
||||
type='submit'
|
||||
className='w-fit px-6'
|
||||
disabled={isSubmitting || isUploading}
|
||||
>
|
||||
ثبت درخواست
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
|
||||
const DesignerRequest: FC = () => {
|
||||
usePageTitle('درخواست طراحی')
|
||||
const [catalogTitle, setCatalogTitle] = useState('')
|
||||
const [, setDeliveryDate] = useState('')
|
||||
const [pageCount, setPageCount] = useState('1')
|
||||
const [description, setDescription] = useState('')
|
||||
const [, setAttachment] = useState<File[]>([])
|
||||
const { mutateAsync: uploadFile, isPending: isUploading } = useSingleUpload()
|
||||
|
||||
const totalPrice = useMemo(() => {
|
||||
return Number(pageCount || 0) * PRICE_PER_PAGE
|
||||
}, [pageCount])
|
||||
|
||||
const handleAttachmentChange = (files: File[]) => {
|
||||
setAttachment(files)
|
||||
const handleSubmit = (values: DesignerRequestFormValues) => {
|
||||
console.log(values)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mt-4 w-full'>
|
||||
<h1 className=''>درخواست طراحی کاتالوگ</h1>
|
||||
<div className='rounded-[32px] bg-white p-4 md:p-6 lg:p-8 mt-6'>
|
||||
|
||||
<div className='mt-6 space-y-5'>
|
||||
<Input
|
||||
label='عنوان کاتالوگ'
|
||||
value={catalogTitle}
|
||||
onChange={(event) => setCatalogTitle(event.target.value)}
|
||||
/>
|
||||
|
||||
<div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
|
||||
<DatePicker
|
||||
label='زمان تحویل موردنظر'
|
||||
placeholder='تاریخ را انتخاب کنید'
|
||||
onChange={(date) => setDeliveryDate(date)}
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{(formikProps) => (
|
||||
<DesignerRequestFormFields
|
||||
{...formikProps}
|
||||
uploadFile={uploadFile}
|
||||
isUploading={isUploading}
|
||||
/>
|
||||
<Select
|
||||
label='تعداد صفحات'
|
||||
value={pageCount}
|
||||
items={pageCountOptions}
|
||||
onChange={(event) => setPageCount(event.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Textarea
|
||||
label='توضیحات'
|
||||
value={description}
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
className='min-h-[96px]'
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div className='mb-2 text-sm'>فایل های ضمیمه</div>
|
||||
<UploadBoxDraggble
|
||||
label='فایل مورد نظر را آپلود کنید'
|
||||
onChange={handleAttachmentChange}
|
||||
isMultiple={false}
|
||||
isFile
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex'>
|
||||
<div className='flex-1'></div>
|
||||
<div className='flex-1 flex gap-4'>
|
||||
<div className='w-[250px]'>
|
||||
<Input
|
||||
label='قیمت به ازای هر صفحه'
|
||||
value={`${PRICE_PER_PAGE.toLocaleString('fa-IR')} تومان`}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
label='مبلغ قابل پرداخت برای شما'
|
||||
value={`${totalPrice.toLocaleString('fa-IR')} تومان`}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex justify-end mt-5'>
|
||||
<Button className='w-fit px-6'>ثبت درخواست</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div >
|
||||
</div >
|
||||
)}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DesignerRequest
|
||||
export default DesignerRequest
|
||||
|
||||
Reference in New Issue
Block a user