diff --git a/src/app/app.component.html b/src/app/app.component.html
index d0110b8..3c0a439 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -26,24 +26,14 @@
-
+
-
-
-
- Dark mode
-
-
-
-
-
- Log out
-
+
- Options
+ Menu
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f949780..96d77f9 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -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 = [];
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;
}
}
diff --git a/src/app/components/option-picker/option-picker.component.html b/src/app/components/option-picker/option-picker.component.html
index 6441c67..3857248 100644
--- a/src/app/components/option-picker/option-picker.component.html
+++ b/src/app/components/option-picker/option-picker.component.html
@@ -3,4 +3,12 @@
Export to HTML Site
+
+
+ {{ isDark() ? 'To The Light!' : 'Go Dark...' }}
+
+
+
+ Logout
+
diff --git a/src/app/components/option-picker/option-picker.component.ts b/src/app/components/option-picker/option-picker.component.ts
index 85b1925..701b6a2 100644
--- a/src/app/components/option-picker/option-picker.component.ts
+++ b/src/app/components/option-picker/option-picker.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {ApiService} from '../../service/api.service';
@@ -8,9 +8,12 @@ import {ApiService} from '../../service/api.service';
styleUrls: ['./option-picker.component.scss'],
})
export class OptionPickerComponent implements OnInit {
+ @Input() toggleDark: () => void;
+ @Input() isDark: () => boolean;
constructor(
- protected api: ApiService
+ protected api: ApiService,
+ protected router: Router,
) { }
ngOnInit() {}
@@ -18,6 +21,10 @@ export class OptionPickerComponent implements OnInit {
onSelect(key) {
if ( key === 'html_export' ) {
window.open(this.api._build_url('/data/export/html'), '_blank');
+ } else if ( key === 'logout' ) {
+ window.location.href = '/auth/logout';
+ } else if ( key === 'toggle_darkmode' ) {
+ this.toggleDark();
}
}
}