diff --git a/src/app/app.component.html b/src/app/app.component.html
index 77853f2..1623cf6 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -12,6 +12,7 @@
Navigate
+<<<<<<< HEAD
@@ -21,6 +22,11 @@
+=======
+
+ Child
+
+>>>>>>> enable delete of pages
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 2fefa53..4e06aeb 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,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.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();
+ });
});
}
@@ -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');
- }
}
}