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)} + /> {