Merge branch 'feature/maintainer' into 'develop'

file input design

See merge request witel3/loan-facilities-user!11

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: "",
+    national_card_img: null,
-    shenasname_img: "",
+    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, {
+      .post(SEND_LOAN_REQUEST_NAVGAN, formData, {
-        name: values.name,
+        headers: {
-        phone_number: values.phone_number,
+          Authorization: `Bearer ${token}`,
-        vehicle_type: values.vehicle_type,
+          "Content-Type": "multipart/form-data",
-        plate_number: values.plate_number,
+        },
-        province_id: values.province,
-        navgan_id: values.navgan_id,
-        national_code: values.national_code,
-        shenasname_id: values.shenasname_id,
       })
       .then(function (response) {
         Notifications(directionApp, t, response);
@@ -45,9 +148,14 @@ const NavyForm = () => {
         props.setSubmitting(false);
       });
   };
+  // end submit
 
   return (
-    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+    <Formik
+      initialValues={initialValues}
+      onSubmit={handleSubmit}
+      validationSchema={validationSchema}
+    >
       {(props) => (
         <Stack
           spacing={2}
@@ -79,9 +187,6 @@ const NavyForm = () => {
                   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 = () => {
                 }}
               >
                 <Field
-                  as={TextField}
-                  sx={{ width: "100%" }}
                   name="province"
-                  variant="outlined"
+                  label={t("LoanRequest.text_field_province")} // t("LoanRequest.text_field_enter_your_province")
                   size="small"
-                  InputProps={{
+                  selectType="province"
-                    readOnly: true,
+                  component={SelectBox}
-                  }}
+                  selectors={provinceList}
-                  label={t("LoanRequest.text_field_province")}
+                  select={props.values.province}
-                  placeholder={t("LoanRequest.text_field_enter_your_province")}
+                  setFieldValue={props.setFieldValue}
-                  type={"text"}
+                  setFieldTouched={props.setFieldTouched}
                   error={
-                    props.touched.province && props.errors.province
+                    props.touched.gender && props.errors.province ? true : false
-                      ? true
-                      : false
                   }
-                  fullWidth
                   helperText={
-                    props.touched.province ? props.errors.province : null
+                    props.touched.gender ? props.errors.province : null
                   }
                 />
               </Box>
@@ -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.touched.shenasname_id && props.errors.shenasname_id
-                    props.errors.shenasname_id
                       ? true
                       : false
                   }
@@ -351,24 +432,34 @@ const NavyForm = () => {
                 width: "100%",
               }}
             >
-              <Box>
+              <UploadSystem
-                <Image
+                selectedImage={selectedImageShenasname}
-                  width={300}
+                handleUploadChange={(e) =>
-                  height={300}
+                  handleUploadChangeShenasname(e, props.setFieldValue)
-                  src="/images/login.svg"
+                }
-                  priority
+                setselectedImage={setSelectedImageShenasname}
-                  alt={t("app_name")}
+                setFieldValue={props.setFieldValue}
-                />
+                fieldname="shenasname_img"
-              </Box>
+                fileType={fileTypeShenasname}
-              <Box>
+                fileName={fileNameShenasname}
-                <Image
+                imageAlt={t("app_name")}
-                  width={300}
+                imageSize={[300 /*width*/, 150 /*height*/]}
-                  height={300}
+                label={t("LoanRequest.file_field_shenasname_image")}
-                  src="/images/login.svg"
+              />
-                  priority
+              <UploadSystem
-                  alt={t("app_name")}
+                selectedImage={selectedImageNationalCard}
-                />
+                handleUploadChange={(e) =>
-              </Box>
+                  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")}
+              />
             </Box>
             <Box
               sx={{

src/components/dashboard/loan-request/WelfareServicesForm.jsx

@@ -3,6 +3,7 @@ import StyledForm from "@/core/components/StyledForm";
 import UploadSystem from "@/core/components/UploadSystem";
 import { SEND_LOAN_REQUEST_WELFARE } 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";
@@ -14,6 +15,7 @@ import * as Yup from "yup";
 const WelfareServicesForm = () => {
   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);
+    const formData = new FormData();
-    console.log(values.shenasname_img);
+    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, {
+      .post(SEND_LOAN_REQUEST_WELFARE, formData, {
-        name: values.name,
+        headers: {
-        phone_number: values.phone_number,
+          Authorization: `Bearer ${token}`,
-        vehicle_type: values.vehicle_type,
+          "Content-Type": "multipart/form-data",
-        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,
       })
       .then(function (response) {
         Notifications(directionApp, t, response);

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 (
+    <FormControl
+      variant="outlined"
+      margin="normal"
+      fullWidth
+      size="small"
+      error={error}
+    >
+      <InputLabel id="language-label">{label}</InputLabel>
+      <Select
+        labelId="language-label"
+        id={select}
+        name={select}
+        size="small"
+        value={select}
+        onChange={handleChange}
+        label="Language"
+        onBlur={handleBlur}
+      >
+        {selectors.map((selector) => (
+          <MenuItem key={selector.id} value={selector.value}>
+            {selector.name}
+          </MenuItem>
+        ))}
+      </Select>
+      <FormHelperText>{helperText}</FormHelperText>
+    </FormControl>
+  );
+}
+
+export default SelectBox;

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";