frontend/src/app/app.component.ts

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';

import {AlertController, Platform, PopoverController} 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, TreeComponent} from 'angular-tree-component';
import { Observable } from 'rxjs';
import {OptionPickerComponent} from './components/option-picker/option-picker.component';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
  @ViewChild('menuTree', {static: false}) menuTree: TreeComponent;
  public addChildTarget: any = false;
  public deleteTarget: any = false;
  public refreshingMenu = false;
  public lastClickEvent: Array<any> = [];
  public nodes = [];
  public currentPageId: string;
  public options = {
    isExpandedField: 'expanded',
    animateExpand: true,
    actionMapping: {
      mouse: {
        dblClick: (tree, node, $event) => {
          const id = node.data.id;
          if ( !node.data.virtual ) {
            this.currentPageId = id;
            this.router.navigate(['/editor', { id }]);
          }
        },
        click: (tree, node, $event) => {
          TREE_ACTIONS.FOCUS(tree, node, $event);
          TREE_ACTIONS.EXPAND(tree, node, $event);
          if ( !node.data.noChildren ) {
            this.addChildTarget = node;
          }

          if ( !node.data.noDelete ) {
            this.deleteTarget = node;
          }
          this.lastClickEvent = [tree, node, $event];
        }
      }
    }
  };

  public darkMode = false;

  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private api: ApiService,
    protected router: Router,
    protected alerts: AlertController,
    protected popover: PopoverController,
  ) {
    this.initializeApp();
  }

  ngOnInit() {
    this.reloadMenuItems().subscribe(() => {
      this.menuTree.treeModel.expandAll();
    });
  }

  showOptions() {
    this.popover.create({
      component: OptionPickerComponent,
      componentProps: {
        toggleDark: () => this.toggleDark(),
        isDark: () => this.isDark(),
      }
    }).then(popover => popover.present());
  }

  onFilterChange($event) {
    const value = $event.detail.value;
    this.menuTree.treeModel.filterNodes(value, true);
  }

  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 => {
                if ( this.currentPageId === this.deleteTarget.data.id ) {
                  this.router.navigate(['/home']);
                }

                this.reloadMenuItems().subscribe();
                this.deleteTarget = false;
                this.addChildTarget = false;
              });
          }
        }
      ]
    });

    await alert.present();
  }

  onMenuRefresh() {
    this.refreshingMenu = true;
    this.reloadMenuItems().subscribe();
    setTimeout(() => {
      this.refreshingMenu = false;
    }, 2000);
  }

  reloadMenuItems() {
    return new Observable(sub => {
      this.api.get('/menu/items').subscribe(result => {
        this.nodes = result.data;
        setTimeout(() => {
          sub.next();
          sub.complete();
        }, 0);
      });
    });
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

  toggleDark() {
    // const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
    this.darkMode = !this.darkMode;
    document.body.classList.toggle('dark', this.darkMode);
  }

  isDark() {
    return !!this.darkMode;
  }
}