From c69aa4be891747ce3d557107152d12512ed416d5 Mon Sep 17 00:00:00 2001
From: AminGhasempoor <aminghasempoor79@gmail.com>
Date: Mon, 18 Dec 2023 15:24:52 +0330
Subject: [PATCH] add validation to date picker

---
 .../navgan/add-request-loan/forms/AddForm.jsx | 67 +++++++++++--------
 src/core/components/MuiDatePicker.jsx         | 25 ++++---
 2 files changed, 52 insertions(+), 40 deletions(-)

diff --git a/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx b/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx
index 8097ee3..cda3e80 100644
--- a/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx
+++ b/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx
@@ -29,12 +29,12 @@ const AddFormComponent = () => {
         shenasname_serial: "",
         postal_code: "",
         navgan_type: "",
-        plate_part1 : "",
-        plate_part2 : "",
-        plate_part3 : "",
-        plate_part4 : "",
-        address : "",
-        date_of_birth : "",
+        plate_part1: "",
+        plate_part2: "",
+        plate_part3: "",
+        plate_part4: "",
+        address: "",
+        date_of_birth: "",
     };
 
     const validationSchema = Yup.object().shape({
@@ -61,22 +61,22 @@ const AddFormComponent = () => {
         plate_part1: Yup.mixed()
             .test("max", `${t("LoanRequest.plate_part1_max")}`, (value) => value.toString().length === 2)
             .required(
-            t("LoanRequest.error_message_plate_part1")
-        ),
+                t("LoanRequest.error_message_plate_part1")
+            ),
         plate_part2: Yup.mixed()
             .required(
-            t("LoanRequest.error_message_plate_part2")
-        ),
+                t("LoanRequest.error_message_plate_part2")
+            ),
         plate_part3: Yup.mixed()
             .test("max", `${t("LoanRequest.plate_part3_max")}`, (value) => value.toString().length === 2)
             .required(
-            t("LoanRequest.error_message_plate_part3")
-        ),
+                t("LoanRequest.error_message_plate_part3")
+            ),
         plate_part4: Yup.mixed()
             .test("max", `${t("LoanRequest.plate_part3_max")}`, (value) => value.toString().length === 2)
             .required(
-            t("LoanRequest.error_message_plate_part3")
-        ),
+                t("LoanRequest.error_message_plate_part3")
+            ),
         navgan_id: Yup.mixed().required(t("LoanRequest.error_message_navgan_id")),
         province_id: Yup.string().required(t("LoanRequest.error_message_province_id")),
         city_id: Yup.string().required(t("LoanRequest.error_message_city_id")),
@@ -89,7 +89,7 @@ const AddFormComponent = () => {
         shenasname_serial: Yup.mixed()
             .test("max", `${t("LoanRequest.shenasname_serial_max")}`, (value) => value.toString().length === 11)
             .required(t("LoanRequest.error_message_shenasname_serial")
-        ),
+            ),
     });
 
 
@@ -108,7 +108,7 @@ const AddFormComponent = () => {
         formData.append("date_of_birth", values.date_of_birth);
         formData.append("shenasname_serial", values.shenasname_serial);
 
-        requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth : true, notification : true}).then().catch(() => {
+        requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth: true, notification: true}).then().catch(() => {
             props.setSubmitting(false)
         })
     };
