From 35bf4f7a7d6d9c77d49efac4d017a076efc56b67 Mon Sep 17 00:00:00 2001 From: AminGhasempoor Date: Mon, 11 Dec 2023 15:39:43 +0330 Subject: [PATCH] replace field with textField and add error validation to it --- public/locales/fa/app.json | 2 + .../navgan/add-request-loan/forms/AddForm.jsx | 536 +++++++----------- 2 files changed, 213 insertions(+), 325 deletions(-) diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 2eeb753..fe291f9 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -136,6 +136,7 @@ "error_message_province_id": "لطفا استان خود را وارد کنید!", "error_message_national_id": "لطفا کد ملی خود را وارد کنید!", "error_message_shenasname_id": "لطفا شماره شناسنامه خود را وارد کنید!", + "error_message_national_code": "لطفا کد ملی خود را وارد کنید!", "text_field_phone_number": "شماره تلفن", "text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید", "text_field_name": "نام", @@ -145,6 +146,7 @@ "text_field_province_id": "استان", "text_field_loading_provinces_list": "درحال دریافت استان ها", "text_field_error_fetching_provinces": "خطا در دریافت استان ها", + "text_field_enter_your_national_code": "کد ملی خود را وارد کنید", "text_field_enter_your_province_id": "استان خود را وارد کنید", "text_field_navgan_id": "شماره ناوگان", "text_field_enter_your_navgan_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 88d33c0..ee7687d 100644 --- a/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx +++ b/src/components/dashboard/navgan/add-request-loan/forms/AddForm.jsx @@ -1,22 +1,17 @@ import SelectBox from "@/core/components/SelectBox"; -import StyledForm from "@/core/components/StyledForm"; -import UploadSystem from "@/core/components/UploadSystem"; import {GET_PROVINCE_LIST, SEND_LOAN_REQUEST_NAVGAN,} from "@/core/data/apiRoutes"; import DataSaverOnIcon from "@mui/icons-material/DataSaverOn"; import {Box, Button, Stack, TextField} from "@mui/material"; import axios from "axios"; -import {Field, Formik} from "formik"; +import {useFormik} from "formik"; import {useTranslations} from "next-intl"; import {useEffect, useState} from "react"; import * as Yup from "yup"; -import {useDirection, useUser} from "@witel/webapp-builder"; +import {useUser} from "@witel/webapp-builder"; const AddFormComponent = () => { const t = useTranslations(); - const {directionApp} = useDirection(); const {token} = useUser(); - - // get province list const [provinceList, setProvinceList] = useState([]); useEffect(() => { axios @@ -31,50 +26,11 @@ const AddFormComponent = () => { })); setProvinceList(formattedData); }) - .catch((error) => { - }); + .catch((error) => {}); }, []); - // end get province list - // upload files - const [selectedImageShenasname, setSelectedImageShenasname] = useState( - "/images/upload-image.svg" - ); - const [fileTypeShenasname, setFileTypeShenasname] = useState(null); - const [fileNameShenasname, setFileNameShenasname] = useState(null); - const [selectedImageNationalCard, setSelectedImageNationalCard] = useState( - "/images/upload-image.svg" - ); - const [fileTypeNationalCard, setFileTypeNationalCard] = useState(null); - const [fileNameNationalCard, setFileNameNationalCard] = useState(null); - const handleUploadChangeShenasname = (event, setFieldValue) => { - const uploadedFile = event.target?.files?.[0]; - if (uploadedFile) { - const fileType = event.target?.files?.[0].type; - const fileName = event.target?.files?.[0].name; - setSelectedImageShenasname(URL.createObjectURL(uploadedFile)); - setFileTypeShenasname(fileType); - setFileNameShenasname(fileName); - setFieldValue("shenasname_img", uploadedFile); - } - }; - const handleUploadChangeNationalCard = (event, setFieldValue) => { - const uploadedFile = event.target?.files?.[0]; - const fileType = event.target.files[0].type; - const fileName = event.target.files[0].name; - if (uploadedFile) { - setSelectedImageNationalCard(URL.createObjectURL(uploadedFile)); - setFileTypeNationalCard(fileType); - setFileNameNationalCard(fileName); - setFieldValue("national_card_img", uploadedFile); - } - }; - // end upload files - - // initial values const initialValues = { - name: "", phone_number: "", vehicle_type: "", plate_number: "", @@ -85,11 +41,8 @@ const AddFormComponent = () => { national_card_img: null, shenasname_img: null, }; - // end initial values - // validation const validationSchema = Yup.object().shape({ - name: Yup.string().required(t("LoanRequest.error_message_name")), phone_number: Yup.string().required( t("LoanRequest.error_message_phone_number") ), @@ -108,12 +61,8 @@ const AddFormComponent = () => { t("LoanRequest.error_message_shenasname_id") ), }); - // end validation - - // submit const handleSubmit = async (values, props) => { const formData = new FormData(); - formData.append("name", values.name); formData.append("phone_number", values.phone_number); formData.append("vehicle_type", values.vehicle_type); formData.append("plate_number", values.plate_number); @@ -139,283 +88,220 @@ const AddFormComponent = () => { props.setSubmitting(false); }); }; - // end submit + + const formik = useFormik({ + initialValues, validationSchema, onSubmit: handleSubmit + }) return ( - - {(props) => ( - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - )} - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); };