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

add education and occupation list hook

Browse Source
This commit is contained in:
AminGhasempoor
2023-12-18 16:51:18 +03:30
parent c69aa4be89
commit 62670863a1
7 changed files with 202 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -145,11 +145,13 @@
"national_code_positive": "کد ملی می بایست مثبت باشد",
"uploading_documents": "اسناد",
"error_message_name": "لطفا نام خود را وارد کنید!",
"error_message_plate_number": "لطفا شماره پلاک را به درستی وارد کنید!",
"error_message_tel_number": "لطفا شماره ثابت (با پیش شماره استان) خود را وارد کنید!",
"error_message_vehicle_type": "لطفا نوع وسیله نقلیه خود را وارد کنید!",
"error_message_navgan_id": "لطفا کد هوشمند خود را وارد کنید!",
"error_message_navgan_id": "لطفا کد هوشمند ناوگان خود را وارد کنید!",
"error_message_province_id": "لطفا استان خود را وارد کنید!",
"error_message_national_id": "لطفا کد ملی خود را وارد کنید!",
"error_message_date_of_birth": "لطفا تاریخ تولد خود را وارد کنید!",
"error_message_shenasname_serial": "لطفا سریال پشت کارت ملی خود را وارد کنید!",
"error_message_postal_code": "لطفا کد پستی خود را وارد کنید!",
"error_message_national_code": "لطفا کد ملی خود را وارد کنید!",

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

