add postal code address and some validation
This commit is contained in:
85
src/core/components/MuiDatePicker.jsx
Normal file
85
src/core/components/MuiDatePicker.jsx
Normal file
@@ -0,0 +1,85 @@
|
||||
import * as React from 'react';
|
||||
import {useState} from 'react';
|
||||
import Button from '@mui/material/Button';
|
||||
import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali";
|
||||
import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider';
|
||||
import {DatePicker} from '@mui/x-date-pickers/DatePicker';
|
||||
import {useTranslations} from "next-intl";
|
||||
import moment from "jalali-moment";
|
||||
import {FormControl, FormHelperText} from "@mui/material";
|
||||
|
||||
function ButtonField(props) {
|
||||
const t = useTranslations();
|
||||
const {
|
||||
setOpen,
|
||||
label,
|
||||
id,
|
||||
disabled,
|
||||
InputProps: {ref} = {},
|
||||
inputProps: {'aria-label': ariaLabel} = {},
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<Button
|
||||
sx={{width: "100%", padding: 0.8}}
|
||||
variant="outlined"
|
||||
id={id}
|
||||
disabled={disabled}
|
||||
ref={ref}
|
||||
aria-label={ariaLabel}
|
||||
onClick={() => setOpen?.((prev) => !prev)}
|
||||
>
|
||||
{label ? `${t("birthday")}: ${label}` : `${t("birthday")}`}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
function ButtonDatePicker(props) {
|
||||
const t = useTranslations();
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<DatePicker
|
||||
slots={{field: ButtonField, ...props.slots}}
|
||||
disableFuture
|
||||
slotProps={{
|
||||
field: {setOpen},
|
||||
textField: {
|
||||
helperText: props.formik.errors.date_of_birth ? `${t("birthday_error")}` : null
|
||||
}
|
||||
}}
|
||||
{...props}
|
||||
open={open}
|
||||
onClose={() => setOpen(false)}
|
||||
onOpen={() => setOpen(true)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default function PickerWithButtonField({formik, error, helperText}) {
|
||||
const [value, setValue] = useState(null);
|
||||
|
||||
return (
|
||||
<LocalizationProvider dateAdapter={AdapterDateFnsJalali}>
|
||||
<FormControl
|
||||
variant={"outlined"}
|
||||
fullWidth
|
||||
size="small"
|
||||
error={error}
|
||||
>
|
||||
<ButtonDatePicker
|
||||
label={value == null ? null : moment(value)
|
||||
.locale("fa")
|
||||
.format("YYYY/MM/DD")}
|
||||
value={value}
|
||||
formik={formik}
|
||||
onChange={(newValue) => {
|
||||
setValue(newValue)
|
||||
}}
|
||||
|
||||
/>
|
||||
<FormHelperText>{helperText}</FormHelperText>
|
||||
</FormControl>
|
||||
</LocalizationProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Box, Button, Drawer, FormHelperText, TextField, Typography} from "@mui/material";
|
||||
import {Box, Button, Drawer, FormHelperText, InputBase, Stack} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import AccessibleIcon from '@mui/icons-material/Accessible';
|
||||
import {useState} from "react";
|
||||
@@ -128,102 +128,80 @@ const PlateNumber = ({formik}) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
width: "fit-content",
|
||||
flexDirection: "row",
|
||||
alignItems: "end",
|
||||
justifyContent: "end",
|
||||
gap: 0.75
|
||||
}}>
|
||||
<Box sx={{display: "flex", flexDirection: "column", textAlign: "center", justifyContent: "center"}}>
|
||||
<Typography variant="caption" sx={{fontWeight: 500}}>
|
||||
ایران
|
||||
</Typography>
|
||||
<TextField
|
||||
<Stack direction={'row'}
|
||||
sx={{border: 1, overflow: 'hidden', borderColor: 'divider', borderRadius: 1}}>
|
||||
<InputBase
|
||||
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
|
||||
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'}}}/>
|
||||
<Box sx={{flexGrow: 1}}>
|
||||
<Button
|
||||
onClick={() => setPlateDrawer(true)}
|
||||
sx={{borderRadius: 0, borderColor: 'divider'}}
|
||||
size={'small'}
|
||||
data-selected-word={selectedWordValue}
|
||||
fullWidth
|
||||
name="plate_part4"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
type='number'
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("plate_part4")}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
<TextField
|
||||
fullWidth
|
||||
name="plate_part3"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
type='number'
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("plate_part3")}
|
||||
/>
|
||||
</Box>
|
||||
<Box>
|
||||
{/*<TextField*/}
|
||||
{/* sx={{width: "50px"}}*/}
|
||||
{/* name="plate_part2"*/}
|
||||
{/* variant="outlined"*/}
|
||||
{/* type={'number'}*/}
|
||||
{/* size="small"*/}
|
||||
{/* onChange={formik.handleChange}*/}
|
||||
{/* onBlur={formik.handleBlur("plate_part1")}*/}
|
||||
{/*/>*/}
|
||||
<Button onClick={() => setPlateDrawer(true)}
|
||||
sx={{
|
||||
borderColor: "divider",
|
||||
fontSize: "16px"
|
||||
}}
|
||||
variant="outlined"
|
||||
data-selected-word={selectedWordValue}
|
||||
>{selectedWordName}</Button>
|
||||
<Drawer
|
||||
anchor={"bottom"}
|
||||
open={plateDrawer}
|
||||
onClose={() => setPlateDrawer(false)}
|
||||
>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
mx: "auto",
|
||||
my: 2,
|
||||
gap: 2,
|
||||
width: "60%",
|
||||
justifyContent: "center"
|
||||
}}>
|
||||
{plate_words.map((item) => (
|
||||
<Button
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
setSelectedWordName(item.name);
|
||||
setSelectedWordValue(item.value);
|
||||
setPlateDrawer(false);
|
||||
}}
|
||||
sx={{
|
||||
width: "fit-content"
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
{item.name}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
</Drawer>
|
||||
{selectedWordName}
|
||||
</Button>
|
||||
</Box>
|
||||
<Box>
|
||||
<TextField
|
||||
fullWidth
|
||||
name="plate_part1"
|
||||
variant="outlined"
|
||||
type='number'
|
||||
size="small"
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("plate_part1")}
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
<Drawer
|
||||
anchor={"bottom"}
|
||||
open={plateDrawer}
|
||||
onClose={() => setPlateDrawer(false)}
|
||||
>
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
mx: "auto",
|
||||
my: 2,
|
||||
gap: 2,
|
||||
width: "60%",
|
||||
justifyContent: "center"
|
||||
}}>
|
||||
{plate_words.map((item) => (
|
||||
<Button
|
||||
key={item.id}
|
||||
onClick={() => {
|
||||
setSelectedWordName(item.name);
|
||||
setSelectedWordValue(item.value);
|
||||
formik.setFieldValue("plate_part2", item.value)
|
||||
setPlateDrawer(false);
|
||||
}}
|
||||
sx={{
|
||||
width: "fit-content"
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
{item.name}
|
||||
</Button>
|
||||
))}
|
||||
</Box>
|
||||
</Drawer>
|
||||
<InputBase
|
||||
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'}}}/>
|
||||
<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>
|
||||
</>
|
||||
|
||||
|
||||
@@ -19,28 +19,26 @@ function SelectBox({
|
||||
return (
|
||||
<FormControl
|
||||
disabled={disabled || false}
|
||||
variant={name === "plate_part2" ? "standard" : "outlined"}
|
||||
margin="normal"
|
||||
variant={"outlined"}
|
||||
fullWidth
|
||||
size="small"
|
||||
error={error}
|
||||
sx={{mt: 0}}
|
||||
>
|
||||
<InputLabel>{label}</InputLabel>
|
||||
<Select
|
||||
label={label}
|
||||
name={name}
|
||||
size="small"
|
||||
value={isLoading?"":select}
|
||||
value={isLoading ? "" : select}
|
||||
onChange={handleChange}
|
||||
onBlur={onBlur}
|
||||
|
||||
>
|
||||
{isLoading ? (
|
||||
<MenuItem sx={{color : "primary.main"}}>{t("LoanRequest.text_field_loading_provinces_list")}</MenuItem>
|
||||
<MenuItem sx={{color: "primary.main"}}>{t("text_field_loading")}</MenuItem>
|
||||
) : errorEcured ? (
|
||||
<MenuItem sx={{color : "secondary.main"}}>
|
||||
{t("LoanRequest.text_field_error_fetching_provinces")}
|
||||
<MenuItem sx={{color: "secondary.main"}}>
|
||||
{t("text_field_error_fetching")}
|
||||
</MenuItem>
|
||||
) : (
|
||||
selectors.map((selector) => (
|
||||
|
||||
Reference in New Issue
Block a user