loan/expert-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complete show files by accordian

Browse Source
This commit is contained in:
Mohammad Jalali
2023-12-27 11:48:39 +03:30
parent 930e1c397f
commit 3db1ee674e
8 changed files with 195 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
src/core/components/CustomAccordion.jsx
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;

36
src/core/components/ImageContent.jsx
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>
)
)}