diff --git a/ui-ngx/src/app/core/services/menu.service.ts b/ui-ngx/src/app/core/services/menu.service.ts index 43b00c4d99..b942779d3e 100644 --- a/ui-ngx/src/app/core/services/menu.service.ts +++ b/ui-ngx/src/app/core/services/menu.service.ts @@ -22,7 +22,7 @@ import { filter, map, take } from 'rxjs/operators'; import { buildUserHome, buildUserMenu, HomeSection, MenuId, MenuSection } from '@core/services/menu.models'; import { Observable, ReplaySubject, Subject } from 'rxjs'; import { AuthState } from '@core/auth/auth.models'; -import { NavigationEnd, Router } from '@angular/router'; +import { ActivationEnd, NavigationEnd, Router } from '@angular/router'; @Injectable({ providedIn: 'root' @@ -32,11 +32,14 @@ export class MenuService { private currentMenuSections: Array; private menuSections$: Subject> = new ReplaySubject>(1); private homeSections$: Subject> = new ReplaySubject>(1); + private _availableMenuSections: Array = []; private availableMenuSections$: Subject> = new ReplaySubject>(1); private availableMenuLinks$ = this.menuSections$.pipe( map((items) => this.allMenuLinks(items)) ); + private currentMenuSection: MenuSection = null; + constructor(private store: Store, private router: Router) { this.store.pipe(select(selectIsAuthenticated)).subscribe( @@ -51,6 +54,9 @@ export class MenuService { this.updateOpenedMenuSections(); } ); + this.router.events.pipe(filter(event => event instanceof ActivationEnd)).subscribe(() => { + this.updateCurrentMenuSection(); + }); } private buildMenu() { @@ -58,11 +64,12 @@ export class MenuService { (authState: AuthState) => { if (authState.authUser) { this.currentMenuSections = buildUserMenu(authState); + this._availableMenuSections = this.allMenuSections(this.currentMenuSections); + this.updateCurrentMenuSection(); this.updateOpenedMenuSections(); this.menuSections$.next(this.currentMenuSections); - const availableMenuSections = this.allMenuSections(this.currentMenuSections); - this.availableMenuSections$.next(availableMenuSections); - const homeSections = buildUserHome(authState, availableMenuSections); + this.availableMenuSections$.next(this._availableMenuSections); + const homeSections = buildUserHome(authState, this._availableMenuSections); this.homeSections$.next(homeSections); } } @@ -70,11 +77,10 @@ export class MenuService { } private updateOpenedMenuSections() { - const url = this.router.url; const openedMenuSections = getCurrentOpenedMenuSections(this.store); if (this.currentMenuSections?.length) { this.currentMenuSections.filter(section => section.type === 'toggle' && - (url.startsWith(section.path) || openedMenuSections.includes(section.path) || section.pages.some(page => url.startsWith(page.path)) )).forEach( + (openedMenuSections.includes(section.path) || this.isActiveMenuSection(section))).forEach( section => section.opened = true ); } @@ -112,6 +118,24 @@ export class MenuService { return this.homeSections$; } + private updateCurrentMenuSection() { + const url = this.router.url; + this.currentMenuSection = this._availableMenuSections.find(section => section.path === url); + } + + public isActiveMenuSection(section: MenuSection): boolean { + if (this.currentMenuSection === section) { + return true; + } else if (section.pages?.length) { + for (const page of section.pages) { + if (this.isActiveMenuSection(page)) { + return true; + } + } + } + return false; + } + public availableMenuLinks(): Observable> { return this.availableMenuLinks$; } diff --git a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts index cbb3c5766c..49c653250d 100644 --- a/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts +++ b/ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts @@ -21,6 +21,7 @@ import { Store } from '@ngrx/store'; import { AppState } from '@core/core.state'; import { ActionPreferencesUpdateOpenedMenuSection } from '@core/auth/auth.actions'; import { coerceBoolean } from '@shared/decorators/coercion'; +import { MenuService } from '@core/services/menu.service'; @Component({ selector: 'tb-menu-toggle', @@ -38,7 +39,8 @@ export class MenuToggleComponent { collapsed = false; constructor(private router: Router, - private store: Store) { + private store: Store, + private menuService: MenuService) { } sectionHeight(): string { @@ -64,13 +66,14 @@ export class MenuToggleComponent { toggleSectionActive(): boolean { if (this.collapsed) { - let active = this.router.isActive(this.router.parseUrl(this.section.path), {paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}); + return this.menuService.isActiveMenuSection(this.section); +/* let active = this.router.isActive(this.router.parseUrl(this.section.path), {paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'}); if (!active) { const found = this.section.pages.find(page => this.router.isActive(this.router.parseUrl(page.path), {paths: 'subset', queryParams: 'ignored', matrixParams: 'ignored', fragment: 'ignored'})); active = !!found; } - return active; + return active;*/ } else { return false; } diff --git a/ui-ngx/src/app/shared/components/user-menu.component.html b/ui-ngx/src/app/shared/components/user-menu.component.html index dc1fe88f39..22fc8d3f84 100644 --- a/ui-ngx/src/app/shared/components/user-menu.component.html +++ b/ui-ngx/src/app/shared/components/user-menu.component.html @@ -45,6 +45,9 @@ @if (authority$ | async; as authority) {
+
+ {{ userEmail$ | async }} +