From b3e31516a7897dd0869ce7c16962f2c9c9acca6a Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Wed, 13 Dec 2023 15:52:41 +0330 Subject: [PATCH 1/4] resolve conflicts --- public/locales/fa/app.json | 51 +- .../navgan/add-request-loan/forms/AddForm.jsx | 685 +++++++----------- .../dashboard/navgan/show/form/index.jsx | 36 + src/core/components/PlateNumber.jsx | 232 ++++++ 4 files changed, 540 insertions(+), 464 deletions(-) create mode 100644 src/core/components/PlateNumber.jsx diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 507c7e3..0822e5f 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": "ویرایش پروفایل", @@ -126,48 +127,56 @@ "no_request_found": "درخواستی یافت نشد" }, "LoanRequest": { + "city_id": "شهر", "loan_request_page": "ثبت درخواست وام", "personal_info": "اطلاعات شخصی", + "national_code_number": "کد ملی می بایست شامل اعداد باشد", + "national_code_max": "کد ملی می بایست 10 رقم باشد", + "tel_number_max": "شماره ثابت می بایست 11 رقم باشد", + "national_code_positive": "کد ملی می بایست مثبت باشد", "uploading_documents": "اسناد", "error_message_name": "لطفا نام خود را وارد کنید!", - "error_message_phone_number": "لطفا شماره تلفن خود را وارد کنید!", + "error_message_tel_number": "لطفا شماره ثابت (با پیش شماره استان) خود را وارد کنید!", "error_message_vehicle_type": "لطفا نوع وسیله نقلیه خود را وارد کنید!", "error_message_plate_number": "لطفا شماره پلاک خود را وارد کنید!", - "error_message_navgan_id": "لطفا کد ناوگان خود را وارد کنید!", + "error_message_navgan_id": "لطفا کد هوشمند خود را وارد کنید!", "error_message_province_id": "لطفا استان خود را وارد کنید!", "error_message_national_id": "لطفا کد ملی خود را وارد کنید!", "error_message_shenasname_id": "لطفا شماره شناسنامه خود را وارد کنید!", - "text_field_phone_number": "شماره تلفن", - "text_field_enter_your_phone_number": "شماره تلفن خود را وارد کنید", + "error_message_national_code": "لطفا کد ملی خود را وارد کنید!", + "text_field_tel_number": "شماره ثابت (با پیش شماره استان)", + "text_field_enter_your_tel_number": "شماره ثابت (با پیش شماره استان) خود را وارد کنید", "text_field_name": "نام", + "text_field_plate_part4": "بخش چهارم", + "text_field_plate_part3": "بخش سوم", + "text_field_plate_part2": "بخش دوم", + "text_field_plate_part1": "بخش اول", + "text_field_enter_your_plate_part1": "بخش اول پلاک را وارد کنید", + "text_field_enter_your_plate_part2": "بخش دوم پلاک را وارد کنید", + "text_field_enter_your_plate_part3": "بخش سوم پلاک را وارد کنید", + "text_field_enter_your_plate_part4": "بخش چهارم پلاک راوارد کنید", + "text_field_loading_cities_list": "درحال دریافت اطلاعات شهر ها...", + "text_field_city_id": "شهر", "text_field_enter_your_name": "نام خود را وارد کنید", - "text_field_vehicle_type": "نام وسیله نقلیه", - "text_field_enter_your_vehicle_type": "نام وسیله نقلیه خود را وارد کنید", + "text_field_vehicle_type": "نوع وسیله نقلیه", + "text_field_enter_your_vehicle_type": "نوع وسیله نقلیه خود را وارد کنید", "text_field_province_id": "استان", - "text_field_loading_provinces_list": "درحال دریافت استان ها", + "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": "شماره ناوگان خود را وارد کنید", + "text_field_enter_your_city_id": "شهر خود را وارد کنید", + "text_field_navgan_id": "کد هوشمند ناوگان", + "text_field_enter_your_navgan_id": "کد هوشمند ناوگان خود را وارد کنید", "text_field_national_code": "کد ملی", "text_field_enter_your_national_id": "کد ملی خود را وارد کنید", "text_field_shenasname_id": "شماره شناسنامه", "text_field_enter_your_shenasname_id": "شماره شناسنامه خود را وارد کنید", "text_field_plate_number": "شماره پلاک", "text_field_enter_your_plate_number": "شماره پلاک خود را وارد کنید", + "text_field_error_fetching_cities": "شهر خود را وارد کنید!", "button_submit": "ثبت درخواست", - "file_field_sherkat_naft_doc": "مجوز شرکت نفت", - "file_field_estate_doc": "سند مالکیت", - "file_field_agreement_doc": "موافقت نامه اصولی", - "error_message_sherkat_naft_doc": "مجوز شرکت نفت خود را وارد کنید", - "error_message_estate_doc": "سند مالکیت خود را وارد کنید", - "error_message_agreement_doc": "موافقت نامه اصولی خود را وارد کنید", - "file_field_shenasname_image": "تصویر شناسنامه", - "file_field_national_card_image": "تصویر کارت ملی", - "file_field_payan_khedmat_image": "تصویر کارت پایان خدمت", - "error_message_national_card_image": "تصویر کارت ملی خود را وارد کنید", - "error_message_shenasname_image": "تصویر شناسنامه خود را وارد کنید", - "error_message_payan_khedmat_image": "تصویر کارت پایان خدمت خود را وارد کنید", + "error_message_city_id": "لطفا شهر خود را وارد کنید!", "add_loan_request_permission": "اکنون امکان ثبت درخواست جدید برای شما مقدور نیست" }, "showLoan": { 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 df79a4c..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,488 +1,287 @@ -import Notifications from "@/core/components/notifications"; 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 useDirection from "@/lib/app/hooks/useDirection"; -import useUser from "@/lib/app/hooks/useUser"; +import {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 {Box, Button, Grid, TextField} from "@mui/material"; +import {useFormik} from "formik"; import {useTranslations} from "next-intl"; -import {useEffect, useState} from "react"; import * as Yup from "yup"; +import {useRequest, useUser} from "@witel/webapp-builder"; +import useProvince from "@/lib/app/hooks/useProvince"; +import useCities from "@/lib/app/hooks/useCities"; +import PlateNumber from "@/core/components/PlateNumber"; const AddFormComponent = () => { const t = useTranslations(); - const {directionApp} = useDirection(); const {token} = useUser(); + const requestServer = useRequest() + const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince() + const {cityTextField, cityList, setProvinceID} = useCities() - // get province list - const [provinceList, setProvinceList] = useState([]); - useEffect(() => { - axios - .get(GET_PROVINCE_LIST, { - headers: {Authorization: `Bearer ${token}`}, - }) - .then(({data}) => { - const formattedData = data.map((province, index) => ({ - id: index, - name: province.name, - value: province.id, - })); - setProvinceList(formattedData); - }) - .catch((error) => { - Notifications(t, error.response); - }); - }, []); - // 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: "", + tel_number: "", vehicle_type: "", plate_number: "", province_id: "", + city_id: "", navgan_id: "", national_code: "", shenasname_id: "", - national_card_img: null, - shenasname_img: null, + postal_code: "", + navgan_type: "", + plate_part1: "", + plate_part2: "", + plate_part3: "", + plate_part4: "", }; - // 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") - ), + tel_number: Yup.mixed() + .test("max", `${t("LoanRequest.tel_number_max")}`, (value) => value.toString().length === 11) + .required(t("LoanRequest.error_message_tel_number")), vehicle_type: Yup.string().required( t("LoanRequest.error_message_vehicle_type") ), - plate_number: Yup.string().required( - t("LoanRequest.error_message_plate_number") + navgan_type: Yup.string().required( + t("LoanRequest.error_message_navgan_type") ), - navgan_id: Yup.string().required(t("LoanRequest.error_message_navgan_id")), + postal_code: Yup.mixed() + .test("max", `${t("LoanRequest.postal_code_max")}`, (value) => value.toString().length === 10) + .required( + t("LoanRequest.error_message_postal_code") + ), + navgan_id: Yup.mixed().required(t("LoanRequest.error_message_navgan_id")), province_id: Yup.string().required(t("LoanRequest.error_message_province_id")), - national_code: Yup.string().required( - t("LoanRequest.error_message_national_code") - ), + 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)) + .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")), shenasname_id: Yup.string().required( t("LoanRequest.error_message_shenasname_id") ), }); - // end validation - // submit + const handleSubmit = async (values, props) => { - Notifications(t, undefined); const formData = new FormData(); - formData.append("name", values.name); - formData.append("phone_number", values.phone_number); + formData.append("tel_number", values.tel_number); + formData.append("navgan_type", values.navgan_type); + formData.append("postal_code", values.postal_code); formData.append("vehicle_type", values.vehicle_type); formData.append("plate_number", values.plate_number); formData.append("province_id", values.province_id); + formData.append("city_id", values.city_id); formData.append("navgan_id", values.navgan_id); formData.append("national_code", values.national_code); formData.append("shenasname_id", values.shenasname_id); - if (values.shenasname_img != null) - formData.append("shenasname_image", values.shenasname_img); - if (values.national_card_img != null) - formData.append("national_card_image", values.national_card_img); - await axios - .post(SEND_LOAN_REQUEST_NAVGAN, formData, { - headers: { - Authorization: `Bearer ${token}`, - "Content-Type": "multipart/form-data", - }, - }) - .then(function (response) { - Notifications(t, response); - }) - .catch(function (error) { - Notifications(t, error.response); - props.setSubmitting(false); - }); + requestServer(SEND_LOAN_REQUEST_NAVGAN, "post", {auth: true, notification: true}).then().catch(() => { + props.setSubmitting(false) + }) }; - // end submit + const formik = useFormik({ + initialValues, validationSchema, onSubmit: handleSubmit + }) return ( - - {(props) => ( - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - handleUploadChangeShenasname(e, props.setFieldValue) - } - setselectedImage={setSelectedImageShenasname} - setFieldValue={props.setFieldValue} - fieldname="shenasname_img" - fileType={fileTypeShenasname} - fileName={fileNameShenasname} - imageAlt={t("app_name")} - imageSize={[300 /*width*/, 150 /*height*/]} - label={t("LoanRequest.file_field_shenasname_image")} - /> - - handleUploadChangeNationalCard(e, props.setFieldValue) - } - setselectedImage={setSelectedImageNationalCard} - setFieldValue={props.setFieldValue} - fieldname="national_card_img" - fileType={fileTypeNationalCard} - fileName={fileNameNationalCard} - imageAlt={t("app_name")} - imageSize={[300 /*width*/, 150 /*height*/]} - label={t("LoanRequest.file_field_national_card_image")} - /> - - - - - - - )} - + + + + + + + + + + + + + + + + + + + + { + 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} + onBlur={formik.handleBlur("navgan_type")} + /> + + + + + { + formik.setFieldValue('province_id', event.target.value); + setProvinceID(event.target.value) + formik.setFieldTouched("city_id", false, false); + formik.setFieldValue("city_id", "") + }} + setFieldTouched={formik.setFieldTouched} + error={formik.touched.province_id && Boolean(formik.errors.province_id)} + helperText={formik.touched.province_id && formik.errors.province_id} + onBlur={formik.handleBlur("province_id")} + /> + + + 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} + onBlur={formik.handleBlur("city_id")} + /> + + + + + + + + + + + + + + ); }; diff --git a/src/components/dashboard/navgan/show/form/index.jsx b/src/components/dashboard/navgan/show/form/index.jsx index a1f237f..446deb0 100644 --- a/src/components/dashboard/navgan/show/form/index.jsx +++ b/src/components/dashboard/navgan/show/form/index.jsx @@ -4,6 +4,7 @@ import {Field, Formik} from "formik"; import {useTranslations} from "next-intl"; import EditIcon from '@mui/icons-material/Edit'; import * as Yup from "yup"; +import SelectBox from "@/core/components/SelectBox"; const ShowLoanForm = () => { const t = useTranslations(); @@ -231,6 +232,41 @@ const ShowLoanForm = () => { /> + + + + + + }, +] +const PlateNumber = ({formik}) => { + const t = useTranslations(); + const [plateDrawer, setPlateDrawer] = useState(false); + const [selectedWordName, setSelectedWordName] = useState("الف"); + const [selectedWordValue, setSelectedWordValue] = useState(""); + + return ( + <> + + + + ایران + + + + + + + + {/**/} + + setPlateDrawer(false)} + > + + {plate_words.map((item) => ( + + ))} + + + + + + + + {t("error_message_plate_number")} + + + ) +} +export default PlateNumber \ No newline at end of file From 80f9ebb03fcecd856d056d062794fe6422585c4e Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Tue, 19 Dec 2023 10:24:32 +0330 Subject: [PATCH 2/4] update packages and bring some of fields to show loan page --- src/core/components/MuiDatePicker.jsx | 0 src/lib/app/hooks/useCities.jsx | 0 2 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 src/core/components/MuiDatePicker.jsx create mode 100644 src/lib/app/hooks/useCities.jsx diff --git a/src/core/components/MuiDatePicker.jsx b/src/core/components/MuiDatePicker.jsx new file mode 100644 index 0000000..e69de29 diff --git a/src/lib/app/hooks/useCities.jsx b/src/lib/app/hooks/useCities.jsx new file mode 100644 index 0000000..e69de29 From 79152b690b82b5f5666c83c3b8ba5cdab831ec75 Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Tue, 19 Dec 2023 10:25:10 +0330 Subject: [PATCH 3/4] update packages and bring some of fields to show loan page --- package.json | 6 +- public/locales/fa/app.json | 43 ++-- .../navgan/add-request-loan/index.jsx | 30 +-- .../dashboard/navgan/show/form/index.jsx | 233 +++++++++++++++--- .../dashboard/navgan/show/index.jsx | 4 +- src/core/components/MuiDatePicker.jsx | 89 +++++++ src/core/components/PlateNumber.jsx | 174 ++++++------- src/core/components/SelectBox.jsx | 54 ++-- src/core/data/apiRoutes.js | 1 + src/lib/app/hooks/useCities.jsx | 37 +++ src/lib/app/hooks/useProvince.jsx | 37 +-- .../dashboard/navgan/[id]/show/index.jsx | 2 +- 12 files changed, 507 insertions(+), 203 deletions(-) diff --git a/package.json b/package.json index 9b8b7b0..39f3ec4 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,11 @@ "@mui/icons-material": "^5.11.16", "@mui/lab": "^5.0.0-alpha.152", "@mui/material": "^5.12.0", - "@witel/webapp-builder": "^1.0.6", + "@mui/x-date-pickers": "^6.18.5", + "@witel/webapp-builder": "^1.1.0", "axios": "^1.4.0", "colord": "^2.9.3", + "date-fns-jalali": "^2.13.0-0", "eslint": "8.36.0", "formik": "^2.2.9", "fs-extra": "^11.1.1", @@ -43,4 +45,4 @@ "@faker-js/faker": "^7.6.0", "eslint-config-next": "^13.3.0" } -} +} \ No newline at end of file diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 0822e5f..7ebdf39 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -67,7 +67,8 @@ "dashboard": "داشبورد", "add-request-loan": "درخواست وام", "followUp-loan": "پیگیری درخواست", - "edit-request-loan": "ویرایش درخواست وام" + "edit-request-loan": "ویرایش درخواست وام", + "show": "نمایش" }, "Authorization": { "typography_your_login_is_valid_and_you_do_not_need_to_login_again": "شما دسترسی لازم به این صفحه را دارید نیاز به ورود مجدد نیست.", @@ -179,26 +180,38 @@ "error_message_city_id": "لطفا شهر خود را وارد کنید!", "add_loan_request_permission": "اکنون امکان ثبت درخواست جدید برای شما مقدور نیست" }, - "showLoan": { - "show_loan_page": "نمایش وام", + "ShowLoan": { + "show_loan_page": "نمایش وام | ناوگان", "text_field_national_code": "کد ملی", "text_field_postal_code": "کد پستی", "text_field_national_card_serial_num": "سریال پشت کارت ملی", "text_field_address": "آدرس", "text_field_birth_date": "تاریخ تولد", "text_field_navgan_id": "کد ناوگان", - "text_field_enter_your_national_code": "کد ملی خود را وارد کنید", - "text_field_enter_your_postal_code": "کد پستی خود را وارد کنید", - "text_field_enter_your_national_card_serial_num": "سریال پشت کارت ملی خود را وارد کنید", - "text_field_enter_your_address": "آدرس خود را وارد کنید", - "text_field_enter_your_birth_date": "تاریخ تولد خود را وارد کنید", - "text_field_enter_your_navgan_id": "کد ناوگان خود را وارد کنید", - "error_message_national_code": "لطفا کد ملی خود را وارد کنید!", - "error_message_postal_code": "لطفا کد پستی خود را وارد کنید!", - "error_message_national_card_serial_num": "لطفا سریال پشت کارت ملی خود را وارد کنید!", - "error_message_address": "لطفا آدرس خود را وارد کنید!", - "error_message_birth_date": "لطفا تاریخ تولد خود را وارد کنید!", - "error_message_navgan_id": "لطفا کد ناوگان خود را وارد کنید!", + "text_field_province_id": "استان", + "text_field_owner_full_name": "نام کامل مالک", + "text_field_navgan_type": "نوع ناوگان", + "text_field_vehicle_type": "نوع وسیله", + "text_field_enter_your_national_code": "کد ملی را وارد کنید", + "text_field_enter_your_postal_code": "کد پستی را وارد کنید", + "text_field_enter_your_national_card_serial_num": "سریال پشت کارت ملی را وارد کنید", + "text_field_enter_your_address": "آدرس را وارد کنید", + "text_field_enter_your_birth_date": "تاریخ تولد را وارد کنید", + "text_field_enter_your_navgan_id": "کد ناوگان را وارد کنید", + "text_field_enter_your_owner_full_name": "نام کامل مالک را وارد کنید", + "error_message_national_code": "لطفا کد ملی را وارد کنید!", + "error_message_postal_code": "لطفا کد پستی را وارد کنید!", + "error_message_national_card_serial_num": "لطفا سریال پشت کارت ملی را وارد کنید!", + "error_message_address": "لطفا آدرس را وارد کنید!", + "error_message_birth_date": "لطفا تاریخ تولد را وارد کنید!", + "error_message_navgan_id": "لطفا کد ناوگان را وارد کنید!", + "error_message_province_id": "لطفا استان را وارد کنید!", + "error_message_city_id": "لطفا شهر خود را وارد کنید!", + "error_message_owner_full_name": "لطفا نام کامل مالک را وارد کنید!", + "error_message_navgan_type": "لطفا نوع ناوگان را وارد کنید!", + "error_message_vehicle_type": "لطفا نوع وسیله را وارد کنید!", + "error_message_fixed_number": "لطفا تلفن ثابت را وارد کنید!", + "cityList_empty": "شهر یافت نشد", "button_submit": "ویرایش" }, "EditLoanRequest": { diff --git a/src/components/dashboard/navgan/add-request-loan/index.jsx b/src/components/dashboard/navgan/add-request-loan/index.jsx index cd9d359..356dfe1 100644 --- a/src/components/dashboard/navgan/add-request-loan/index.jsx +++ b/src/components/dashboard/navgan/add-request-loan/index.jsx @@ -1,29 +1,25 @@ -import CenterLayout from "@/layouts/CenterLayout"; -import DashboardLayouts from "@/layouts/dashboardLayouts"; -import useUser from "@/lib/app/hooks/useUser"; import {Box, Chip, Divider} from "@mui/material"; import {useTranslations} from "next-intl"; import AddFormComponent from "@/components/dashboard/navgan/add-request-loan/forms/AddForm"; +import {CenterLayout, useUser} from "@witel/webapp-builder"; const LoanRequestComponent = () => { const t = useTranslations(); const {user} = useUser(); return ( - - - - - - - - - - + + + + + + + + ); }; diff --git a/src/components/dashboard/navgan/show/form/index.jsx b/src/components/dashboard/navgan/show/form/index.jsx index 446deb0..329a69c 100644 --- a/src/components/dashboard/navgan/show/form/index.jsx +++ b/src/components/dashboard/navgan/show/form/index.jsx @@ -5,9 +5,16 @@ import {useTranslations} from "next-intl"; import EditIcon from '@mui/icons-material/Edit'; import * as Yup from "yup"; import SelectBox from "@/core/components/SelectBox"; +import useProvince from "@/lib/app/hooks/useProvince"; +import useCities from "@/lib/app/hooks/useCities"; +import {useEffect} from "react"; +import PlateNumber from "@/core/components/PlateNumber"; +import MuiDatePicker from "@/core/components/MuiDatePicker"; const ShowLoanForm = () => { const t = useTranslations(); + const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince(); + const {cityList, cityTextField, setProvinceID, isLoadingCityList} = useCities(); // initial values const initialValues = { @@ -16,18 +23,38 @@ const ShowLoanForm = () => { national_card_serial_num: "0312288875", address: "تهران - ثنایی - مطهری ساختمان مهتاب", birth_date: "10/25/44", - navgan_id: "14575" + navgan_id: "14575", + province_id: "9", + city_id: "33", + owner_full_name: "حسن قلی ابدوالابادی", + navgan_type: "2", + vehicle_type: "1", + fixed_number: "02637317735", + plate_part1: "22", + plate_part2: "ب", + plate_part3: "333", + plate_part4: "12", }; // end initial values + useEffect(() => { + setProvinceID(initialValues.province_id); + }, [initialValues.province_id]); + // validation const validationSchema = Yup.object().shape({ - national_code: Yup.string().required(t("showLoan.error_message_national_code")), - postal_code: Yup.string().required(t("showLoan.error_message_postal_code")), - national_card_serial_num: Yup.string().required(t("showLoan.error_message_national_card_serial_num")), - address: Yup.string().required(t("showLoan.error_message_address")), - birth_date: Yup.string().required(t("showLoan.error_message_birth_date")), - navgan_id: Yup.string().required(t("showLoan.error_message_navgan_id")), + national_code: Yup.string().required(t("ShowLoan.error_message_national_code")), + postal_code: Yup.string().required(t("ShowLoan.error_message_postal_code")), + national_card_serial_num: Yup.string().required(t("ShowLoan.error_message_national_card_serial_num")), + address: Yup.string().required(t("ShowLoan.error_message_address")), + birth_date: Yup.string().required(t("ShowLoan.error_message_birth_date")), + navgan_id: Yup.string().required(t("ShowLoan.error_message_navgan_id")), + province_id: Yup.string().required(t("ShowLoan.error_message_province_id")), + city_id: Yup.string().required(t("ShowLoan.error_message_city_id")), + owner_full_name: Yup.string().required(t("ShowLoan.error_message_owner_full_name")), + navgan_type: Yup.string().required(t("ShowLoan.error_message_navgan_type")), + vehicle_type: Yup.string().required(t("ShowLoan.error_message_vehicle_type")), + fixed_number: Yup.string().required(t("ShowLoan.error_message_fixed_number")), }); // end validation @@ -40,6 +67,12 @@ const ShowLoanForm = () => { formData.append("address", values.address); formData.append("birth_date", values.birth_date); formData.append("navgan_id", values.navgan_id); + formData.append("province_id", values.province_id); + formData.append("city_id", values.city_id); + formData.append("owner_full_name", values.owner_full_name); + formData.append("navgan_type", values.navgan_type); + formData.append("vehicle_type", values.vehicle_type); + formData.append("fixed_number", values.fixed_number); }; // end submit @@ -82,8 +115,8 @@ const ShowLoanForm = () => { disabled variant="standard" size="small" - label={t("showLoan.text_field_national_code")} - placeholder={t("showLoan.text_field_enter_your_national_code")} + label={t("ShowLoan.text_field_national_code")} + placeholder={t("ShowLoan.text_field_enter_your_national_code")} type={"text"} error={!!(props.touched.national_code && props.errors.national_code)} fullWidth @@ -104,9 +137,9 @@ const ShowLoanForm = () => { disabled variant="standard" size="small" - label={t("showLoan.text_field_birth_date")} + label={t("ShowLoan.text_field_birth_date")} placeholder={t( - "showLoan.text_field_enter_your_birth_date" + "ShowLoan.text_field_enter_your_birth_date" )} type={"text"} error={!!(props.touched.birth_date && props.errors.birth_date)} @@ -117,6 +150,12 @@ const ShowLoanForm = () => { : null } /> + { disabled variant="standard" size="small" - label={t("showLoan.text_field_national_card_serial_num")} + label={t("ShowLoan.text_field_national_card_serial_num")} placeholder={t( - "showLoan.text_field_enter_your_national_card_serial_num" + "ShowLoan.text_field_enter_your_national_card_serial_num" )} type={"text"} error={!!(props.touched.national_card_serial_num && props.errors.national_card_serial_num)} @@ -147,6 +186,115 @@ const ShowLoanForm = () => { /> + + + + + + props.setFieldValue('vehicle_type', event.target.value)} + error={props.touched.vehicle_type && Boolean(props.errors.vehicle_type)} + helperText={props.touched.vehicle_type && props.errors.vehicle_type} + onBlur={props.handleBlur("vehicle_type")} + /> + + + { + props.setFieldValue('navgan_type', event.target.value) + }} + setFieldTouched={props.setFieldTouched} + error={props.touched.navgan_type && Boolean(props.errors.navgan_type)} + helperText={props.touched.navgan_type && props.errors.navgan_type} + onBlur={props.handleBlur("navgan_type")} + /> + + + + + + + { name="address" variant="outlined" size="small" - label={t("showLoan.text_field_address")} - placeholder={t("showLoan.text_field_enter_your_address")} + label={t("ShowLoan.text_field_address")} + placeholder={t("ShowLoan.text_field_enter_your_address")} type={"text"} error={!!(props.touched.address && props.errors.address)} fullWidth @@ -190,9 +338,9 @@ const ShowLoanForm = () => { name="postal_code" variant="outlined" size="small" - label={t("showLoan.text_field_postal_code")} + label={t("ShowLoan.text_field_postal_code")} placeholder={t( - "showLoan.text_field_enter_your_postal_code" + "ShowLoan.text_field_enter_your_postal_code" )} type={"text"} error={!!(props.touched.postal_code && props.errors.postal_code)} @@ -217,9 +365,9 @@ const ShowLoanForm = () => { name="navgan_id" variant="outlined" size="small" - label={t("showLoan.text_field_navgan_id")} + label={t("ShowLoan.text_field_navgan_id")} placeholder={t( - "showLoan.text_field_enter_your_navgan_id" + "ShowLoan.text_field_enter_your_navgan_id" )} type={"text"} error={!!(props.touched.navgan_id && props.errors.navgan_id)} @@ -248,22 +396,47 @@ const ShowLoanForm = () => { width: "100%", }} > - { + props.setFieldValue('province_id', event.target.value); + setProvinceID(event.target.value) + props.setFieldTouched("city_id", false, false); + props.setFieldValue("city_id", "") + }} setFieldTouched={props.setFieldTouched} - error={ - !!(props.touched.province_id && props.errors.province_id) - } - helperText={ - props.touched.province_id ? props.errors.province_id : null - } + error={props.touched.province_id && Boolean(props.errors.province_id)} + helperText={props.touched.province_id && props.errors.province_id} + onBlur={props.handleBlur("province_id")} + /> + + + props.setFieldValue('city_id', event.target.value)} + setFieldTouched={props.setFieldTouched} + error={props.touched.city_id && Boolean(props.errors.city_id)} + helperText={props.touched.city_id && props.errors.city_id} + onBlur={props.handleBlur("city_id")} /> @@ -287,7 +460,7 @@ const ShowLoanForm = () => { endIcon={} disabled={props.isSubmitting} > - {t("showLoan.button_submit")} + {t("ShowLoan.button_submit")} diff --git a/src/components/dashboard/navgan/show/index.jsx b/src/components/dashboard/navgan/show/index.jsx index ffab6b1..ae22139 100644 --- a/src/components/dashboard/navgan/show/index.jsx +++ b/src/components/dashboard/navgan/show/index.jsx @@ -12,9 +12,7 @@ const ShowLoan = () => { diff --git a/src/core/components/MuiDatePicker.jsx b/src/core/components/MuiDatePicker.jsx index e69de29..afe036e 100644 --- a/src/core/components/MuiDatePicker.jsx +++ b/src/core/components/MuiDatePicker.jsx @@ -0,0 +1,89 @@ +import * as React from 'react'; +import {useState} from 'react'; +import Button from '@mui/material/Button'; +import {AdapterDateFnsJalali} from "@mui/x-date-pickers/AdapterDateFnsJalali"; +import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider'; +import {DatePicker} from '@mui/x-date-pickers/DatePicker'; +import {useTranslations} from "next-intl"; +import moment from "jalali-moment"; +import {FormControl, FormHelperText} from "@mui/material"; + +function ButtonField(props) { + const t = useTranslations(); + const { + setOpen, + label, + id, + disabled, + InputProps: {ref} = {}, + inputProps: {'aria-label': ariaLabel} = {}, + } = props; + + return ( + + ); +} + +function ButtonDatePicker(props) { + const t = useTranslations(); + const [open, setOpen] = useState(false); + + return ( + setOpen(false)} + onOpen={() => setOpen(true)} + /> + ); +} + +export default function PickerWithButtonField({formik, error, helperText}) { + const [value, setValue] = useState(null); + return ( + + + { + const formattedBirthday = moment(newValue).locale("fa").format("YYYY-MM-DD") + formik.setFieldValue("birthday", formattedBirthday) + setValue(newValue) + console.log(formattedBirthday) + }} + + /> + + {formik.touched.birthday && formik.errors.birthday} + + ); +} \ No newline at end of file diff --git a/src/core/components/PlateNumber.jsx b/src/core/components/PlateNumber.jsx index 10ecd18..1466be7 100644 --- a/src/core/components/PlateNumber.jsx +++ b/src/core/components/PlateNumber.jsx @@ -1,4 +1,4 @@ -import {Box, Button, Drawer, FormHelperText, TextField, Typography} from "@mui/material"; +import {Box, Button, Drawer, FormHelperText, InputBase, Stack} from "@mui/material"; import {useTranslations} from "next-intl"; import AccessibleIcon from '@mui/icons-material/Accessible'; import {useState} from "react"; @@ -120,7 +120,7 @@ const plate_words = [ name: }, ] -const PlateNumber = ({formik}) => { +const PlateNumber = ({formik, disabled}) => { const t = useTranslations(); const [plateDrawer, setPlateDrawer] = useState(false); const [selectedWordName, setSelectedWordName] = useState("الف"); @@ -128,102 +128,84 @@ const PlateNumber = ({formik}) => { return ( <> - - - - ایران - - - - - - - - {/**/} - - setPlateDrawer(false)} + + event.target.value.length <= 2 ? formik.setFieldValue("plate_part4", event.target.value) : null} + size={'small'} + placeholder={'xx'} sx={{flexGrow: 2}} + inputProps={{sx: {textAlign: 'center'}}}/> + event.target.value.length <= 3 ? formik.setFieldValue("plate_part3", event.target.value) : null} + size={'small'} placeholder={'xxx'} sx={{ + flexGrow: 3, borderLeft: 1, borderRadius: 0, borderColor: 'divider' + }} inputProps={{sx: {textAlign: 'center'}}}/> + + - ))} - - + {selectedWordName} + - - - - + setPlateDrawer(false)} + > + + {plate_words.map((item) => ( + + ))} + + + event.target.value.length <= 2 ? formik.setFieldValue("plate_part1", event.target.value) : null} + size={'small'} + placeholder={'xx'} + sx={{flexGrow: 2}} + inputProps={{sx: {textAlign: 'center'}}}/> + + + + + + {t("error_message_plate_number")} diff --git a/src/core/components/SelectBox.jsx b/src/core/components/SelectBox.jsx index a24484c..56c7770 100644 --- a/src/core/components/SelectBox.jsx +++ b/src/core/components/SelectBox.jsx @@ -1,52 +1,60 @@ 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, + variant }) { + const t = useTranslations(); - const selectId = String(select); - const handleChange = (event) => { - setFieldValue(selectType, event.target.value); - }; - const handleBlur = () => { - setFieldTouched(select, true); - }; return ( - {label} + {label} {helperText} ); } -export default SelectBox; +export default SelectBox; \ No newline at end of file diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js index cd90a05..b2d08af 100644 --- a/src/core/data/apiRoutes.js +++ b/src/core/data/apiRoutes.js @@ -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" diff --git a/src/lib/app/hooks/useCities.jsx b/src/lib/app/hooks/useCities.jsx index e69de29..90bb21d 100644 --- a/src/lib/app/hooks/useCities.jsx +++ b/src/lib/app/hooks/useCities.jsx @@ -0,0 +1,37 @@ +import {useEffect, useState} from "react"; +import {useRequest} from "@witel/webapp-builder"; +import {useTranslations} from "next-intl"; +import {GET_CITIES_LIST} from "@/core/data/apiRoutes"; + +const useCities = () => { + const t = useTranslations(); + const [provinceID, setProvinceID] = useState(null); + const [isLoadingCityList, setIsLoadingCityList] = useState(false) + const [cityList, setCityList] = useState([]); + const [cityTextField, setCityTextField] = useState(t("LoanRequest.city_id")); + const requestServer = useRequest({auth: true, notification: false}) + + useEffect(() => { + if (provinceID === null) return + setIsLoadingCityList(true); + setCityTextField(t("LoanRequest.text_field_loading_cities_list")) + requestServer(`${GET_CITIES_LIST}?province_id=${provinceID}`, "get", {auth: true, notification: false}) + .then(({data}) => { + const result = data.data; + const formattedData = result.map((city, index) => ({ + id: index, + name: city.name, + value: city.id, + })); + setCityList(formattedData); + setCityTextField(t("LoanRequest.text_field_city_id")) + setIsLoadingCityList(false); + }).catch(() => { + setCityTextField(t("LoanRequest.text_field_error_fetching_cities")) + }); + }, [provinceID]) + + + return {cityList, cityTextField, setProvinceID, isLoadingCityList} +} +export default useCities \ No newline at end of file diff --git a/src/lib/app/hooks/useProvince.jsx b/src/lib/app/hooks/useProvince.jsx index d0fbda0..c1c2dcc 100644 --- a/src/lib/app/hooks/useProvince.jsx +++ b/src/lib/app/hooks/useProvince.jsx @@ -1,28 +1,33 @@ import {GET_PROVINCE_LIST} from "@/core/data/apiRoutes"; -import useRequest from "@/lib/app/hooks/useRequest"; -import useSWR from "swr"; +import {useRequest} from "@witel/webapp-builder"; +import {useEffect, useState} from "react"; const useProvince = () => { + const [isLoadingProvinceList, setIsLoadingProvinceList] = useState(false) + const [errorProvinceList, setErrorProvinceList] = useState(false) + const [provinceList, setProvinceList] = useState([]) const requestServer = useRequest({auth: true, notification: false}) - //swr config - const fetcher = (...args) => { - return requestServer(args, 'get').then(({data}) => { - return data; + useEffect(() => { + setIsLoadingProvinceList(true) + requestServer(GET_PROVINCE_LIST, 'get', {auth: true, notification: false}).then(({data}) => { + const formattedData = data.map((province, index) => ({ + id: index, + name: province.name, + value: province.id, + })); + setIsLoadingProvinceList(false) + setProvinceList(formattedData); }).catch(() => { + setIsLoadingProvinceList(false) + setErrorProvinceList(true) }) - }; - - const {data, isLoading} = useSWR(GET_PROVINCE_LIST, fetcher, { - revalidateIfStale: false, - revalidateOnFocus: false, - revalidateOnReconnect: false - }); + }, []) return { - provinceList: data, - isLoadingProvinceList: isLoading, - errorProvinceList: !data + provinceList, + isLoadingProvinceList, + errorProvinceList } }; diff --git a/src/pages/dashboard/navgan/[id]/show/index.jsx b/src/pages/dashboard/navgan/[id]/show/index.jsx index 202aa4d..108f7b1 100644 --- a/src/pages/dashboard/navgan/[id]/show/index.jsx +++ b/src/pages/dashboard/navgan/[id]/show/index.jsx @@ -12,7 +12,7 @@ export async function getServerSideProps({req, locale}) { return { props: { messages: (await import(`&/locales/${locale}/app.json`)).default, - title: "showLoan.show_loan_page", + title: "ShowLoan.show_loan_page", isBot, locale, layout: {name: 'DashboardLayout'} From d864108439e680a8e4f9dcb563fe5f331ded627d Mon Sep 17 00:00:00 2001 From: Mohammad Jalali Date: Wed, 20 Dec 2023 13:22:07 +0330 Subject: [PATCH 4/4] complete edit and details part of loan --- public/locales/fa/app.json | 41 +- .../dashboard/navgan/show/form/UpdateForm.jsx | 658 ++++++++++++++++++ .../dashboard/navgan/show/form/index.jsx | 484 +------------ .../dashboard/navgan/show/index.jsx | 8 - src/core/components/MuiDatePicker.jsx | 14 +- src/core/components/PlateNumber.jsx | 82 ++- src/core/components/ResendToken.jsx | 3 +- src/core/components/SelectBox.jsx | 16 +- src/core/data/apiRoutes.js | 7 +- src/layouts/dashboard.jsx | 4 +- src/lib/app/hooks/useCities.jsx | 19 +- src/lib/app/hooks/useEducations.jsx | 29 + src/lib/app/hooks/useOccupations.jsx | 29 + 13 files changed, 852 insertions(+), 542 deletions(-) create mode 100644 src/components/dashboard/navgan/show/form/UpdateForm.jsx create mode 100644 src/lib/app/hooks/useEducations.jsx create mode 100644 src/lib/app/hooks/useOccupations.jsx diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 5486997..5d9f406 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -1,7 +1,14 @@ { "app_name": "سامانه جامع تسهیلات", "app_short_name": "سامانه تسهیلات", + "birthday": "تاریخ تولد", + "birthday_error": "تاریخ تولد خود را وارد کنید!", "dashboard": "داشبورد", + "text_field_city_id": "شهر", + "text_field_error_fetching_cities": "لطفا شهر خود را وارد کنید!", + "text_field_loading_cities_list": "درحال دریافت اطلاعات شهر ها...", + "text_field_loading": "درحال دریافت اطلاعات", + "text_field_error_fetching": "خطا در دریافت اطلاعات", "first_page": "خوش آمدید", "powered_by_witel": "توسعه یافته توسط وایتل", "login": "ورود", @@ -188,35 +195,45 @@ }, "ShowLoan": { "show_loan_page": "نمایش وام | ناوگان", - "text_field_national_code": "کد ملی", + "loading_show_component": "درحال دریافت اطلاعات درخواست...", + "tel_number_max": "شماره ثابت می بایست 11 رقم باشد", + "text_field_national_id": "کد ملی", "text_field_postal_code": "کد پستی", - "text_field_national_card_serial_num": "سریال پشت کارت ملی", + "text_field_national_serial_number": "سریال پشت کارت ملی", "text_field_address": "آدرس", - "text_field_birth_date": "تاریخ تولد", + "text_field_birthday": "تاریخ تولد", "text_field_navgan_id": "کد ناوگان", "text_field_province_id": "استان", - "text_field_owner_full_name": "نام کامل مالک", + "text_field_education_id": "تحصیلات", + "text_field_occupation_id": "شغل", + "text_field_name": "نام کامل مالک", "text_field_navgan_type": "نوع ناوگان", "text_field_vehicle_type": "نوع وسیله", - "text_field_enter_your_national_code": "کد ملی را وارد کنید", + "text_field_tel_number": "شماره ثابت (با پیش شماره استان)", + "text_field_enter_your_national_id": "کد ملی را وارد کنید", "text_field_enter_your_postal_code": "کد پستی را وارد کنید", - "text_field_enter_your_national_card_serial_num": "سریال پشت کارت ملی را وارد کنید", + "text_field_enter_your_national_serial_number": "سریال پشت کارت ملی را وارد کنید", "text_field_enter_your_address": "آدرس را وارد کنید", - "text_field_enter_your_birth_date": "تاریخ تولد را وارد کنید", + "text_field_enter_your_tel_number": "شماره ثابت (با پیش شماره استان) خود را وارد کنید", + "text_field_enter_your_birthday": "تاریخ تولد را وارد کنید", "text_field_enter_your_navgan_id": "کد ناوگان را وارد کنید", - "text_field_enter_your_owner_full_name": "نام کامل مالک را وارد کنید", - "error_message_national_code": "لطفا کد ملی را وارد کنید!", + "text_field_enter_your_name": "نام کامل مالک را وارد کنید", + "postal_code_max": "کد پستی می بایست 10 رقم باشد", "error_message_postal_code": "لطفا کد پستی را وارد کنید!", - "error_message_national_card_serial_num": "لطفا سریال پشت کارت ملی را وارد کنید!", + "error_message_national_serial_number": "لطفا سریال پشت کارت ملی را وارد کنید!", "error_message_address": "لطفا آدرس را وارد کنید!", - "error_message_birth_date": "لطفا تاریخ تولد را وارد کنید!", + "error_message_birthday": "لطفا تاریخ تولد را وارد کنید!", "error_message_navgan_id": "لطفا کد ناوگان را وارد کنید!", "error_message_province_id": "لطفا استان را وارد کنید!", "error_message_city_id": "لطفا شهر خود را وارد کنید!", - "error_message_owner_full_name": "لطفا نام کامل مالک را وارد کنید!", + "error_message_name": "لطفا نام کامل مالک را وارد کنید!", + "error_message_date_of_birth": "لطفا تاریخ تولد خود را وارد کنید!", "error_message_navgan_type": "لطفا نوع ناوگان را وارد کنید!", "error_message_vehicle_type": "لطفا نوع وسیله را وارد کنید!", "error_message_fixed_number": "لطفا تلفن ثابت را وارد کنید!", + "error_message_tel_number": "لطفا شماره ثابت (با پیش شماره استان) خود را وارد کنید!", + "error_message_occupation_id": "لطفا کد شغل (با توجه به مستندات ارائه شده) را به درستی وارد کنید!", + "error_message_education_id": "لطفا تحصیلات (با توجه به مستندات ارائه شده) را به درستی وارد کنید!", "cityList_empty": "شهر یافت نشد", "button_submit": "ویرایش" }, diff --git a/src/components/dashboard/navgan/show/form/UpdateForm.jsx b/src/components/dashboard/navgan/show/form/UpdateForm.jsx new file mode 100644 index 0000000..3d2abe7 --- /dev/null +++ b/src/components/dashboard/navgan/show/form/UpdateForm.jsx @@ -0,0 +1,658 @@ +import StyledForm from "@/core/components/StyledForm"; +import {Box, Button, Chip, Divider, Stack, TextField} from "@mui/material"; +import {Field, Formik} from "formik"; +import {useTranslations} from "next-intl"; +import EditIcon from '@mui/icons-material/Edit'; +import * as Yup from "yup"; +import SelectBox from "@/core/components/SelectBox"; +import PlateNumber from "@/core/components/PlateNumber"; +import MuiDatePicker from "@/core/components/MuiDatePicker"; +import moment from "jalali-moment"; +import useProvince from "@/lib/app/hooks/useProvince"; +import useCities from "@/lib/app/hooks/useCities"; +import UseEducations from "@/lib/app/hooks/useEducations"; +import useOccupations from "@/lib/app/hooks/useOccupations"; +import {UPDATE_LOAN} from "@/core/data/apiRoutes"; +import {useRequest} from "@witel/webapp-builder"; +import {useRouter} from "next/router"; +import {useEffect} from "react"; + +const UpdateForm = ({LoanDetails, LoanId}) => { + const t = useTranslations(); + const provinceStates = useProvince(); + const router = useRouter() + const citiesStates = useCities(); + const educationStates = UseEducations(); + const occupationStates = useOccupations(); + const requestServer = useRequest(); + + useEffect(() => { + citiesStates.setProvinceID(LoanDetails.province_id) + }, [provinceStates]); + + // initial values + const initialValues = { + national_id: LoanDetails.national_id, + postal_code: LoanDetails.postal_code, + national_serial_number: LoanDetails.national_serial_number, + address: LoanDetails.address, + birthday: moment(LoanDetails.birthday), + navgan_id: LoanDetails.navgan_id, + province_id: LoanDetails.province_id, + city_id: LoanDetails.city_id, + name: LoanDetails.name, + navgan_type: LoanDetails.navgan_type, + vehicle_type: LoanDetails.vehicle_type, + telephone_number: LoanDetails.telephone_number, + plate_part1: LoanDetails.plate_number.split("-")[0], + plate_part2: LoanDetails.plate_number.split("-")[1], + plate_part3: LoanDetails.plate_number.split("-")[2], + plate_part4: LoanDetails.plate_number.split("-")[3], + education_id: LoanDetails.education_id, + occupation_id: LoanDetails.occupation_id, + }; + // end initial values + + // validation + const validationSchema = Yup.object().shape({ + postal_code: Yup.mixed() + .test("max", `${t("ShowLoan.postal_code_max")}`, (value) => value.toString().length === 10) + .required( + t("ShowLoan.error_message_postal_code") + ), + address: Yup.string().required(t("ShowLoan.error_message_address")), + province_id: Yup.string().required(t("ShowLoan.error_message_province_id")), + city_id: Yup.string().required(t("ShowLoan.error_message_city_id")), + telephone_number: Yup.mixed() + .test("max", `${t("ShowLoan.tel_number_max")}`, (value) => { + const stringValue = String(value); + return stringValue.length === 11 + }) + .required(t("ShowLoan.error_message_tel_number")), + occupation_id: Yup.string().required(t("ShowLoan.error_message_occupation_id")), + education_id: Yup.string().required(t("ShowLoan.error_message_education_id")), + birthday: Yup.string().required(t("ShowLoan.error_message_date_of_birth")), + + }); + // end validation + + // submit + const handleSubmit = async (values, props) => { + props.setSubmitting(true) + const formData = new FormData(); + formData.append("postal_code", values.postal_code); + formData.append("address", values.address); + formData.append("province_id", values.province_id); + formData.append("city_id", values.city_id); + formData.append("telephone_number", values.telephone_number); + formData.append("occupation_id", values.occupation_id); + formData.append("education_id", values.education_id); + formData.append("national_serial_number", values.national_serial_number); + formData.append("birthday", values.birthday.locale('en').format("YYYY-MM-DD")); + await requestServer(UPDATE_LOAN + LoanId, "post", { + auth: true, notification: true, data: formData + }).then(() => { + router.push("/dashboard/navgan/followUp-loan") + }).catch(() => { + }).finally(() => { + props.setSubmitting(false) + }) + + }; + // end submit + + return ( + <> + + + + + + + {(props) => ( + + + + + + + + + + + + + + + + + { + props.setFieldValue('navgan_type', event.target.value) + }} + setFieldTouched={props.setFieldTouched} + error={props.touched.navgan_type && Boolean(props.errors.navgan_type)} + helperText={props.touched.navgan_type && props.errors.navgan_type} + onBlur={props.handleBlur("navgan_type")} + /> + + + + + + + + props.setFieldValue('vehicle_type', event.target.value)} + error={props.touched.vehicle_type && Boolean(props.errors.vehicle_type)} + helperText={props.touched.vehicle_type && props.errors.vehicle_type} + onBlur={props.handleBlur("vehicle_type")} + /> + + + + + + + + + + + + + + + + {provinceStates.provinceList.length !== 0 ? + { + props.setFieldValue('province_id', event.target.value); + citiesStates.setProvinceID(event.target.value) + props.setFieldTouched("city_id", false, false); + props.setFieldValue("city_id", "") + }} + setFieldTouched={props.setFieldTouched} + error={props.touched.province_id && Boolean(props.errors.province_id)} + helperText={props.touched.province_id && props.errors.province_id} + onBlur={props.handleBlur("province_id")} + /> : } + + + + {citiesStates.cityList.length !== 0 ? + props.setFieldValue('city_id', event.target.value)} + setFieldTouched={props.setFieldTouched} + error={props.touched.city_id && Boolean(props.errors.city_id)} + helperText={props.touched.city_id && props.errors.city_id} + onBlur={props.handleBlur("city_id")} + /> : } + + + + + + + + {educationStates.educationsList.length !== 0 ? + { + props.setFieldValue('education_id', event.target.value) + }} + setFieldTouched={props.setFieldTouched} + error={props.touched.education_id && Boolean(props.errors.education_id)} + helperText={props.touched.education_id && props.errors.education_id} + onBlur={props.handleBlur("education_id")} + /> : } + + + {occupationStates.occupationsList.length !== 0 ? + { + props.setFieldValue('occupation_id', event.target.value) + }} + setFieldTouched={props.setFieldTouched} + error={props.touched.occupation_id && Boolean(props.errors.occupation_id)} + helperText={props.touched.occupation_id && props.errors.occupation_id} + onBlur={props.handleBlur("occupation_id")} + /> : } + + + + + + + + + + + + + )} + + + ); +}; + +export default UpdateForm; diff --git a/src/components/dashboard/navgan/show/form/index.jsx b/src/components/dashboard/navgan/show/form/index.jsx index 329a69c..7a6f74a 100644 --- a/src/components/dashboard/navgan/show/form/index.jsx +++ b/src/components/dashboard/navgan/show/form/index.jsx @@ -1,472 +1,34 @@ -import StyledForm from "@/core/components/StyledForm"; -import {Box, Button, Stack, TextField} from "@mui/material"; -import {Field, Formik} from "formik"; +import UpdateForm from "@/components/dashboard/navgan/show/form/UpdateForm"; +import {useEffect, useState} from "react"; +import {GET_LOAN_DETAILS} from "@/core/data/apiRoutes"; +import {useRouter} from "next/router"; +import {SvgLoading, useRequest} from "@witel/webapp-builder"; +import {Stack, Typography} from "@mui/material"; import {useTranslations} from "next-intl"; -import EditIcon from '@mui/icons-material/Edit'; -import * as Yup from "yup"; -import SelectBox from "@/core/components/SelectBox"; -import useProvince from "@/lib/app/hooks/useProvince"; -import useCities from "@/lib/app/hooks/useCities"; -import {useEffect} from "react"; -import PlateNumber from "@/core/components/PlateNumber"; -import MuiDatePicker from "@/core/components/MuiDatePicker"; const ShowLoanForm = () => { const t = useTranslations(); - const {provinceList, isLoadingProvinceList, errorProvinceList} = useProvince(); - const {cityList, cityTextField, setProvinceID, isLoadingCityList} = useCities(); - - // initial values - const initialValues = { - national_code: "0312288875", - postal_code: "326585475", - national_card_serial_num: "0312288875", - address: "تهران - ثنایی - مطهری ساختمان مهتاب", - birth_date: "10/25/44", - navgan_id: "14575", - province_id: "9", - city_id: "33", - owner_full_name: "حسن قلی ابدوالابادی", - navgan_type: "2", - vehicle_type: "1", - fixed_number: "02637317735", - plate_part1: "22", - plate_part2: "ب", - plate_part3: "333", - plate_part4: "12", - }; - // end initial values + const {query} = useRouter(); + const requestServer = useRequest({auth: true, notification: false}); + const [LoanDetails, setLoanDetails] = useState({}); useEffect(() => { - setProvinceID(initialValues.province_id); - }, [initialValues.province_id]); - - // validation - const validationSchema = Yup.object().shape({ - national_code: Yup.string().required(t("ShowLoan.error_message_national_code")), - postal_code: Yup.string().required(t("ShowLoan.error_message_postal_code")), - national_card_serial_num: Yup.string().required(t("ShowLoan.error_message_national_card_serial_num")), - address: Yup.string().required(t("ShowLoan.error_message_address")), - birth_date: Yup.string().required(t("ShowLoan.error_message_birth_date")), - navgan_id: Yup.string().required(t("ShowLoan.error_message_navgan_id")), - province_id: Yup.string().required(t("ShowLoan.error_message_province_id")), - city_id: Yup.string().required(t("ShowLoan.error_message_city_id")), - owner_full_name: Yup.string().required(t("ShowLoan.error_message_owner_full_name")), - navgan_type: Yup.string().required(t("ShowLoan.error_message_navgan_type")), - vehicle_type: Yup.string().required(t("ShowLoan.error_message_vehicle_type")), - fixed_number: Yup.string().required(t("ShowLoan.error_message_fixed_number")), - }); - // end validation - - // submit - const handleSubmit = async (values, props) => { - const formData = new FormData(); - formData.append("national_code", values.national_code); - formData.append("postal_code", values.postal_code); - formData.append("national_card_serial_num", values.national_card_serial_num); - formData.append("address", values.address); - formData.append("birth_date", values.birth_date); - formData.append("navgan_id", values.navgan_id); - formData.append("province_id", values.province_id); - formData.append("city_id", values.city_id); - formData.append("owner_full_name", values.owner_full_name); - formData.append("navgan_type", values.navgan_type); - formData.append("vehicle_type", values.vehicle_type); - formData.append("fixed_number", values.fixed_number); - }; - // end submit + requestServer(GET_LOAN_DETAILS + query.id, 'get', {auth: true, notification: false}).then(({data}) => { + setLoanDetails(data.data); + }).catch(() => { + }) + }, []); + if (Object.keys(LoanDetails).length === 0) { + return ( + + + {t("ShowLoan.loading_show_component")} + + ); + } return ( - - {(props) => ( - - - - - - - - - - - - - - - - - - - - - props.setFieldValue('vehicle_type', event.target.value)} - error={props.touched.vehicle_type && Boolean(props.errors.vehicle_type)} - helperText={props.touched.vehicle_type && props.errors.vehicle_type} - onBlur={props.handleBlur("vehicle_type")} - /> - - - { - props.setFieldValue('navgan_type', event.target.value) - }} - setFieldTouched={props.setFieldTouched} - error={props.touched.navgan_type && Boolean(props.errors.navgan_type)} - helperText={props.touched.navgan_type && props.errors.navgan_type} - onBlur={props.handleBlur("navgan_type")} - /> - - - - - - - - - - - - - - - - - - - - - { - props.setFieldValue('province_id', event.target.value); - setProvinceID(event.target.value) - props.setFieldTouched("city_id", false, false); - props.setFieldValue("city_id", "") - }} - setFieldTouched={props.setFieldTouched} - error={props.touched.province_id && Boolean(props.errors.province_id)} - helperText={props.touched.province_id && props.errors.province_id} - onBlur={props.handleBlur("province_id")} - /> - - - props.setFieldValue('city_id', event.target.value)} - setFieldTouched={props.setFieldTouched} - error={props.touched.city_id && Boolean(props.errors.city_id)} - helperText={props.touched.city_id && props.errors.city_id} - onBlur={props.handleBlur("city_id")} - /> - - - - - - - - )} - + ); }; diff --git a/src/components/dashboard/navgan/show/index.jsx b/src/components/dashboard/navgan/show/index.jsx index ae22139..b9c73ed 100644 --- a/src/components/dashboard/navgan/show/index.jsx +++ b/src/components/dashboard/navgan/show/index.jsx @@ -1,4 +1,3 @@ -import {Box, Chip, Divider} from "@mui/material"; import {useTranslations} from "next-intl"; import {CenterLayout, useUser} from "@witel/webapp-builder"; import ShowLoanForm from "@/components/dashboard/navgan/show/form"; @@ -9,13 +8,6 @@ const ShowLoan = () => { return ( - - - - - ); diff --git a/src/core/components/MuiDatePicker.jsx b/src/core/components/MuiDatePicker.jsx index afe036e..95df9e3 100644 --- a/src/core/components/MuiDatePicker.jsx +++ b/src/core/components/MuiDatePicker.jsx @@ -43,6 +43,7 @@ function ButtonDatePicker(props) { { - const formattedBirthday = moment(newValue).locale("fa").format("YYYY-MM-DD") - formik.setFieldValue("birthday", formattedBirthday) - setValue(newValue) - console.log(formattedBirthday) + formik.setFieldValue("birthday", moment(newValue)) }} /> diff --git a/src/core/components/PlateNumber.jsx b/src/core/components/PlateNumber.jsx index 1466be7..5d28fcb 100644 --- a/src/core/components/PlateNumber.jsx +++ b/src/core/components/PlateNumber.jsx @@ -1,4 +1,4 @@ -import {Box, Button, Drawer, FormHelperText, InputBase, Stack} from "@mui/material"; +import {Box, Button, Drawer, FormHelperText, Stack, TextField} from "@mui/material"; import {useTranslations} from "next-intl"; import AccessibleIcon from '@mui/icons-material/Accessible'; import {useState} from "react"; @@ -123,39 +123,58 @@ const plate_words = [ const PlateNumber = ({formik, disabled}) => { const t = useTranslations(); const [plateDrawer, setPlateDrawer] = useState(false); - const [selectedWordName, setSelectedWordName] = useState("الف"); - const [selectedWordValue, setSelectedWordValue] = useState(""); - + const isErrorPlate = Boolean(formik.errors.plate_part1 || formik.errors.plate_part3 || formik.errors.plate_part4) + const isTouched = (formik.touched.plate_part1 || formik.touched.plate_part3 || formik.touched.plate_part4) return ( <> - + event.target.value.length <= 2 ? formik.setFieldValue("plate_part4", event.target.value) : null} - size={'small'} - placeholder={'xx'} sx={{flexGrow: 2}} - inputProps={{sx: {textAlign: 'center'}}}/> - event.target.value.length <= 2 ? formik.setFieldValue("plate_part4", event.target.value) : null} + onBlur={formik.handleBlur} + error={formik.touched.plate_part4 && Boolean(formik.errors.plate_part4)} + /> + event.target.value.length <= 3 ? formik.setFieldValue("plate_part3", event.target.value) : null} - size={'small'} placeholder={'xxx'} sx={{ - flexGrow: 3, borderLeft: 1, borderRadius: 0, borderColor: 'divider' - }} inputProps={{sx: {textAlign: 'center'}}}/> + size={'small'} + disabled={disabled} + placeholder={'xxx'} + sx={{ + flexGrow: 3, + borderLeft: 1, + borderRadius: 0, + borderColor: 'divider', + "& fieldset": {border: 'none'} + }} + inputProps={{sx: {textAlign: 'center'}}} + onChange={(event) => event.target.value.length <= 3 ? formik.setFieldValue("plate_part3", event.target.value) : null} + onBlur={formik.handleBlur} + error={formik.touched.plate_part3 && Boolean(formik.errors.plate_part3)} + /> {