Allow exporting subtrees as HTML (Noded/backend#3)

src/app/app.component.html

@@ -25,7 +25,7 @@
                 <ion-icon color="danger" name="trash"></ion-icon>
               </ion-button>
               <ion-button fill="outline" color="light" (click)="onNodeMenuClick($event)" [disabled]="!menuTarget">
-                <ion-icon color="dark" name="more"></ion-icon>
+                <i class="fa fa-ellipsis-v" style="color: darkgrey"></i>
               </ion-button>
             </ion-buttons>
           </ion-list-header>

src/app/app.component.ts

@@ -148,7 +148,6 @@ export class AppComponent implements OnInit {
       return;
     }
 
-    console.log('firing search');
     const modal = await this.modal.create({
       component: SearchComponent,
     });
@@ -167,11 +166,24 @@ export class AppComponent implements OnInit {
         canManage = true;
       }
     }
+
+    if ( !this.menuTarget.data.id ) {
+      return;
+    }
+
+    const options = [
+      {name: 'Export to HTML', icon: 'fa fa-file-export', value: 'export_html'},
+    ];
+
+    const manageOptions = [
+      {name: 'Share Sub-Tree', icon: 'fa fa-share-alt', value: 'share'},
+    ];
+
     const popover = await this.popover.create({
       component: OptionMenuComponent,
       componentProps: {
         menuItems: [
-            ...(!canManage ? [] : [{name: 'Share Sub-Tree', icon: 'person-add', value: 'share'}]),
+            ...(!canManage ? options : [...options, ...manageOptions]),
         ],
       },
       event: $event,
@@ -187,12 +199,33 @@ export class AppComponent implements OnInit {
         }).then(modal => {
           modal.present();
         });
+      } else if ( result.data === 'export_html' ) {
+        this.exportTargetAsHTML();
       }
     });
 
     await popover.present();
   }
 
+  async exportTargetAsHTML() {
+    const exportRecord: any = await new Promise((res, rej) => {
+      const reqData = {
+        format: 'html',
+        PageId: this.menuTarget.data.id,
+      };
+
+      this.api.post(`/exports/subtree`, reqData).subscribe({
+        next: (result) => {
+          res(result.data);
+        },
+        error: rej
+      });
+    });
+
+    const dlUrl = this.api._build_url(`/exports/${exportRecord.UUID}/download`);
+    window.open(dlUrl, '_blank');
+  }
+
   async onTopLevelCreate() {
     const alert = await this.alerts.create({
       header: 'Create Page',

src/app/components/option-menu/option-menu.component.html

@@ -1,6 +1,6 @@
 <ion-list>
   <ion-item *ngFor="let menuItem of menuItems; let i = index" button (click)="onSelect(menuItems[i].value)">
-    <ion-icon slot="start" [name]="menuItems[i].icon"></ion-icon>
+    <i slot="start" [ngClass]="menuItems[i].icon"></i>
     <ion-label>{{ menuItems[i].name }}</ion-label>
   </ion-item>
 </ion-list>

src/app/components/option-picker/option-picker.component.html

@@ -3,10 +3,10 @@
     <i slot="start" class="fa fa-search"></i>
     <ion-label>Search Everywhere</ion-label>
   </ion-item>
-  <ion-item button (click)="onSelect('html_export')">
+  <!--<ion-item button (click)="onSelect('html_export')">
     <i slot="start" class="fa fa-code"></i>
     <ion-label>Export to HTML Site</ion-label>
-  </ion-item>
+  </ion-item>-->
   <ion-item button (click)="onSelect('toggle_darkmode')">
     <i slot="start" class="fa" [ngClass]="isDark() ? 'fa-sun' : 'fa-moon'"></i>
     <ion-label>{{ isDark() ? 'To The Light!' : 'Go Dark...' }}</ion-label>