Noded/frontend
3
0
Fork 0
Code Issues 47 Pull Requests Releases Wiki Activity

enable delete of pages

Browse Source
This commit is contained in:
garrettmills 2020-02-08 15:28:22 -06:00
parent 63fa78684c
commit e90b375d02
2 changed files with 124 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.component.html
View File

@ -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>

129
src/app/app.component.ts
View File

@ -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.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');
}
}
}