use request and grid instead of box

This commit is contained in:
2023-12-12 09:16:13 +03:30
parent 35bf4f7a7d
commit 5946daeb2b
3 changed files with 69 additions and 136 deletions

View File

@@ -1,32 +1,28 @@
import SelectBox from "@/core/components/SelectBox";
import {GET_PROVINCE_LIST, SEND_LOAN_REQUEST_NAVGAN,} from "@/core/data/apiRoutes";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {Box, Button, Stack, TextField} from "@mui/material";
import {Box, Button, Grid, TextField} from "@mui/material";
import axios from "axios";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import {useEffect, useState} from "react";
import * as Yup from "yup";
import {useUser} from "@witel/webapp-builder";
import {useRequest, useUser} from "@witel/webapp-builder";
const AddFormComponent = () => {
const t = useTranslations();
const {token} = useUser();
const [provinceList, setProvinceList] = useState([]);
const requestServer = useRequest()
useEffect(() => {
axios
.get(GET_PROVINCE_LIST, {
headers: {Authorization: `Bearer ${token}`},
})
.then(({data}) => {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setProvinceList(formattedData);
})
.catch((error) => {});
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(() => {});
}, []);
@@ -35,6 +31,7 @@ const AddFormComponent = () => {
vehicle_type: "",
plate_number: "",
province_id: "",
city_id: "",
navgan_id: "",
national_code: "",
shenasname_id: "",
@@ -54,6 +51,7 @@ const AddFormComponent = () => {
),
navgan_id: Yup.string().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")
),
@@ -67,6 +65,7 @@ const AddFormComponent = () => {
formData.append("vehicle_type", values.vehicle_type);
formData.append("plate_number", values.plate_number);
formData.append("province_id", values.province_id);
formData.append("city_id", values.city_id);
formData.append("navgan_id", values.navgan_id);
formData.append("national_code", values.national_code);
formData.append("shenasname_id", values.shenasname_id);
@@ -75,18 +74,9 @@ const AddFormComponent = () => {
if (values.national_card_img != null)
formData.append("national_card_image", values.national_card_img);
await axios
.post(SEND_LOAN_REQUEST_NAVGAN, formData, {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "multipart/form-data",
},
})
.then(function (response) {
})
.catch(function (error) {
props.setSubmitting(false);
});
requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth : true, notification : true}).then().catch(() => {
props.setSubmitting(false)
})
};
const formik = useFormik({
@@ -96,21 +86,9 @@ const AddFormComponent = () => {
return (
<>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "start",
justifyContent: "center",
width: "100%",
}}
<Grid container spacing={2} sx={{padding : 2}}
>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
<Grid item xs={12} sm={6}
>
<TextField
sx={{width: "100%"}}
@@ -126,13 +104,8 @@ const AddFormComponent = () => {
helperText={formik.touched.national_code && formik.errors.national_code}
fullWidth
/>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
</Grid>
<Grid item xs={12} sm={6}
>
<TextField
sx={{width: "100%"}}
@@ -148,24 +121,10 @@ const AddFormComponent = () => {
error={formik.touched.phone_number && Boolean(formik.errors.phone_number)}
helperText={formik.touched.phone_number && formik.errors.phone_number}
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "start",
justifyContent: "center",
width: "100%",
}}
>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
</Grid>
</Grid>
<Grid container spacing={2} sx={{padding : 2}}>
<Grid item xs={12} sm={6}>
<TextField
sx={{width: "100%"}}
name="vehicle_type"
@@ -180,14 +139,8 @@ const AddFormComponent = () => {
error={formik.touched.vehicle_type && Boolean(formik.errors.vehicle_type)}
helperText={formik.touched.vehicle_type && formik.errors.vehicle_type}
/>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
sx={{width: "100%"}}
name="plate_number"
@@ -202,49 +155,46 @@ const AddFormComponent = () => {
error={formik.touched.plate_number && Boolean(formik.errors.plate_number)}
helperText={formik.touched.plate_number && formik.errors.plate_number}
/>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
</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")} // t("LoanRequest.text_field_enter_your_province")
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.gender && formik.errors.province_id)
}
helperText={
formik.touched.gender ? formik.errors.province_id : null
}
error={formik.touched.province_id && Boolean(formik.errors.province_id)}
helperText={formik.touched.province_id && formik.errors.province_id}
onBlur={formik.handleBlur("province_id")}
/>
</Box>
</Box>
<Box
sx={{
display: "flex",
flexDirection: {xs: "column", sm: "row"},
alignItems: "start",
justifyContent: "center",
width: "100%",
}}
>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
</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"
@@ -257,14 +207,8 @@ const AddFormComponent = () => {
error={formik.touched.navgan_id && Boolean(formik.errors.navgan_id)}
helperText={formik.touched.navgan_id && formik.errors.navgan_id}
/>
</Box>
<Box
sx={{
mx: {xs: 0, sm: 2},
my: 2,
width: "100%",
}}
>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
sx={{width: "100%"}}
name="shenasname_id"
@@ -278,8 +222,8 @@ const AddFormComponent = () => {
error={formik.touched.shenasname_id && Boolean(formik.errors.shenasname_id)}
helperText={formik.touched.shenasname_id && formik.errors.shenasname_id}
/>
</Box>
</Box>
</Grid>
</Grid>
<Box
sx={{
display: "flex",