From edad40ad0bce0ffe073ec553931bb600360d2fff Mon Sep 17 00:00:00 2001 From: Alex Martzios Date: Thu, 9 Dec 2021 15:52:39 +0200 Subject: [PATCH] Start on dynamic menu for connect-admin - dev only --- dashboard/menu/menu-routing.module.ts | 12 +++ dashboard/menu/menu.component.html | 92 +++++++++++++++++++ dashboard/menu/menu.component.ts | 89 ++++++++++++++++++ dashboard/menu/menu.module.ts | 31 +++++++ .../admin-tabs/admin-tabs.component.ts | 7 +- 5 files changed, 229 insertions(+), 2 deletions(-) create mode 100644 dashboard/menu/menu-routing.module.ts create mode 100644 dashboard/menu/menu.component.html create mode 100644 dashboard/menu/menu.component.ts create mode 100644 dashboard/menu/menu.module.ts diff --git a/dashboard/menu/menu-routing.module.ts b/dashboard/menu/menu-routing.module.ts new file mode 100644 index 00000000..616f6358 --- /dev/null +++ b/dashboard/menu/menu-routing.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import {RouterModule} from '@angular/router'; +import {MenuComponent} from "./menu.component"; + +@NgModule({ + imports: [ + RouterModule.forChild([ + { path: '',component: MenuComponent} + ]) + ] +}) +export class MenuRoutingModule { } diff --git a/dashboard/menu/menu.component.html b/dashboard/menu/menu.component.html new file mode 100644 index 00000000..eac633b1 --- /dev/null +++ b/dashboard/menu/menu.component.html @@ -0,0 +1,92 @@ +
+
+ +
+
+ +
+
+
+
+
+ +
+
+
    + +
  • +
    +
    +
    +
    + +
    +
    + Name and info +
    +
    + Additional info +
    +
    +
    +
    +
    +
    +
    + + Edit +
    +
    + + Delete +
    +
    +
    +
    +
    +
    • +
