mohammad | working on plate component
This commit is contained in:
@@ -1,208 +1,231 @@
|
||||
import {Box, Divider, Grid, Stack, TextField} from "@mui/material";
|
||||
import SelectBox from "@/core/components/SelectBox";
|
||||
import {Box, Button, Drawer, FormHelperText, TextField, Typography} from "@mui/material";
|
||||
import {useTranslations} from "next-intl";
|
||||
import AccessibleIcon from '@mui/icons-material/Accessible';
|
||||
const plate_part2_alpha = [
|
||||
import {useState} from "react";
|
||||
|
||||
const plate_words = [
|
||||
{
|
||||
id : 1,
|
||||
value : "الف",
|
||||
name : "الف"
|
||||
id: 1,
|
||||
value: "الف",
|
||||
name: "الف"
|
||||
},
|
||||
{
|
||||
id : 2,
|
||||
value : "ب",
|
||||
name : "ب"
|
||||
id: 2,
|
||||
value: "ب",
|
||||
name: "ب"
|
||||
},
|
||||
{
|
||||
id : 3,
|
||||
value : "پ",
|
||||
name : "پ"
|
||||
id: 3,
|
||||
value: "پ",
|
||||
name: "پ"
|
||||
},
|
||||
{
|
||||
id : 4,
|
||||
value : "ت",
|
||||
name : "ت"
|
||||
id: 4,
|
||||
value: "ت",
|
||||
name: "ت"
|
||||
},
|
||||
{
|
||||
id : 5,
|
||||
value : "ث",
|
||||
name : "ث"
|
||||
id: 5,
|
||||
value: "ث",
|
||||
name: "ث"
|
||||
},
|
||||
{
|
||||
id : 6,
|
||||
value : "ج",
|
||||
name : "ج"
|
||||
id: 6,
|
||||
value: "ج",
|
||||
name: "ج"
|
||||
},
|
||||
{
|
||||
id : 7,
|
||||
value : "د",
|
||||
name : "د"
|
||||
id: 7,
|
||||
value: "د",
|
||||
name: "د"
|
||||
},
|
||||
{
|
||||
id : 8,
|
||||
value : "ز",
|
||||
name : "ز"
|
||||
id: 8,
|
||||
value: "ز",
|
||||
name: "ز"
|
||||
},
|
||||
{
|
||||
id : 9,
|
||||
value : "س",
|
||||
name : "س"
|
||||
id: 9,
|
||||
value: "س",
|
||||
name: "س"
|
||||
},
|
||||
{
|
||||
id : 10,
|
||||
value : "ش",
|
||||
name : "ش"
|
||||
id: 10,
|
||||
value: "ش",
|
||||
name: "ش"
|
||||
},
|
||||
{
|
||||
id : 11,
|
||||
value : "ص",
|
||||
name : "ص"
|
||||
id: 11,
|
||||
value: "ص",
|
||||
name: "ص"
|
||||
},
|
||||
{
|
||||
id : 12,
|
||||
value : "ط",
|
||||
name : "ط"
|
||||
id: 12,
|
||||
value: "ط",
|
||||
name: "ط"
|
||||
},
|
||||
{
|
||||
id : 13,
|
||||
value : "ع",
|
||||
name : "ع"
|
||||
id: 13,
|
||||
value: "ع",
|
||||
name: "ع"
|
||||
},
|
||||
{
|
||||
id : 14,
|
||||
value : "ف",
|
||||
name : "ف"
|
||||
id: 14,
|
||||
value: "ف",
|
||||
name: "ف"
|
||||
},
|
||||
{
|
||||
id : 15,
|
||||
value : "ق",
|
||||
name : "ق"
|
||||
id: 15,
|
||||
value: "ق",
|
||||
name: "ق"
|
||||
},
|
||||
{
|
||||
id : 16,
|
||||
value : "ک",
|
||||
name : "گ"
|
||||
id: 16,
|
||||
value: "ک",
|
||||
name: "گ"
|
||||
},
|
||||
{
|
||||
id : 17,
|
||||
value : "ل",
|
||||
name : "ل"
|
||||
id: 17,
|
||||
value: "ل",
|
||||
name: "ل"
|
||||
},
|
||||
{
|
||||
id : 18,
|
||||
value : "م",
|
||||
name : "م"
|
||||
id: 18,
|
||||
value: "م",
|
||||
name: "م"
|
||||
},
|
||||
{
|
||||
id : 19,
|
||||
value : "ن",
|
||||
name : "ن"
|
||||
id: 19,
|
||||
value: "ن",
|
||||
name: "ن"
|
||||
},
|
||||
{
|
||||
id : 20,
|
||||
value : "و",
|
||||
name : "و"
|
||||
id: 20,
|
||||
value: "و",
|
||||
name: "و"
|
||||
},
|
||||
{
|
||||
id : 21,
|
||||
value : "ه",
|
||||
name : "ه"
|
||||
id: 21,
|
||||
value: "ه",
|
||||
name: "ه"
|
||||
},
|
||||
{
|
||||
id : 22,
|
||||
value : "ی",
|
||||
name : "ی"
|
||||
id: 22,
|
||||
value: "ی",
|
||||
name: "ی"
|
||||
},
|
||||
{
|
||||
id : 23,
|
||||
value : "*",
|
||||
name : <AccessibleIcon/>
|
||||
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}>
|
||||
const [plateDrawer, setPlateDrawer] = useState(false);
|
||||
const [selectedWordName, setSelectedWordName] = useState("الف");
|
||||
const [selectedWordValue, setSelectedWordValue] = useState("");
|
||||
|
||||
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"}}>
|
||||
<Typography variant="caption" sx={{fontWeight: 500}}>
|
||||
ایران
|
||||
</Typography>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
sx={{width: "50px"}}
|
||||
name="plate_part4"
|
||||
variant="standard"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
type={'number'}
|
||||
label={t("LoanRequest.text_field_plate_part4")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_plate_part4"
|
||||
)}
|
||||
type='number'
|
||||
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}>
|
||||
</Box>
|
||||
<Box>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
sx={{width: "70px"}}
|
||||
name="plate_part3"
|
||||
variant="standard"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
type={'number'}
|
||||
label={t("LoanRequest.text_field_plate_part3")}
|
||||
placeholder={t(
|
||||
"LoanRequest.text_field_enter_your_plate_part3"
|
||||
)}
|
||||
type='number'
|
||||
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}>
|
||||
</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>
|
||||
</Box>
|
||||
<Box>
|
||||
<TextField
|
||||
sx={{width: "100%"}}
|
||||
sx={{width: "50px"}}
|
||||
name="plate_part1"
|
||||
variant="standard"
|
||||
type={'number'}
|
||||
variant="outlined"
|
||||
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>
|
||||
</Box>
|
||||
</Box>
|
||||
<FormHelperText>{t("error_message_plate_number")}</FormHelperText>
|
||||
</>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user