frontend/src/app/app.component.ts

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

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',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {
  public addChildTarget: any = false;
  public deleteTarget: any = false;
  public refreshingMenu = false;
  public lastClickEvent: Array<any> = [];
  public nodes = [];
  public options = {
    actionMapping: {
      mouse: {
        dblClick: (tree, node, $event) => {
          const id = node.data.id;
          this.router.navigate(['/editor', { id }]);
        },
        click: (tree, node, $event) => {
          TREE_ACTIONS.FOCUS(tree, node, $event);
          this.addChildTarget = node;
          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
  ) {
    this.initializeApp();
  }

  ngOnInit() {
    this.reloadMenuItems().subscribe();
  }

  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();
  }

  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;
        sub.next();
        sub.complete();
      });
    });
  }

  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);
  }

  logOut() {
    window.open('/auth/logout');
  }
}