@@ -118,7 +118,7 @@ const AddFormComponent = () => {
     })
     return (
         <>
-            <Grid container spacing={2} sx={{padding : 2}}
+            <Grid container spacing={2} sx={{padding: 2}}
             >
                 <Grid item xs={12} sm={4}
                 >
@@ -165,7 +165,7 @@ const AddFormComponent = () => {
                     />
                 </Grid>
             </Grid>
-            <Grid container spacing={2} sx={{padding : 2}}>
+            <Grid container spacing={2} sx={{padding: 2}}>
                 <Grid item xs={12} sm={6}>
                     <TextField
                         sx={{width: "100%"}}
@@ -208,9 +208,15 @@ const AddFormComponent = () => {
                         label={t("LoanRequest.text_field_navgan_type")}
                         size="small"
                         selectType="navgan_type"
-                        selectors={[{id : 1, value : 1, name : "مسافری"},{id : 2, value : 2, name : "عمومی"},{id : 3, value : 3, name : "روستایی"}]}
+                        selectors={[{id: 1, value: 1, name: "مسافری"}, {id: 2, value: 2, name: "عمومی"}, {
+                            id: 3,
+                            value: 3,
+                            name: "روستایی"
+                        }]}
                         select={formik.values.navgan_type}
-                        handleChange={(event)=> {formik.setFieldValue('navgan_type', event.target.value)}}
+                        handleChange={(event) => {
+                            formik.setFieldValue('navgan_type', event.target.value)
+                        }}
                         setFieldTouched={formik.setFieldTouched}
                         error={formik.touched.navgan_type && Boolean(formik.errors.navgan_type)}
                         helperText={formik.touched.navgan_type && formik.errors.navgan_type}
@@ -234,7 +240,7 @@ const AddFormComponent = () => {
                     />
                 </Grid>
             </Grid>
-            <Grid container spacing={2} sx={{padding : 2}}>
+            <Grid container spacing={2} sx={{padding: 2}}>
                 <Grid item xs={12} sm={6}>
                     <SelectBox
                         name="province_id"
@@ -245,7 +251,9 @@ const AddFormComponent = () => {
                         errorEcured={errorProvinceList}
                         selectors={provinceList}
                         select={formik.values.province_id}
-                        handleChange={(event)=> {formik.setFieldValue('province_id', event.target.value); setProvinceID(event.target.value)
+                        handleChange={(event) => {
+                            formik.setFieldValue('province_id', event.target.value);
+                            setProvinceID(event.target.value)
                             formik.setFieldTouched("city_id", false, false);
                             formik.setFieldValue("city_id", "")
                         }}
@@ -258,13 +266,13 @@ const AddFormComponent = () => {
                 <Grid item xs={12} sm={6}>
                     <SelectBox
                         name="city_id"
-                        label={cityList.length === 0 ?  `${t("LoanRequest.cityList_empty")}`: cityTextField}
+                        label={cityList.length === 0 ? `${t("LoanRequest.cityList_empty")}` : cityTextField}
                         size="small"
                         selectType="city_id"
                         disabled={cityList.length === 0}
                         selectors={cityList}
                         select={formik.values.city_id}
-                        handleChange={(event)=>formik.setFieldValue('city_id', event.target.value)}
+                        handleChange={(event) => formik.setFieldValue('city_id', event.target.value)}
                         setFieldTouched={formik.setFieldTouched}
                         error={formik.touched.city_id && Boolean(formik.errors.city_id)}
                         helperText={formik.touched.city_id && formik.errors.city_id}
@@ -272,17 +280,17 @@ const AddFormComponent = () => {
                     />
                 </Grid>
             </Grid>
-            <Grid container spacing={2} sx={{padding : 2}}>
+            <Grid container spacing={2} sx={{padding: 2}}>
                 <Grid item xs={12} sm={6}>
                     <SelectBox
                         name="vehicle_type"
                         label={t("LoanRequest.text_field_vehicle_type")}
                         size="small"
                         selectType="vehicle_type"
-                        selectors={[{id : 0, value : 0, name : "اتوبوس"},
-                            {id : 1, value: 1, name : "مینی بوس"}]}
+                        selectors={[{id: 0, value: 0, name: "اتوبوس"},
+                            {id: 1, value: 1, name: "مینی بوس"}]}
                         select={formik.values.vehicle_type}
-                        handleChange={(event)=>formik.setFieldValue('vehicle_type', event.target.value)}
+                        handleChange={(event) => formik.setFieldValue('vehicle_type', event.target.value)}
                         error={formik.touched.vehicle_type && Boolean(formik.errors.vehicle_type)}
                         helperText={formik.touched.vehicle_type && formik.errors.vehicle_type}
                         onBlur={formik.handleBlur("vehicle_type")}
@@ -292,7 +300,7 @@ const AddFormComponent = () => {
                     <PlateNumber formik={formik}/>
                 </Grid>
             </Grid>
-            <Grid container spacing={2} sx={{padding : 2}}>
+            <Grid container spacing={2} sx={{padding: 2}}>
                 <Grid item xs={12}>
                     <TextField
                         multiline
@@ -322,6 +330,7 @@ const AddFormComponent = () => {
             >
                 <Button
                     fullWidth
+                    onClick={formik.handleSubmit}
                     type="submit"
                     variant="contained"
                     size="large"
diff --git a/src/core/components/MuiDatePicker.jsx b/src/core/components/MuiDatePicker.jsx
index 5da1afc..cad64b9 100644
--- a/src/core/components/MuiDatePicker.jsx
+++ b/src/core/components/MuiDatePicker.jsx
@@ -23,6 +23,7 @@ function ButtonField(props) {
         <Button
             sx={{width: "100%", padding: 0.8}}
             variant="outlined"
+            color={props.slotProps.formik.touched.date_of_birth && Boolean(props.slotProps.formik.errors.date_of_birth) ? "error" : "primary"}
             id={id}
             disabled={disabled}
             ref={ref}
@@ -43,6 +44,7 @@ function ButtonDatePicker(props) {
             slots={{field: ButtonField, ...props.slots}}
             disableFuture
             slotProps={{
+                formik: props.formik,
                 field: {setOpen},
                 textField: {
                     helperText: props.formik.errors.date_of_birth ? `${t("birthday_error")}` : null
@@ -58,15 +60,15 @@ function ButtonDatePicker(props) {
 
 export default function PickerWithButtonField({formik, error, helperText}) {
     const [value, setValue] = useState(null);
-
+    const er = formik.errors
     return (
-        <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
-            <FormControl
-                variant={"outlined"}
-                fullWidth
-                size="small"
-                error={error}
-            >
+        <FormControl
+            variant={"outlined"}
+            fullWidth
+            size="small"
+            error={true}
+        >
+            <LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
                 <ButtonDatePicker
                     label={value == null ? null : moment(value)
                         .locale("fa")
@@ -74,12 +76,13 @@ export default function PickerWithButtonField({formik, error, helperText}) {
                     value={value}
                     formik={formik}
                     onChange={(newValue) => {
+                        formik.setFieldValue("date_of_birth", newValue)
                         setValue(newValue)
                     }}
 
                 />
-                <FormHelperText>{helperText}</FormHelperText>
-            </FormControl>
-        </LocalizationProvider>
+            </LocalizationProvider>
+            <FormHelperText>{formik.touched.date_of_birth && formik.errors.date_of_birth}</FormHelperText>
+        </FormControl>
     );
 }
\ No newline at end of file