From 4a54f3a8d29bd9d9bc6c6f123a036d4b63c611d2 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Wed, 13 Dec 2023 15:52:41 +0330 Subject: [PATCH] mohammad | working on plate component --- public/locales/fa/app.json | 2 +- .../navgan/add-request-loan/forms/AddForm.jsx | 73 ++--- src/core/components/PlateNumber.jsx | 295 ++++++++++-------- 3 files changed, 189 insertions(+), 181 deletions(-) diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 228b3c2..d5fa8b9 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -19,6 +19,7 @@ "online_message": "شما به اینترنت وصل هستید", "offline_message": "اتصال شما به اینترنت قطع شده است", "routing_to": "در حال انتقال به صفحه", + "error_message_plate_number": "لطفا شماره پلاک خود را وارد کنید!", "header": { "open_profile": "پروفایل", "edit_profile": "ویرایش پروفایل", @@ -137,7 +138,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": "لطفا کد ملی خود را وارد کنید!", diff --git a/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx b/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx index f5417f7..6567b42 100644 --- a/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx +++ b/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx @@ -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"; @@ -14,8 +14,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: "", @@ -28,10 +28,10 @@ const AddFormComponent = () => { shenasname_id: "", postal_code: "", navgan_type: "", - plate_part1 : "", - plate_part2 : "", - plate_part3 : "", - plate_part4 : "", + plate_part1: "", + plate_part2: "", + plate_part3: "", + plate_part4: "", }; const validationSchema = Yup.object().shape({ @@ -44,36 +44,17 @@ const AddFormComponent = () => { navgan_type: Yup.string().required( t("LoanRequest.error_message_navgan_type") ), - 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") ), - plate_part1: Yup.mixed() - .test("max", `${t("LoanRequest.plate_part1_max")}`, (value) => value.toString().length === 2) - .required( - t("LoanRequest.error_message_plate_part1") - ), - plate_part2: Yup.mixed() - .required( - t("LoanRequest.error_message_plate_part2") - ), - plate_part3: Yup.mixed() - .test("max", `${t("LoanRequest.plate_part3_max")}`, (value) => value.toString().length === 2) - .required( - t("LoanRequest.error_message_plate_part3") - ), - plate_part4: Yup.mixed() - .test("max", `${t("LoanRequest.plate_part3_max")}`, (value) => value.toString().length === 2) - .required( - t("LoanRequest.error_message_plate_part3") - ), navgan_id: Yup.mixed().required(t("LoanRequest.error_message_navgan_id")), province_id: Yup.string().required(t("LoanRequest.error_message_province_id")), 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")), @@ -96,7 +77,7 @@ const AddFormComponent = () => { formData.append("national_code", values.national_code); formData.append("shenasname_id", values.shenasname_id); - requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth : true, notification : true}).then().catch(() => { + requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth: true, notification: true}).then().catch(() => { props.setSubmitting(false) }) }; @@ -106,7 +87,7 @@ const AddFormComponent = () => { }) return ( <> - @@ -147,15 +128,15 @@ const AddFormComponent = () => { /> - + { label={t("LoanRequest.text_field_navgan_type")} size="small" selectType="navgan_type" - selectors={[{id : 1, value : 1, name : "مسافری"},{id : 2, value : 2, name : "عمومی"},{id : 3, value : 3, name : "روستایی"}]} + selectors={[{id: 1, value: 1, name: "مسافری"}, {id: 2, value: 2, name: "عمومی"}, { + id: 3, + value: 3, + name: "روستایی" + }]} select={formik.values.navgan_type} - handleChange={(event)=> {formik.setFieldValue('navgan_type', event.target.value)}} + handleChange={(event) => { + formik.setFieldValue('navgan_type', event.target.value) + }} setFieldTouched={formik.setFieldTouched} error={formik.touched.navgan_type && Boolean(formik.errors.navgan_type)} helperText={formik.touched.navgan_type && formik.errors.navgan_type} @@ -213,7 +200,7 @@ const AddFormComponent = () => { /> - + { errorEcured={errorProvinceList} selectors={provinceList} select={formik.values.province_id} - handleChange={(event)=> {formik.setFieldValue('province_id', event.target.value); setProvinceID(event.target.value) + handleChange={(event) => { + formik.setFieldValue('province_id', event.target.value); + setProvinceID(event.target.value) formik.setFieldTouched("city_id", false, false); formik.setFieldValue("city_id", "") }} @@ -243,7 +232,7 @@ const AddFormComponent = () => { disabled={cityList.length === 0} selectors={cityList} select={formik.values.city_id} - handleChange={(event)=>formik.setFieldValue('city_id', event.target.value)} + handleChange={(event) => formik.setFieldValue('city_id', event.target.value)} setFieldTouched={formik.setFieldTouched} error={formik.touched.city_id && Boolean(formik.errors.city_id)} helperText={formik.touched.city_id && formik.errors.city_id} @@ -251,7 +240,7 @@ const AddFormComponent = () => { /> - + { /> - - - - - + + id: 23, + value: "*", + name: }, ] const PlateNumber = ({formik}) => { const t = useTranslations(); - return( - - - + const [plateDrawer, setPlateDrawer] = useState(false); + const [selectedWordName, setSelectedWordName] = useState("الف"); + const [selectedWordValue, setSelectedWordValue] = useState(""); + + return ( + <> + + + + ایران + - - + + - - - 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")} - /> - - + + + {/**/} + + setPlateDrawer(false)} + > + + {plate_words.map((item) => ( + + ))} + + + + - - - + + + {t("error_message_plate_number")} + ) }