feat(dsp-das): project menu items highlighting (DEV-3103) (#1444)

Co-authored-by: Julien Schneider <julien.schneider.1991@gmail.com>
dasch-swiss · Feb 8, 2024 · c78ddf7 · c78ddf7
1 parent 3609b52
commit c78ddf7
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 26 deletions.
diff --git a/apps/dsp-app/src/app/project/project.component.html b/apps/dsp-app/src/app/project/project.component.html
@@ -35,20 +35,18 @@
             <span matListItemTitle class="section-label">
               <mat-icon class="sidenav-prefix-icon">search</mat-icon>
               <p>Advanced Search</p>
-              <mat-icon class="sidenav-suffix-icon">chevron_right</mat-icon>
             </span>
           </mat-list-item>
 
           <!-- Description Section -->
           <mat-divider></mat-divider>
           <mat-list-item
-            [ngClass]="{ 'active': listItemSelected === routeConstants.projectRelative + '/' + projectUuid }"
+            [ngClass]="{ 'active': listItemSelected === routeConstants.project }"
             class="section-title"
             (click)="open(routeConstants.project, projectUuid)">
             <span matListItemTitle class="section-label">
               <mat-icon class="sidenav-prefix-icon">description</mat-icon>
               <p>Project Description</p>
-              <mat-icon class="sidenav-suffix-icon">chevron_right</mat-icon>
             </span>
           </mat-list-item>
 
@@ -61,7 +59,6 @@
             <span matListItemTitle class="section-label">
               <mat-icon class="sidenav-prefix-icon">bubble_chart</mat-icon>
               <p>Data Model</p>
-              <mat-icon>chevron_right</mat-icon>
             </span>
           </mat-list-item>
           <mat-divider></mat-divider>

diff --git a/apps/dsp-app/src/app/project/project.component.ts b/apps/dsp-app/src/app/project/project.component.ts
@@ -9,16 +9,16 @@ import {
 } from '@angular/core';
 import { MatSidenav } from '@angular/material/sidenav';
 import { Title } from '@angular/platform-browser';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 import { ReadOntology, ReadProject } from '@dasch-swiss/dsp-js';
 import { ClassAndPropertyDefinitions } from '@dasch-swiss/dsp-js/src/models/v2/ontologies/ClassAndPropertyDefinitions';
 import { getAllEntityDefinitionsAsArray } from '@dasch-swiss/vre/shared/app-api';
 import { RouteConstants } from '@dasch-swiss/vre/shared/app-config';
 import { ProjectService } from '@dasch-swiss/vre/shared/app-helper-services';
 import { OntologiesSelectors, ProjectsSelectors } from '@dasch-swiss/vre/shared/app-state';
 import { Actions, Select, Store } from '@ngxs/store';
-import { Observable, Subscription, combineLatest } from 'rxjs';
-import { map, take } from 'rxjs/operators';
+import { Observable, Subject, Subscription, combineLatest } from 'rxjs';
+import { filter, map, take, takeUntil } from 'rxjs/operators';
 import { ComponentCommunicationEventService, Events } from '../main/services/component-communication-event.service';
 import { ProjectBase } from './project-base';
 
@@ -35,6 +35,8 @@ type AvailableRoute =
   styleUrls: ['./project.component.scss'],
 })
 export class ProjectComponent extends ProjectBase implements OnInit, OnDestroy {
+  destroyed: Subject<void> = new Subject<void>();
+
   @ViewChild('sidenav') sidenav: MatSidenav;
 
   routeConstants = RouteConstants;
@@ -110,31 +112,25 @@ export class ProjectComponent extends ProjectBase implements OnInit, OnDestroy {
 
   ngOnInit() {
     super.ngOnInit();
-    switch (this._router.url) {
-      case `${RouteConstants.project}/${this.projectUuid}/${RouteConstants.advancedSearch}`: {
-        this.listItemSelected = RouteConstants.advancedSearch;
-        break;
-      }
-      case `${RouteConstants.project}/${this.projectUuid}`: {
-        this.listItemSelected = this._router.url;
-        break;
-      }
-      case `${RouteConstants.project}/${this.projectUuid}/${RouteConstants.dataModels}`: {
-        this.listItemSelected = RouteConstants.dataModels;
-        break;
-      }
-      case `${RouteConstants.project}/${this.projectUuid}/${RouteConstants.settings}/${RouteConstants.collaboration}`: {
-        this.listItemSelected = RouteConstants.settings;
-        break;
-      }
-    }
+    this._router.events
+      .pipe(
+        takeUntil(this.destroyed),
+        filter((e): e is NavigationEnd => e instanceof NavigationEnd)
+      )
+      .subscribe((event: NavigationEnd) => {
+        this.listItemSelected = ProjectComponent.GetListItemSelected(event.url, this.projectUuid);
+      });
+
+    this.listItemSelected = ProjectComponent.GetListItemSelected(this._router.url, this.projectUuid);
 
     this.componentCommsSubscription = this._componentCommsService.on(Events.unselectedListItem, () => {
       this.listItemSelected = '';
     });
   }
 
   ngOnDestroy() {
+    this.destroyed.next();
+    this.destroyed.complete();
     // unsubscribe from the ValueOperationEventService when component is destroyed
     if (this.componentCommsSubscription !== undefined) {
       this.componentCommsSubscription.unsubscribe();
@@ -146,7 +142,7 @@ export class ProjectComponent extends ProjectBase implements OnInit, OnDestroy {
   open(route: AvailableRoute, id = '') {
     const routeCommands = id ? [route, id] : [route];
     const extras = route === RouteConstants.project ? {} : { relativeTo: this._route };
-    this.listItemSelected = `/${route}/${id}`;
+    this.listItemSelected = route;
     this._router.navigate(routeCommands, extras);
   }
 
@@ -167,4 +163,25 @@ export class ProjectComponent extends ProjectBase implements OnInit, OnDestroy {
     this.sideNavOpened = !this.sideNavOpened;
     this.sidenav.toggle();
   }
+
+  static GetListItemSelected(url: string, projectUuid: string): string {
+    switch (true) {
+      case url.startsWith(`/${RouteConstants.project}/${projectUuid}/${RouteConstants.advancedSearch}`): {
+        return RouteConstants.advancedSearch;
+      }
+      case url === `/${RouteConstants.project}/${projectUuid}`: {
+        return RouteConstants.project;
+      }
+      case url.startsWith(`/${RouteConstants.project}/${projectUuid}/${RouteConstants.dataModels}`) ||
+        url.startsWith(`/${RouteConstants.project}/${projectUuid}/${RouteConstants.ontology}`) ||
+        url.startsWith(`/${RouteConstants.project}/${projectUuid}/${RouteConstants.addList}`) ||
+        url.startsWith(`/${RouteConstants.project}/${projectUuid}/${RouteConstants.list}`) ||
+        url.startsWith(`/${RouteConstants.project}/${projectUuid}/${RouteConstants.addOntology}`): {
+        return RouteConstants.dataModels;
+      }
+      case url.startsWith(`/${RouteConstants.project}/${projectUuid}/${RouteConstants.settings}`): {
+        return RouteConstants.settings;
+      }
+    }
+  }
 }