@@ -10,6 +10,8 @@ import useProvince from "@/lib/app/hooks/useProvince";
import useCities from "@/lib/app/hooks/useCities";
import PlateNumber from "@/core/components/PlateNumber";
import MuiDatePicker from "@/core/components/MuiDatePicker";
import UseEducations from "@/lib/app/hooks/useEducations";
import useOccupations from "@/lib/app/hooks/useOccupations";
const AddFormComponent = () => {
const t = useTranslations();
@@ -17,28 +19,32 @@ const AddFormComponent = () => {
const requestServer = useRequest()
const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince()
const {cityTextField, cityList, setProvinceID} = useCities()
const {educationsList, isLoadingEducationsList, errorEducationsList} = UseEducations()
const {occupationsList, isLoadingOccupationsList, errorOccupationsList} = useOccupations()
const initialValues = {
tel_number: "",
telephone_number: "",
vehicle_type: "",
plate_number: "",
province_id: "",
city_id: "",
navgan_id: "",
national_code: "",
national_id: "",
shenasname_serial: "",
postal_code: "",
navgan_type: "",
plate_part1: "",
plate_part2: "",
plate_part2: "الف",
plate_part3: "",
plate_part4: "",
address: "",
date_of_birth: "",
birthday: "",
education_id: "",
occupation_id: "",
};
const validationSchema = Yup.object().shape({
tel_number: Yup.mixed()
telephone_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(
@@ -47,10 +53,16 @@ const AddFormComponent = () => {
navgan_type: Yup.string().required(
t("LoanRequest.error_message_navgan_type")
),
occupation_id: Yup.string().required(
t("LoanRequest.error_message_occupation_id")
),
education_id: Yup.string().required(
t("LoanRequest.error_message_education_id")
),
address: Yup.string().required(
t("LoanRequest.error_message_address")
),
date_of_birth: Yup.string().required(
birthday: Yup.string().required(
t("LoanRequest.error_message_date_of_birth")
),
postal_code: Yup.mixed()
@@ -59,35 +71,32 @@ const AddFormComponent = () => {
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")
t("LoanRequest.error_message_plate_number")
),
plate_part2: Yup.mixed()
.required(
t("LoanRequest.error_message_plate_part2")
t("LoanRequest.error_message_plate_number")
),
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_number")
),
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_number")
),
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.mixed()
national_id: 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_serial: Yup.mixed()
.test("max", `${t("LoanRequest.shenasname_serial_max")}`, (value) => value.toString().length === 11)
.test("max", `${t("LoanRequest.shenasname_serial_max")}`, (value) => value.toString().length === 10)
.required(t("LoanRequest.error_message_shenasname_serial")
),
});
@@ -95,7 +104,7 @@ const AddFormComponent = () => {
const handleSubmit = async (values, props) => {
const formData = new FormData();
formData.append("tel_number", values.tel_number);
formData.append("telephone_number", values.telephone_number);
formData.append("navgan_type", values.navgan_type);
formData.append("postal_code", values.postal_code);
formData.append("vehicle_type", values.vehicle_type);
@@ -104,9 +113,11 @@ const AddFormComponent = () => {
formData.append("city_id", values.city_id);
formData.append("address", values.address);
formData.append("navgan_id", values.navgan_id);
formData.append("national_code", values.national_code);
formData.append("date_of_birth", values.date_of_birth);
formData.append("national_id", values.national_id);
formData.append("birthday", values.birthday);
formData.append("shenasname_serial", values.shenasname_serial);
formData.append("education_id", values.education_id);
formData.append("occupation_id", values.occupation_id);
requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth: true, notification: true}).then().catch(() => {
props.setSubmitting(false)
@@ -124,7 +135,7 @@ const AddFormComponent = () => {
>
<TextField
sx={{width: "100%"}}
name="national_code"
name="national_id"
variant="outlined"
size="small"
type={"number"}
@@ -133,9 +144,9 @@ const AddFormComponent = () => {
placeholder={t(
"LoanRequest.text_field_enter_your_national_code"
)}
onBlur={formik.handleBlur("national_code")}
error={formik.touched.national_code && Boolean(formik.errors.national_code)}
helperText={formik.touched.national_code && formik.errors.national_code}
onBlur={formik.handleBlur("national_id")}
error={formik.touched.national_id && Boolean(formik.errors.national_id)}
helperText={formik.touched.national_id && formik.errors.national_id}
fullWidth
/>
</Grid>
@@ -159,9 +170,9 @@ const AddFormComponent = () => {
<Grid item xs={12} sm={4}>
<MuiDatePicker
formik={formik}
error={formik.touched.date_of_birth && Boolean(formik.errors.date_of_birth)}
helperText={formik.touched.date_of_birth && formik.errors.date_of_birth}
onBlur={formik.handleBlur("date_of_birth")}
error={formik.touched.birthday && Boolean(formik.errors.birthday)}
helperText={formik.touched.birthday && formik.errors.birthday}
onBlur={formik.handleBlur("birthday")}
/>
</Grid>
</Grid>
@@ -185,7 +196,7 @@ const AddFormComponent = () => {
<Grid item xs={12} sm={6}>
<TextField
sx={{width: "100%"}}
name="tel_number"
name="telephone_number"
variant="outlined"
type={'number'}
size="small"
@@ -195,9 +206,9 @@ const AddFormComponent = () => {
"LoanRequest.text_field_enter_your_tel_number"
)}
fullWidth
onBlur={formik.handleBlur("tel_number")}
error={formik.touched.tel_number && Boolean(formik.errors.tel_number)}
helperText={formik.touched.tel_number && formik.errors.tel_number}
onBlur={formik.handleBlur("telephone_number")}
error={formik.touched.telephone_number && Boolean(formik.errors.telephone_number)}
helperText={formik.touched.telephone_number && formik.errors.telephone_number}
/>
</Grid>
</Grid>
@@ -208,11 +219,7 @@ 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: "عمومی"}]}
select={formik.values.navgan_type}
handleChange={(event) => {
formik.setFieldValue('navgan_type', event.target.value)
@@ -287,8 +294,8 @@ const AddFormComponent = () => {
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: "اتوبوس", name: "اتوبوس"},
{id: 1, value: "مینی بوس", name: "مینی بوس"}]}
select={formik.values.vehicle_type}
handleChange={(event) => formik.setFieldValue('vehicle_type', event.target.value)}
error={formik.touched.vehicle_type && Boolean(formik.errors.vehicle_type)}
@@ -300,6 +307,46 @@ const AddFormComponent = () => {
<PlateNumber formik={formik}/>
</Grid>
</Grid>
<Grid container spacing={2} sx={{padding: 2}}>
<Grid item xs={12} sm={6}>
<SelectBox
name="education_id"
label={t("LoanRequest.text_field_education_id")}
size="small"
isLoading={isLoadingEducationsList}
errorEcured={errorEducationsList}
selectType="education_id"
selectors={educationsList}
select={formik.values.education_id}
handleChange={(event) => {
formik.setFieldValue('education_id', event.target.value)
}}
setFieldTouched={formik.setFieldTouched}
error={formik.touched.education_id && Boolean(formik.errors.education_id)}
helperText={formik.touched.education_id && formik.errors.education_id}
onBlur={formik.handleBlur("education_id")}
/>
</Grid>
<Grid item xs={12} sm={6}>
<SelectBox
name="occupation_id"
label={t("LoanRequest.text_field_occupation_id")}
size="small"
isLoading={isLoadingOccupationsList}
errorEcured={errorOccupationsList}
selectType="occupation_id"
selectors={occupationsList}
select={formik.values.occupation_id}
handleChange={(event) => {
formik.setFieldValue('occupation_id', event.target.value)
}}
setFieldTouched={formik.setFieldTouched}
error={formik.touched.occupation_id && Boolean(formik.errors.occupation_id)}
helperText={formik.touched.occupation_id && formik.errors.occupation_id}
onBlur={formik.handleBlur("occupation_id")}
/>
</Grid>
</Grid>
<Grid container spacing={2} sx={{padding: 2}}>
<Grid item xs={12}>
<TextField

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

@@ -23,7 +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"}
color={props.slotProps.formik.touched.birthday && Boolean(props.slotProps.formik.errors.birthday) ? "error" : "primary"}
id={id}
disabled={disabled}
ref={ref}
@@ -47,7 +47,7 @@ function ButtonDatePicker(props) {
formik: props.formik,
field: {setOpen},
textField: {
helperText: props.formik.errors.date_of_birth ? `${t("birthday_error")}` : null
helperText: props.formik.errors.birthday ? `${t("birthday_error")}` : null
}
}}
{...props}
@@ -60,7 +60,6 @@ function ButtonDatePicker(props) {
export default function PickerWithButtonField({formik, error, helperText}) {
const [value, setValue] = useState(null);
const er = formik.errors
return (
<FormControl
variant={"outlined"}
@@ -76,13 +75,13 @@ export default function PickerWithButtonField({formik, error, helperText}) {
value={value}
formik={formik}
onChange={(newValue) => {
formik.setFieldValue("date_of_birth", newValue)
formik.setFieldValue("birthday", newValue)
setValue(newValue)
}}
/>
</LocalizationProvider>
<FormHelperText>{formik.touched.date_of_birth && formik.errors.date_of_birth}</FormHelperText>
<FormHelperText>{formik.touched.birthday && formik.errors.birthday}</FormHelperText>
</FormControl>
);
}

63
src/core/components/PlateNumber.jsx
View File

@@ -1,4 +1,4 @@
import {Box, Button, Drawer, FormHelperText, InputBase, Stack} from "@mui/material";
import {Box, Button, Drawer, FormHelperText, Stack, TextField} from "@mui/material";
import {useTranslations} from "next-intl";
import AccessibleIcon from '@mui/icons-material/Accessible';
import {useState} from "react";
@@ -123,36 +123,54 @@ const plate_words = [
const PlateNumber = ({formik}) => {
const t = useTranslations();
const [plateDrawer, setPlateDrawer] = useState(false);
const [selectedWordName, setSelectedWordName] = useState("الف");
const [selectedWordValue, setSelectedWordValue] = useState("");
const isValidPlate = Boolean(formik.errors.plate_part1 || formik.errors.plate_part3 || formik.errors.plate_part4)
return (
<>
<Stack direction={'row'}
sx={{border: 1, overflow: 'hidden', borderColor: 'divider', borderRadius: 1}}>
<InputBase
sx={{
border: 1,
overflow: 'hidden',
borderColor: isValidPlate ? 'error.main' : 'divider',
borderRadius: 1
}}>
<TextField
type={'number'}
value={formik.values.plate_part4}
onInput={(event) => event.target.value.length <= 2 ? formik.setFieldValue("plate_part4", event.target.value) : null}
size={'small'}
placeholder={'xx'} sx={{flexGrow: 2}}
inputProps={{sx: {textAlign: 'center'}}}/>
<InputBase
placeholder={'xx'} sx={{flexGrow: 2, "& fieldset": {border: 'none'}}}
inputProps={{sx: {textAlign: 'center'}}}
onChange={formik.handleChange}
onBlur={formik.handleBlur("plate_part4")}
error={formik.touched.plate_part4 && Boolean(formik.errors.plate_part4)}
/>
<TextField
type={'number'}
value={formik.values.plate_part3}
onInput={(event) => event.target.value.length <= 3 ? formik.setFieldValue("plate_part3", event.target.value) : null}
size={'small'} placeholder={'xxx'} sx={{
flexGrow: 3, borderLeft: 1, borderRadius: 0, borderColor: 'divider'
}} inputProps={{sx: {textAlign: 'center'}}}/>
size={'small'}
placeholder={'xxx'}
sx={{
flexGrow: 3,
borderLeft: 1,
borderRadius: 0,
borderColor: 'divider',
"& fieldset": {border: 'none'}
}}
inputProps={{sx: {textAlign: 'center'}}}
onChange={formik.handleChange}
onBlur={formik.handleBlur("plate_part3")}
error={formik.touched.plate_part3 && Boolean(formik.errors.plate_part3)}
/>
<Box sx={{flexGrow: 1}}>
<Button
onClick={() => setPlateDrawer(true)}
sx={{borderRadius: 0, borderColor: 'divider'}}
sx={{height: '100%', borderRadius: 0, borderColor: 'divider'}}
size={'small'}
data-selected-word={selectedWordValue}
data-selected-word={formik.values.plate_part2}
fullWidth
>
{selectedWordName}
{plate_words.find(p => p.value === formik.values.plate_part2).name}
</Button>
</Box>
<Drawer
@@ -173,8 +191,6 @@ const PlateNumber = ({formik}) => {
<Button
key={item.id}
onClick={() => {
setSelectedWordName(item.name);
setSelectedWordValue(item.value);
formik.setFieldValue("plate_part2", item.value)
setPlateDrawer(false);
}}
@@ -188,21 +204,26 @@ const PlateNumber = ({formik}) => {
))}
</Box>
</Drawer>
<InputBase
<TextField
type={'number'}
value={formik.values.plate_part1}
onInput={(event) => event.target.value.length <= 2 ? formik.setFieldValue("plate_part1", event.target.value) : null}
size={'small'}
placeholder={'xx'}
sx={{flexGrow: 2}}
inputProps={{sx: {textAlign: 'center'}}}/>
sx={{flexGrow: 2, "& fieldset": {border: 'none'}}}
inputProps={{sx: {textAlign: 'center'}}}
onChange={formik.handleChange}
onBlur={formik.handleBlur("plate_part1")}
error={true}
/>
<Stack sx={{width: 24, borderLeft: 1, borderColor: 'divider'}}>
<Box sx={{flexGrow: 1, bgcolor: '#1ebc1e'}}></Box>
<Box sx={{flexGrow: 1, bgcolor: 'white'}}></Box>
<Box sx={{flexGrow: 1, bgcolor: '#f52121'}}></Box>
</Stack>
</Stack>
<FormHelperText>{t("error_message_plate_number")}</FormHelperText>
<FormHelperText
error={isValidPlate}>{isValidPlate ? `${t("LoanRequest.error_message_plate_number")}` : null}</FormHelperText>
</>
)

2
src/core/data/apiRoutes.js
View File

@@ -15,5 +15,7 @@ export const UPDATE_LOAN_REQUEST_WELFARE = BASE_URL + "/refahi/loan/update/";
export const DETAILS_LOAN_REQUEST_WELFARE = BASE_URL + "/refahi/loan/details/";
export const GET_PROVINCE_LIST = BASE_URL + "/provinces";
export const GET_CITIES_LIST = BASE_URL + "/cities";
export const GET_EDUCATIONS_LIST = BASE_URL + "/education";
export const GET_OCCUPATIONS_LIST = BASE_URL + "/occupations";

34
src/lib/app/hooks/useEducations.jsx Normal file
View File

@@ -0,0 +1,34 @@
import {GET_EDUCATIONS_LIST} from "@/core/data/apiRoutes";
import {useRequest} from "@witel/webapp-builder";
import {useEffect, useState} from "react";
const useEducations = () => {
const [isLoadingEducationsList, setIsLoadingEducationsList] = useState(false)
const [errorEducationsList, setErrorEducationsList] = useState(false)
const [educationsList, setEducationsList] = useState([])
const requestServer = useRequest({auth: true, notification: false})
useEffect(() => {
setIsLoadingEducationsList(true)
requestServer(GET_EDUCATIONS_LIST, 'get', {auth: true, notification: false}).then(({data}) => {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setIsLoadingEducationsList(false)
setEducationsList(formattedData);
}).catch(() => {
setIsLoadingEducationsList(false)
setErrorEducationsList(true)
})
}, [])
return {
educationsList,
isLoadingEducationsList,
errorEducationsList
}
};
export default useEducations;

34
src/lib/app/hooks/useOccupations.jsx Normal file
View File

@@ -0,0 +1,34 @@
import {GET_OCCUPATIONS_LIST} from "@/core/data/apiRoutes";
import {useRequest} from "@witel/webapp-builder";
import {useEffect, useState} from "react";
const useOccupations = () => {
const [isLoadingOccupationsList, setIsLoadingOccupationsList] = useState(false)
const [errorOccupationsList, setErrorOccupationsList] = useState(false)
const [occupationsList, setOccupationsList] = useState([])
const requestServer = useRequest({auth: true, notification: false})
useEffect(() => {
setIsLoadingOccupationsList(true)
requestServer(GET_OCCUPATIONS_LIST, 'get', {auth: true, notification: false}).then(({data}) => {
const formattedData = data.map((province, index) => ({
id: index,
name: province.name,
value: province.id,
}));
setIsLoadingOccupationsList(false)
setOccupationsList(formattedData);
}).catch(() => {
setIsLoadingOccupationsList(false)
setErrorOccupationsList(true)
})
}, [])
return {
occupationsList,
isLoadingOccupationsList,
errorOccupationsList
}
};
export default useOccupations;