[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.
This commit is contained in:
parent
dc0544d0d8
commit
99ed7ea6ba
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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 -->
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue