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

LFFE-31 Merge branch 'feature/LFFE-31_review_clean_code_transportation' into 'develop'

Browse Source
This commit is contained in:
AmirHossein Mahmoodi
2023-12-02 08:02:06 +00:00
parent 5bde026941 a0ae62e2cb
commit 89a4a7c657
4 changed files with 34 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx
View File

@@ -28,58 +28,44 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl
const [accordionStates, setAccordionStates] = useState([]); const [accordionStates, setAccordionStates] = useState([]);
const [hasAccordionOpened, setHasAccordionOpened] = useState([]); const [hasAccordionOpened, setHasAccordionOpened] = useState([]);
const {update_notification} = useNotification(); const {update_notification} = useNotification();
const [hasImageShown, sethasImageShown] = useState(false); const [hasImageShown, setHasImageShown] = useState(false);
const [imageLink, setimageLink] = useState(null); const [imageLink, setImageLink] = useState(null);
const [detailsList, setDetailsData] = useState(null); const [detailsList, setDetailsData] = useState(null);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [isSkeleton, setIsSkeleton] = useState(false); const [isSkeleton, setIsSkeleton] = useState(false);
const [isButtonDisabled, setIsButtonDisabled] = useState(true);
useEffect(() => { useEffect(() => {
requestServer(`${GET_TRANSPORTATION_ASSISTANCE_DETAILS}/${rowId}`, 'get') requestServer(`${GET_TRANSPORTATION_ASSISTANCE_DETAILS}/${rowId}`, 'get')
.then((response) => { .then((response) => {
const booleanArray = Array.from({ length: response.data.data.attachment_files.length }, () => false); const booleanData = Array.from({ length: response.data.data.attachment_files.length }, () => false);
setAccordionStates(booleanArray); setAccordionStates(booleanData);
setHasAccordionOpened(booleanArray); setHasAccordionOpened(booleanData);
setDetailsData(response.data) setDetailsData(response.data)
}) })
.catch((error) => { .catch(() => {
}).finally(() => { }).finally(() => {
setLoading(false); setLoading(false);
}); });
}, []); }, []);
useEffect(() => {
if (detailsList && detailsList.data && detailsList.data.attachment_files && detailsList.data.attachment_files.length !== 0) {
setIsButtonDisabled(true);
} else {
setIsButtonDisabled(false);
}
}, [detailsList]);
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);
if (newAccordionStates[index]===false) if (!newAccordionStates[index])
{ {
handleSizeChangeClick(index , false); handleSizeChangeClick('sm');
sethasImageShown(false); setHasImageShown(false);
setIsSkeleton(false) setIsSkeleton(false)
} }
else { else {
handleSizeChangeClick(index , true); handleSizeChangeClick('xl');
sethasImageShown(true); setHasImageShown(true);
setimageLink(detailsList.data.attachment_files[index]) setImageLink(detailsList.data.attachment_files[index])
setIsSkeleton(true) setIsSkeleton(true)
const newHasAccordionOpened = [...hasAccordionOpened]; const newHasAccordionOpened = [...hasAccordionOpened];
newHasAccordionOpened[index] = true; newHasAccordionOpened[index] = true;
setHasAccordionOpened(newHasAccordionOpened); setHasAccordionOpened(newHasAccordionOpened);
if (newHasAccordionOpened.every(opened => opened === true)) {
setIsButtonDisabled(false)
}
} }
}; };
@@ -92,7 +78,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl
}) })
.test('fileType', `${t("TransportationAssistance.upload_file_format")}`, (value) => { .test('fileType', `${t("TransportationAssistance.upload_file_format")}`, (value) => {
if (!value) return true if (!value) return true
const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf']; // Define your allowed file types const allowedTypes = ['image/jpg', 'image/jpeg', 'image/png', 'application/pdf'];
return allowedTypes.includes(value.type); return allowedTypes.includes(value.type);
}) })
}) })
@@ -149,7 +135,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl
hasAccordionOpened={hasAccordionOpened[index]} hasAccordionOpened={hasAccordionOpened[index]}
handleAccordionChange={() => handleAccordionChange(index)} handleAccordionChange={() => handleAccordionChange(index)}
accordionIndex={index} accordionIndex={index}
handleSizeChange={() => handleSizeChange(index)} downloadFile={file.attachment}
/> />
)); ));
} }
@@ -237,7 +223,7 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeCl
</Button> </Button>
<Button onClick={formik.handleSubmit} variant="contained" color="primary" <Button onClick={formik.handleSubmit} variant="contained" color="primary"
disabled={formik.isSubmitting || !formik.isValid || disabled={formik.isSubmitting || !formik.isValid ||
isButtonDisabled } hasAccordionOpened.some((opened) => !opened) }
> >
{t("ConfirmDialog.button-confirm")} {t("ConfirmDialog.button-confirm")}
</Button> </Button>

