Merge branch 'feature/mohammad_change_upload_type' into 'develop'

Feature/mohammad change upload type

See merge request witel-front-end/loan-facilities/expert!125
This commit is contained in:
2023-12-27 08:33:53 +00:00
8 changed files with 195 additions and 81 deletions

View File

@@ -101,7 +101,6 @@ const ConfirmContent = ({mutate, setOpenConfirmDialog, rowId, vehicle_type, hand
return allowedTypes.includes(value.type);
})
});
const formik = useFormik({
initialValues: {
description: "",
@@ -116,7 +115,18 @@ const ConfirmContent = ({mutate, setOpenConfirmDialog, rowId, vehicle_type, hand
formData.append("sakht_period", values.sakht_period);
formData.append("tanafos_period", values.tanafos_period);
if (values.description != "") formData.append("expert_description", values.description);
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
if (values.confirm_img != null) {
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_MACHINARY_OFFICE}/${rowId}`, 'post', {
data: formData,
notification: true

View File

@@ -30,8 +30,18 @@ const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
formData.append("expert_description", values.description);
if (values.reject_img != null) formData.append("attachment", values.reject_img);
if (values.reject_img != null) {
const attachments = [
{
title: "فایل ضمیمه کارتابل قیمت گذاری",
file: values.reject_img
}
];
attachments.forEach((attachment, index) => {
formData.append(`attachment[${index}][title]`, attachment.title);
formData.append(`attachment[${index}][file]`, attachment.file);
});
}
requestServer(`${REJECT_MACHINARY_OFFICE}/${rowId}`, 'post', {
data: formData,
}).then((response) => {

View File

@@ -29,6 +29,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
const [showAddIcon, setShowAddIcon] = useState(true);
const requestServer = useRequest({auth: true, notification: false})
const {update_notification} = useNotification()
const [attachmentsData, setAttachmentsData] = useState([]);
const [accordionStates, setAccordionStates] = useState([]);
const [hasImageShown, setHasImageShown] = useState(false);
const [imageLink, setImageLink] = useState(null);
@@ -52,9 +53,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
useEffect(() => {
requestServer(`${CONFIRM_PROVINCE_MANAGER_DETAILS}/${rowId}`, 'get')
.then((response) => {
const booleanData = Array.from({length: response.data.data.attachment_files.length}, () => false);
setAccordionStates(booleanData);
setDetailsData(response.data)
const allAttachments = [];
response.data.data.histories.map((history) => {
history.attachments.map((attachment) => {
allAttachments.push(attachment);
});
});
setAttachmentsData(allAttachments);
setDetailsData(response.data);
})
.catch(() => {
}).finally(() => {
@@ -62,6 +68,13 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
});
}, []);
useEffect(() => {
if (attachmentsData.length !== 0) {
const booleanData = Array.from({length: attachmentsData.length}, () => false);
setAccordionStates(booleanData);
}
}, [attachmentsData]);
const handleAccordionChange = (index) => {
const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
setAccordionStates(newAccordionStates);
@@ -73,7 +86,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
} else {
handleSizeChangeClick('xl');
setHasImageShown(true);
setImageLink(detailsList.data.attachment_files[index])
setImageLink(attachmentsData[index])
setIsSkeleton(true)
}
};
@@ -85,9 +98,19 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
}, validationSchema,
onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
if (values.description != "") formData.append("expert_description", values.description);
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
if (values.description !== "") formData.append("expert_description", values.description);
if (values.confirm_img != null) {
const attachments = [
{
title: "فایل ضمیمه کارتابل بررسی وام های تبصره 18",
file: values.confirm_img
}
];
attachments.forEach((attachment, index) => {
formData.append(`attachment[${index}][title]`, attachment.title);
formData.append(`attachment[${index}][file]`, attachment.file);
});
}
requestServer(`${CONFIRM_NAVGAN_PROVINCE_MANAGER}/${rowId}`, 'post', {
data: formData,
notification: true
@@ -122,8 +145,8 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
};
const renderCustomAccordions = () => {
if (detailsList && detailsList.data && detailsList.data.attachment_files) {
return detailsList.data.attachment_files.map((file, index) => (
if (attachmentsData) {
return attachmentsData.map((file, index) => (
<CustomAccordion
key={index}
title={`${file.title}`}
@@ -131,7 +154,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
hasAccordionOpened={null}
handleAccordionChange={() => handleAccordionChange(index)}
accordionIndex={index}
downloadFile={file.attachment}
downloadFile={file.file}
/>
));
}

View File

@@ -30,8 +30,18 @@ const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
formData.append("expert_description", values.description);
if (values.reject_img != null) formData.append("attachment", values.reject_img);
if (values.reject_img != null) {
const attachments = [
{
title: "فایل ضمیمه کارتابل بررسی وام های تبصره 18",
file: values.reject_img
}
];
attachments.forEach((attachment, index) => {
formData.append(`attachment[${index}][title]`, attachment.title);
formData.append(`attachment[${index}][file]`, attachment.file);
});
}
requestServer(`${REJECT_NAVGAN_PROVINCE_MANAGER}/${rowId}`, 'post', {
data: formData,
}).then((response) => {

View File

@@ -28,7 +28,8 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
const [fileType, setfileType] = useState(null);
const [fileName, setfileName] = useState(null);
const [showAddIcon, setShowAddIcon] = useState(true);
const requestServer = useRequest({auth: true, notification: false})
const requestServer = useRequest({auth: true, notification: false});
const [attachmentsData, setAttachmentsData] = useState([]);
const [accordionStates, setAccordionStates] = useState([]);
const [hasAccordionOpened, setHasAccordionOpened] = useState([]);
const {update_notification} = useNotification();
@@ -42,10 +43,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
useEffect(() => {
requestServer(`${GET_TRANSPORTATION_ASSISTANCE_DETAILS}/${rowId}`, 'get')
.then((response) => {
const booleanData = Array.from({length: response.data.data.attachment_files.length}, () => false);
setAccordionStates(booleanData);
setHasAccordionOpened(booleanData);
setDetailsData(response.data)
const allAttachments = [];
response.data.data.histories.map((history) => {
history.attachments.map((attachment) => {
allAttachments.push(attachment);
});
});
setDetailsData(response.data);
setAttachmentsData(allAttachments);
})
.catch(() => {
}).finally(() => {
@@ -53,6 +58,14 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
});
}, []);
useEffect(() => {
if (attachmentsData.length !== 0) {
const booleanData = Array.from({length: attachmentsData.length}, () => false);
setAccordionStates(booleanData);
setHasAccordionOpened(booleanData);
}
}, [attachmentsData]);
const handleAccordionChange = (index) => {
const newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false);
setAccordionStates(newAccordionStates);
@@ -60,12 +73,12 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
if (!newAccordionStates[index]) {
handleSizeChangeClick('sm');
setHasImageShown(false);
setIsSkeleton(false)
setIsSkeleton(false);
} else {
handleSizeChangeClick('xl');
setHasImageShown(true);
setImageLink(detailsList.data.attachment_files[index])
setIsSkeleton(true)
setImageLink(attachmentsData[index]);
setIsSkeleton(true);
const newHasAccordionOpened = [...hasAccordionOpened];
newHasAccordionOpened[index] = true;
setHasAccordionOpened(newHasAccordionOpened);
@@ -93,9 +106,19 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
}, validationSchema,
onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
if (values.description != "") formData.append("expert_description", values.description);
if (values.confirm_img != null) formData.append("attachment", values.confirm_img);
if (values.description !== "") formData.append("expert_description", values.description);
if (values.confirm_img != null) {
const attachments = [
{
title: "فایل ضمیمه کارتابل بررسی وام های تبصره 18",
file: values.confirm_img
}
];
attachments.forEach((attachment, index) => {
formData.append(`attachment[${index}][title]`, attachment.title);
formData.append(`attachment[${index}][file]`, attachment.file);
});
}
requestServer(`${CONFIRM_TRANSPORTATION_ASSISTANCE}/${rowId}`, 'post', {
data: formData,
notification: true
@@ -133,8 +156,8 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
};
const renderCustomAccordions = () => {
if (detailsList && detailsList.data && detailsList.data.attachment_files) {
return detailsList.data.attachment_files.map((file, index) => (
if (attachmentsData) {
return attachmentsData.map((file, index) => (
<CustomAccordion
key={index}
title={`${file.title}`}
@@ -142,7 +165,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
hasAccordionOpened={hasAccordionOpened[index]}
handleAccordionChange={() => handleAccordionChange(index)}
accordionIndex={index}
downloadFile={file.attachment}
downloadFile={file.file}
/>
));
}
@@ -185,7 +208,9 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
multiline
rows={8}
label={<>
<span>{t("ConfirmDialog.description")}</span><small>{t("ConfirmDialog.optional")}</small></>}
<span>{t("ConfirmDialog.description")}</span>
<small>{t("ConfirmDialog.optional")}</small>
</>}
value={formik.values.description}
onChange={handleDescriptionChange}
fullWidth
@@ -213,9 +238,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog, handleSizeChangeCl
Boolean(formik.errors.confirm_img)
}
/>
<FormHelperText
error={Boolean(formik.errors.confirm_img)}
>
<FormHelperText error={Boolean(formik.errors.confirm_img)}>
{formik.touched.confirm_img && formik.errors.confirm_img}
</FormHelperText>
</Stack>

View File

@@ -30,8 +30,18 @@ const RejectContent = ({rowId, mutate, setOpenRejectDialog}) => {
onSubmit: (values, {setSubmitting}) => {
const formData = new FormData();
formData.append("expert_description", values.description);
if (values.reject_img != null) formData.append("attachment", values.reject_img);
if (values.reject_img != null) {
const attachments = [
{
title: "فایل ضمیمه کارتابل بررسی وام های تبصره 18",
file: values.reject_img
}
];
attachments.forEach((attachment, index) => {
formData.append(`attachment[${index}][title]`, attachment.title);
formData.append(`attachment[${index}][file]`, attachment.file);
});
}
requestServer(`${REJECT_TRANSPORTATION_ASSISTANCE}/${rowId}`, 'post', {
data: formData,
}).then((response) => {

View File

@@ -3,17 +3,28 @@ import {
AccordionDetails,
AccordionSummary,
Box,
Typography,
Grid, ButtonGroup, Button, CircularProgress
Button,
ButtonGroup,
CircularProgress,
Grid,
Typography
} from "@mui/material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import VerifiedIcon from '@mui/icons-material/Verified';
import Check from "@mui/icons-material/Check";
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
import {useState} from "react";
const CustomAccordion = ({ title, hasOpened, hasAccordionOpened, handleAccordionChange, accordionIndex , downloadFile}) => {
const CustomAccordion = ({
title,
hasOpened,
hasAccordionOpened,
handleAccordionChange,
accordionIndex,
downloadFile
}) => {
const [downloadStatus, setDownloadStatus] = useState('initial');
const handleDownloadClick = (setStatus , url) => {
const handleDownloadClick = (setStatus, url) => {
setStatus('downloading');
window.open(url, '_blank');
setTimeout(() => {
@@ -23,39 +34,40 @@ const CustomAccordion = ({ title, hasOpened, hasAccordionOpened, handleAccordion
}, 1200);
}, 1000);
};
return(
<Accordion elevation={0} expanded={hasOpened || false} onChange={() => handleAccordionChange(accordionIndex)} sx={{
mb: 2,
boxShadow: 1,
backgroundColor: "#f7f7f7"
}}>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Box sx={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
<Typography sx={{ fontWeight: 500, color: "primary.main" }}>{title}</Typography>
{hasAccordionOpened && <VerifiedIcon style={{ color: "green" }} />}
return (
<Accordion elevation={0} expanded={hasOpened || false} onChange={() => handleAccordionChange(accordionIndex)}
sx={{
mb: 2,
boxShadow: 1,
backgroundColor: "#f7f7f7"
}}>
<AccordionSummary expandIcon={<ExpandMoreIcon/>}>
<Box sx={{width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between"}}>
<Box sx={{display: "flex", alignItems: "center", gap: 0.5}}>
<Typography sx={{fontWeight: 500, color: "primary.main"}}>{title}</Typography>
{hasAccordionOpened && <VerifiedIcon style={{color: "green"}}/>}
</Box>
</Box>
</Box>
</AccordionSummary>
<AccordionDetails sx={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
<Grid container direction="column" alignItems="center">
<Grid item>
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button onClick={() => handleDownloadClick(setDownloadStatus , downloadFile)}>
{downloadStatus === 'completed' ? (
<Check sx={{ color: 'white' }} fontSize="small" />
) : downloadStatus === 'downloading' ? (
<CircularProgress sx={{ color: 'white' }} size={18} />
) : (
<FileDownloadOutlinedIcon sx={{ color: 'white' }} fontSize="small" />
)}
</Button>
</ButtonGroup>
</AccordionSummary>
<AccordionDetails sx={{display: "flex", justifyContent: "center", alignItems: "center"}}>
<Grid container direction="column" alignItems="center">
<Grid item>
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button onClick={() => handleDownloadClick(setDownloadStatus, downloadFile)}>
{downloadStatus === 'completed' ? (
<Check sx={{color: 'white'}} fontSize="small"/>
) : downloadStatus === 'downloading' ? (
<CircularProgress sx={{color: 'white'}} size={18}/>
) : (
<FileDownloadOutlinedIcon sx={{color: 'white'}} fontSize="small"/>
)}
</Button>
</ButtonGroup>
</Grid>
</Grid>
</Grid>
</AccordionDetails>
</Accordion>
);
</AccordionDetails>
</Accordion>
);
}
export default CustomAccordion;

View File

@@ -1,30 +1,46 @@
import {Box, Skeleton, Stack} from "@mui/material";
import {useEffect} from "react";
const ImageContent = (prop) => {
useEffect(() => {
const timer = setTimeout(() => {
prop.setIsSkeleton(false);
}, 1500);
return () => clearTimeout(timer);
}, [prop.isSkeleton]);
const isPDF = prop.imageLink && prop.imageLink.attachment && prop.imageLink.attachment.endsWith('.pdf');
const isPDF = prop.imageLink && prop.imageLink.file && prop.imageLink.file.endsWith('.pdf');
return (
<>
<Stack sx={{width :"100%"}}>
<Stack sx={{width: "100%"}}>
{prop.isSkeleton && (
<Box sx={{display:'flex' ,justifyContent:'center' , border: '1px solid #ccc' ,p:5 , height: '700px' , borderRadius: '8px' , width:'100%'}}>
<Skeleton variant="rectangular" animation="wave" sx={{ width: '100%', height: '100%' }} />
<Box sx={{
display: 'flex',
justifyContent: 'center',
border: '1px solid #ccc',
p: 5,
height: '700px',
borderRadius: '8px',
width: '100%'
}}>
<Skeleton variant="rectangular" animation="wave" sx={{width: '100%', height: '100%'}}/>
</Box>
)}
{isPDF ? (
<embed src={prop.imageLink.attachment} type="application/pdf" width="100%" height="700px" style={{ display: prop.isSkeleton ? 'none' : 'block' }}/>
<embed src={prop.imageLink.file} type="application/pdf" width="100%" height="700px"
style={{display: prop.isSkeleton ? 'none' : 'block'}}/>
) : (
prop.imageLink && prop.imageLink.attachment && (
<Box sx={{display: prop.isSkeleton ? 'none' : 'flex' ,justifyContent:'center' , border: '1px solid #ccc' , p:5 , height: '700px' , borderRadius: '8px',}}>
<Box component="img" src={prop.imageLink.attachment} alt="Image Preview" width="auto" height="auto" sx={{maxHeight: '700px' , maxWidth:'100%'}}></Box>
prop.imageLink && prop.imageLink.file && (
<Box sx={{
display: prop.isSkeleton ? 'none' : 'flex',
justifyContent: 'center',
border: '1px solid #ccc',
p: 5,
height: '700px',
borderRadius: '8px',
}}>
<Box component="img" src={prop.imageLink.file} alt="Image Preview" width="auto"
height="auto" sx={{maxHeight: '700px', maxWidth: '100%'}}></Box>
</Box>
)
)}