use request and grid instead of box
This commit is contained in:
@@ -140,6 +140,7 @@
|
||||
"text_field_phone_number": "شماره تلفن",
|
||||
"text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید",
|
||||
"text_field_name": "نام",
|
||||
"text_field_city_id": "شهر",
|
||||
"text_field_enter_your_name": "نام خود را وارد کنید",
|
||||
"text_field_vehicle_type": "نام وسیله نقلیه",
|
||||
"text_field_enter_your_vehicle_type": "نام وسیله نقلیه خود را وارد کنید",
|
||||
@@ -148,6 +149,7 @@
|
||||
"text_field_error_fetching_provinces": "خطا در دریافت استان ها",
|
||||
"text_field_enter_your_national_code": "کد ملی خود را وارد کنید",
|
||||
"text_field_enter_your_province_id": "استان خود را وارد کنید",
|
||||
"text_field_enter_your_city_id": "شهر خود را وارد کنید",
|
||||
"text_field_navgan_id": "شماره ناوگان",
|
||||
"text_field_enter_your_navgan_id": "شماره ناوگان خود را وارد کنید",
|
||||
"text_field_national_code": "کد ملی",
|
||||
@@ -157,18 +159,7 @@
|
||||
"text_field_plate_number": "شماره پلاک",
|
||||
"text_field_enter_your_plate_number": "شماره پلاک خود را وارد کنید",
|
||||
"button_submit": "ثبت درخواست",
|
||||
"file_field_sherkat_naft_doc": "مجوز شرکت نفت",
|
||||
"file_field_estate_doc": "سند مالکیت",
|
||||
"file_field_agreement_doc": "موافقت نامه اصولی",
|
||||
"error_message_sherkat_naft_doc": "مجوز شرکت نفت خود را وارد کنید",
|
||||
"error_message_estate_doc": "سند مالکیت خود را وارد کنید",
|
||||
"error_message_agreement_doc": "موافقت نامه اصولی خود را وارد کنید",
|
||||
"file_field_shenasname_image": "تصویر شناسنامه",
|
||||
"file_field_national_card_image": "تصویر کارت ملی",
|
||||
"file_field_payan_khedmat_image": "تصویر کارت پایان خدمت",
|
||||
"error_message_national_card_image": "تصویر کارت ملی خود را وارد کنید",
|
||||
"error_message_shenasname_image": "تصویر شناسنامه خود را وارد کنید",
|
||||
"error_message_payan_khedmat_image": "تصویر کارت پایان خدمت خود را وارد کنید",
|
||||
"error_message_city_id": "لطفا شهر خود را وارد کنید!",
|
||||
"add_loan_request_permission": "اکنون امکان ثبت درخواست جدید برای شما مقدور نیست"
|
||||
},
|
||||
"EditLoanRequest": {
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -8,6 +8,7 @@ function SelectBox({
|
||||
setFieldValue,
|
||||
setFieldTouched,
|
||||
error,
|
||||
onBlur,
|
||||
helperText,
|
||||
}) {
|
||||
|
||||
@@ -15,9 +16,6 @@ function SelectBox({
|
||||
const handleChange = (event) => {
|
||||
setFieldValue(selectType, event.target.value);
|
||||
};
|
||||
const handleBlur = () => {
|
||||
setFieldTouched(select, true);
|
||||
};
|
||||
return (
|
||||
<FormControl
|
||||
variant="outlined"
|
||||
@@ -29,14 +27,14 @@ function SelectBox({
|
||||
>
|
||||
<InputLabel id="language-label">{label}</InputLabel>
|
||||
<Select
|
||||
labelId="language-label"
|
||||
id={selectId}
|
||||
label={label}
|
||||
name={selectId}
|
||||
size="small"
|
||||
value={select}
|
||||
onChange={handleChange}
|
||||
label="Language"
|
||||
onBlur={handleBlur}
|
||||
onBlur={onBlur}
|
||||
|
||||
>
|
||||
{selectors.map((selector) => (
|
||||
<MenuItem key={selector.id} value={selector.value}>
|
||||
|
||||
Reference in New Issue
Block a user