fix bug design datepcker

2026-06-07 12:37:41 +03:30
parent c65e8cd303
commit 032050bacc
3 changed files with 153 additions and 255 deletions
@@ -1,205 +1,157 @@
-import { usePageTitle } from '@/hooks/usePageTitle'
-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'
+import Button from "@/components/Button";
+import DatePicker from "@/components/DatePicker";
+import Error from "@/components/Error";
+import Input from "@/components/Input";
+import Select from "@/components/Select";
+import Textarea from "@/components/Textarea";
+import UploadBoxDraggble from "@/components/UploadBoxDraggble";
+import { usePageTitle } from "@/hooks/usePageTitle";
+import { useSingleUpload } from "@/pages/uploader/hooks/useUploaderData";
+import { Form, Formik, type FormikProps } from "formik";
+import { type FC } from "react";
+import * as Yup from "yup";

-const PRICE_PER_PAGE = 1000
+const PRICE_PER_PAGE = 1000;

 const pageCountOptions = Array.from({ length: 20 }, (_, index) => {
-    const value = index + 1
-    return {
-        value: String(value),
-        label: String(value),
-    }
-})
+  const value = index + 1;
+  return {
+    value: String(value),
+    label: String(value),
+  };
+});

 export type DesignerRequestFormValues = {
-    title: string
-    count: number
-    desc: string
-    expectedDate: string
-    attachments: string[]
-}
+  title: string;
+  count: number;
+  desc: string;
+  expectedDate: string;
+  attachments: string[];
+};

 const initialValues: DesignerRequestFormValues = {
-    title: '',
-    count: 1,
-    desc: '',
-    expectedDate: '',
-    attachments: [],
-}
+  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()),
-})
+  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
-}
+  uploadFile: ReturnType<typeof useSingleUpload>["mutateAsync"];
+  isUploading: boolean;
+};

 const DesignerRequestFormFields: FC<DesignerRequestFormFieldsProps> = ({
-    values,
-    errors,
-    touched,
-    isSubmitting,
-    setFieldValue,
-    setFieldTouched,
-    handleChange,
-    handleBlur,
-    uploadFile,
-    isUploading,
+  values,
+  errors,
+  touched,
+  isSubmitting,
+  setFieldValue,
+  setFieldTouched,
+  handleChange,
+  handleBlur,
+  uploadFile,
+  isUploading,
 }) => {
-    const totalPrice = values.count * PRICE_PER_PAGE
+  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)
-        }
+  const handleAttachmentChange = async (files: File[]) => {
+    if (files.length === 0) {
+      await setFieldValue("attachments", []);
+      setFieldTouched("attachments", true);
+      return;
    }

-    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}
-            />
+    try {
+      const response = await uploadFile(files[0]);
+      await setFieldValue("attachments", [response.data.url]);
+    } catch {
+      await setFieldValue("attachments", []);
+    } finally {
+      setFieldTouched("attachments", true);
+    }
+  };

-            <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>
+  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} />

-            <Textarea
-                label='توضیحات'
-                name='desc'
-                value={values.desc}
-                onChange={handleChange}
-                onBlur={handleBlur}
-                className='min-h-[96px]'
-                error_text={touched.desc ? errors.desc : 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>

-            <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>
+      <Textarea label="توضیحات" name="desc" value={values.desc} onChange={handleChange} onBlur={handleBlur} className="min-h-[96px]" error_text={touched.desc ? errors.desc : undefined} />

-            <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>
+        <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 justify-end mt-5'>
-                <Button
-                    type='submit'
-                    className='w-fit px-6'
-                    disabled={isSubmitting || isUploading}
-                >
-                    ثبت درخواست
-                </Button>
-            </div>
-        </Form>
-    )
-}
+      <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 { mutateAsync: uploadFile, isPending: isUploading } = useSingleUpload()
+  usePageTitle("درخواست طراحی");
+  const { mutateAsync: uploadFile, isPending: isUploading } = useSingleUpload();

-    const handleSubmit = (values: DesignerRequestFormValues) => {
-        console.log(values)
-    }
+  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'>
-                <Formik
-                    initialValues={initialValues}
-                    validationSchema={validationSchema}
-                    onSubmit={handleSubmit}
-                >
-                    {(formikProps) => (
-                        <DesignerRequestFormFields
-                            {...formikProps}
-                            uploadFile={uploadFile}
-                            isUploading={isUploading}
-                        />
-                    )}
-                </Formik>
-            </div>
-        </div>
-    )
-}
+  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">
+        <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
+          {(formikProps) => <DesignerRequestFormFields {...formikProps} uploadFile={uploadFile} isUploading={isUploading} />}
+        </Formik>
+      </div>
+    </div>
+  );
+};

-export default DesignerRequest
+export default DesignerRequest;