enable delete of pages

src/app/app.component.html

@@ -12,6 +12,7 @@
           <ion-list-header>
             Navigate
             <ion-buttons class="ion-padding-end">
+<<<<<<< HEAD
               <ion-button fill="outline" color="light">
                 <ion-icon color="primary" name="add-circle"></ion-icon>
               </ion-button>
@@ -21,6 +22,11 @@
               <ion-button fill="outline" color="light">
                 <ion-icon color="danger" name="trash"></ion-icon>
               </ion-button>
+=======
+              <ion-button fill="outline" color="light" (click)="onTopLevelCreate()"><ion-icon color="primary" name="add-circle"></ion-icon></ion-button>
+              <ion-button fill="outline" color="light" (click)="onChildCreate()" [disabled]="!addChildTarget"><ion-icon color="primary" name="add-circle"></ion-icon>&nbsp;<span style="color: #666;">Child</span></ion-button>
+              <ion-button fill="outline" color="light" (click)="onDeleteClick()" [disabled]="!deleteTarget"><ion-icon color="danger" name="trash"></ion-icon></ion-button>
+>>>>>>> enable delete of pages
             </ion-buttons>
           </ion-list-header>
 

src/app/app.component.ts

@@ -1,11 +1,12 @@
 import { Component, OnInit } from '@angular/core';
 
-import { Platform } from '@ionic/angular';
+import {AlertController, Platform} from '@ionic/angular';
 import { SplashScreen } from '@ionic-native/splash-screen/ngx';
 import { StatusBar } from '@ionic-native/status-bar/ngx';
 import { ApiService } from './service/api.service';
 import { Router } from '@angular/router';
 import { TREE_ACTIONS } from 'angular-tree-component';
+import {Observable} from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -13,6 +14,10 @@ import { TREE_ACTIONS } from 'angular-tree-component';
   styleUrls: ['app.component.scss']
 })
 export class AppComponent implements OnInit {
+  public addChildTarget: any = false;
+  public deleteTarget: any = false;
+  public lastClickEvent: Array<any> = [];
+
   public nodes = [];
   public options = {
     actionMapping: {
@@ -25,6 +30,9 @@ export class AppComponent implements OnInit {
         click: (tree, node, $event) => {
           console.log('click', { tree, node, $event });
           TREE_ACTIONS.FOCUS(tree, node, $event);
+          this.addChildTarget = node;
+          this.deleteTarget = node;
+          this.lastClickEvent = [tree, node, $event];
         }
       }
     }
@@ -37,14 +45,120 @@ export class AppComponent implements OnInit {
     private splashScreen: SplashScreen,
     private statusBar: StatusBar,
     private api: ApiService,
-    protected router: Router
+    protected router: Router,
+    protected alerts: AlertController,
   ) {
     this.initializeApp();
   }
 
   ngOnInit() {
-    this.api.get('/menu/items').subscribe(result => {
+    this.reloadMenuItems().subscribe();
-      this.nodes = result.data;
+  }
+
+  async onTopLevelCreate() {
+    const alert = await this.alerts.create({
+      header: 'Create Page',
+      message: 'Please enter a new name for the page:',
+      cssClass: 'page-prompt',
+      inputs: [
+        {
+          name: 'name',
+          type: 'text',
+          placeholder: 'My Awesome Page',
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+        },
+        {
+          text: 'Create',
+          handler: async (args) => {
+            this.api.post('/page/create', args).subscribe((res) => {
+              this.router.navigate(['/editor', {id: res.data.UUID}]);
+              this.reloadMenuItems().subscribe();
+            });
+          },
+        }
+      ],
+    });
+
+    await alert.present();
+  }
+
+  async onChildCreate() {
+    const alert = await this.alerts.create({
+      header: 'Create Sub-Page',
+      message: 'Please enter a new name for the page:',
+      cssClass: 'page-prompt',
+      inputs: [
+        {
+          name: 'name',
+          type: 'text',
+          placeholder: 'My Awesome Page',
+        }
+      ],
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+        },
+        {
+          text: 'Create',
+          handler: async (args) => {
+            args = {
+              name: args.name,
+              parentId: this.addChildTarget.data.id
+            };
+            this.api.post('/page/create-child', args).subscribe((res) => {
+              this.reloadMenuItems().subscribe(() => {
+                TREE_ACTIONS.EXPAND(this.lastClickEvent[0], this.lastClickEvent[1], this.lastClickEvent[2]);
+                this.router.navigate(['/editor', {id: res.data.UUID}]);
+              });
+            });
+          },
+        }
+      ],
+    });
+
+    await alert.present();
+  }
+
+  async onDeleteClick() {
+    const alert = await this.alerts.create({
+      header: 'Delete page?',
+      message: 'Deleting this page will make its contents and  all of its children inaccessible. Are you sure you want to continue?',
+      buttons: [
+        {
+          text: 'Keep It',
+          role: 'cancel',
+        },
+        {
+          text: 'Delete It',
+          handler: async () => {
+            this.api.post(`/page/delete/${this.deleteTarget.data.id}`).subscribe(res => {
+              this.reloadMenuItems().subscribe();
+              this.deleteTarget = false;
+              this.addChildTarget = false;
+            });
+          },
+        },
+      ],
+    });
+
+    await alert.present();
+  }
+
+  reloadMenuItems() {
+    return new Observable(sub => {
+      this.api.get('/menu/items').subscribe(result => {
+        this.nodes = result.data;
+        sub.next();
+        sub.complete();
+      });
     });
   }
 
@@ -58,13 +172,6 @@ export class AppComponent implements OnInit {
   toggleDark() {
     const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
     this.darkMode = !this.darkMode;
-    console.log('toggel Dark mode');
     document.body.classList.toggle('dark', this.darkMode);
-
-    if (this.darkMode) {
-      console.log('Dark Mode On');
-    } else {
-      console.log('Dark Mode Off');
-    }
   }
 }