From 46c1a2eb2b88c3b240950d0bceffe2a0369c7c8b Mon Sep 17 00:00:00 2001 From: Yasiu1376 Date: Wed, 29 Nov 2023 17:00:16 +0330 Subject: [PATCH] LFFE-21 transportation assistance --- .../Form/ConfirmForm/ConfirmContent.jsx | 214 ++++++++++++++---- .../Form/ConfirmForm/ImageContent.jsx | 35 +++ .../Form/ConfirmForm/index.jsx | 28 ++- src/core/components/CustomAccordion.jsx | 72 ++++++ src/core/components/DownloadSection.jsx | 38 ++++ src/core/data/apiRoutes.js | 2 + 6 files changed, 334 insertions(+), 55 deletions(-) create mode 100644 src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx create mode 100644 src/core/components/CustomAccordion.jsx create mode 100644 src/core/components/DownloadSection.jsx diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx index 0dcec2a..fa9f438 100644 --- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx +++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ConfirmContent.jsx @@ -1,21 +1,88 @@ import UploadSystem from "@/core/components/UploadSystem"; import useNotification from "@/lib/app/hooks/useNotification"; import useRequest from "@/lib/app/hooks/useRequest"; -import {Button, DialogActions, DialogContent, FormHelperText, Stack, TextField, Typography} from "@mui/material" +import { + Box, + Button, + DialogActions, + DialogContent, + FormHelperText, Grid, LinearProgress, + Stack, + TextField, + Typography +} from "@mui/material" import {useFormik} from "formik"; import {useTranslations} from "next-intl"; -import {CONFIRM_TRANSPORTATION_ASSISTANCE} from "@/core/data/apiRoutes"; -import {useState} from "react"; +import {CONFIRM_TRANSPORTATION_ASSISTANCE, GET_TRANSPORTATION_ASSISTANCE_DETAILS} from "@/core/data/apiRoutes"; +import {useEffect, useState} from "react"; import * as Yup from "yup"; - -const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { +import CustomAccordion from "@/core/components/CustomAccordion"; +import ImageContent from "@/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent"; +const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog ,handleSizeChangeClick}) => { const t = useTranslations(); const [selectedImage, setSelectedImage] = useState(""); const [fileType, setfileType] = useState(null); const [fileName, setfileName] = useState(null); const [showAddIcon, setShowAddIcon] = useState(true); - const requestServer = useRequest({auth: true}) - const {update_notification} = useNotification() + const requestServer = useRequest({auth: true , notification: false}) + const [accordionStates, setAccordionStates] = useState([]); + const [hasAccordionOpened, setHasAccordionOpened] = useState([]); + const {update_notification} = useNotification(); + const [hasImageShown, sethasImageShown] = useState(false); + const [imageLink, setimageLink] = useState(null); + const [detailsList, setDetailsData] = useState(null); + const [loading, setLoading] = useState(true); + const [isSkeleton, setIsSkeleton] = useState(false); + const [isButtonDisabled, setIsButtonDisabled] = useState(true); + + useEffect(() => { + requestServer(`${GET_TRANSPORTATION_ASSISTANCE_DETAILS}/${rowId}`, 'get') + .then((response) => { + const booleanArray = Array.from({ length: response.data.data.attachment_files.length }, () => false); + setAccordionStates(booleanArray); + setHasAccordionOpened(booleanArray); + setDetailsData(response.data) + }) + .catch((error) => { + + }).finally(() => { + 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 newAccordionStates = accordionStates.map((state, i) => i === index ? !state : false); + setAccordionStates(newAccordionStates); + + if (newAccordionStates[index]===false) + { + handleSizeChangeClick(index , false); + sethasImageShown(false); + setIsSkeleton(false) + } + else { + handleSizeChangeClick(index , true); + sethasImageShown(true); + setimageLink(detailsList.data.attachment_files[index]) + setIsSkeleton(true) + const newHasAccordionOpened = [...hasAccordionOpened]; + newHasAccordionOpened[index] = true; + setHasAccordionOpened(newHasAccordionOpened); + + if (newHasAccordionOpened.every(opened => opened === true)) { + setIsButtonDisabled(false) + } + } + }; + const validationSchema = Yup.object().shape({ confirm_img: Yup.mixed().notRequired(t("ConfirmDialog.approved_amount_error")) @@ -72,51 +139,96 @@ const ConfirmContent = ({rowId, mutate, setOpenConfirmDialog}) => { } }; + const renderCustomAccordions = () => { + if (detailsList && detailsList.data && detailsList.data.attachment_files) { + return detailsList.data.attachment_files.map((file, index) => ( + handleAccordionChange(index)} + accordionIndex={index} + handleSizeChange={() => handleSizeChange(index)} + /> + )); + } + return null; + }; + return ( <> - - - - {t("ConfirmDialog.description")}{t("ConfirmDialog.optional")}} - value={formik.values.description} - onChange={handleDescriptionChange} - fullWidth - variant="outlined" - sx={{mt: 1}} - /> - - - {t("UploadSystem.upload_file")}{t("UploadSystem.optional")} - formik.handleBlur("confirm_img")} - error={ - formik.touched.confirm_img && - Boolean(formik.errors.confirm_img) - } - /> - - {formik.touched.confirm_img && formik.errors.confirm_img} - - - + + + + {t("ConfirmDialog.approved_amount")} {t("sidebar.machinery-expert")} + + {isNaN((detailsList?.data?.proposed_amount) / 10) + ? "" + : ((detailsList?.data?.proposed_amount) / 10).toLocaleString()}{" "} + {t("ConfirmDialog.unit")} + + + + {t("ConfirmDialog.approved_amount")} {t("secondary.passenger-boss")} + + {isNaN((detailsList?.data?.approved_amount) / 10) + ? "" + : ((detailsList?.data?.approved_amount) / 10).toLocaleString()}{" "} + {t("ConfirmDialog.unit")} + + + {loading ? : renderCustomAccordions()} + + + + {t("ConfirmDialog.description")}{t("ConfirmDialog.optional")}} + value={formik.values.description} + onChange={handleDescriptionChange} + fullWidth + variant="outlined" + sx={{mt: 1}} + /> + + + {t("UploadSystem.upload_file")}{t("UploadSystem.optional")} + formik.handleBlur("confirm_img")} + error={ + formik.touched.confirm_img && + Boolean(formik.errors.confirm_img) + } + /> + + {formik.touched.confirm_img && formik.errors.confirm_img} + + + + + + + + + + diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx new file mode 100644 index 0000000..9d3afa9 --- /dev/null +++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/ImageContent.jsx @@ -0,0 +1,35 @@ +import {Box, Skeleton, Stack} from "@mui/material"; +import {useEffect} from "react"; +const ImageContent = (link) => { + useEffect(() => { + const timer = setTimeout(() => { + link.setIsSkeleton(false); + }, 1000); + + return () => clearTimeout(timer); + }, [link.isSkeleton]); + + const isPDF = link && link.imageLink && link.imageLink.attachment && link.imageLink.attachment.endsWith('.pdf'); + return ( + <> + + {link.isSkeleton && ( + + + + )} + {isPDF ? ( + + ) : ( + link && link.imageLink && link.imageLink.attachment && ( + + + + ) + )} + + + ) + +} +export default ImageContent; \ No newline at end of file diff --git a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx index 2ef7d25..b33f30d 100644 --- a/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx +++ b/src/components/dashboard/transportation-assistance/Form/ConfirmForm/index.jsx @@ -1,27 +1,45 @@ -import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"; +import {Dialog, DialogTitle, IconButton, Tooltip} from "@mui/material"; import {useTranslations} from "next-intl"; -import {useState} from "react"; +import {useState , useEffect} from "react"; import ConfirmContent from "./ConfirmContent"; import CallMadeIcon from '@mui/icons-material/CallMade'; const Confirm = ({rowId, mutate}) => { const t = useTranslations(); const [openConfirmDialog, setOpenConfirmDialog] = useState(false); + const [dialogSize, setDialogSize] = useState('sm'); + + useEffect(() => { + if (!openConfirmDialog) { + setDialogSize('sm'); + } + }, [openConfirmDialog]); + + const handleSizeChangeClick = (num , state) => { + if (state===true){ + setDialogSize('xl'); + + } + else { + setDialogSize('sm'); + } + }; + return ( <> { - setOpenConfirmDialog(true) + setOpenConfirmDialog(true); }} > + PaperProps={{sx: {transition: 'all .3s', boxShadow: 'rgba(60, 64, 67, 0.3) 0px 1px 16px 0px, rgba(60, 64, 67, 0.15) 0px 1px 10px 0px'}}} maxWidth={dialogSize}> {t("TransportationAssistance.confirm")} - + ) diff --git a/src/core/components/CustomAccordion.jsx b/src/core/components/CustomAccordion.jsx new file mode 100644 index 0000000..eb2efcc --- /dev/null +++ b/src/core/components/CustomAccordion.jsx @@ -0,0 +1,72 @@ +import { + Accordion, + AccordionDetails, + AccordionSummary, + Box, + Typography, + Grid, ButtonGroup, Button, CircularProgress +} 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 VisibilityRoundedIcon from "@mui/icons-material/VisibilityRounded"; +import {useTranslations} from "next-intl"; +import {useState} from "react"; + +const CustomAccordion = ({ title, + hasOpened, + hasAccordionOpened, + handleAccordionChange, + accordionIndex, + handleSizeChange }) => { + const t = useTranslations(); + const [downloadStatus, setDownloadStatus] = useState('initial'); + const handleDownloadClick = (setStatus) => { + + console.log(setStatus) + setStatus('downloading'); + setTimeout(() => { + setStatus('completed'); + setTimeout(() => { + setStatus('initial'); + }, 2500); + }, 2000); + // Perform the actual download logic here + }; + return( + handleAccordionChange(accordionIndex)} sx={{ + mb: 2, + boxShadow: 1, + backgroundColor: "#f7f7f7" + }}> + }> + + + {title} + {hasAccordionOpened && } + + + + + + + + + + + + + +); +} + +export default CustomAccordion; diff --git a/src/core/components/DownloadSection.jsx b/src/core/components/DownloadSection.jsx new file mode 100644 index 0000000..fc20d9c --- /dev/null +++ b/src/core/components/DownloadSection.jsx @@ -0,0 +1,38 @@ +import FileDownloadOutlinedIcon from '@mui/icons-material/FileDownloadOutlined'; +import Check from '@mui/icons-material/Check'; +import {CircularProgress} from "@mui/material" +const DownloadSection = ({ downloadStatus, onDownloadClick }) => { + return ( +
+ {downloadStatus === 'completed' ? ( + <> + + + ) : downloadStatus === 'downloading' ? ( + + ) : ( + <> + + + )} +
+ ); +}; + +export default DownloadSection; diff --git a/src/core/data/apiRoutes.js b/src/core/data/apiRoutes.js index dba065e..06d8ac9 100644 --- a/src/core/data/apiRoutes.js +++ b/src/core/data/apiRoutes.js @@ -38,6 +38,8 @@ export const REJECT_PASSENGER_BOSS = export const GET_TRANSPORTATION_ASSISTANCE = BASE_URL + "/dashboard/transportation_assistant/show"; +export const GET_TRANSPORTATION_ASSISTANCE_DETAILS = + BASE_URL + "/dashboard/transportation_assistant"; export const CONFIRM_TRANSPORTATION_ASSISTANCE = BASE_URL + "/dashboard/transportation_assistant/confirm";