[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 <my-tabs>.

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 <li> 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.

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<boolean> = new BehaviorSubject<boolean>(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<string> = new BehaviorSubject<string>("");
+
   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);
+  }
 }

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);
     }
   }
   

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) {
+  public static isTheActiveMenu(menu: MenuItem, currentRoute: any, activeMenuItem: string=""): boolean {
-    this.markAsActive = showActive;
+    if(menu.route && menu.route.length > 0 && MenuItem.isTheActiveMenuItem(menu, currentRoute, activeMenuItem)) {
-  }
-
-  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)) {
       return true;
-    } else if (menu.items.length > 0) {
+    } else if(menu.items.length > 0) {
-      for (let menuItem of menu.items) {
+      for(let menuItem of menu.items) {
-        if (menuItem.route == currentRoute  || currentRoute.indexOf(menuItem.route) != -1) {
+        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) {

sharedComponents/navigationBar.component.html

@@ -52,7 +52,7 @@
                      (click)="closeCanvas(canvas)">{{menu.rootItem.title}}</a>
                   <ul class="uk-nav-sub">
                     <ng-container *ngFor="let submenu of menu.items">
-                      <li [class.uk-active]="isTheActiveMenuItem(submenu)"
+                      <li [class.uk-active]="isTheActiveMenu(submenu)"
                           *ngIf="isEnabled(submenu.entitiesRequired,showEntity) && isEnabled(submenu.routeRequired, showPage)  && (submenu.route.length > 0 || submenu.url.length > 0)"
                           [class.uk-parent]="submenu.items && submenu.items.length > 0">
                         <a *ngIf="submenu.route.length > 0" (click)="closeCanvas(canvas)"
@@ -150,7 +150,7 @@
                           <ng-container *ngFor="let submenu of menu.items">
                             <li *ngIf="isEnabled(submenu.entitiesRequired,showEntity) &&
                               isEnabled(submenu.routeRequired, showPage) && (submenu.route.length > 0 ||
-                              submenu.url.length > 0)" [class.uk-active]="isTheActiveMenuItem(submenu)"
+                              submenu.url.length > 0)" [class.uk-active]="isTheActiveMenu(submenu)"
                                 [class.uk-parent]="submenu.items && submenu.items.length > 0">
                               <a *ngIf="submenu.route.length > 0"
                                  routerLink="{{submenu.route}}" [queryParams]="submenu.params"
@@ -212,7 +212,7 @@
                                      routerLink="{{submenu.route}}"
                                      [queryParams]="submenu.params"
                                      [fragment]="submenu.fragment"
-                                     [class.uk-active]="isTheActiveMenuItem(submenu)">
+                                     [class.uk-active]="isTheActiveMenu(submenu)">
                                     {{submenu.title}}
                                   </a>
                                   <!-- EXTERNAL CHILD -->
@@ -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}}
               </a>
               <!-- EXTERNAL -->

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 {
+  isTheActiveMenu(menu: MenuItem | RootMenuItem): boolean {
-    if (!menu.rootItem.markAsActive) {
+    if(menu instanceof MenuItem) {
-      return false;
+      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;
   }
 }

utils/tabs/tabs.component.ts

@@ -9,7 +9,8 @@ import {TabComponent} from './tab.component';
   selector: 'my-tabs',
   template: `
     <ul class="uk-tab" [ngClass]="customClass" uk-tab="connect: .tabs-content">
-      <li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="selected === tab.tabId" (click)="selectTab(tab)">
+<!--      [class.uk-active]="selected === tab.tabId"-->
+      <li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" (click)="selectTab(tab)">
         <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
 					<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
                 [ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></icon>