Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Expand all/collapse all #4432 #623

Merged
merged 3 commits into from
Nov 21, 2023
Merged

Expand all/collapse all #4432 #623

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
316e16d
remove debugging code
richard-aot Nov 20, 2023
30d229c
Expand all and collapse all button
richard-aot Nov 21, 2023
3a45d29
Merge branch 'dev' of github.com:bcgov/foi-docreviewer into dev-RQ-4432
richard-aot Nov 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions web/src/components/FOI/App.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,4 +198,8 @@
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}

.expandallicon {
color: grey !important;
}
44 changes: 43 additions & 1 deletion web/src/components/FOI/Home/DocumentSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}`]: {
Expand Down Expand Up @@ -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)))
Expand Down Expand Up @@ -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'>
Expand Down Expand Up @@ -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' }}
>
Expand Down