Add ability to fetch menu items for a virtual root

src/app/app.component.html

@@ -19,9 +19,12 @@
               <ion-button fill="outline" color="light" (click)="onDeleteClick()" [disabled]="!deleteTarget">
                 <ion-icon color="danger" name="trash"></ion-icon>
               </ion-button>
-              <ion-button fill="outline" color="light" (click)="onNodeMenuClick($event)" [disabled]="!menuTarget">
+              <ion-button fill="outline" color="light" (click)="onNodeMenuClick($event)" [disabled]="!menuTarget || !menuTarget.data || !menuTarget.data.id">
                 <i class="fa fa-ellipsis-v" style="color: darkgrey"></i>
               </ion-button>
+              <ion-button fill="outline" color="light" (click)="onVirtualRootClear($event)" *ngIf="virtualRootPageId" title="Show entire tree">
+                <i class="fa fa-search-minus" style="color: darkgrey"></i>
+              </ion-button>
             </ion-buttons>
           </ion-list-header>
         </ion-list>

src/app/app.component.ts

@@ -40,9 +40,11 @@ export class AppComponent implements OnInit {
   public lastClickEvent: Array<any> = [];
   public nodes = [];
   public currentPageId: string;
+  public virtualRootPageId?: string;
   public options = {
     isExpandedField: 'expanded',
     animateExpand: true,
+    scrollOnActivate: false,
     actionMapping: {
       mouse: {
         dblClick: (tree, node, $event) => {
@@ -208,6 +210,7 @@ export class AppComponent implements OnInit {
     }
 
     const options = [
+      {name: 'Make Virtual Root', icon: 'fa fa-search-plus', value: 'virtual_root'},
       {name: 'Export to HTML', icon: 'fa fa-file-export', value: 'export_html'},
     ];
 
@@ -245,12 +248,27 @@ export class AppComponent implements OnInit {
         });
       } else if ( result.data === 'export_html' ) {
         this.exportTargetAsHTML();
+      } else if ( result.data === 'virtual_root' ) {
+        this.setVirtualRoot();
       }
     });
 
     await popover.present();
   }
 
+  async setVirtualRoot() {
+    if ( this.menuTarget && this.menuTarget.data?.type === 'page' ) {
+      debug('virtual root menu target', this.menuTarget);
+      this.virtualRootPageId = this.menuTarget.data.id;
+      this.reloadMenuItems().subscribe();
+    }
+  }
+
+  onVirtualRootClear(event) {
+    delete this.virtualRootPageId;
+    this.reloadMenuItems().subscribe();
+  }
+
   async exportTargetAsHTML() {
     const exportRecord: any = await new Promise((res, rej) => {
       const reqData = {
@@ -440,7 +458,7 @@ export class AppComponent implements OnInit {
 
   reloadMenuItems() {
     return new Observable(sub => {
-      this.api.getMenuItems().then(nodes => {
+      this.api.getMenuItems(false, this.virtualRootPageId).then(nodes => {
         this.nodes = nodes;
         sub.next();
         sub.complete();

src/app/service/api.service.ts

@@ -530,7 +530,7 @@ export class ApiService {
     });
   }
 
-  public getMenuItems(pageOnly: boolean = false): Promise<any[]> {
+  public getMenuItems(pageOnly: boolean = false, virtualRootPageId?: string): Promise<any[]> {
     return new Promise(async (res, rej) => {
       await this.db.createSchemata();
 
@@ -541,9 +541,18 @@ export class ApiService {
         return res(nodes);
       }
 
+      let loadUrl = '/menu/items';
+      if ( virtualRootPageId ) {
+        loadUrl += `?virtualRootPageId=${virtualRootPageId}`;
+      }
+
+      if ( pageOnly ) {
+        loadUrl += (virtualRootPageId ? '&' : '?') + 'type=page';
+      }
+
       // Download the latest menu items
       const tree: any[] = await new Promise(res2 => {
-        this.get(pageOnly ? '/menu/items?type=page' : '/menu/items').subscribe({
+        this.get(loadUrl).subscribe({
           next: async result => {
             const nodes = result.data as any[];
             const items = MenuItem.deflateTree(nodes);