Merge branch 'feature/yasi_add_extra_file' into 'develop'

Feature/yasi add extra file

See merge request witel-front-end/loan-facilities/expert!126
This commit is contained in:
2023-12-27 09:54:38 +00:00
3 changed files with 254 additions and 85 deletions

View File

@@ -217,12 +217,15 @@
"state_name": "وضعیت درخواست", "state_name": "وضعیت درخواست",
"confirm": "ارجاع به معاون حمل و نقل", "confirm": "ارجاع به معاون حمل و نقل",
"upload_file": "صورت جلسه کارگروه را بارگذاری کنید", "upload_file": "صورت جلسه کارگروه را بارگذاری کنید",
"upload_file_required": "وارد کردن صورت جلسه کارگروه الزامیست", "upload_file_first_required": "وارد کردن فرم الف الزامیست",
"upload_file_second_required": "وارد کردن فرم ب الزامیست",
"upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد", "upload_file_unit": "فایل بارگذاری شده باید حداکثر 2Mb باشد",
"upload_file_format": "فرمت قابل قبول : png,jpg,pdf", "upload_file_format": "فرمت قابل قبول : png,jpg,pdf",
"print_final_credit_amount": "چاپ صورت جلسه تعیین مبلغ نهایی", "print_final_credit_amount": "چاپ صورت جلسه تعیین مبلغ نهایی",
"max_amount": "حداکثر مبلغ تصویب شده {value} میلیون ریال می باشد", "max_amount": "حداکثر مبلغ تصویب شده {value} میلیون ریال می باشد",
"excel_report": "گزارش اکسل" "excel_report": "گزارش اکسل",
"first_form": "فرم الف را بارگذاری کنید",
"second_form": "فرم ب را بارگذاری کنید"
}, },
"RefahiProvinceManager": { "RefahiProvinceManager": {
"name": "نام", "name": "نام",

View File

@@ -28,12 +28,17 @@ const vehicle_amount = {
} }
const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, handleSizeChangeClick}) => { const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, handleSizeChangeClick}) => {
const t = useTranslations(); const t = useTranslations();
const [selectedImage, setSelectedImage] = useState(""); const [selectedImageAForm, setSelectedImageAForm] = useState("");
const [fileType, setfileType] = useState(null); const [selectedImageBForm, setSelectedImageBForm] = useState("");
const [fileName, setfileName] = useState(null); const [fileTypesA, setFileTypesA] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true); 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 requestServer = useRequest({auth: true, notification: false})
const {update_notification} = useNotification(); const {update_notification} = useNotification();
const [attachmentsData, setAttachmentsData] = useState([]);
const [accordionStates, setAccordionStates] = useState([]); const [accordionStates, setAccordionStates] = useState([]);
const [hasImageShown, setHasImageShown] = useState(false); const [hasImageShown, setHasImageShown] = useState(false);
const [imageLink, setImageLink] = useState(null); const [imageLink, setImageLink] = useState(null);
@@ -44,8 +49,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
useEffect(() => { useEffect(() => {
requestServer(`${EXPORT_PASSENGER_BOSS_DETAILS}/${rowId}`, 'get') requestServer(`${EXPORT_PASSENGER_BOSS_DETAILS}/${rowId}`, 'get')
.then((response) => { .then((response) => {
const booleanData = Array.from({length: response.data.data.attachment_files.length}, () => false); const allAttachments = [];
setAccordionStates(booleanData); response.data.data.histories.map((history) => {
history.attachments.map((attachment) => {
allAttachments.push(attachment);
});
});
setDetailsData(response.data);
setAttachmentsData(allAttachments);
setDetailsData(response.data) setDetailsData(response.data)
}) })
.catch(() => { .catch(() => {
@@ -54,6 +65,13 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
}); });
}, []); }, []);
useEffect(() => {
if (attachmentsData.length !== 0) {
const booleanData = Array.from({length: attachmentsData.length}, () => false);
setAccordionStates(booleanData);
}
}, [attachmentsData]);
const handleAccordionChange = (index) => { const handleAccordionChange = (index) => {
const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false); const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
setAccordionStates(newAccordionStates); setAccordionStates(newAccordionStates);
@@ -65,7 +83,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
} else { } else {
handleSizeChangeClick('xl'); handleSizeChangeClick('xl');
setHasImageShown(true); setHasImageShown(true);
setImageLink(detailsList.data.attachment_files[index]) setImageLink(attachmentsData[index])
setIsSkeleton(true) setIsSkeleton(true)
} }
}; };
@@ -80,8 +98,17 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
(value) => value <= vehicle_amount[vehicle_type]) (value) => value <= vehicle_amount[vehicle_type])
.test("positive", `${t("ConfirmDialog.approved_amount_positive")}`, (value) => value >= 0) .test("positive", `${t("ConfirmDialog.approved_amount_positive")}`, (value) => value >= 0)
.required(t("ConfirmDialog.approved_amount_error")), .required(t("ConfirmDialog.approved_amount_error")),
confirm_img: Yup.mixed() first_img: Yup.mixed()
.required(t("PassengerBoss.upload_file_required")) .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_img: Yup.mixed()
.required(t("PassengerBoss.upload_file_second_required"))
.test('fileSize', `${t("PassengerBoss.upload_file_unit")}`, (value) => { .test('fileSize', `${t("PassengerBoss.upload_file_unit")}`, (value) => {
return value.size <= 2 * 1024 * 1024; return value.size <= 2 * 1024 * 1024;
}) })
@@ -95,17 +122,29 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
initialValues: { initialValues: {
description: "", description: "",
approved_amount: "", approved_amount: "",
confirm_img: null first_img: null,
second_img: null
}, validationSchema, }, validationSchema,
onSubmit: (values, {setSubmitting}) => { onSubmit: (values, {setSubmitting}) => {
const formData = new FormData(); const formData = new FormData();
formData.append("approved_amount", values.approved_amount);
if (values.description != "") formData.append("expert_description", values.description);
formData.append("attachment", values.confirm_img);
requestServer(`${CONFIRM_PASSENGER_BOSS}/${rowId}`, 'post', { formData.append("approved_amount", values.approved_amount);
if (values.description != "") formData.append("expert_description", values.description);
const attachments = [
{ title: 'فرم الف', file: values.first_img },
{ title: 'فرم ب', file: values.second_img }
];
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, data: formData,
notification: true
}).then((response) => { }).then((response) => {
setOpenConfirmDialog(false) setOpenConfirmDialog(false)
mutate() mutate()
@@ -121,18 +160,32 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
formik.setFieldValue("description", event.target.value) formik.setFieldValue("description", event.target.value)
}; };
const handleUploadChange = (event) => { const handleUploadChangeAForm = (event) => {
const uploadedFile = event.target?.files?.[0]; const uploadedFile = event.target?.files?.[0];
if (uploadedFile) { if (uploadedFile) {
const fileType = event.target?.files?.[0].type; const fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name; const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile)); setSelectedImageAForm(URL.createObjectURL(uploadedFile));
setfileType(fileType); setFileTypesA(fileType);
setfileName(fileName); setFileNamesA(fileName);
formik.setFieldValue("confirm_img", uploadedFile).then(() => { formik.setFieldValue("first_img", uploadedFile).then(() => {
formik.setFieldTouched("confirm_img", true); formik.setFieldTouched("first_img", true);
}) })
setShowAddIcon(false); 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) => { const handleAmountChange = (event) => {
@@ -144,8 +197,8 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
}; };
const renderCustomAccordions = () => { const renderCustomAccordions = () => {
if (detailsList && detailsList.data && detailsList.data.attachment_files) { if (attachmentsData) {
return detailsList.data.attachment_files.map((file, index) => ( return attachmentsData.map((file, index) => (
<CustomAccordion <CustomAccordion
key={index} key={index}
title={`${file.title}`} title={`${file.title}`}
@@ -153,13 +206,12 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
hasAccordionOpened={null} hasAccordionOpened={null}
handleAccordionChange={() => handleAccordionChange(index)} handleAccordionChange={() => handleAccordionChange(index)}
accordionIndex={index} accordionIndex={index}
downloadFile={file.attachment} downloadFile={file.file}
/> />
)); ));
} }
return null; return null;
}; };
return ( return (
<> <>
<DialogContent> <DialogContent>
@@ -227,30 +279,60 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, vehicle_type, hand
/> />
</Stack> </Stack>
<Stack> <Stack>
<Typography>{t("PassengerBoss.upload_file")}</Typography> <Grid container spacing={2}>
<UploadSystem <Grid item xs={12} sm={6}>
selectedImage={selectedImage} <Typography>{t("PassengerBoss.first_form")}</Typography>
handleUploadChange={handleUploadChange} // Pass the updated function directly <UploadSystem
setselectedImage={setSelectedImage} selectedImage={selectedImageAForm}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue handleUploadChange={handleUploadChangeAForm} // Pass the updated function directly
fieldname="confirm_img" setselectedImage={setSelectedImageAForm}
fileType={fileType} setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fileName={fileName} fieldname="first_img"
imageAlt={t("app_name")} fileType={fileTypesA}
imageSize={[250, 150]} fileName={fileNamesA}
setShowAddIcon={setShowAddIcon} imageAlt={t("app_name")}
showAddIcon={showAddIcon} imageSize={[250, 150]}
onBlur={() => formik.handleBlur("confirm_img")} setShowAddIcon={setShowAddIconA}
error={ showAddIcon={showAddIconA}
formik.touched.confirm_img && onBlur={() => formik.handleBlur("first_img")}
Boolean(formik.errors.confirm_img) error={
} formik.touched.first_img &&
/> Boolean(formik.errors.first_img)
<FormHelperText }
error={Boolean(formik.errors.confirm_img)} />
> <FormHelperText
{formik.touched.confirm_img && formik.errors.confirm_img} error={Boolean(formik.errors.first_img)}
</FormHelperText> >
{formik.touched.first_img && formik.errors.first_img}
</FormHelperText>
</Grid>
<Grid item xs={12} sm={6}>
<Typography>{t("PassengerBoss.second_form")}</Typography>
<UploadSystem
selectedImage={selectedImageBForm}
handleUploadChange={handleUploadChangeBForm} // Pass the updated function directly
setselectedImage={setSelectedImageBForm}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="second_img"
fileType={fileTypesB} // Use fileTypes array at index 0 for the first instance
fileName={fileNamesB}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIconB}
showAddIcon={showAddIconB}
onBlur={() => formik.handleBlur("second_img")}
error={
formik.touched.second_img &&
Boolean(formik.errors.second_img)
}
/>
<FormHelperText
error={Boolean(formik.errors.second_img)}
>
{formik.touched.second_img && formik.errors.second_img}
</FormHelperText>
</Grid>
</Grid>
</Stack> </Stack>
</Stack> </Stack>
</Grid> </Grid>

View File

@@ -1,7 +1,7 @@
import UploadSystem from "@/core/components/UploadSystem" import UploadSystem from "@/core/components/UploadSystem"
import useNotification from "@/lib/app/hooks/useNotification"; import useNotification from "@/lib/app/hooks/useNotification";
import useRequest from "@/lib/app/hooks/useRequest"; 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 {useFormik} from "formik";
import {useTranslations} from "next-intl"; import {useTranslations} from "next-intl";
import {useState} from "react"; import {useState} from "react";
@@ -9,28 +9,62 @@ import * as Yup from "yup";
import {REJECT_PASSENGER_BOSS} from "@/core/data/apiRoutes"; import {REJECT_PASSENGER_BOSS} from "@/core/data/apiRoutes";
const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => { const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
const [selectedImage, setSelectedImage] = useState(""); const [selectedImageAForm, setSelectedImageAForm] = useState("");
const [fileType, setfileType] = useState(null); const [selectedImageBForm, setSelectedImageBForm] = useState("");
const [fileName, setfileName] = useState(null); const [fileTypesA, setFileTypesA] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true); 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 t = useTranslations();
const requestServer = useRequest({auth: true}) const requestServer = useRequest({auth: true})
const {update_notification} = useNotification() const {update_notification} = useNotification()
const validationSchema = Yup.object().shape({ const validationSchema = Yup.object().shape({
description: Yup.string().required(t("RejectDialog.description_error")), 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({ const formik = useFormik({
initialValues: { initialValues: {
description: "", description: "",
reject_img: null first_reject_img: null,
second_reject_img:null
}, },
validationSchema, validationSchema,
onSubmit: (values, {setSubmitting}) => { onSubmit: (values, {setSubmitting}) => {
const formData = new FormData(); const formData = new FormData();
formData.append("expert_description", values.description); 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', { requestServer(`${REJECT_PASSENGER_BOSS}/${rowId}`, 'post', {
data: formData, data: formData,
@@ -49,22 +83,32 @@ const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
formik.setFieldValue("description", event.target.value); formik.setFieldValue("description", event.target.value);
formik.handleChange(event); formik.handleChange(event);
}; };
const handleUploadChange = (event) => { const handleUploadChangeAForm = (event) => {
const uploadedFile = event.target?.files?.[0]; const uploadedFile = event.target?.files?.[0];
if (uploadedFile) { 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 fileType = event.target?.files?.[0].type;
const fileName = event.target?.files?.[0].name; const fileName = event.target?.files?.[0].name;
setSelectedImage(URL.createObjectURL(uploadedFile)); setSelectedImageAForm(URL.createObjectURL(uploadedFile));
setfileType(fileType); setFileTypesA(fileType);
setfileName(fileName); setFileNamesA(fileName);
formik.setFieldValue("reject_img", uploadedFile); formik.setFieldValue("first_reject_img", uploadedFile).then(() => {
setShowAddIcon(false); 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 ( return (
@@ -90,20 +134,60 @@ const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
/> />
</Stack> </Stack>
<Stack> <Stack>
<Typography>{t("UploadSystem.upload_file")}{t("UploadSystem.optional")}</Typography> <Grid container spacing={2}>
<UploadSystem <Grid item xs={12} sm={6}>
selectedImage={selectedImage} <Typography>{t("PassengerBoss.first_form")}</Typography>
handleUploadChange={handleUploadChange} // Pass the updated function directly <UploadSystem
setselectedImage={setSelectedImage} selectedImage={selectedImageAForm}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue handleUploadChange={handleUploadChangeAForm} // Pass the updated function directly
fieldname="reject_img" setselectedImage={setSelectedImageAForm}
fileType={fileType} setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fileName={fileName} fieldname="first_reject_img"
imageAlt={t("app_name")} fileType={fileTypesA}
imageSize={[250 /*width*/, 150 /*height*/]} fileName={fileNamesA}
setShowAddIcon={setShowAddIcon} imageAlt={t("app_name")}
showAddIcon={showAddIcon} imageSize={[250, 150]}
/> setShowAddIcon={setShowAddIconA}
showAddIcon={showAddIconA}
onBlur={() => formik.handleBlur("first_reject_img")}
error={
formik.touched.first_reject_img &&
Boolean(formik.errors.first_reject_img)
}
/>
<FormHelperText
error={Boolean(formik.errors.first_reject_img)}
>
{formik.touched.first_reject_img && formik.errors.first_reject_img}
</FormHelperText>
</Grid>
<Grid item xs={12} sm={6}>
<Typography>{t("PassengerBoss.second_form")}</Typography>
<UploadSystem
selectedImage={selectedImageBForm}
handleUploadChange={handleUploadChangeBForm} // Pass the updated function directly
setselectedImage={setSelectedImageBForm}
setFieldValue={formik.setFieldValue} // Remove props.setFieldValue, use formik.setFieldValue
fieldname="second_reject_img"
fileType={fileTypesB} // Use fileTypes array at index 0 for the first instance
fileName={fileNamesB}
imageAlt={t("app_name")}
imageSize={[250, 150]}
setShowAddIcon={setShowAddIconB}
showAddIcon={showAddIconB}
onBlur={() => formik.handleBlur("second_reject_img")}
error={
formik.touched.second_reject_img &&
Boolean(formik.errors.second_reject_img)
}
/>
<FormHelperText
error={Boolean(formik.errors.second_reject_img)}
>
{formik.touched.second_reject_img && formik.errors.second_reject_img}
</FormHelperText>
</Grid>
</Grid>
</Stack> </Stack>
</Stack> </Stack>
</DialogContent> </DialogContent>