+
+
+
+ +
+ +
+ \ No newline at end of file diff --git a/dashboard/menu/menu.component.ts b/dashboard/menu/menu.component.ts new file mode 100644 index 00000000..037bf05d --- /dev/null +++ b/dashboard/menu/menu.component.ts @@ -0,0 +1,89 @@ +import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; +import {ActivatedRoute, Router} from '@angular/router'; +import {HelpContentService} from '../../services/help-content.service'; +import {FormBuilder, FormGroup, Validators} from '@angular/forms'; +import {Portal} from '../../utils/entities/adminTool/portal'; +import {EnvProperties} from '../../utils/properties/env-properties'; +import {Session} from '../../login/utils/helper.class'; +import {UserManagementService} from '../../services/user-management.service'; +import {Subscriber} from "rxjs"; +import {properties} from "../../../../environments/environment"; +import {StringUtils} from "../../utils/string-utils.class"; +import {Title} from "@angular/platform-browser"; +import {AlertModal} from '../../utils/modal/alert'; + + +@Component({ + selector: 'menuSelector', + templateUrl: './menu.component.html', +}) +export class MenuComponent implements OnInit { + + @ViewChild('editModal') editModal: AlertModal; + @ViewChild('deleteModal') deleteModal: AlertModal; + + public keyword = ''; + + public communities: Portal[] = []; + public portal: string; + + public properties: EnvProperties = properties; + + public showLoading = true; + public isPortalAdministrator = null; + public filterForm: FormGroup; + private subscriptions: any[] = []; + + constructor(private element: ElementRef, private route: ActivatedRoute, + private _router: Router, private title: Title, + private _helpContentService: HelpContentService, + private userManagementService: UserManagementService, private _fb: FormBuilder) { + } + + ngOnInit() { + this.filterForm = this._fb.group({ + keyword: [''], + status: ['resources', Validators.required] + }); + this.userManagementService.getUserInfo().subscribe(user => { + this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param]; + if (this.route.snapshot.data.portal) { + this.title.setTitle(StringUtils.capitalize(this.portal) + ' | Menu'); + } else if (this.route.snapshot.params[this.route.snapshot.data.param]) { + this.title.setTitle(this.portal.toUpperCase() + ' | Menu'); + } else { + this.title.setTitle('Administrator Dashboard | Menu'); + } + this.isPortalAdministrator = Session.isPortalAdministrator(user) && !this.portal; + }); + this.showLoading = false; + } + + ngOnDestroy(): void { + this.subscriptions.forEach(value => { + if (value instanceof Subscriber) { + value.unsubscribe(); + } else if (value instanceof Function) { + value(); + } + }); + } + + public editMenuItem() { + console.log('Edit menu item'); + this.menuItemsModalOpen('Edit Menu Item', 'Save Changers'); + } + + public deleteMenuItem() { + console.log('Delete menu item'); + } + + private menuItemsModalOpen(title: string, yesBtn: string) { + this.editModal.cancelButton = true; + this.editModal.okButton = true; + this.editModal.okButtonLeft = false; + this.editModal.alertTitle = title; + this.editModal.okButtonText = yesBtn; + this.editModal.open(); + } +} diff --git a/dashboard/menu/menu.module.ts b/dashboard/menu/menu.module.ts new file mode 100644 index 00000000..450812d8 --- /dev/null +++ b/dashboard/menu/menu.module.ts @@ -0,0 +1,31 @@ +import {NgModule} from '@angular/core'; +import {RouterModule} from '@angular/router'; +import {CommonModule} from '@angular/common'; +import {MenuComponent} from './menu.component'; +import {FormsModule, ReactiveFormsModule} from '@angular/forms'; +import {AlertModalModule} from '../../utils/modal/alertModal.module'; +import {MatSlideToggleModule} from '@angular/material/slide-toggle'; +import {AdminToolServiceModule} from "../../services/adminToolService.module"; +import {InputModule} from "../../sharedComponents/input/input.module"; +import {PageContentModule} from "../sharedComponents/page-content/page-content.module"; +import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module"; +import {MenuRoutingModule} from "./menu-routing.module"; +import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module"; +import {IconsModule} from "../../utils/icons/icons.module"; +import {IconsService} from "../../utils/icons/icons.service"; +import {add} from "../../utils/icons/icons"; +import {LoadingModule} from "../../utils/loading/loading.module"; + +@NgModule({ + imports: [ + CommonModule, RouterModule, FormsModule, AdminToolServiceModule, + AlertModalModule, ReactiveFormsModule, MatSlideToggleModule, InputModule, PageContentModule, AdminTabsModule, MenuRoutingModule, SearchInputModule, IconsModule, LoadingModule + ], + declarations: [MenuComponent], + exports: [MenuComponent] +}) +export class MenuModule { + constructor(private iconsService: IconsService) { + this.iconsService.registerIcons([add]); + } +} diff --git a/dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts b/dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts index dd439154..2fc24a99 100644 --- a/dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts +++ b/dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts @@ -3,7 +3,7 @@ import {Session, User} from "../../../login/utils/helper.class"; import {UserManagementService} from "../../../services/user-management.service"; import {Subscriber} from "rxjs"; import {ActivatedRoute} from "@angular/router"; -import {HelperFunctions} from "../../../utils/HelperFunctions.class"; +import { properties } from 'src/environments/environment'; @Component({ selector: 'admin-tabs', @@ -12,6 +12,7 @@ import {HelperFunctions} from "../../../utils/HelperFunctions.class";
  • Portals
  • Pages
  • Entities
    • +
  • Menu
  • Classes
    • ` @@ -25,7 +26,9 @@ export class AdminTabsComponent implements OnInit { @Input() public user: User; @Input() - public tab: "portal"| "page" | "entity" | "class" = 'page'; + public tab: "portal" | "page" | "entity" | "menu" | "class" = 'page'; + + public env = properties.environment; private subscriptions: any[] = []; constructor(private route: ActivatedRoute, private userManagementService: UserManagementService) {