UI: continue menu-service/menu-toggle/user-menu wiring for new menu rollout

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<MenuSection>;
   private menuSections$: Subject<Array<MenuSection>> = new ReplaySubject<Array<MenuSection>>(1);
   private homeSections$: Subject<Array<HomeSection>> = new ReplaySubject<Array<HomeSection>>(1);
+  private _availableMenuSections: Array<MenuSection> = [];
   private availableMenuSections$: Subject<Array<MenuSection>> = new ReplaySubject<Array<MenuSection>>(1);
   private availableMenuLinks$ = this.menuSections$.pipe(
     map((items) => this.allMenuLinks(items))
   );
 
+  private currentMenuSection: MenuSection = null;
+
   constructor(private store: Store<AppState>,
               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<Array<MenuSection>> {
     return this.availableMenuLinks$;
   }

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<AppState>) {
+              private store: Store<AppState>,
+              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;
     }

ui-ngx/src/app/shared/components/user-menu.component.html

@@ -45,6 +45,9 @@
 <ng-template #userMenuTpl>
   @if (authority$ | async; as authority) {
     <div class="tb-menu-content tb-user-menu-items" [style.width.px]="!collapsed ? menuButton?._elementRef?.nativeElement?.offsetWidth : ''">
+      <div class="tb-user-email">
+        {{ userEmail$ | async }}
+      </div>
       <button mat-button (click)="menuPopover?.hide(); openAccount()">
         <tb-icon matButtonIcon>mdi:account-circle-outline</tb-icon>
         <span translate>account.account</span>

ui-ngx/src/app/shared/components/user-menu.component.scss

@@ -107,6 +107,13 @@ tb-user-menu {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  .tb-user-email {
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 500;
+    padding: 2px 16px;
+    color: rgba(0,0,0,0.57);
+  }
   .mat-mdc-button {
     &:hover {
       background-color: rgba(0, 0, 0, .07);

ui-ngx/src/app/shared/components/user-menu.component.ts

@@ -66,6 +66,11 @@ export class UserMenuComponent implements OnInit, OnDestroy {
     map((user) => this.getUserDisplayName(user))
   );
 
+  userEmail$ = this.store.pipe(
+    select(selectUserDetails),
+    map((user) => user?.email)
+  );
+
   constructor(private store: Store<AppState>,
               private router: Router,
               private authService: AuthService) {