Merge pull request #3 from SlowRobot/react-pages-hierarchy

Updated Features for Pages Hierarchy Tree View

samples/react-pages-hierarchy/README.md

@@ -49,6 +49,7 @@ Solution|Author(s)
 --------|---------
 react-pages-hierarchy|[Bo George](https://github.com/bogeorge) ([@bo_george](https://twitter.com/bo_george))
 react-pages-hierarchy|[Nick Brown](https://github.com/techienickb) ([@techienickb](https://twitter.com/techienickb))
+react-pages-hierarchy|[SlowRobot](https://github.com/SlowRobot)
 
 ## Version history
 
@@ -57,6 +58,7 @@ Version|Date|Comments
 1.0|April 30, 2020|Initial release
 1.2|March 24, 2022|Updated to SPFX v1.14 and PnP packages to v3
 1.3|March 31, 2022|Added a Tree View
+1.4|July 29, 2022|Updated Tree View Functionality
 
 
 ## Minimal path to awesome

samples/react-pages-hierarchy/package-lock.json

@@ -3882,6 +3882,16 @@
         "msal": "1.4.13",
         "msalLegacy": "npm:msal@1.4.12",
         "tslib": "~1.10.0"
+      },
+      "dependencies": {
+        "msalLegacy": {
+          "version": "npm:msal@1.4.12",
+          "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
+          "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
+          "requires": {
+            "tslib": "^1.9.3"
+          }
+        }
       }
     },
     "@microsoft/sp-listview-extensibility": {
@@ -18736,14 +18746,6 @@
         "tslib": "^1.9.3"
       }
     },
-    "msalLegacy": {
-      "version": "npm:msal@1.4.12",
-      "resolved": "https://registry.npmjs.org/msal/-/msal-1.4.12.tgz",
-      "integrity": "sha512-gjupwQ6nvNL6mZkl5NIXyUmZhTiEMRu5giNdgHMh8l5EPOnV2Xj6nukY1NIxFacSTkEYUSDB47Pej9GxDYf+1w==",
-      "requires": {
-        "tslib": "^1.9.3"
-      }
-    },
     "multicast-dns": {
       "version": "6.2.3",
       "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",

samples/react-pages-hierarchy/src/apiHooks/usePageApi.ts

@@ -148,7 +148,7 @@ export function usePageApi(currentPageId: number, pageEditFinished: boolean, con
 
     const ancestorPages: IPage[] = buildPageAncestors(pages, currentPageId).reverse();
     const childrenPages: IPage[] = buildPageChildren(pages, currentPageId);
-    const treeLink: INavLink = buildHierarchy(pages);
+    const treeLink: INavLink = buildHierarchy(pages, currentPageId);
 
     // dispatch the GET_ALL action
     pagesDispatch({
@@ -253,16 +253,19 @@ export function usePageApi(currentPageId: number, pageEditFinished: boolean, con
     return childPages;
   }
 
-  function buildHierarchy(allPages: IPage[]): INavLink {
+  function buildHierarchy(allPages: IPage[], pageId: number): INavLink {
-    function recurse(id: number, l: number): INavLink {
+    function recurse(id: number, l: number, ancestorPages: IPage[]): INavLink {
       var item: IPage = allPages.filter(i => i.id === id)[0];
 
       var links: INavLink[] = [];
-      links = links.concat(allPages.filter(i => i.parentPageId === id).map(it => recurse(it.id, (l+1))));
+      links = links.concat(allPages.filter(i => i.parentPageId === id).map(it => recurse(it.id, l ? l + 1 : l, ancestorPages)));
 
-      return  { name: item.title, url: item.url, key: item.id.toString(), links: links, isExpanded: treeExpandTo >= l  };
+      return { name: item.title, url: item.url, key: item.id.toString(), links: links, isExpanded: treeExpandTo ? (treeExpandTo >= l) : (ancestorPages.find(f => f.id === id) ? true : false) };
     }
-    return recurse(treeTop, 1);
+
+    const ancestorPages: IPage[] = buildPageAncestors(allPages, pageId).reverse();
+
+    return recurse(treeTop ? treeTop : ancestorPages[0].id, treeExpandTo ? 1 : treeExpandTo, ancestorPages);
   }
 
   const addParentPageField = () => {

samples/react-pages-hierarchy/src/webparts/pagehierarchy/PageHierarchyWebPart.ts

@@ -79,10 +79,10 @@ export default class PageHierarchyWebPart extends BaseWebPart<IPageHierarchyWebP
   Really only used for workbench mode when we cannot get a page id for the current page.
   We'll allow user to test with a property and also using mock data allow them to navigate when on local host with a querystring
   */
-  private getDebugPageId() : number {
+  private getDebugPageId(): number {
     let queryParms = new UrlQueryParameterCollection(window.location.href);
     let debugPageId = this.properties.debugPageId;
-    if(queryParms.getValue(Parameters.DEBUGPAGEID)) { debugPageId = Number(queryParms.getValue(Parameters.DEBUGPAGEID)); }
+    if (queryParms.getValue(Parameters.DEBUGPAGEID)) { debugPageId = Number(queryParms.getValue(Parameters.DEBUGPAGEID)); }
 
     return debugPageId;
   }
@@ -162,7 +162,7 @@ export default class PageHierarchyWebPart extends BaseWebPart<IPageHierarchyWebP
           value: this.properties.treeFrom,
           label: strings.PropertyPane_Label_TreeFrom,
           description: strings.PropertyPane_Description_TreeFrom,
-          minValue: 1,
+          minValue: 0,
           disabled: false
         }),
         this.properties.pagesToDisplay === PagesToDisplay.Tree && PropertyFieldNumber('treeExpandTo', {
@@ -170,7 +170,7 @@ export default class PageHierarchyWebPart extends BaseWebPart<IPageHierarchyWebP
           value: this.properties.treeExpandTo,
           label: strings.PropertyPane_Label_TreeExpandTo,
           description: strings.PropertyPane_Description_TreeExpandTo,
-          minValue: 1,
+          minValue: 0,
           disabled: false
         })
       ]

samples/react-pages-hierarchy/src/webparts/pagehierarchy/loc/en-us.js

@@ -1,4 +1,4 @@
-define([], function() {
+define([], function () {
   return {
     "Configuration_Placeholder_IconText": "Configure Page Hierarchy Web Part",
     "Configuration_Placeholder_Description": "Please configure the web part.",
@@ -22,8 +22,8 @@ define([], function() {
     "PropertyPane_Label_DebugPageId": "Debug Page Id",
     "PropertyPane_Label_VersionInfo": "Version: ",
     "PropertyPane_Description_DebugPageId": "Provide a valid page list item id to see how the web part would render for it",
-    "PropertyPane_Description_TreeFrom": "Please provide the page id for the root of the tree to render",
+    "PropertyPane_Description_TreeFrom": "Please provide the page id for the root of the tree to render. Entering zero will start the tree at the current pages highest ancestor",
     "PropertyPane_Label_TreeExpandTo": "Default Expand the Tree To Level",
-    "PropertyPane_Description_TreeExpandTo": "By default expand the tree to this level"
+    "PropertyPane_Description_TreeExpandTo": "By default expand the tree to this level. Entering zero will inclusively expand the tree along the ancestor path of the current page"
   }
 });