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

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>
</>
)