diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 6233abc..24f4ad5 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -217,7 +217,7 @@ "state_name": "وضعیت درخواست", "confirm": "ارجاع به معاون حمل و نقل", "upload_file": "صورت جلسه کارگروه را بارگذاری کنید", - "upload_file_required": "وارد کردن صورت جلسه کارگروه الزامیست", + "upload_file_first_required": "وارد کردن فرم الف الزامیست", "upload_file_second_required": "وارد کردن فرم ب الزامیست", "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد", "upload_file_format": "فرمت قابل قبول : png,jpg,pdf", diff --git a/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx index 583a634..a3a5580 100644 --- a/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx +++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx @@ -28,10 +28,14 @@ const vehicle_amount = { } const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, handleSizeChangeClick}) => { const t = useTranslations(); - const [selectedImage, setSelectedImage] = useState([null, null]); - const [fileTypes, setFileTypes] = useState([null, null]); // Array to hold file types for multiple instances - const [fileNames, setFileNames] = useState([null, null]); - const [showAddIcon, setShowAddIcon] = useState([true , true]); + const [selectedImageAForm, setSelectedImageAForm] = useState(""); + const [selectedImageBForm, setSelectedImageBForm] = useState(""); + const [fileTypesA, setFileTypesA] = useState(null); + const [fileNamesA, setFileNamesA] = useState(null); + const [fileTypesB, setFileTypesB] = useState(null); + const [fileNamesB, setFileNamesB] = useState(null); + const [showAddIconA, setShowAddIconA] = useState(true); + const [showAddIconB, setShowAddIconB] = useState(true); const requestServer = useRequest({auth: true, notification: false}) const {update_notification} = useNotification(); const [accordionStates, setAccordionStates] = useState([]); @@ -80,8 +84,8 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand (value) => value <= vehicle_amount[vehicle_type]) .test("positive", `${t("ConfirmDialog.approved_amount_positive")}`, (value) => value >= 0) .required(t("ConfirmDialog.approved_amount_error")), - confirm_img: Yup.mixed() - .required(t("PassengerBoss.upload_file_required")) + first_img: Yup.mixed() + .required(t("PassengerBoss.upload_file_first_required")) .test('fileSize', `${t("PassengerBoss.upload_file_unit")}`, (value) => { return value.size <= 2 * 1024 * 1024; }) @@ -104,19 +108,28 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand initialValues: { description: "", approved_amount: "", - confirm_img: null, + first_img: null, second_img: null }, validationSchema, onSubmit: (values, {setSubmitting}) => { const formData = new FormData(); - console.log(values) + formData.append("approved_amount", values.approved_amount); + if (values.description != "") formData.append("expert_description", values.description); - formData.append("attachment", values.confirm_img); - formData.append("second_attachment", values.second_img); + const attachments = [ + { title: 'فرم الف', file: values.first_img }, + { title: 'فرم ب', file: values.second_img } + ]; - requestServer(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, 'post', { + attachments.forEach((attachment, index) => { + formData.append(`attachment[${index}][title]`, attachment.title); + formData.append(`attachment[${index}][file]`, attachment.file); + }); + + requestServer(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, 'post',{ + notification: true, data: formData, }).then((response) => { setOpenConfirmDialog(false) @@ -133,32 +146,32 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand formik.setFieldValue("description", event.target.value) }; - const handleUploadChange = (event , fieldName , index) => { + const handleUploadChangeAForm = (event) => { const uploadedFile = event.target?.files?.[0]; if (uploadedFile) { const fileType = event.target?.files?.[0].type; const fileName = event.target?.files?.[0].name; - - const updatedImages = [...selectedImage]; - updatedImages[index] = URL.createObjectURL(uploadedFile); - setSelectedImage(updatedImages); - - const updatedFileTypes = [...fileTypes]; - updatedFileTypes[index] = fileType; - - const updatedFileNames = [...fileNames]; - updatedFileNames[index] = fileName; - - const showAddIconField = [...showAddIcon]; - showAddIconField[index] = false; - - setFileTypes(updatedFileTypes); - setFileNames(updatedFileNames); - - formik.setFieldValue(fieldName, uploadedFile).then(() => { - formik.setFieldTouched(fieldName, true); + setSelectedImageAForm(URL.createObjectURL(uploadedFile)); + setFileTypesA(fileType); + setFileNamesA(fileName); + formik.setFieldValue("first_img", uploadedFile).then(() => { + formik.setFieldTouched("first_img", true); }) - setShowAddIcon(showAddIconField); + setShowAddIconA(false); + } + }; + const handleUploadChangeBForm = (event) => { + const uploadedFile = event.target?.files?.[0]; + if (uploadedFile) { + const fileType = event.target?.files?.[0].type; + const fileName = event.target?.files?.[0].name; + setSelectedImageBForm(URL.createObjectURL(uploadedFile)); + setFileTypesB(fileType); + setFileNamesB(fileName); + formik.setFieldValue("second_img", uploadedFile).then(() => { + formik.setFieldTouched("second_img", true); + }) + setShowAddIconB(false); } }; const handleAmountChange = (event) => { @@ -259,45 +272,43 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand {t("PassengerBoss.first_form")} handleUploadChange(event, "confirm_img" , 0)} // Pass the updated function directly - setselectedImage={setSelectedImage} + selectedImage={selectedImageAForm} + handleUploadChange={handleUploadChangeAForm} // Pass the updated function directly + setselectedImage={setSelectedImageAForm} setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue - fieldname="confirm_img" - fileType={fileTypes[0]} - fileName={fileNames[0]} + fieldname="first_img" + fileType={fileTypesA} + fileName={fileNamesA} imageAlt={t("app_name")} imageSize={[250, 150]} - setShowAddIcon={setShowAddIcon} - showAddIcon={showAddIcon} - onBlur={() => formik.handleBlur("confirm_img")} + setShowAddIcon={setShowAddIconA} + showAddIcon={showAddIconA} + onBlur={() => formik.handleBlur("first_img")} error={ - formik.touched.confirm_img && - Boolean(formik.errors.confirm_img) + formik.touched.first_img && + Boolean(formik.errors.first_img) } /> - {formik.touched.confirm_img && formik.errors.confirm_img} + {formik.touched.first_img && formik.errors.first_img} {t("PassengerBoss.second_form")} handleUploadChange(event, "second_img" , 1)} // Pass the updated function directly - setselectedImage={setSelectedImage} + selectedImage={selectedImageBForm} + handleUploadChange={handleUploadChangeBForm} // Pass the updated function directly + setselectedImage={setSelectedImageBForm} setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue fieldname="second_img" - fileType={fileTypes[1]} // Use fileTypes array at index 0 for the first instance - fileName={fileNames[1]} + fileType={fileTypesB} // Use fileTypes array at index 0 for the first instance + fileName={fileNamesB} imageAlt={t("app_name")} imageSize={[250, 150]} - setShowAddIcon={setShowAddIcon} - showAddIcon={showAddIcon} + setShowAddIcon={setShowAddIconB} + showAddIcon={showAddIconB} onBlur={() => formik.handleBlur("second_img")} error={ formik.touched.second_img && diff --git a/src/components/dashboard/passenger-boss/Form/RejectForm/RejectContent.jsx b/src/components/dashboard/passenger-boss/Form/RejectForm/RejectContent.jsx index 93fe8c3..7ad9ade 100644 --- a/src/components/dashboard/passenger-boss/Form/RejectForm/RejectContent.jsx +++ b/src/components/dashboard/passenger-boss/Form/RejectForm/RejectContent.jsx @@ -1,7 +1,7 @@ import UploadSystem from "@/core/components/UploadSystem" import useNotification from "@/lib/app/hooks/useNotification"; import useRequest from "@/lib/app/hooks/useRequest"; -import {Button, DialogActions, DialogContent, Stack, TextField, Typography} from "@mui/material" +import {Button, DialogActions, DialogContent, FormHelperText, Grid, Stack, TextField, Typography} from "@mui/material" import {useFormik} from "formik"; import {useTranslations} from "next-intl"; import {useState} from "react"; @@ -9,28 +9,62 @@ import * as Yup from "yup"; import {REJECT_PASSENGER_BOSS} from "@/core/data/apiRoutes"; const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => { - const [selectedImage, setSelectedImage] = useState(""); - const [fileType, setfileType] = useState(null); - const [fileName, setfileName] = useState(null); - const [showAddIcon, setShowAddIcon] = useState(true); + const [selectedImageAForm, setSelectedImageAForm] = useState(""); + const [selectedImageBForm, setSelectedImageBForm] = useState(""); + const [fileTypesA, setFileTypesA] = useState(null); + const [fileNamesA, setFileNamesA] = useState(null); + const [fileTypesB, setFileTypesB] = useState(null); + const [fileNamesB, setFileNamesB] = useState(null); + const [showAddIconA, setShowAddIconA] = useState(true); + const [showAddIconB, setShowAddIconB] = useState(true); const t = useTranslations(); const requestServer = useRequest({auth: true}) const {update_notification} = useNotification() const validationSchema = Yup.object().shape({ description: Yup.string().required(t("RejectDialog.description_error")), + + first_reject_img: Yup.mixed() + .required(t("PassengerBoss.upload_file_first_required")) + .test('fileSize', `${t("PassengerBoss.upload_file_unit")}`, (value) => { + return value.size <= 2 * 1024 * 1024; + }) + .test('fileType', `${t("PassengerBoss.upload_file_format")}`, (value) => { + const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf']; // Define your allowed file types + return allowedTypes.includes(value.type); + }), + + second_reject_img: Yup.mixed() + .required(t("PassengerBoss.upload_file_second_required")) + .test('fileSize', `${t("PassengerBoss.upload_file_unit")}`, (value) => { + return value.size <= 2 * 1024 * 1024; + }) + .test('fileType', `${t("PassengerBoss.upload_file_format")}`, (value) => { + const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf']; // Define your allowed file types + return allowedTypes.includes(value.type); + }) }); const formik = useFormik({ initialValues: { description: "", - reject_img: null + first_reject_img: null, + second_reject_img:null }, validationSchema, onSubmit: (values, {setSubmitting}) => { const formData = new FormData(); formData.append("expert_description", values.description); - if (values.reject_img != null) formData.append("attachment", values.reject_img); + + const attachments = [ + { title: 'فرم الف', file: values.first_reject_img }, + { title: 'فرم ب', file: values.second_reject_img } + ]; + + attachments.forEach((attachment, index) => { + formData.append(`attachment[${index}][title]`, attachment.title); + formData.append(`attachment[${index}][file]`, attachment.file); + }); requestServer(`${REJECT_PASSENGER_BOSS}/${rowId}`, 'post', { data: formData, @@ -49,22 +83,32 @@ const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => { formik.setFieldValue("description", event.target.value); formik.handleChange(event); }; - const handleUploadChange = (event) => { + const handleUploadChangeAForm = (event) => { const uploadedFile = event.target?.files?.[0]; if (uploadedFile) { - const maxFileSize = 2 * 1024 * 1024; - if (uploadedFile.size > maxFileSize) { - UploadFileNotification(t); - event.target.value = ""; - return; - } const fileType = event.target?.files?.[0].type; const fileName = event.target?.files?.[0].name; - setSelectedImage(URL.createObjectURL(uploadedFile)); - setfileType(fileType); - setfileName(fileName); - formik.setFieldValue("reject_img", uploadedFile); - setShowAddIcon(false); + setSelectedImageAForm(URL.createObjectURL(uploadedFile)); + setFileTypesA(fileType); + setFileNamesA(fileName); + formik.setFieldValue("first_reject_img", uploadedFile).then(() => { + formik.setFieldTouched("first_reject_img", true); + }) + setShowAddIconA(false); + } + }; + const handleUploadChangeBForm = (event) => { + const uploadedFile = event.target?.files?.[0]; + if (uploadedFile) { + const fileType = event.target?.files?.[0].type; + const fileName = event.target?.files?.[0].name; + setSelectedImageBForm(URL.createObjectURL(uploadedFile)); + setFileTypesB(fileType); + setFileNamesB(fileName); + formik.setFieldValue("second_reject_img", uploadedFile).then(() => { + formik.setFieldTouched("second_reject_img", true); + }) + setShowAddIconB(false); } }; return ( @@ -90,20 +134,60 @@ const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => { /> - {t("UploadSystem.upload_file")}{t("UploadSystem.optional")} - + + + {t("PassengerBoss.first_form")} + formik.handleBlur("first_reject_img")} + error={ + formik.touched.first_reject_img && + Boolean(formik.errors.first_reject_img) + } + /> + + {formik.touched.first_reject_img && formik.errors.first_reject_img} + + + + {t("PassengerBoss.second_form")} + formik.handleBlur("second_reject_img")} + error={ + formik.touched.second_reject_img && + Boolean(formik.errors.second_reject_img) + } + /> + + {formik.touched.second_reject_img && formik.errors.second_reject_img} + + + diff --git a/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx index d86c4f2..d84726f 100644 --- a/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx +++ b/src/components/dashboard/passenger-office/Form/ConfirmForm/ConfirmContent.jsx @@ -38,7 +38,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { onSubmit: (values, {setSubmitting}) => { const formData = new FormData(); if (values.description != "") formData.append("description", values.description); - if (values.confirm_img != null) formData.append("attachment", values.confirm_img); + // if (values.confirm_img != null) formData.append("attachment", values.confirm_img); + + const attachments = [ + { title: 'فرم الف', file: values.confirm_img }, + ]; + + attachments.forEach((attachment, index) => { + formData.append(`attachment[${index}][title]`, attachment.title); + formData.append(`attachment[${index}][file]`, attachment.file); + }); + requestServer(`${CONFIRM_PASSENGER_OFFICE}/${rowId}`, 'post', { data: formData, diff --git a/src/core/components/UploadSystem.jsx b/src/core/components/UploadSystem.jsx index fd99b01..ea573d7 100644 --- a/src/core/components/UploadSystem.jsx +++ b/src/core/components/UploadSystem.jsx @@ -4,7 +4,7 @@ import AddIcon from "@mui/icons-material/Add"; import DeleteForeverIcon from "@mui/icons-material/DeleteForever"; import {useRef} from "react"; -const UploadSystem = ({ index, +const UploadSystem = ({ selectedImage, setselectedImage, handleUploadChange, @@ -22,17 +22,10 @@ const UploadSystem = ({ index, fileInputRef.current.click(); }; - const handleDeleteImage = (index) => { - const updatedSelectedImages = [...selectedImage]; - updatedSelectedImages[index] = null; - setselectedImage(updatedSelectedImages); - + const handleDeleteImage = () => { + setselectedImage(null); setFieldValue(fieldname, null); - - const showAddIconSelected = [...showAddIcon]; - showAddIconSelected[index] = true; - setShowAddIcon(showAddIconSelected); - + setShowAddIcon(true); if (fileInputRef.current) { fileInputRef.current.value = ""; } @@ -51,7 +44,8 @@ const UploadSystem = ({ index, return ( - {showAddIcon[index] ? ( + {showAddIcon ? ( + // Show the add icon and "Upload File" text when no image is selected <> @@ -160,9 +154,8 @@ const UploadSystem = ({ index, color="error" endIcon={} variant="contained" - onClick={() => handleDeleteImage(index)} // Wrap the function call in an arrow function + onClick={handleDeleteImage} > - {t("UploadSystem.delete")} @@ -171,7 +164,7 @@ const UploadSystem = ({ index, type="file" accept="image/*, .pdf, .doc, .docx, .xls, .xlsx" style={{display: "none"}} - onChange={(event) => handleUploadChange(event, fieldname, index)} + onChange={handleUploadChange} ref={fileInputRef} />