diff --git a/src/components/dashboard/loan-request/NavyForm.jsx b/src/components/dashboard/loan-request/NavyForm.jsx index 7686862..9e7c40c 100644 --- a/src/components/dashboard/loan-request/NavyForm.jsx +++ b/src/components/dashboard/loan-request/NavyForm.jsx @@ -1,16 +1,84 @@ 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 DataSaverOnIcon from "@mui/icons-material/DataSaverOn"; import { Box, Button, Stack, TextField } from "@mui/material"; +import axios from "axios"; import { Field, Formik } from "formik"; import { useTranslations } from "next-intl"; -import Image from "next/image"; +import { useEffect, useState } from "react"; +import * as Yup from "yup"; const NavyForm = () => { const t = useTranslations(); const { directionApp } = useDirection(); + const { token } = useUser(); + // 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(directionApp, 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: "", @@ -20,22 +88,57 @@ const NavyForm = () => { navgan_id: "", national_code: "", shenasname_id: "", - national_card_img: "", - shenasname_img: "", + national_card_img: null, + shenasname_img: null, }; + // end initial values + // validation + const validationSchema = Yup.object().shape({ + name: Yup.string().required(t("LoanRequest.error_message_required")), + phone_number: Yup.string().required( + t("LoanRequest.error_message_required") + ), + vehicle_type: Yup.string().required( + t("LoanRequest.error_message_required") + ), + plate_number: Yup.string().required( + t("LoanRequest.error_message_required") + ), + navgan_id: Yup.string().required(t("LoanRequest.error_message_required")), + province: Yup.string().required(t("LoanRequest.error_message_required")), + national_code: Yup.string().required( + t("LoanRequest.error_message_required") + ), + shenasname_id: Yup.string().required( + t("LoanRequest.error_message_required") + ), + }); + // end validation + + // submit const handleSubmit = async (values, props) => { Notifications(directionApp, t, undefined); + 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); + formData.append("province_id", values.province); + 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, { - name: values.name, - phone_number: values.phone_number, - vehicle_type: values.vehicle_type, - plate_number: values.plate_number, - province_id: values.province, - navgan_id: values.navgan_id, - national_code: values.national_code, - shenasname_id: values.shenasname_id, + .post(SEND_LOAN_REQUEST_NAVGAN, formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/form-data", + }, }) .then(function (response) { Notifications(directionApp, t, response); @@ -45,9 +148,14 @@ const NavyForm = () => { props.setSubmitting(false); }); }; + // end submit return ( - + {(props) => ( { name="name" variant="outlined" size="small" - InputProps={{ - readOnly: true, - }} label={t("LoanRequest.text_field_name")} placeholder={t("LoanRequest.text_field_enter_your_name")} type={"text"} @@ -103,9 +208,6 @@ const NavyForm = () => { name="phone_number" variant="outlined" size="small" - InputProps={{ - readOnly: true, - }} label={t("LoanRequest.text_field_phone_number")} placeholder={t( "LoanRequest.text_field_enter_your_phone_number" @@ -147,9 +249,6 @@ const NavyForm = () => { name="vehicle_type" variant="outlined" size="small" - InputProps={{ - readOnly: true, - }} label={t("LoanRequest.text_field_vehicle_type")} placeholder={t( "LoanRequest.text_field_enter_your_vehicle_type" @@ -181,9 +280,6 @@ const NavyForm = () => { name="plate_number" variant="outlined" size="small" - InputProps={{ - readOnly: true, - }} label={t("LoanRequest.text_field_plate_number")} placeholder={t( "LoanRequest.text_field_enter_your_plate_number" @@ -210,25 +306,20 @@ const NavyForm = () => { }} > @@ -255,9 +346,6 @@ const NavyForm = () => { name="navgan_id" variant="outlined" size="small" - InputProps={{ - readOnly: true, - }} label={t("LoanRequest.text_field_navgan_id")} placeholder={t("LoanRequest.text_field_enter_your_navgan_id")} type={"text"} @@ -285,9 +373,6 @@ const NavyForm = () => { name="national_code" variant="outlined" size="small" - InputProps={{ - readOnly: true, - }} label={t("LoanRequest.text_field_national_code")} placeholder={t( "LoanRequest.text_field_enter_your_national_code" @@ -319,17 +404,13 @@ const NavyForm = () => { name="shenasname_id" variant="outlined" size="small" - InputProps={{ - readOnly: true, - }} label={t("LoanRequest.text_field_shenasname_id")} placeholder={t( "LoanRequest.text_field_enter_your_shenasname_id" )} type={"text"} error={ - props.touched.shenasname_id && - props.errors.shenasname_id + props.touched.shenasname_id && props.errors.shenasname_id ? true : false } @@ -351,24 +432,34 @@ const NavyForm = () => { width: "100%", }} > - - {t("app_name")} - - - {t("app_name")} - + + 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")} + /> { const t = useTranslations(); const { directionApp } = useDirection(); + const { token } = useUser(); // upload files const [selectedImageShenasname, setSelectedImageShenasname] = useState( @@ -86,20 +88,25 @@ const WelfareServicesForm = () => { const handleSubmit = async (values, props) => { Notifications(directionApp, t, undefined); - console.log(values.national_card_img); - console.log(values.shenasname_img); + 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); + formData.append("province_id", values.province); + 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_WELFARE, { - name: values.name, - phone_number: values.phone_number, - vehicle_type: values.vehicle_type, - plate_number: values.plate_number, - province_id: values.province, - navgan_id: values.navgan_id, - national_code: values.national_code, - shenasname_id: values.shenasname_id, - national_card_image: values.national_card_img, - shenasname_image: values.shenasname_img, + .post(SEND_LOAN_REQUEST_WELFARE, formData, { + headers: { + Authorization: `Bearer ${token}`, + "Content-Type": "multipart/form-data", + }, }) .then(function (response) { Notifications(directionApp, t, response); diff --git a/src/core/components/SelectBox.jsx b/src/core/components/SelectBox.jsx new file mode 100644 index 0000000..ea39d54 --- /dev/null +++ b/src/core/components/SelectBox.jsx @@ -0,0 +1,55 @@ +import { + FormControl, + FormHelperText, + InputLabel, + MenuItem, + Select, +} from "@mui/material"; + +function SelectBox({ + select, + selectType, + selectors, + label, + setFieldValue, + setFieldTouched, + error, + helperText, +}) { + const handleChange = (event) => { + setFieldValue(selectType, event.target.value); + }; + const handleBlur = () => { + setFieldTouched(select, true); + }; + return ( + + {label} + + {helperText} + + ); +} + +export default SelectBox; diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js index ebbd73c..87b4390 100644 --- a/src/core/data/apiRoutes.js +++ b/src/core/data/apiRoutes.js @@ -7,5 +7,6 @@ export const REGISTER = BASE_URL + "/register"; export const USER_INFO = BASE_URL + "/profile/info"; export const SEND_LOAN_REQUEST_NAVGAN = BASE_URL + "/navgan/store_loan"; export const SEND_LOAN_REQUEST_WELFARE = BASE_URL + "/navgan/store_loan"; +export const GET_PROVINCE_LIST = BASE_URL + "/provinces";