add plate number postal code navgan type and restyle select component
This commit is contained in:
209
src/core/components/PlateNumber.jsx
Normal file
209
src/core/components/PlateNumber.jsx
Normal file
@@ -0,0 +1,209 @@
|
||||
import {Box, Divider, Grid, Stack, TextField} from "@mui/material";
|
||||
import SelectBox from "@/core/components/SelectBox";
|
||||
import {useTranslations} from "next-intl";
|
||||
import AccessibleIcon from '@mui/icons-material/Accessible';
|
||||
const plate_part2_alpha = [
|
||||
{
|
||||
id : 1,
|
||||
value : "الف",
|
||||
name : "الف"
|
||||
},
|
||||
{
|
||||
id : 2,
|
||||
value : "ب",
|
||||
name : "ب"
|
||||
},
|
||||
{
|
||||
id : 3,
|
||||
value : "پ",
|
||||
name : "پ"
|
||||
},
|
||||
{
|
||||
id : 4,
|
||||
value : "ت",
|
||||
name : "ت"
|
||||
},
|
||||
{
|
||||
id : 5,
|
||||
value : "ث",
|
||||
name : "ث"
|
||||
},
|
||||
{
|
||||
id : 6,
|
||||
value : "ج",
|
||||
name : "ج"
|
||||
},
|
||||
{
|
||||
id : 7,
|
||||
value : "د",
|
||||
name : "د"
|
||||
},
|
||||
{
|
||||
id : 8,
|
||||
value : "ز",
|
||||
name : "ز"
|
||||
},
|
||||
{
|
||||
id : 9,
|
||||
value : "س",
|
||||
name : "س"
|
||||
},
|
||||
{
|
||||
id : 10,
|
||||
value : "ش",
|
||||
name : "ش"
|
||||
},
|
||||
{
|
||||
id : 11,
|
||||
value : "ص",
|
||||
name : "ص"
|
||||
},
|
||||
{
|
||||
id : 12,
|
||||
value : "ط",
|
||||
name : "ط"
|
||||
},
|
||||
{
|
||||
id : 13,
|
||||
value : "ع",
|
||||
name : "ع"
|
||||
},
|
||||
{
|
||||
id : 14,
|
||||
value : "ف",
|
||||
name : "ف"
|
||||
},
|
||||
{
|
||||
id : 15,
|
||||
value : "ق",
|
||||
name : "ق"
|
||||
},
|
||||
{
|
||||
id : 16,
|
||||
value : "ک",
|
||||
name : "گ"
|
||||
},
|
||||
{
|
||||
id : 17,
|
||||
value : "ل",
|
||||
name : "ل"
|
||||
},
|
||||
{
|
||||
id : 18,
|
||||
value : "م",
|
||||
name : "م"
|
||||
},
|
||||
{
|
||||
id : 19,
|
||||
value : "ن",
|
||||
name : "ن"
|
||||
},
|
||||
{
|
||||
id : 20,
|
||||
value : "و",
|
||||
name : "و"
|
||||
},
|
||||
{
|
||||
id : 21,
|
||||
value : "ه",
|
||||
name : "ه"
|
||||
},
|
||||
{
|
||||
id : 22,
|
||||
value : "ی",
|
||||
name : "ی"
|
||||
},
|
||||
{
|
||||
id : 23,
|
||||
value : "*",
|
||||
name : <AccessibleIcon/>
|
||||
},
|
||||
]
|
||||
const PlateNumber = ({formik}) => {
|
||||
const t = useTranslations();
|
||||
return(
|
||||
<Box sx={{
|
||||
display: "flex",
|
||||
flexDirection: {xs: "column", sm: "row"},
|
||||
alignItems: "center",
|
||||
justifyContent : "center",
|
||||
mx: "auto",
|
||||
padding : 1,
|
||||
border: 1,
|
||||
borderRadius : 1,
|
||||
borderColor : "divider",
|
||||
width: {xs: "100%", sm: "40%", md: "50%"},
|
||||
}}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="plate_part4"
|
||||
variant="standard"
|
||||
size="small"
|
||||
type={'number'}
|
||||
label={t("LoanRequest.text_field_plate_part4")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_plate_part4"
|
||||
)}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("plate_part4")}
|
||||
error={formik.touched.plate_part4 && Boolean(formik.errors.plate_part4)}
|
||||
helperText={formik.touched.plate_part4 && formik.errors.plate_part4}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="plate_part3"
|
||||
variant="standard"
|
||||
size="small"
|
||||
type={'number'}
|
||||
label={t("LoanRequest.text_field_plate_part3")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_plate_part3"
|
||||
)}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("plate_part3")}
|
||||
error={formik.touched.plate_part3 && Boolean(formik.errors.plate_part3)}
|
||||
helperText={formik.touched.plate_part3 && formik.errors.plate_part3}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<SelectBox
|
||||
name="plate_part2"
|
||||
label={t("LoanRequest.text_field_plate_part2")}
|
||||
size="small"
|
||||
selectType="plate_part2"
|
||||
selectors={plate_part2_alpha}
|
||||
select={formik.values.plate_part2}
|
||||
handleChange={(event)=>formik.setFieldValue('plate_part2', event.target.value)}
|
||||
setFieldTouched={formik.setFieldTouched}
|
||||
error={formik.touched.plate_part2 && Boolean(formik.errors.plate_part2)}
|
||||
helperText={formik.touched.plate_part2 && formik.errors.plate_part2}
|
||||
onBlur={formik.handleBlur("plate_part2")}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={6} sm={3}>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
name="plate_part1"
|
||||
variant="standard"
|
||||
type={'number'}
|
||||
size="small"
|
||||
label={t("LoanRequest.text_field_plate_part1")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_plate_part1"
|
||||
)}
|
||||
onChange={formik.handleChange}
|
||||
onBlur={formik.handleBlur("plate_part1")}
|
||||
error={formik.touched.plate_part1 && Boolean(formik.errors.plate_part1)}
|
||||
helperText={formik.touched.plate_part1 && formik.errors.plate_part1}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
)
|
||||
}
|
||||
export default PlateNumber
|
||||
@@ -1,46 +1,54 @@
|
||||
import {FormControl, FormHelperText, InputLabel, MenuItem, Select,} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
|
||||
function SelectBox({
|
||||
select,
|
||||
selectType,
|
||||
name,
|
||||
selectors,
|
||||
label,
|
||||
setFieldValue,
|
||||
setFieldTouched,
|
||||
handleChange,
|
||||
error,
|
||||
onBlur,
|
||||
disabled,
|
||||
helperText,
|
||||
isLoading,
|
||||
errorEcured
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
|
||||
const selectId = String(select);
|
||||
const handleChange = (event) => {
|
||||
setFieldValue(selectType, event.target.value);
|
||||
};
|
||||
return (
|
||||
<FormControl
|
||||
variant="outlined"
|
||||
disabled={disabled || false}
|
||||
variant={name === "plate_part2" ? "standard" : "outlined"}
|
||||
margin="normal"
|
||||
fullWidth
|
||||
size="small"
|
||||
error={error}
|
||||
sx={{mt: 0}}
|
||||
>
|
||||
<InputLabel id="language-label">{label}</InputLabel>
|
||||
<InputLabel>{label}</InputLabel>
|
||||
<Select
|
||||
id={selectId}
|
||||
label={label}
|
||||
name={selectId}
|
||||
name={name}
|
||||
size="small"
|
||||
value={select}
|
||||
value={isLoading?"":select}
|
||||
onChange={handleChange}
|
||||
onBlur={onBlur}
|
||||
|
||||
>
|
||||
{selectors.map((selector) => (
|
||||
<MenuItem key={selector.id} value={selector.value}>
|
||||
{selector.name}
|
||||
{isLoading ? (
|
||||
<MenuItem sx={{color : "primary.main"}}>{t("LoanRequest.text_field_loading_provinces_list")}</MenuItem>
|
||||
) : errorEcured ? (
|
||||
<MenuItem sx={{color : "secondary.main"}}>
|
||||
{t("LoanRequest.text_field_error_fetching_provinces")}
|
||||
</MenuItem>
|
||||
))}
|
||||
) : (
|
||||
selectors.map((selector) => (
|
||||
<MenuItem key={selector.id} value={selector.value}>
|
||||
{selector.name}
|
||||
</MenuItem>
|
||||
))
|
||||
)}
|
||||
</Select>
|
||||
<FormHelperText>{helperText}</FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
@@ -14,5 +14,6 @@ export const SEND_LOAN_REQUEST_WELFARE = BASE_URL + "/refahi/loan/store";
|
||||
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";
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user