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

merge mohammad plate number component

Browse Source
This commit is contained in:
AminGhasempoor
2023-12-18 09:51:25 +03:30
parent ea2be91094 4a54f3a8d2
commit 8cbe7a435c
3 changed files with 166 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,6 +19,7 @@
"online_message": "شما به اینترنت وصل هستید",
"offline_message": "اتصال شما به اینترنت قطع شده است",
"routing_to": "در حال انتقال به صفحه",
"error_message_plate_number": "لطفا شماره پلاک خود را وارد کنید!",
"header": {
"open_profile": "پروفایل",
"edit_profile": "ویرایش پروفایل",
@@ -139,7 +140,6 @@
"error_message_name": "لطفا نام خود را وارد کنید!",
"error_message_tel_number": "لطفا شماره ثابت (با پیش شماره استان) خود را وارد کنید!",
"error_message_vehicle_type": "لطفا نوع وسیله نقلیه خود را وارد کنید!",
"error_message_plate_number": "لطفا شماره پلاک خود را وارد کنید!",
"error_message_navgan_id": "لطفا کد هوشمند خود را وارد کنید!",
"error_message_province_id": "لطفا استان خود را وارد کنید!",
"error_message_national_id": "لطفا کد ملی خود را وارد کنید!",

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

@@ -1,7 +1,7 @@
import SelectBox from "@/core/components/SelectBox";
import {SEND_LOAN_REQUEST_NAVGAN} from "@/core/data/apiRoutes";
import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
import {Box, Button, FormControl, Grid, Stack, TextField} from "@mui/material";
import {Box, Button, Grid, TextField} from "@mui/material";
import {useFormik} from "formik";
import {useTranslations} from "next-intl";
import * as Yup from "yup";
@@ -15,8 +15,8 @@ const AddFormComponent = () => {
const t = useTranslations();
const {token} = useUser();
const requestServer = useRequest()
const{provinceList, isLoadingProvinceList, errorProvinceList} = useProvince()
const{cityTextField, cityList, setProvinceID}=useCities()
const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince()
const {cityTextField, cityList, setProvinceID} = useCities()
const initialValues = {
tel_number: "",
@@ -49,7 +49,7 @@ const AddFormComponent = () => {
address: Yup.string().required(
t("LoanRequest.error_message_address")
),
postal_code : Yup.mixed()
postal_code: Yup.mixed()
.test("max", `${t("LoanRequest.postal_code_max")}`, (value) => value.toString().length === 10)
.required(
t("LoanRequest.error_message_postal_code")
@@ -78,7 +78,7 @@ const AddFormComponent = () => {
city_id: Yup.string().required(t("LoanRequest.error_message_city_id")),
national_code: Yup.mixed()
.test("is-number", `${t("LoanRequest.national_code_number")}`,
(value) => !isNaN(value))
(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")),
@@ -280,7 +280,7 @@ const AddFormComponent = () => {
</Grid>
</Grid>
<Grid container spacing={2} sx={{padding : 2}}>
<Grid item xs={12}>
<Grid item xs={12} sm={6}>
<PlateNumber formik={formik} />
</Grid>
</Grid>

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

@@ -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", justifyContent: "center"}}>
<Typography variant="caption" sx={{fontWeight: 500}}>
ایران
</Typography>
<TextField
sx={{width: "100%"}}
fullWidth
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%"}}
fullWidth
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%"}}
fullWidth
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>
</>
)
}