loan/user-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add validation to date picker

Browse Source
This commit is contained in:
AminGhasempoor
2023-12-18 15:24:52 +03:30
parent 4b31247ca1
commit c69aa4be89
2 changed files with 52 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx
View File

@@ -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"

25
src/core/components/MuiDatePicker.jsx
View File

@@ -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>
);
}