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

add plate number postal code navgan type and restyle select component

Browse Source
This commit is contained in:
AminGhasempoor
2023-12-12 16:06:26 +03:30
parent d84367768d
commit 7feec0d209
7 changed files with 467 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,33 +1,24 @@
import SelectBox from "@/core/components/SelectBox";
import {GET_PROVINCE_LIST, SEND_LOAN_REQUEST_NAVGAN,} from "@/core/data/apiRoutes";
import {SEND_LOAN_REQUEST_NAVGAN} from "@/core/data/apiRoutes";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {Box, Button, Grid, TextField} from "@mui/material";
import axios from "axios";
import {Box, Button, FormControl, Grid, Stack, TextField} from "@mui/material";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {useEffect, useState} from "react";
import * as Yup from "yup";
import {useRequest, useUser} from "@witel/webapp-builder";
import useProvince from "@/lib/app/hooks/useProvince";
import useCities from "@/lib/app/hooks/useCities";
import PlateNumber from "@/core/components/PlateNumber";
const AddFormComponent = () => {
const t = useTranslations();
const {token} = useUser();
const [provinceList, setProvinceList] = useState([]);
const requestServer = useRequest()
useEffect(() => {
requestServer(GET_PROVINCE_LIST, "get", {auth : true, notification : false}).then(({data}) => {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setProvinceList(formattedData);
}).catch(() => {});
}, []);
const{provinceList, isLoadingProvinceList, errorProvinceList} = useProvince()
const{cityTextField, cityList, setProvinceID}=useCities()
const initialValues = {
phone_number: "",
tel_number: "",
vehicle_type: "",
plate_number: "",
province_id: "",
@@ -35,33 +26,68 @@ const AddFormComponent = () => {
navgan_id: "",
national_code: "",
shenasname_id: "",
national_card_img: null,
shenasname_img: null,
postal_code: "",
navgan_type: "",
plate_part1 : "",
plate_part2 : "",
plate_part3 : "",
plate_part4 : "",
};
const validationSchema = Yup.object().shape({
phone_number: Yup.string().required(
t("LoanRequest.error_message_phone_number")
),
tel_number: Yup.mixed()
.test("max", `${t("LoanRequest.tel_number_max")}`, (value) => value.toString().length === 11)
.required(t("LoanRequest.error_message_tel_number")),
vehicle_type: Yup.string().required(
t("LoanRequest.error_message_vehicle_type")
),
plate_number: Yup.string().required(
t("LoanRequest.error_message_plate_number")
navgan_type: Yup.string().required(
t("LoanRequest.error_message_navgan_type")
),
navgan_id: Yup.string().required(t("LoanRequest.error_message_navgan_id")),
postal_code : Yup.mixed()
.test("max", `${t("LoanRequest.postal_code_max")}`, (value) => value.toString().length === 10)
.required(
t("LoanRequest.error_message_postal_code")
),
plate_part1: Yup.mixed()
.test("max", `${t("LoanRequest.plate_part1_max")}`, (value) => value.toString().length === 2)
.required(
t("LoanRequest.error_message_plate_part1")
),
plate_part2: Yup.mixed()
.required(
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")
),
plate_part4: Yup.mixed()
.test("max", `${t("LoanRequest.plate_part3_max")}`, (value) => value.toString().length === 2)
.required(
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")),
national_code: Yup.string().required(
t("LoanRequest.error_message_national_code")
),
national_code: Yup.mixed()
.test("is-number", `${t("LoanRequest.national_code_number")}`,
(value) => !isNaN(value))
.test("positive", `${t("LoanRequest.national_code_positive")}`, (value) => value >= 0)
.test("max", `${t("LoanRequest.national_code_max")}`, (value) => value.toString().length === 10)
.required(t("LoanRequest.error_message_national_id")),
shenasname_id: Yup.string().required(
t("LoanRequest.error_message_shenasname_id")
),
});
const handleSubmit = async (values, props) => {
const formData = new FormData();
formData.append("phone_number", values.phone_number);
formData.append("tel_number", values.tel_number);
formData.append("navgan_type", values.navgan_type);
formData.append("postal_code", values.postal_code);
formData.append("vehicle_type", values.vehicle_type);
formData.append("plate_number", values.plate_number);
formData.append("province_id", values.province_id);
@@ -69,10 +95,6 @@ const AddFormComponent = () => {
formData.append("navgan_id", values.navgan_id);
formData.append("national_code", values.national_code);
formData.append("shenasname_id", values.shenasname_id);
if (values.shenasname_img != null)
formData.append("shenasname_image", values.shenasname_img);
if (values.national_card_img != null)
formData.append("national_card_image", values.national_card_img);
requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth : true, notification : true}).then().catch(() => {
props.setSubmitting(false)
@@ -82,9 +104,7 @@ const AddFormComponent = () => {
const formik = useFormik({
initialValues, validationSchema, onSubmit: handleSubmit
})
return (
<>
<Grid container spacing={2} sx={{padding : 2}}
>
@@ -95,6 +115,8 @@ const AddFormComponent = () => {
name="national_code"
variant="outlined"
size="small"
type={"number"}
onChange={formik.handleChange}
label={t("LoanRequest.text_field_national_code")}
placeholder={t(
"LoanRequest.text_field_enter_your_national_code"
@@ -109,96 +131,45 @@ const AddFormComponent = () => {
>
<TextField
sx={{width: "100%"}}
name="phone_number"
name="tel_number"
variant="outlined"
type={'number'}
size="small"
label={t("LoanRequest.text_field_phone_number")}
onChange={formik.handleChange}
label={t("LoanRequest.text_field_tel_number")}
placeholder={t(
"LoanRequest.text_field_enter_your_phone_number"
"LoanRequest.text_field_enter_your_tel_number"
)}
fullWidth
onBlur={formik.handleBlur("phone_number")}
error={formik.touched.phone_number && Boolean(formik.errors.phone_number)}
helperText={formik.touched.phone_number && formik.errors.phone_number}
onBlur={formik.handleBlur("tel_number")}
error={formik.touched.tel_number && Boolean(formik.errors.tel_number)}
helperText={formik.touched.tel_number && formik.errors.tel_number}
/>
</Grid>
</Grid>
<Grid container spacing={2} sx={{padding : 2}}>
<Grid item xs={12} sm={6}>
<TextField
sx={{width: "100%"}}
<SelectBox
name="vehicle_type"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_vehicle_type")}
placeholder={t(
"LoanRequest.text_field_enter_your_vehicle_type"
)}
fullWidth
onBlur={formik.handleBlur("vehicle_type")}
size="small"
selectType="vehicle_type"
selectors={[{id : 0, value : 0, name : "اتوبوس"},
{id : 1, value: 1, name : "مینی بوس"}]}
select={formik.values.vehicle_type}
setFieldValue={formik.setFieldValue}
error={formik.touched.vehicle_type && Boolean(formik.errors.vehicle_type)}
helperText={formik.touched.vehicle_type && formik.errors.vehicle_type}
onBlur={formik.handleBlur("vehicle_type")}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
sx={{width: "100%"}}
name="plate_number"
variant="outlined"
size="small"
label={t("LoanRequest.text_field_plate_number")}
placeholder={t(
"LoanRequest.text_field_enter_your_plate_number"
)}
fullWidth
onBlur={formik.handleBlur("plate_number")}
error={formik.touched.plate_number && Boolean(formik.errors.plate_number)}
helperText={formik.touched.plate_number && formik.errors.plate_number}
/>
</Grid>
</Grid>
<Grid container spacing={2} sx={{padding: 2}}>
<Grid item xs={12} sm={6}></Grid>
<Grid item xs={12} sm={6}></Grid>
</Grid>
<Grid container spacing={2} sx={{padding : 2}}>
<Grid item xs={12} sm={6}>
<SelectBox
name="province_id"
label={t("LoanRequest.text_field_province_id")}
size="small"
selectType="province_id"
selectors={provinceList}
select={formik.values.province_id}
setFieldValue={formik.setFieldValue}
setFieldTouched={formik.setFieldTouched}
error={formik.touched.province_id && Boolean(formik.errors.province_id)}
helperText={formik.touched.province_id && formik.errors.province_id}
onBlur={formik.handleBlur("province_id")}
/>
</Grid>
<Grid item xs={12} sm={6}>
<SelectBox
name="city_id"
label={t("LoanRequest.text_field_city_id")}
size="small"
selectType="city_id"
selectors={provinceList}
select={formik.values.city_id}
setFieldValue={formik.setFieldValue}
setFieldTouched={formik.setFieldTouched}
error={formik.touched.city_id && Boolean(formik.errors.city_id)}
helperText={formik.touched.city_id && formik.errors.city_id}
onBlur={formik.handleBlur("city_id")}
/>
</Grid>
</Grid>
<Grid container spacing={2} sx={{padding : 2}}>
<Grid item xs={12} sm={6}>
<TextField
sx={{width: "100%"}}
name="navgan_id"
variant="outlined"
type={'number'}
onChange={formik.handleChange}
size="small"
label={t("LoanRequest.text_field_navgan_id")}
placeholder={t("LoanRequest.text_field_enter_your_navgan_id")}
@@ -208,6 +179,79 @@ const AddFormComponent = () => {
helperText={formik.touched.navgan_id && formik.errors.navgan_id}
/>
</Grid>
</Grid>
<Grid container spacing={2} sx={{padding: 2}}>
<Grid item xs={12} sm={6}>
<TextField
sx={{width: "100%"}}
name="postal_code"
variant="outlined"
type={'number'}
onChange={formik.handleChange}
size="small"
label={t("LoanRequest.text_field_postal_code")}
placeholder={t("LoanRequest.text_field_enter_your_postal_code")}
fullWidth
onBlur={formik.handleBlur("postal_code")}
error={formik.touched.postal_code && Boolean(formik.errors.postal_code)}
helperText={formik.touched.postal_code && formik.errors.postal_code}
/>
</Grid>
<Grid item xs={12} sm={6}>
<SelectBox
name="navgan_type"
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 : "روستایی"}]}
select={formik.values.navgan_type}
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}
onBlur={formik.handleBlur("navgan_type")}
/>
</Grid>
</Grid>
<Grid container spacing={2} sx={{padding : 2}}>
<Grid item xs={12} sm={6}>
<SelectBox
name="province_id"
label={t("LoanRequest.text_field_province_id")}
size="small"
selectType="province_id"
isLoading={isLoadingProvinceList}
errorEcured={errorProvinceList}
selectors={provinceList}
select={formik.values.province_id}
handleChange={(event)=> {formik.setFieldValue('province_id', event.target.value); setProvinceID(event.target.value)
formik.setFieldTouched("city_id", false, false);
formik.setFieldValue("city_id", "")
}}
setFieldTouched={formik.setFieldTouched}
error={formik.touched.province_id && Boolean(formik.errors.province_id)}
helperText={formik.touched.province_id && formik.errors.province_id}
onBlur={formik.handleBlur("province_id")}
/>
</Grid>
<Grid item xs={12} sm={6}>
<SelectBox
name="city_id"
label={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)}
setFieldTouched={formik.setFieldTouched}
error={formik.touched.city_id && Boolean(formik.errors.city_id)}
helperText={formik.touched.city_id && formik.errors.city_id}
onBlur={formik.handleBlur("city_id")}
/>
</Grid>
</Grid>
<Grid container spacing={2} sx={{padding : 2}}>
<Grid item xs={12} sm={6}>
<TextField
sx={{width: "100%"}}
@@ -223,6 +267,13 @@ const AddFormComponent = () => {
helperText={formik.touched.shenasname_id && formik.errors.shenasname_id}
/>
</Grid>
<Grid item xs={12} sm={6}>
</Grid>
</Grid>
<Grid container spacing={2} sx={{padding : 2}}>
<Grid item xs={12}>
<PlateNumber formik={formik} />
</Grid>
</Grid>
<Box
sx={{