From 6b023caac63e019233bcdf5fa74002bae21b731a Mon Sep 17 00:00:00 2001 From: Thomas Atkins Date: Sat, 8 Feb 2020 16:06:23 -0600 Subject: [PATCH] fix broken file --- src/app/app.component.ts | 136 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 126 insertions(+), 10 deletions(-) diff --git a/src/app/app.component.ts b/src/app/app.component.ts index e277233..2aba9f5 100644 --- a/src/app/app.component.ts +++ b/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 = []; + public nodes = []; public options = { actionMapping: { @@ -25,10 +30,14 @@ 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]; } } } }; + public darkMode = false; constructor( @@ -36,14 +45,127 @@ 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.nodes = result.data; + 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(); + } + + reloadMenuItems() { + return new Observable(sub => { + this.api.get('/menu/items').subscribe(result => { + this.nodes = result.data; + sub.next(); + sub.complete(); + }); }); } @@ -59,11 +181,5 @@ export class AppComponent implements OnInit { 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'); - } } }