diff --git a/public/locales/fa/app.json b/public/locales/fa/app.json index 4e26061..6233abc 100644 --- a/public/locales/fa/app.json +++ b/public/locales/fa/app.json @@ -218,11 +218,14 @@ "confirm": "ارجاع به معاون حمل و نقل", "upload_file": "صورت جلسه کارگروه را بارگذاری کنید", "upload_file_required": "وارد کردن صورت جلسه کارگروه الزامیست", + "upload_file_second_required": "وارد کردن فرم ب الزامیست", "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد", "upload_file_format": "فرمت قابل قبول : png,jpg,pdf", "print_final_credit_amount": "چاپ صورت جلسه تعیین مبلغ نهایی", "max_amount": "حداکثر مبلغ تصویب شده {value} میلیون ریال می باشد", - "excel_report": "گزارش اکسل" + "excel_report": "گزارش اکسل", + "first_form": "فرم الف را بارگذاری کنید", + "second_form": "فرم ب را بارگذاری کنید" }, "RefahiProvinceManager": { "name": "نام", diff --git a/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx index 38c3f2e..583a634 100644 --- a/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx +++ b/src/components/dashboard/passenger-boss/Form/ConfirmForm/ConfirmContent.jsx @@ -28,10 +28,10 @@ const vehicle_amount = { } const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, handleSizeChangeClick}) => { const t = useTranslations(); - const [selectedImage, setSelectedImage] = useState(""); - const [fileType, setfileType] = useState(null); - const [fileName, setfileName] = useState(null); - const [showAddIcon, setShowAddIcon] = useState(true); + 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 requestServer = useRequest({auth: true, notification: false}) const {update_notification} = useNotification(); const [accordionStates, setAccordionStates] = useState([]); @@ -85,6 +85,15 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand .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_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); @@ -95,13 +104,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand initialValues: { description: "", approved_amount: "", - confirm_img: null + confirm_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); requestServer(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, 'post', { data: formData, @@ -120,18 +133,32 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand formik.setFieldValue("description", event.target.value) }; - const handleUploadChange = (event) => { + const handleUploadChange = (event , fieldName , index) => { const uploadedFile = event.target?.files?.[0]; if (uploadedFile) { const fileType = event.target?.files?.[0].type; const fileName = event.target?.files?.[0].name; - setSelectedImage(URL.createObjectURL(uploadedFile)); - setfileType(fileType); - setfileName(fileName); - formik.setFieldValue("confirm_img", uploadedFile).then(() => { - formik.setFieldTouched("confirm_img", true); + + 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); }) - setShowAddIcon(false); + setShowAddIcon(showAddIconField); } }; const handleAmountChange = (event) => { @@ -230,15 +257,16 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand - {t("UploadSystem.upload_file")} + {t("PassengerBoss.first_form")} handleUploadChange(event, "confirm_img" , 0)} // Pass the updated function directly setselectedImage={setSelectedImage} setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue fieldname="confirm_img" - fileType={fileType} - fileName={fileName} + fileType={fileTypes[0]} + fileName={fileNames[0]} imageAlt={t("app_name")} imageSize={[250, 150]} setShowAddIcon={setShowAddIcon} @@ -256,29 +284,30 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand - {t("UploadSystem.upload_file")} + {t("PassengerBoss.second_form")} handleUploadChange(event, "second_img" , 1)} // Pass the updated function directly setselectedImage={setSelectedImage} setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue - fieldname="confirm_img" - fileType={fileType} - fileName={fileName} + fieldname="second_img" + fileType={fileTypes[1]} // Use fileTypes array at index 0 for the first instance + fileName={fileNames[1]} imageAlt={t("app_name")} imageSize={[250, 150]} setShowAddIcon={setShowAddIcon} showAddIcon={showAddIcon} - onBlur={() => formik.handleBlur("confirm_img")} + onBlur={() => formik.handleBlur("second_img")} error={ - formik.touched.confirm_img && - Boolean(formik.errors.confirm_img) + formik.touched.second_img && + Boolean(formik.errors.second_img) } /> - {formik.touched.confirm_img && formik.errors.confirm_img} + {formik.touched.second_img && formik.errors.second_img} diff --git a/src/core/components/UploadSystem.jsx b/src/core/components/UploadSystem.jsx index ea573d7..fd99b01 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 = ({ +const UploadSystem = ({ index, selectedImage, setselectedImage, handleUploadChange, @@ -22,10 +22,17 @@ const UploadSystem = ({ fileInputRef.current.click(); }; - const handleDeleteImage = () => { - setselectedImage(null); + const handleDeleteImage = (index) => { + const updatedSelectedImages = [...selectedImage]; + updatedSelectedImages[index] = null; + setselectedImage(updatedSelectedImages); + setFieldValue(fieldname, null); - setShowAddIcon(true); + + const showAddIconSelected = [...showAddIcon]; + showAddIconSelected[index] = true; + setShowAddIcon(showAddIconSelected); + if (fileInputRef.current) { fileInputRef.current.value = ""; } @@ -44,8 +51,7 @@ const UploadSystem = ({ return ( - {showAddIcon ? ( - // Show the add icon and "Upload File" text when no image is selected + {showAddIcon[index] ? ( <> @@ -154,8 +160,9 @@ const UploadSystem = ({ color="error" endIcon={} variant="contained" - onClick={handleDeleteImage} + onClick={() => handleDeleteImage(index)} // Wrap the function call in an arrow function > + {t("UploadSystem.delete")} @@ -164,7 +171,7 @@ const UploadSystem = ({ type="file" accept="image/*, .pdf, .doc, .docx, .xls, .xlsx" style={{display: "none"}} - onChange={handleUploadChange} + onChange={(event) => handleUploadChange(event, fieldname, index)} ref={fileInputRef} />