21
src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx
View File

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

10
src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx
View File

@@ -14,14 +14,8 @@ const Confirm = ({rowId, mutate}) => {
} }
}, [openConfirmDialog]); }, [openConfirmDialog]);
const handleSizeChangeClick = (num , state) => { const handleSizeChangeClick = (size) => {
if (state===true){ setDialogSize(size);
setDialogSize('xl');
}
else {
setDialogSize('sm');
}
}; };
return ( return (

23
src/core/components/CustomAccordion.jsx
View File

@@ -10,29 +10,18 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import VerifiedIcon from '@mui/icons-material/Verified'; import VerifiedIcon from '@mui/icons-material/Verified';
import Check from "@mui/icons-material/Check"; import Check from "@mui/icons-material/Check";
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined"; import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
import VisibilityRoundedIcon from "@mui/icons-material/VisibilityRounded";
import {useTranslations} from "next-intl";
import {useState} from "react"; import {useState} from "react";
const CustomAccordion = ({ title, hasOpened, hasAccordionOpened, handleAccordionChange, accordionIndex , downloadFile}) => {
const CustomAccordion = ({ title,
hasOpened,
hasAccordionOpened,
handleAccordionChange,
accordionIndex,
handleSizeChange }) => {
const t = useTranslations();
const [downloadStatus, setDownloadStatus] = useState('initial'); const [downloadStatus, setDownloadStatus] = useState('initial');
const handleDownloadClick = (setStatus) => { const handleDownloadClick = (setStatus , url) => {
console.log(setStatus)
setStatus('downloading'); setStatus('downloading');
window.open(url, '_blank');
setTimeout(() => { setTimeout(() => {
setStatus('completed'); setStatus('completed');
setTimeout(() => { setTimeout(() => {
setStatus('initial'); setStatus('initial');
}, 2500); }, 1200);
}, 2000); }, 1000);
// Perform the actual download logic here
}; };
return( return(
<Accordion elevation={0} expanded={hasOpened || false} onChange={() => handleAccordionChange(accordionIndex)} sx={{ <Accordion elevation={0} expanded={hasOpened || false} onChange={() => handleAccordionChange(accordionIndex)} sx={{
@@ -52,7 +41,7 @@ const CustomAccordion = ({ title,
<Grid container direction="column" alignItems="center"> <Grid container direction="column" alignItems="center">
<Grid item> <Grid item>
<ButtonGroup variant="contained" aria-label="outlined primary button group"> <ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button onClick={() => handleDownloadClick(setDownloadStatus)}> <Button onClick={() => handleDownloadClick(setDownloadStatus , downloadFile)}>
{downloadStatus === 'completed' ? ( {downloadStatus === 'completed' ? (
<Check sx={{ color: 'white' }} fontSize="small" /> <Check sx={{ color: 'white' }} fontSize="small" />
) : downloadStatus === 'downloading' ? ( ) : downloadStatus === 'downloading' ? (