Skip to content

Commit

Permalink
Merge pull request #1045 from bcgov/dev
Browse files Browse the repository at this point in the history 
#FOIMOD-3269 Scroll position Observation#8 fix
  • Loading branch information
@abin-aot
abin-aot authored Jul 3, 2024
2 parents 8b625c0 + 3bff414 commit 9873b3a
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 71 deletions.
105 changes: 35 additions & 70 deletions web/src/components/FOI/Home/CustomTreeView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ const CustomTreeView = React.memo(React.forwardRef(({
}));

const apiRef = useTreeViewApiRef();


const [expandedItems, setExpandedItems] = useState<string[]>([]);
const [selectedPages, setSelectedPages] = useState<any>([]);
Expand All @@ -60,14 +61,40 @@ const CustomTreeView = React.memo(React.forwardRef(({

useImperativeHandle(ref, () => ({
async scrollToPage(event: any, newExpandedItems: string[], pageId: string) {

setExpandedItems([...new Set(expandedItems.concat(newExpandedItems))]);
await new Promise(resolve => setTimeout(resolve, 400)); // wait for expand animation to finish
apiRef.current?.focusItem(event, pageId)
apiRef.current?.focusItem(event, pageId)
setSelected([])
setSelectedPages([])
},
scrollLeftPanelPosition(event: any)
{
let _lastselected = localStorage.getItem("lastselected")

if(_lastselected)
{
let _docid = JSON.parse(_lastselected)?.docid
let docidstring = ''
if(_lastselected.indexOf('division')>-1)
{
let _divisionid = JSON.parse(_lastselected)?.division
docidstring = `{"division": ${_divisionid}, "docid": ${_docid}}`
}
else
{
docidstring = `{"docid": ${_docid}}`
}

//TODO: Future research ABIN: apiRef.current?.focusItem(event, '{"docid": 192, "page": 1, "flagid": [1], "title": "Partial Disclosure"}')
apiRef.current?.focusItem(event, docidstring)
localStorage.removeItem("lastselected")
}
}
}), [apiRef, expandedItems]);



const getAllItemsWithChildrenItemIds = () => {
const itemIds: any[] = [];
const registerItemId = (item: any) => {
Expand All @@ -80,37 +107,11 @@ const CustomTreeView = React.memo(React.forwardRef(({
return itemIds;
};

// const getAllItemsWithChildrenItemIds = () => {
// const itemIds: any = [];
// const registerItemId = (item: any) => {
// if (item.children?.length) {
// itemIds.push(item.id);
// item.children.forEach(registerItemId);
// }
// };

// items.forEach(registerItemId);

// return itemIds;
// };

const handleExpandClick = () => {
setExpandedItems((oldExpanded: any) =>
oldExpanded.length === 0 ? getAllItemsWithChildrenItemIds() : []
);
// setExpanded((oldExpanded:any) => {
// let result: any = [];
// if (oldExpanded.length === 0 ) {
// if (organizeBy == "lastmodified" ) {
// result = expandall;
// }
// else {
// result = expandallorganizebydivision;
// }
// }
// return result;
// }
// );

};

const handleExpandedItemsChange = (event: any,itemIds: any) => {
Expand Down Expand Up @@ -144,6 +145,8 @@ const CustomTreeView = React.memo(React.forwardRef(({
if (selectedPages.length > PAGE_SELECT_LIMIT) {
setWarningModalOpen(true);
} else {

localStorage.setItem("lastselected",nodeIds[nodeIds.length-1])
setSelected(selectedPages);
const selectedPagesInfo = selectedPages.map(nodeId => {
const { docid, page } = JSON.parse(nodeId);
Expand All @@ -170,7 +173,7 @@ const CustomTreeView = React.memo(React.forwardRef(({
}

const CustomTreeItem = React.forwardRef((props: any, ref: any) => {
let itemid = JSON.parse(props.itemId);
let itemid = JSON.parse(props.itemId);
return (
<StyledTreeItem
ref={ref}
Expand Down Expand Up @@ -221,48 +224,9 @@ const CustomTreeView = React.memo(React.forwardRef(({
setDisableHover(true);
}



return (
// <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' }}
// >
// {filesForDisplay.length <= 0 && filterBookmark ?
// <div style={{ textAlign: 'center' }}>No page has been book marked.</div>
// :
// filesForDisplay?.map((file: any, index: number) => {
// return (
// // <Tooltip
// // sx={{
// // backgroundColor: 'white',
// // color: 'rgba(0, 0, 0, 0.87)',
// // // boxShadow: theme.shadows[1],
// // fontSize: 11
// // }}
// // title={<>
// // Last Modified Date: {new Date(file.attributes.lastmodified).toLocaleString('en-US', { timeZone: 'America/Vancouver' })}
// // {file.attachmentof && <><br></br> Attachment of: {file.attachmentof}</>}
// // </>}
// // placement="bottom-end"
// // arrow
// // key={file?.documentid}
// // disableHoverListener={disableHover}
// // >
// <TreeItem nodeId={`{"docid": ${file.documentid}}`} label={file.filename} key={file?.documentid}>
// {displayFilePages(file)}
// </TreeItem>
// // </Tooltip>
// )
// })
// }
// </TreeView>
return (
<>
{openContextPopup === true &&
<ContextMenu
Expand Down Expand Up @@ -308,6 +272,7 @@ const CustomTreeView = React.memo(React.forwardRef(({
onExpandedItemsChange={handleExpandedItemsChange}
multiSelect
apiRef={apiRef}

slots={{item: CustomTreeItem}}
// slotProps={{item: {ContentProps: {id: 'test'}}}}
sx={{ flexGrow: 1, maxWidth: 400, overflowY: 'auto' }}
Expand Down
8 changes: 7 additions & 1 deletion web/src/components/FOI/Home/DocumentSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,14 @@ const DocumentSelector = React.memo(
"}",
];
}

treeRef?.current?.scrollToPage(event, newExpandedItems, pageId);

},
scrollLeftPanelPosition(event: any)
{
treeRef?.current?.scrollLeftPanelPosition(event)
}
}),
[treeRef, pageMappedDocs, filesForDisplay, organizeBy]
);
Expand Down Expand Up @@ -660,7 +666,7 @@ const DocumentSelector = React.memo(
if (filesForDisplay.length > 0) {
return divisions.map((division: any) => {
return {
id: `{"division": ${division.divisionid}}`,
id:`{"division": ${division.divisionid}}`,
label: division.name,
children: filesForDisplay
.filter((file: any) =>
Expand Down
4 changes: 4 additions & 0 deletions web/src/components/FOI/Home/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,11 +135,15 @@ function Home() {
);
}, []);



const getCurrentDocument = (doclist) => {
return doclist.find(item => item.file.pagecount > 0);
}

const syncPageFlagsOnAction = (updatedFlags) => {

selectorRef?.current?.scrollLeftPanelPosition("")
setPageFlags(updatedFlags);
};

Expand Down

0 comments on commit 9873b3a

Please sign in to comment.