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
@@ -5,6 +5,7 @@ import persian_fa from 'react-date-object/locales/persian_fa';
 import DateObject from 'react-date-object';
 import { clx } from '../helpers/utils';
 import { Calendar } from 'iconsax-react';
+import Error from './Error';

 type Props = {
    onChange: (date: string) => void;
@@ -88,10 +89,8 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
                <div className='text-xs'>
                    {props.label}
                </div>}
-            <div className={clx(
-                'relative ',
-                props.label && 'mt-1.5'
-            )}>
+            <div className={clx(props.label && 'mt-1.5')}>
+                <div className="relative">
                    <DatePicker
                        placeholder={props.placeholder}
                        value={value}
@@ -101,13 +100,11 @@ const DatePickerComponent: FC<Props> = (props: Props) => {
                        calendarPosition="bottom-right"
                        className={`rmdp-mobile ${props.className}`}
                    />
-                {props.error_text && props.error_text !== '' && (
-                    <div className="text-xs text-right text-red-600 mt-2 mr-2 font-medium">
-                        {props.error_text}
+                    <Calendar size={18} color='black' className='pointer-events-none absolute top-0 bottom-0 left-2 my-auto' />
                </div>
+                {props.error_text && props.error_text !== '' && (
+                    <Error errorText={props.error_text} />
                )}
-
-                <Calendar size={18} color='black' className='absolute top-0 bottom-0 my-auto left-2' />
            </div>
        </div>
    );
@@ -1,57 +1,54 @@
-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
+  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: '',
+  title: "",
  count: 1,
-    desc: '',
-    expectedDate: '',
+  desc: "",
+  expectedDate: "",
  attachments: [],
-}
+};

 const validationSchema = Yup.object({
-    title: Yup.string().trim().required('عنوان کاتالوگ الزامی است'),
-    count: Yup.number()
-        .min(1, 'حداقل تعداد صفحات ۱ است')
-        .max(20, 'حداکثر تعداد صفحات ۲۰ است')
-        .required('تعداد صفحات الزامی است'),
+  title: Yup.string().trim().required("عنوان کاتالوگ الزامی است"),
+  count: Yup.number().min(1, "حداقل تعداد صفحات ۱ است").max(20, "حداکثر تعداد صفحات ۲۰ است").required("تعداد صفحات الزامی است"),
  desc: Yup.string().trim(),
-    expectedDate: Yup.string().required('زمان تحویل الزامی است'),
+  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,
@@ -65,141 +62,96 @@ const DesignerRequestFormFields: FC<DesignerRequestFormFieldsProps> = ({
  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
+      await setFieldValue("attachments", []);
+      setFieldTouched("attachments", true);
+      return;
    }

    try {
-            const response = await uploadFile(files[0])
-            await setFieldValue('attachments', [response.data.url])
+      const response = await uploadFile(files[0]);
+      await setFieldValue("attachments", [response.data.url]);
    } catch {
-            await setFieldValue('attachments', [])
+      await setFieldValue("attachments", []);
    } finally {
-            setFieldTouched('attachments', true)
-        }
+      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}
-            />
+    <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'>
+      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <DatePicker
-                    label='زمان تحویل موردنظر'
-                    placeholder='تاریخ را انتخاب کنید'
+          label="زمان تحویل موردنظر"
+          placeholder="تاریخ را انتخاب کنید"
          defaulValue={values.expectedDate}
          onChange={(date) => {
-                        setFieldValue('expectedDate', date)
-                        setFieldTouched('expectedDate', true)
+            setFieldValue("expectedDate", date);
+            setFieldTouched("expectedDate", true);
          }}
          error_text={touched.expectedDate ? errors.expectedDate : undefined}
        />
        <Select
-                    label='تعداد صفحات'
-                    name='count'
+          label="تعداد صفحات"
+          name="count"
          value={String(values.count)}
          items={pageCountOptions}
-                    onChange={(event) => setFieldValue('count', Number(event.target.value))}
+          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}
-            />
+      <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 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 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
-                    />
+          <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}
-                >
+      <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)
-    }
+    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}
-                        />
-                    )}
+    <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;
@@ -12,14 +12,7 @@ import { useSharedStore } from "./store/sharedStore";

 const SideBar: FC = () => {
  const { t } = useTranslation("global");
-  const {
-    openSidebar,
-    setOpenSidebar,
-    hasSubMenu,
-    setSubMenuName,
-    setSubtMenu,
-    subMenuName,
-  } = useSharedStore();
+  const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore();
  const location = useLocation();

  const isActive = (path: string) => {
@@ -44,12 +37,7 @@ const SideBar: FC = () => {

  return (
    <>
-      {openSidebar && (
-        <div
-          className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 bg-opacity-50 z-10"
-          onClick={() => setOpenSidebar(false)}
-        />
-      )}
+      {openSidebar && <div className="fixed top-0 left-0 right-0 bottom-0 bg-black/50 bg-opacity-50 z-10" onClick={() => setOpenSidebar(false)} />}
      <div
        className={clx(
          "fixed xl:flex translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100  xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12",
@@ -57,33 +45,14 @@ const SideBar: FC = () => {
          hasSubMenu && "w-24 rounded-tl-none! rounded-bl-none!",
        )}
      >
-        <div className="flex justify-center">
-          {!hasSubMenu ? (
-            <img src={LogoImage} className="w-[140px]" />
-          ) : (
-            <img src={LogoSmall} className="w-7" />
-          )}
-        </div>
+        <div className="flex justify-center">{!hasSubMenu ? <img src={LogoImage} className="w-[140px]" /> : <img src={LogoSmall} className="w-7" />}</div>

        <div className="flex-1 flex flex-col h-full overflow-y-auto no-scrollbar">
-          <div
-            className={clx(
-              "mt-10 px-12 text-header text-sm font-normal",
-              hasSubMenu && "px-2 text-center",
-            )}
-          >
-            {t("sidebar.menu")}
-          </div>
+          <div className={clx("mt-10 px-12 text-header text-sm font-normal", hasSubMenu && "px-2 text-center")}>{t("sidebar.menu")}</div>

          <div className="text-xs text-[#8C90A3]">
            <SideBarItem
-              icon={
-                <Home2
-                  variant={isActive(Paths.home) ? "Bold" : "Outline"}
-                  color={isActive(Paths.home) ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Home2 variant={isActive(Paths.home) ? "Bold" : "Outline"} color={isActive(Paths.home) ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={t("sidebar.home_page")}
              isActive={isActive(Paths.home)}
              link={Paths.home}
@@ -91,13 +60,7 @@ const SideBar: FC = () => {
            />

            <SideBarItem
-              icon={
-                <DocumentText
-                  variant={isActive(Paths.catalog.list) ? "Bold" : "Outline"}
-                  color={isActive(Paths.catalog.list) ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<DocumentText variant={isActive(Paths.catalog.list) ? "Bold" : "Outline"} color={isActive(Paths.catalog.list) ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={t("sidebar.catalog")}
              isActive={isActive(Paths.catalog.list)}
              link={Paths.catalog.list}
@@ -105,15 +68,7 @@ const SideBar: FC = () => {
            />

            <SideBarItem
-              icon={
-                <Brush2
-                  variant={
-                    isActive(Paths.designer.request) ? "Bold" : "Outline"
-                  }
-                  color={isActive(Paths.designer.request) ? "black" : "#8C90A3"}
-                  size={iconSizeSideBar}
-                />
-              }
+              icon={<Brush2 variant={isActive(Paths.designer.request) ? "Bold" : "Outline"} color={isActive(Paths.designer.request) ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
              title={t("sidebar.request_design")}
              isActive={isActive(Paths.designer.request)}
              link={Paths.designer.request}
@@ -125,13 +80,7 @@ const SideBar: FC = () => {
            <BuyCatalog />
            <div className="text-xs text-[#8C90A3] mt-5">
              <SideBarItem
-                icon={
-                  <Logout
-                    variant={isActive("logout") ? "Bold" : "Outline"}
-                    color={isActive("logout") ? "black" : "#8C90A3"}
-                    size={iconSizeSideBar}
-                  />
-                }
+                icon={<Logout variant={isActive("logout") ? "Bold" : "Outline"} color={isActive("logout") ? "black" : "#8C90A3"} size={iconSizeSideBar} />}
                title="خروج"
                isActive={isActive("logout")}
                link={`#`}