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

replace field with textField and add error validation to it

Browse Source
This commit is contained in:
AminGhasempoor
2023-12-11 15:39:43 +03:30
parent 6ad675c3df
commit 35bf4f7a7d
2 changed files with 213 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/locales/fa/app.json
View File

@@ -136,6 +136,7 @@
"error_message_province_id": "لطفا استان خود را وارد کنید!", "error_message_province_id": "لطفا استان خود را وارد کنید!",
"error_message_national_id": "لطفا کد ملی خود را وارد کنید!", "error_message_national_id": "لطفا کد ملی خود را وارد کنید!",
"error_message_shenasname_id": "لطفا شماره شناسنامه خود را وارد کنید!", "error_message_shenasname_id": "لطفا شماره شناسنامه خود را وارد کنید!",
"error_message_national_code": "لطفا کد ملی خود را وارد کنید!",
"text_field_phone_number": "شماره تلفن", "text_field_phone_number": "شماره تلفن",
"text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید", "text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید",
"text_field_name": "نام", "text_field_name": "نام",
@@ -145,6 +146,7 @@
"text_field_province_id": "استان", "text_field_province_id": "استان",
"text_field_loading_provinces_list": "درحال دریافت استان ها", "text_field_loading_provinces_list": "درحال دریافت استان ها",
"text_field_error_fetching_provinces": "خطا در دریافت استان ها", "text_field_error_fetching_provinces": "خطا در دریافت استان ها",
"text_field_enter_your_national_code": "کد ملی خود را وارد کنید",
"text_field_enter_your_province_id": "استان خود را وارد کنید", "text_field_enter_your_province_id": "استان خود را وارد کنید",
"text_field_navgan_id": "شماره ناوگان", "text_field_navgan_id": "شماره ناوگان",
"text_field_enter_your_navgan_id": "شماره ناوگان خود را وارد کنید", "text_field_enter_your_navgan_id": "شماره ناوگان خود را وارد کنید",

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

