|
|
|
@ -1,11 +1,11 @@
|
|
|
|
|
import { Component, OnInit } from '@angular/core';
|
|
|
|
|
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 } from 'angular-tree-component';
|
|
|
|
|
import {TREE_ACTIONS, TreeComponent} from 'angular-tree-component';
|
|
|
|
|
import { Observable } from 'rxjs';
|
|
|
|
|
import {OptionPickerComponent} from './components/option-picker/option-picker.component';
|
|
|
|
|
|
|
|
|
@ -15,22 +15,35 @@ import {OptionPickerComponent} from './components/option-picker/option-picker.co
|
|
|
|
|
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;
|
|
|
|
|
this.router.navigate(['/editor', { id }]);
|
|
|
|
|
if ( !node.data.virtual ) {
|
|
|
|
|
this.currentPageId = id;
|
|
|
|
|
this.router.navigate(['/editor', { id }]);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
click: (tree, node, $event) => {
|
|
|
|
|
TREE_ACTIONS.FOCUS(tree, node, $event);
|
|
|
|
|
this.addChildTarget = node;
|
|
|
|
|
this.deleteTarget = node;
|
|
|
|
|
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];
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
@ -52,15 +65,26 @@ export class AppComponent implements OnInit {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ngOnInit() {
|
|
|
|
|
this.reloadMenuItems().subscribe();
|
|
|
|
|
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',
|
|
|
|
@ -153,6 +177,10 @@ export class AppComponent implements OnInit {
|
|
|
|
|
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;
|
|
|
|
@ -177,8 +205,10 @@ export class AppComponent implements OnInit {
|
|
|
|
|
return new Observable(sub => {
|
|
|
|
|
this.api.get('/menu/items').subscribe(result => {
|
|
|
|
|
this.nodes = result.data;
|
|
|
|
|
sub.next();
|
|
|
|
|
sub.complete();
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
sub.next();
|
|
|
|
|
sub.complete();
|
|
|
|
|
}, 0);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
@ -191,12 +221,12 @@ export class AppComponent implements OnInit {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
toggleDark() {
|
|
|
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
|
// const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
|
|
|
|
|
this.darkMode = !this.darkMode;
|
|
|
|
|
document.body.classList.toggle('dark', this.darkMode);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
logOut() {
|
|
|
|
|
window.open('/auth/logout');
|
|
|
|
|
isDark() {
|
|
|
|
|
return !!this.darkMode;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|