Merge branch 'feature/debug_formdata' into 'develop'

Feature/debug formdata

See merge request witel3/loan-facilities-expert!38

public/locales/fa/app.json

@@ -130,7 +130,10 @@
     "context": "آیا از تایید این آیتم اطمینان دارید",
     "button-confirm": "تایید",
     "button-cancel": "بستن",
-    "amount_error": "وارد کردن مقدار پیشنهادی الزامیست"
+    "amount_error": "وارد کردن مقدار پیشنهادی الزامیست",
+    "description_error": "وارد کردن توضیحات الزامی است!",
+    "description": "توضیحات",
+    "choose_file": "انتخاب فایل"
   },
   "RejectDialog": {
     "reject": "عدم تایید",

src/components/dashboard/machinary-office/Form/ConfirmForm.jsx

@@ -41,7 +41,9 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
     setDescription(event.target.value);
   };
   const handleAmountChange = (event) => {
-    setProposedAmount(event.target.value);
+    if (/^\d*$/.test(event.target.value)) {
+      setProposedAmount(event.target.value);
+    }
     formik.handleChange(event);
   };
 
@@ -65,6 +67,11 @@ const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
           name="proposed_amount"
           label={t("MachinaryOffice.proposed_amount")}
           type="number"
+          inputProps={{
+            min: 0,
+            inputMode: "numeric",
+            pattern: "[0-9]*",
+          }}
           variant="outlined"
           value={proposedAmount}
           onChange={handleAmountChange}

src/components/dashboard/passenger-office/Form/ConfirmForm.jsx

@@ -6,23 +6,116 @@ import {
   DialogContentText,
   DialogActions,
   Button,
+  TextField,
+  FormHelperText,
 } from "@mui/material";
+import { useFormik } from "formik";
 import { useTranslations } from "next-intl";
+import { useRef, useState } from "react";
+const MAX_FILE_SIZE_IN_BYTES = 2 * 1024 * 1024;
 
 const ConfirmForm = ({ open, handleClose, rowId, confirmData }) => {
   const t = useTranslations();
-  const handleConfirm = () => {
-    handleClose();
-    confirmData(CONFIRM_PASSENGER_OFFICE, rowId);
+  const [description, setDescription] = useState("");
+  const [fileData, setFileData] = useState(null);
+  const inputRef = useRef(null);
+
+  const formik = useFormik({
+    initialValues: {
+      description: "",
+      fileData: null,
+    },
+    onSubmit: () => {
+      const formData = new FormData();
+      if (description !== "")
+        formData.append("expert_description", description);
+      if (fileData !== null) formData.append("file", fileData);
+      handleClose();
+      confirmData(CONFIRM_PASSENGER_OFFICE, rowId, formData);
+    },
+  });
+
+  const handleUploadClick = () => {
+    // 👇 We redirect the click event onto the hidden input element
+    inputRef.current?.click();
   };
+
+  const handleDescriptionChange = (event) => {
+    setDescription(event.target.value);
+    formik.handleChange(event);
+  };
+
+  const handleFileChange = (e) => {
+    const selectedFile = e.target.files[0];
+    if (selectedFile) {
+      const fileSizeInBytes = selectedFile.size;
+      if (fileSizeInBytes > MAX_FILE_SIZE_IN_BYTES) {
+        formik.setFieldError(
+          "fileData",
+          `File size exceeds the limit (${MAX_FILE_SIZE_IN_BYTES / 1000000} MB)`
+        );
+        e.target.value = null;
+      } else {
+        setFileData(selectedFile);
+        formik.setFieldValue("fileData", selectedFile);
+        formik.setFieldError("fileData", "");
+      }
+    }
+  };
+
   return (
     <Dialog open={open} onClose={handleClose}>
       <DialogTitle>{t("ConfirmDialog.confirm")}</DialogTitle>
       <DialogContent>
         <DialogContentText>{t("ConfirmDialog.context")}</DialogContentText>
+        <TextField
+          name="description"
+          multiline
+          rows={8}
+          placeholder={t("ConfirmDialog.description")}
+          value={description}
+          onChange={handleDescriptionChange}
+          onBlur={formik.handleBlur("description")}
+          fullWidth
+          variant="outlined"
+          sx={{ mt: 1 }}
+        />
+        <div>
+          <label htmlFor="fileData">
+            <Button
+              variant="outlined"
+              color="primary"
+              onClick={handleUploadClick}
+              component="span"
+              sx={{ mt: 1, width: "100%" }}
+            >
+              {fileData ? (
+                <>
+                  Name : {fileData.name}
+                  <br />
+                  Size : {fileData.size}
+                </>
+              ) : (
+                <>{t("ConfirmDialog.choose_file")}</>
+              )}
+            </Button>
+          </label>
+          <input
+            id="fileData"
+            name="fileData"
+            type="file"
+            accept=".pdf, image/*"
+            ref={inputRef}
+            onChange={handleFileChange}
+            style={{ display: "none" }}
+          />
+        </div>
+        <FormHelperText error={Boolean(formik.errors.fileData)}>
+          {formik.errors.fileData && formik.errors.fileData}
+        </FormHelperText>
       </DialogContent>
       <DialogActions>
-        <Button onClick={handleConfirm} color="primary">
+        <Button onClick={formik.handleSubmit} color="primary">
           {t("ConfirmDialog.button-confirm")}
         </Button>
         <Button onClick={handleClose} color="secondary" autoFocus>