@@ -1,22 +1,17 @@
import SelectBox from "@/core/components/SelectBox"; import SelectBox from "@/core/components/SelectBox";
import StyledForm from "@/core/components/StyledForm";
import UploadSystem from "@/core/components/UploadSystem";
import {GET_PROVINCE_LIST, SEND_LOAN_REQUEST_NAVGAN,} from "@/core/data/apiRoutes"; import {GET_PROVINCE_LIST, SEND_LOAN_REQUEST_NAVGAN,} from "@/core/data/apiRoutes";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn"; import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {Box, Button, Stack, TextField} from "@mui/material"; import {Box, Button, Stack, TextField} from "@mui/material";
import axios from "axios"; import axios from "axios";
import {Field, Formik} from "formik"; import {useFormik} from "formik";
import {useTranslations} from "next-intl"; import {useTranslations} from "next-intl";
import {useEffect, useState} from "react"; import {useEffect, useState} from "react";
import * as Yup from "yup"; import * as Yup from "yup";
import {useDirection, useUser} from "@witel/webapp-builder"; import {useUser} from "@witel/webapp-builder";
const AddFormComponent = () => { const AddFormComponent = () => {
const t = useTranslations(); const t = useTranslations();
const {directionApp} = useDirection();
const {token} = useUser(); const {token} = useUser();
// get province list
const [provinceList, setProvinceList] = useState([]); const [provinceList, setProvinceList] = useState([]);
useEffect(() => { useEffect(() => {
axios axios
@@ -31,50 +26,11 @@ const AddFormComponent = () => {
})); }));
setProvinceList(formattedData); setProvinceList(formattedData);
}) })
.catch((error) => { .catch((error) => {});
});
}, []); }, []);
// end get province list
// upload files
const [selectedImageShenasname, setSelectedImageShenasname] = useState(
"/images/upload-image.svg"
);
const [fileTypeShenasname, setFileTypeShenasname] = useState(null);
const [fileNameShenasname, setFileNameShenasname] = useState(null);
const [selectedImageNationalCard, setSelectedImageNationalCard] = useState(
"/images/upload-image.svg"
);
const [fileTypeNationalCard, setFileTypeNationalCard] = useState(null);
const [fileNameNationalCard, setFileNameNationalCard] = useState(null);
const handleUploadChangeShenasname = (event, setFieldValue) => {
const uploadedFile = event.target?.files?.[0];
if (uploadedFile) {
const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name;
setSelectedImageShenasname(URL.createObjectURL(uploadedFile));
setFileTypeShenasname(fileType);
setFileNameShenasname(fileName);
setFieldValue("shenasname_img", uploadedFile);
}
};
const handleUploadChangeNationalCard = (event, setFieldValue) => {
const uploadedFile = event.target?.files?.[0];
const fileType = event.target.files[0].type;
const fileName = event.target.files[0].name;
if (uploadedFile) {
setSelectedImageNationalCard(URL.createObjectURL(uploadedFile));
setFileTypeNationalCard(fileType);
setFileNameNationalCard(fileName);
setFieldValue("national_card_img", uploadedFile);
}
};
// end upload files
// initial values
const initialValues = { const initialValues = {
name: "",
phone_number: "", phone_number: "",
vehicle_type: "", vehicle_type: "",
plate_number: "", plate_number: "",
@@ -85,11 +41,8 @@ const AddFormComponent = () => {
national_card_img: null, national_card_img: null,
shenasname_img: null, shenasname_img: null,
}; };
// end initial values
// validation
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
name: Yup.string().required(t("LoanRequest.error_message_name")),
phone_number: Yup.string().required( phone_number: Yup.string().required(
t("LoanRequest.error_message_phone_number") t("LoanRequest.error_message_phone_number")
), ),
@@ -108,12 +61,8 @@ const AddFormComponent = () => {
t("LoanRequest.error_message_shenasname_id") t("LoanRequest.error_message_shenasname_id")
), ),
}); });
// end validation
// submit
const handleSubmit = async (values, props) => { const handleSubmit = async (values, props) => {
const formData = new FormData(); const formData = new FormData();
formData.append("name", values.name);
formData.append("phone_number", values.phone_number); formData.append("phone_number", values.phone_number);
formData.append("vehicle_type", values.vehicle_type); formData.append("vehicle_type", values.vehicle_type);
formData.append("plate_number", values.plate_number); formData.append("plate_number", values.plate_number);
@@ -139,283 +88,220 @@ const AddFormComponent = () => {
props.setSubmitting(false); props.setSubmitting(false);
}); });
}; };
// end submit
const formik = useFormik({
initialValues, validationSchema, onSubmit: handleSubmit
})
return ( return (
<Formik
initialValues={initialValues} <>
onSubmit={handleSubmit} <Box
validationSchema={validationSchema} sx={{
> display: "flex",
{(props) => ( flexDirection: {xs: "column", sm: "row"},
<Stack alignItems: "start",
spacing={2} justifyContent: "center",
width: "100%",
}}
>
<Box
sx={{ sx={{
p: 1, mx: {xs: 0, sm: 2},
my: 2,
width: "100%", width: "100%",
}} }}
> >
<StyledForm sx={{width: "100%"}}> <TextField
<Box sx={{width: "100%"}}
sx={{ name="national_code"
display: "flex", variant="outlined"
flexDirection: {xs: "column", sm: "row"}, size="small"
alignItems: "start", label={t("LoanRequest.text_field_national_code")}
justifyContent: "center", placeholder={t(
width: "100%", "LoanRequest.text_field_enter_your_national_code"
}} )}
> onBlur={formik.handleBlur("national_code")}
<Box error={formik.touched.national_code && Boolean(formik.errors.national_code)}
sx={{ helperText={formik.touched.national_code && formik.errors.national_code}
mx: {xs: 0, sm: 2}, fullWidth
my: 2, />
width: "100%", </Box>
}} <Box
> sx={{
<Field mx: {xs: 0, sm: 2},
as={TextField} my: 2,
sx={{width: "100%"}} width: "100%",
name="national_code" }}
variant="outlined" >
size="small" <TextField
label={t("LoanRequest.text_field_national_code")} sx={{width: "100%"}}
placeholder={t( name="phone_number"
"LoanRequest.text_field_enter_your_national_code" variant="outlined"
)} size="small"
type={"text"} label={t("LoanRequest.text_field_phone_number")}
error={ placeholder={t(
!!(props.touched.national_code && props.errors.national_code) "LoanRequest.text_field_enter_your_phone_number"
} )}
fullWidth fullWidth
helperText={ onBlur={formik.handleBlur("phone_number")}
props.touched.national_code error={formik.touched.phone_number && Boolean(formik.errors.phone_number)}
? props.errors.national_code helperText={formik.touched.phone_number && formik.errors.phone_number}
: null />
} </Box>
/> </Box>
</Box> <Box
<Box sx={{
sx={{ display: "flex",
mx: {xs: 0, sm: 2}, flexDirection: {xs: "column", sm: "row"},
my: 2, alignItems: "start",
width: "100%", justifyContent: "center",
}} width: "100%",
> }}
<Field >
as={TextField} <Box
sx={{width: "100%"}} sx={{
name="phone_number" mx: {xs: 0, sm: 2},
variant="outlined" my: 2,
size="small" width: "100%",
label={t("LoanRequest.text_field_phone_number")} }}
placeholder={t( >
"LoanRequest.text_field_enter_your_phone_number" <TextField
)} sx={{width: "100%"}}
type={"text"} name="vehicle_type"
error={ variant="outlined"
props.touched.phone_number && props.errors.phone_number size="small"
? true label={t("LoanRequest.text_field_vehicle_type")}
: false placeholder={t(
} "LoanRequest.text_field_enter_your_vehicle_type"
fullWidth )}
helperText={ fullWidth
props.touched.phone_number onBlur={formik.handleBlur("vehicle_type")}
? props.errors.phone_number error={formik.touched.vehicle_type && Boolean(formik.errors.vehicle_type)}
: null helperText={formik.touched.vehicle_type && formik.errors.vehicle_type}
} />
/> </Box>
</Box> <Box
</Box> sx={{
<Box mx: {xs: 0, sm: 2},
sx={{ my: 2,
display: "flex", width: "100%",
flexDirection: {xs: "column", sm: "row"}, }}
alignItems: "start", >
justifyContent: "center", <TextField
width: "100%", sx={{width: "100%"}}
}} name="plate_number"
> variant="outlined"
<Box size="small"
sx={{ label={t("LoanRequest.text_field_plate_number")}
mx: {xs: 0, sm: 2}, placeholder={t(
my: 2, "LoanRequest.text_field_enter_your_plate_number"
width: "100%", )}
}} fullWidth
> onBlur={formik.handleBlur("plate_number")}
<Field error={formik.touched.plate_number && Boolean(formik.errors.plate_number)}
as={TextField} helperText={formik.touched.plate_number && formik.errors.plate_number}
sx={{width: "100%"}} />
name="vehicle_type" </Box>
variant="outlined" <Box
size="small" sx={{
label={t("LoanRequest.text_field_vehicle_type")} mx: {xs: 0, sm: 2},
placeholder={t( my: 2,
"LoanRequest.text_field_enter_your_vehicle_type" width: "100%",
)} }}
type={"text"} >
error={ <SelectBox
props.touched.vehicle_type && props.errors.vehicle_type name="province_id"
? true label={t("LoanRequest.text_field_province_id")} // t("LoanRequest.text_field_enter_your_province")
: false size="small"
} selectType="province_id"
fullWidth selectors={provinceList}
helperText={ select={formik.values.province_id}
props.touched.vehicle_type setFieldValue={formik.setFieldValue}
? props.errors.vehicle_type setFieldTouched={formik.setFieldTouched}
: null error={
} !!(formik.touched.gender && formik.errors.province_id)
/> }
</Box> helperText={
<Box formik.touched.gender ? formik.errors.province_id : null
sx={{ }
mx: {xs: 0, sm: 2},
my: 2, />
width: "100%", </Box>
}} </Box>
> <Box
<Field sx={{
as={TextField} display: "flex",
sx={{width: "100%"}} flexDirection: {xs: "column", sm: "row"},
name="plate_number" alignItems: "start",
variant="outlined" justifyContent: "center",
size="small" width: "100%",
label={t("LoanRequest.text_field_plate_number")} }}
placeholder={t( >
"LoanRequest.text_field_enter_your_plate_number" <Box
)} sx={{
type={"text"} mx: {xs: 0, sm: 2},
error={ my: 2,
props.touched.plate_number && props.errors.plate_number width: "100%",
? true }}
: false >
} <TextField
fullWidth sx={{width: "100%"}}
helperText={ name="navgan_id"
props.touched.plate_number variant="outlined"
? props.errors.plate_number size="small"
: null label={t("LoanRequest.text_field_navgan_id")}
} placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
/> fullWidth
</Box> onBlur={formik.handleBlur("navgan_id")}
<Box error={formik.touched.navgan_id && Boolean(formik.errors.navgan_id)}
sx={{ helperText={formik.touched.navgan_id && formik.errors.navgan_id}
mx: {xs: 0, sm: 2}, />
my: 2, </Box>
width: "100%", <Box
}} sx={{
> mx: {xs: 0, sm: 2},
<Field my: 2,
name="province_id" width: "100%",
label={t("LoanRequest.text_field_province_id")} // t("LoanRequest.text_field_enter_your_province") }}
size="small" >
selectType="province_id" <TextField
component={SelectBox} sx={{width: "100%"}}
selectors={provinceList} name="shenasname_id"
select={props.values.province_id} variant="outlined"
setFieldValue={props.setFieldValue} size="small"
setFieldTouched={props.setFieldTouched} label={t("LoanRequest.text_field_shenasname_id")}
error={ placeholder={t(
props.touched.gender && props.errors.province_id ? true : false "LoanRequest.text_field_enter_your_shenasname_id")}
} fullWidth
helperText={ onBlur={formik.handleBlur("shenasname_id")}
props.touched.gender ? props.errors.province_id : null error={formik.touched.shenasname_id && Boolean(formik.errors.shenasname_id)}
} helperText={formik.touched.shenasname_id && formik.errors.shenasname_id}
/> />
</Box> </Box>
</Box> </Box>
<Box <Box
sx={{ sx={{
display: "flex", display: "flex",
flexDirection: {xs: "column", sm: "row"}, flexDirection: {xs: "column", sm: "row"},
alignItems: "start", alignItems: "center",
justifyContent: "center", mx: "auto",
width: "100%", width: {xs: "100%", sm: "30%", md: "25%"},
}} }}
> >
<Box <Button
sx={{ fullWidth
mx: {xs: 0, sm: 2}, type="submit"
my: 2, variant="contained"
width: "100%", size="large"
}} sx={{mt: 2}}
> endIcon={<DataSaverOnIcon/>}
<Field disabled={formik.isSubmitting}
as={TextField} >
sx={{width: "100%"}} {t("LoanRequest.button_submit")}
name="navgan_id" </Button>
variant="outlined" </Box>
size="small" </>
label={t("LoanRequest.text_field_navgan_id")}
placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
type={"text"}
error={
props.touched.navgan_id && props.errors.navgan_id
? true
: false
}
fullWidth
helperText={
props.touched.navgan_id ? props.errors.navgan_id : null
}
/>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
<Field
as={TextField}
sx={{width: "100%"}}
name="shenasname_id"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_shenasname_id")}
placeholder={t(
"LoanRequest.text_field_enter_your_shenasname_id"
)}
type={"text"}
error={
props.touched.shenasname_id && props.errors.shenasname_id
? true
: false
}
fullWidth
helperText={
props.touched.shenasname_id
? props.errors.shenasname_id
: null
}
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "center",
mx: "auto",
width: {xs: "100%", sm: "30%", md: "25%"},
}}
>
<Button
fullWidth
type="submit"
variant="contained"
size="large"
sx={{mt: 2}}
endIcon={<DataSaverOnIcon/>}
disabled={props.isSubmitting ? true : false}
>
{t("LoanRequest.button_submit")}
</Button>
</Box>
</StyledForm>
</Stack>
)}
</Formik>
); );
}; };