From 99ed7ea6ba683a3b9427a3cb03d6c3b896269bee Mon Sep 17 00:00:00 2001 From: "konstantina.galouni" Date: Mon, 28 Mar 2022 11:40:21 +0300 Subject: [PATCH] [Library & Monitor Dashboard | new-theme]: Sidebar & Navbar checks updated to use the same method | "activeMenuItem" in route data (optional) to set which menu item is active when url does not match | Bug fix in . 1. layout.service.ts: Added "activeMenuItemSubject" to keep value of data['activeMenuItem']. 2. menu.ts: Removed "markAsActive" (not used) | Set RootMenuItem as deprecated (should use only MenuItem) | Added "isTheActiveMenuItem()" method to check if a MenuItem (root or not / sidebar or navbar) is active. 3. navigationBar.component.ts: Updated "isTheActiveMenu()" method to call MenuItem.isTheActiveMenu() | Removed method "isTheActiveMenuItem()". 4. navigationBar.component.html: Always call "isTheActiveMenu()" method. 5. sideBar.component.ts: Added "get currentRoute()" and updated method "isTheActiveMenuItem()". 6. tabs.component.ts: [Bug fix] Removed [class.uk-active] from
  • of tabs (since small-tabs are not currently used it is ok to remove this) - caused by version update of Uikit. 7. monitor-routing.module.ts: Set activeMenuItem: "dashboard" for any path under a stakeholder that has nothing or anything under a topic. | Set activeMenuItem: "search" in paths under search. 8. app-routing.module.ts: Set activeMenuItem: "manage" for paths under admin/:stakeholder. 9. app.component.ts: Updated menu in Admin Dashboard (all items visible and logo of monitor used) | Set value for MenuItem.routeActive when adding menu items of topics and users. --- .../sidebar/layout.service.ts | 21 ++++++++++- .../sidebar/sideBar.component.ts | 16 ++++++--- sharedComponents/menu.ts | 35 ++++++++++--------- sharedComponents/navigationBar.component.html | 8 ++--- sharedComponents/navigationBar.component.ts | 31 ++++++---------- utils/tabs/tabs.component.ts | 3 +- 6 files changed, 65 insertions(+), 49 deletions(-) diff --git a/dashboard/sharedComponents/sidebar/layout.service.ts b/dashboard/sharedComponents/sidebar/layout.service.ts index cf9333b7..3391a32f 100644 --- a/dashboard/sharedComponents/sidebar/layout.service.ts +++ b/dashboard/sharedComponents/sidebar/layout.service.ts @@ -39,7 +39,12 @@ export class LayoutService { * Add isDashboard: false on data of route config, if page is for a stakeholder but not for dashboard. */ private isDashboardSubject: BehaviorSubject = new BehaviorSubject(true); - + + /** + * Add activeMenuItem: string on data of route config, if page should activate a specific MenuItem and route url does not match. + */ + private activeMenuItemSubject: BehaviorSubject = new BehaviorSubject(""); + sub: any; ngOnDestroy() { @@ -92,6 +97,12 @@ export class LayoutService { } else { this.setDashboard(true); } + if (data['activeMenuItem'] !== undefined && + data['activeMenuItem'] !== null) { + this.setActiveMenuItem(data['activeMenuItem']); + } else { + this.setActiveMenuItem(''); + } } }); } @@ -152,4 +163,12 @@ export class LayoutService { setSmallScreen(value: boolean) { this.isSmallScreenSubject.next(value); } + + get activeMenuItem(): string { + return this.activeMenuItemSubject.getValue(); + } + + setActiveMenuItem(value: string) { + this.activeMenuItemSubject.next(value); + } } diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.ts b/dashboard/sharedComponents/sidebar/sideBar.component.ts index 0dd3d208..fba8c983 100644 --- a/dashboard/sharedComponents/sidebar/sideBar.component.ts +++ b/dashboard/sharedComponents/sidebar/sideBar.component.ts @@ -1,6 +1,6 @@ import {Component, Input, OnInit} from '@angular/core'; import {MenuItem} from "../../../sharedComponents/menu"; -import {QueryParamsHandling, Router} from "@angular/router"; +import {ActivatedRoute, QueryParamsHandling, Router} from "@angular/router"; import {DomSanitizer} from "@angular/platform-browser"; import {properties} from "../../../../../environments/environment"; import {LayoutService} from "./layout.service"; @@ -17,13 +17,19 @@ export class SideBarComponent implements OnInit { @Input() queryParamsHandling; properties; - constructor(private router: Router, private sanitizer: DomSanitizer, private layoutService: LayoutService) { + constructor(private route: ActivatedRoute, private router: Router, private sanitizer: DomSanitizer, private layoutService: LayoutService) { this.properties = properties; } ngOnInit(): void { } - + + get currentRoute() { + return { + route: this.router.url.split('?')[0].split('#')[0], + fragment: this.route.snapshot.fragment + } + } get activeIndex(): number { return this.items?this.items.findIndex(item => this.isTheActiveMenuItem(item)):0; @@ -35,9 +41,9 @@ export class SideBarComponent implements OnInit { (subItem && this.activeItem === item._id && this.activeSubItem === subItem._id); } else { if (subItem) { - return MenuItem.isTheActiveMenu(subItem, this.router.url.split('?')[0]) || MenuItem.isTheActiveMenu(subItem, this.router.url.split('#')[0]); + return MenuItem.isTheActiveMenu(subItem, this.currentRoute); } - return MenuItem.isTheActiveMenu(item,this.router.url.split('?')[0]) || MenuItem.isTheActiveMenu(item,this.router.url.split('#')[0]); + return MenuItem.isTheActiveMenu(item,this.currentRoute); } } diff --git a/sharedComponents/menu.ts b/sharedComponents/menu.ts index 7cf36b96..c6a27633 100644 --- a/sharedComponents/menu.ts +++ b/sharedComponents/menu.ts @@ -10,7 +10,6 @@ export class MenuItem { routeRequired: string[] = []; // the routes that if aren't enable the menu item doesn't make sense params: any = {}; fragment: string; - markAsActive: boolean; items: MenuItem[] = []; icon: string; open: boolean; @@ -27,44 +26,46 @@ export class MenuItem { this.entitiesRequired = entitiesRequired; this.routeRequired = routeRequired; this.params = params; - this.markAsActive = true; this.items = []; this.icon = icon; this.fragment = fragment; this.customClass = customClass; } - public setMarkAsActive(showActive: boolean) { - this.markAsActive = showActive; - } - - public static isTheActiveMenu(menu: MenuItem, currentRoute: string): boolean { - if (!menu.markAsActive) { - return false; - } - if (menu.route.length > 0 && ((menu.routeActive && currentRoute.includes(menu.routeActive)) || currentRoute == menu.route)) { + public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string=""): boolean { + if(menu.route && menu.route.length > 0 && MenuItem.isTheActiveMenuItem(menu, currentRoute, activeMenuItem)) { return true; - } else if (menu.items.length > 0) { - for (let menuItem of menu.items) { - if (menuItem.route == currentRoute || currentRoute.indexOf(menuItem.route) != -1) { + } else if(menu.items.length > 0) { + for(let menuItem of menu.items) { + if(MenuItem.isTheActiveMenuItem(menuItem, currentRoute, activeMenuItem)) { return true; } } } return false; + + + } + + private static isTheActiveMenuItem(menu: MenuItem, currentRoute: any, activeMenuItem: string) { + return ( + ((menu.route == currentRoute.route || menu.route == (currentRoute.route + "/")) && currentRoute.fragment == menu.fragment)) + || (menu.routeActive && ( + currentRoute.route.includes(menu.routeActive))) + || (menu._id && menu._id === activeMenuItem); } } +/** + * @deprecated + * */ export class RootMenuItem { rootItem: MenuItem; items: MenuItem[] = []; public static isTheActiveRootMenu(menu: RootMenuItem, currentRoute: string): boolean { - if (!menu.rootItem.markAsActive) { - return false; - } if (currentRoute == menu.rootItem.route) { return true; } else if (menu.items.length > 0) { diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html index 7995998e..2e8f0567 100644 --- a/sharedComponents/navigationBar.component.html +++ b/sharedComponents/navigationBar.component.html @@ -52,7 +52,7 @@ (click)="closeCanvas(canvas)">{{menu.rootItem.title}}
      -
    • 0)" [class.uk-active]="isTheActiveMenu(submenu)" [class.uk-parent]="submenu.items && submenu.items.length > 0"> + [class.uk-active]="isTheActiveMenu(submenu)"> {{submenu.title}} @@ -247,7 +247,7 @@ routerLink="{{item.route}}" [queryParams]="item.params" [fragment]="item.fragment" - [class.uk-active]="isTheActiveMenuItem(item)"> + [class.uk-active]="isTheActiveMenu(item)"> {{item.title}} diff --git a/sharedComponents/navigationBar.component.ts b/sharedComponents/navigationBar.component.ts index 954661b5..66a17b9f 100644 --- a/sharedComponents/navigationBar.component.ts +++ b/sharedComponents/navigationBar.component.ts @@ -7,6 +7,7 @@ import {EnvProperties} from '../utils/properties/env-properties'; import {Subscription} from 'rxjs'; import {HelpContentService} from '../services/help-content.service'; import {properties} from "../../../environments/environment"; +import {LayoutService} from "../dashboard/sharedComponents/sidebar/layout.service"; declare var UIkit; @@ -59,8 +60,8 @@ export class NavigationBarComponent implements OnInit, OnDestroy { constructor(private router: Router, private route: ActivatedRoute, private config: ConfigurationService, - private _helpContentService: HelpContentService) { - } + private _helpContentService: HelpContentService, + private layoutService: LayoutService) {} ngOnInit() { this.initialize(); @@ -176,25 +177,13 @@ export class NavigationBarComponent implements OnInit, OnDestroy { } } - isTheActiveMenu(menu: RootMenuItem): boolean { - if (!menu.rootItem.markAsActive) { - return false; + isTheActiveMenu(menu: MenuItem | RootMenuItem): boolean { + if(menu instanceof MenuItem) { + return MenuItem.isTheActiveMenu(menu, this.currentRoute, this.layoutService.activeMenuItem); + } else { + let item: MenuItem = menu.rootItem; + item.items = menu.items; + return MenuItem.isTheActiveMenu(item, this.currentRoute, this.layoutService.activeMenuItem); } - if (this.isTheActiveMenuItem(menu.rootItem)) { - return true; - } else if (menu.items.length > 0) { - for (let menuItem of menu.items) { - if (this.isTheActiveMenuItem(menuItem)) { - return true; - } - } - } - return false; - } - - isTheActiveMenuItem(menuItem: MenuItem): boolean { - let currentRoute = this.currentRoute; - return (menuItem.route == currentRoute.route || menuItem.route == (currentRoute.route + "/")) && - currentRoute.fragment == menuItem.fragment; } } diff --git a/utils/tabs/tabs.component.ts b/utils/tabs/tabs.component.ts index 97a59a77..e0512329 100644 --- a/utils/tabs/tabs.component.ts +++ b/utils/tabs/tabs.component.ts @@ -9,7 +9,8 @@ import {TabComponent} from './tab.component'; selector: 'my-tabs', template: `
        -
      • + +