Merge pull request #623 from bcgov/dev-RQ-4432

Expand all/collapse all #4432
bcgov · Nov 21, 2023 · 1636dbc · 1636dbc
2 parents 34fa5c9 + 3a45d29
commit 1636dbc
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/web/src/components/FOI/App.scss b/web/src/components/FOI/App.scss
@@ -198,4 +198,8 @@
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
+}
+
+.expandallicon {
+  color: grey !important;
 }
diff --git a/web/src/components/FOI/Home/DocumentSelector.tsx b/web/src/components/FOI/Home/DocumentSelector.tsx
@@ -12,11 +12,14 @@ import Paper from "@mui/material/Paper";
 import Grid from "@mui/material/Grid";
 import Stack from "@mui/material/Stack";
 import Tooltip from '@mui/material/Tooltip';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import { fetchPageFlagsMasterData, fetchPageFlag } from '../../../apiManager/services/docReviewerService';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
     faCircleHalfStroke, faCircle, faCircleQuestion, faSpinner,
-    faCircleStop, faCircleXmark, faBookmark, faAngleDown, faCircleExclamation
+    faCircleStop, faCircleXmark, faBookmark, faAngleDown, faCircleExclamation,
+    faAnglesDown, faAnglesUp
 } from '@fortawesome/free-solid-svg-icons';
 import { faCircle as filledCircle } from '@fortawesome/free-regular-svg-icons';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
@@ -66,6 +69,7 @@ const DocumentSelector = ({
     const [consulteeFilter, setConsulteeFilter] = useState<any>([]);
     const [selectAllConsultee, setSelectAllConsultee] = useState(false);
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const [expanded, setExpanded] = useState<string[]>([]);
 
     const StyledTreeItem = styled(TreeItem)(() => ({
         [`& .${treeItemClasses.label}`]: {
@@ -244,6 +248,15 @@ const DocumentSelector = ({
     let arr: any[] = [];
     const divisions = [...new Map(files.reduce((acc: any[], file: any) => [...acc, ...new Map(file.divisions.map((division: any) => [division.divisionid, division]))], arr)).values()]
 
+    let expandall: any[] = [];
+    divisions.forEach((division:any) => {
+        expandall.push(`{"division": ${division.divisionid}}`);
+        files.filter((file: any) => file.divisions.map((d: any) => d.divisionid).includes(division.divisionid)).map((file: any, i: number) => {
+            expandall.push(`{"division": ${division.divisionid}, "docid": ${file.documentid}}`);
+            expandall.push(`{"docid": ${file.documentid}}`);
+        })
+    });
+
     const onFilterChange = (filterValue: string) => {
         setFilesForDisplay(files.filter((file: any) => file.filename.includes(filterValue)))
         setFilteredFiles(files.filter((file: any) => file.filename.includes(filterValue)))
@@ -650,6 +663,16 @@ const DocumentSelector = ({
         )
     }
 
+    const handleExpandClick = () => {
+        setExpanded((oldExpanded:any) =>
+            oldExpanded.length === 0 ? expandall : [],
+        );
+    };
+
+    const handleToggle = (event: React.SyntheticEvent, nodeIds: string[]) => {
+        setExpanded(nodeIds);
+    };
+
     return (
         <>
             <div className='leftPanel'>
@@ -816,12 +839,31 @@ const DocumentSelector = ({
                         </div>
                     </div>
                     <hr className='hrStyle' />
+                    <Box sx={{ mb: 1 }}>
+                        <Tooltip
+                            sx={{
+                                backgroundColor: 'white',
+                                color: 'rgba(0, 0, 0, 0.87)',
+                                fontSize: 11
+                            }}
+                            title={expanded.length === 0 ? "Expand All" : "Collapse All"}
+                            placement="right"
+                            arrow
+                            disableHoverListener={disableHover}
+                        >
+                            <Button onClick={handleExpandClick} sx={{minWidth:"35px"}}>
+                            {expanded.length === 0 ? <FontAwesomeIcon icon={faAnglesDown} className='expandallicon' /> : <FontAwesomeIcon icon={faAnglesUp} className='expandallicon' />}
+                            </Button>
+                        </Tooltip>
+                    </Box>
                     <TreeView
                         aria-label="file system navigator"
                         defaultCollapseIcon={<ExpandMoreIcon />}
                         defaultExpandIcon={<ChevronRightIcon />}
+                        expanded={expanded}
                         multiSelect
                         selected={selected}
+                        onNodeToggle={handleToggle}
                         onNodeSelect={handleSelect}
                         sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
                     >