nested navigation menu items

src/app/core/config/dynamic-routing/route-permissions.service.spec.ts

@@ -3,15 +3,33 @@ import { TestBed } from "@angular/core/testing";
 import { RoutePermissionsService } from "./route-permissions.service";
 import { UserRoleGuard } from "../../permissions/permission-guard/user-role.guard";
 import { EntityPermissionGuard } from "../../permissions/permission-guard/entity-permission.guard";
+import { MenuItem } from "app/core/ui/navigation/menu-item";
 
 describe("RoutePermissionsService", () => {
   let service: RoutePermissionsService;
 
+  let mockUserRoleGuard: jasmine.SpyObj<UserRoleGuard>;
+  let mockEntityPermissionGuard: jasmine.SpyObj<EntityPermissionGuard>;
+
   beforeEach(() => {
+    mockEntityPermissionGuard = jasmine.createSpyObj(["checkRoutePermissions"]);
+    mockEntityPermissionGuard.checkRoutePermissions.and.resolveTo(true);
+
+    mockUserRoleGuard = jasmine.createSpyObj(["checkRoutePermissions"]);
+    mockUserRoleGuard.checkRoutePermissions.and.callFake(
+      async (path: string) => {
+        if (path === "allowed") {
+          return true;
+        } else {
+          return false;
+        }
+      },
+    );
+
     TestBed.configureTestingModule({
       providers: [
-        { provide: UserRoleGuard, useValue: {} },
-        { provide: EntityPermissionGuard, useValue: {} },
+        { provide: UserRoleGuard, useValue: mockUserRoleGuard },
+        { provide: EntityPermissionGuard, useValue: mockEntityPermissionGuard },
       ],
     });
     service = TestBed.inject(RoutePermissionsService);
@@ -20,4 +38,86 @@ describe("RoutePermissionsService", () => {
   it("should be created", () => {
     expect(service).toBeTruthy();
   });
+
+  it("should filter menu-items where user doesn't have permission for its link", async () => {
+    const itemPermitted: MenuItem = {
+      label: "Visible Item",
+      link: "allowed",
+    };
+    const itemProtected: MenuItem = {
+      label: "Hidden Item",
+      link: "blocked",
+    };
+
+    const filteredItems: MenuItem[] = await service.filterPermittedRoutes([
+      itemPermitted,
+      itemProtected,
+    ]);
+
+    expect(filteredItems).toEqual([itemPermitted]);
+  });
+
+  it("should filter each submenu item based on permissions", async () => {
+    const itemPermitted: MenuItem = {
+      label: "Visible Item",
+      link: "allowed",
+    };
+    const itemProtected: MenuItem = {
+      label: "Hidden Item",
+      link: "blocked",
+    };
+    const nestedItem: MenuItem = {
+      label: "Parent Item",
+      subMenu: [itemPermitted, itemProtected],
+    };
+
+    const filteredItems: MenuItem[] = await service.filterPermittedRoutes([
+      nestedItem,
+    ]);
+
+    expect(filteredItems).toEqual([
+      {
+        label: "Parent Item",
+        subMenu: [itemPermitted],
+      },
+    ]);
+  });
+
+  it("should filter parent item if all submenu items are filter due to permissions", async () => {
+    const nestedItem: MenuItem = {
+      label: "Parent Item",
+      subMenu: [
+        {
+          label: "Hidden Item 1",
+          link: "blocked",
+        },
+        {
+          label: "Hidden Item 2",
+          link: "blocked",
+        },
+      ],
+    };
+
+    const filteredItems: MenuItem[] = await service.filterPermittedRoutes([
+      nestedItem,
+    ]);
+
+    expect(filteredItems).toEqual([]);
+  });
 });
+
+/*
+
+Simple:
+  item 1
+  item 2  x
+
+Nested:
+  item 1
+    1.1
+    1.2   x
+
+  item 2  x
+    2.1   x
+
+ */

src/app/core/config/dynamic-routing/route-permissions.service.ts

@@ -20,15 +20,28 @@ export class RoutePermissionsService {
    */
   async filterPermittedRoutes(items: MenuItem[]): Promise<MenuItem[]> {
     const accessibleRoutes: MenuItem[] = [];
+
     for (const item of items) {
-      if (await this.isAccessibleRouteForUser(item.link)) {
+      if (item.link && (await this.isAccessibleRouteForUser(item.link))) {
         accessibleRoutes.push(item);
+      } else if (item.subMenu) {
+        const accessibleSubItems: MenuItem[] = await this.filterPermittedRoutes(
+          item.subMenu,
+        );
+
+        if (accessibleSubItems.length > 0) {
+          // only adding the item if there is at least one accessible subMenu item
+          const filteredParentItem: MenuItem = Object.assign({}, item);
+          filteredParentItem.subMenu = accessibleSubItems;
+          accessibleRoutes.push(filteredParentItem);
+        }
       }
     }
+
     return accessibleRoutes;
   }
 
-  private async isAccessibleRouteForUser(path: string) {
+  private async isAccessibleRouteForUser(path: string): Promise<boolean> {
     return (
       (await this.roleGuard.checkRoutePermissions(path)) &&
       (await this.permissionGuard.checkRoutePermissions(path))

src/app/core/ui/navigation/menu-item.component.html

@@ -0,0 +1,29 @@
+<mat-list-item
+  angulartics2On="click"
+  angularticsCategory="Navigation"
+  angularticsAction="app_navigation_link_click"
+  [angularticsLabel]="item.label"
+  [routerLink]="[item.link]"
+  [class.matched-background]="item.link === activeLink"
+  onclick="this.blur();"
+>
+  <a class="flex-row gap-small" (click)="toggleSubMenu()">
+    <app-fa-dynamic-icon
+      class="nav-icon"
+      [icon]="item.icon"
+    ></app-fa-dynamic-icon>
+    <div>{{ item.label }}</div>
+
+    <fa-icon
+      *ngIf="hasSubMenu(item)"
+      [icon]="isExpanded ? 'chevron-down' : 'chevron-right'"
+    ></fa-icon>
+  </a>
+</mat-list-item>
+
+<!-- Render submenus if they exist and are expanded -->
+<div *ngIf="isExpanded" class="submenu">
+  <ng-container *ngFor="let subItem of item.subMenu">
+    <app-menu-item [item]="subItem"></app-menu-item>
+  </ng-container>
+</div>

src/app/core/ui/navigation/menu-item.component.scss

@@ -0,0 +1,15 @@
+@use "variables/sizes";
+@use "variables/colors";
+
+/* ensures that all icons have the same width */
+.nav-icon {
+  min-width: sizes.$max-icon-width;
+}
+
+.matched-background {
+  background-color: colors.$background !important;
+}
+
+.submenu {
+  padding-left: 20px;
+}

src/app/core/ui/navigation/menu-item.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { MatListModule } from "@angular/material/list";
+import { FaIconComponent } from "@fortawesome/angular-fontawesome";
+import { FaDynamicIconComponent } from "../../common-components/fa-dynamic-icon/fa-dynamic-icon.component";
+import { RouterLink } from "@angular/router";
+import { Angulartics2Module } from "angulartics2";
+import { NgForOf } from "@angular/common";
+import { MenuItem } from "./menu-item";
+import { MatMenuModule } from "@angular/material/menu";
+
+@Component({
+  selector: "app-menu-item",
+  templateUrl: "./menu-item.component.html",
+  styleUrls: ["./menu-item.component.scss"],
+  imports: [
+    CommonModule,
+    MatListModule,
+    FaIconComponent,
+    FaDynamicIconComponent,
+    RouterLink,
+    Angulartics2Module,
+    NgForOf,
+    MatMenuModule,
+  ],
+  standalone: true,
+})
+export class MenuItemComponent {
+  @Input() item: MenuItem; // Receives each individual menu item as input
+  activeLink: string;
+
+  isExpanded: boolean = false;
+
+  toggleSubMenu(): void {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  hasSubMenu(item: MenuItem): boolean {
+    return !!item.subMenu && item.subMenu.length > 0;
+  }
+}

src/app/core/ui/navigation/menu-item.ts

@@ -13,7 +13,9 @@ export interface MenuItem {
   /**
    * The url fragment to which the item will route to (e.g. '/dashboard')
    */
-  link: string;
+  link?: string;
+
+  subMenu?: MenuItem[];
 }
 
 /**

src/app/core/ui/navigation/navigation/navigation.component.html

@@ -17,23 +17,6 @@
 
 <mat-nav-list>
   <ng-container *ngFor="let item of menuItems">
-    <mat-list-item
-      angulartics2On="click"
-      angularticsCategory="Navigation"
-      angularticsAction="app_navigation_link_click"
-      [angularticsLabel]="item.label"
-      [routerLink]="[item.link]"
-      [class.matched-background]="item.link === activeLink"
-      onclick="this.blur();"
-    >
-      <a class="flex-row gap-small">
-        <app-fa-dynamic-icon
-          class="nav-icon"
-          [icon]="item.icon"
-        ></app-fa-dynamic-icon>
-        <div>{{ item.label }}</div>
-      </a>
-    </mat-list-item>
-    <mat-divider></mat-divider>
+    <app-menu-item [item]="item"></app-menu-item>
   </ng-container>
 </mat-nav-list>

src/app/core/ui/navigation/navigation/navigation.component.scss

@@ -1,11 +0,0 @@
-@use "variables/sizes";
-@use "variables/colors";
-
-/* ensures that all icons have the same width */
-.nav-icon {
-  min-width: sizes.$max-icon-width;
-}
-
-.matched-background {
-  background-color: colors.$background !important;
-}

src/app/core/ui/navigation/navigation/navigation.component.ts

@@ -26,6 +26,9 @@ import { NgForOf } from "@angular/common";
 import { Angulartics2Module } from "angulartics2";
 import { FaDynamicIconComponent } from "../../../common-components/fa-dynamic-icon/fa-dynamic-icon.component";
 import { RoutePermissionsService } from "../../../config/dynamic-routing/route-permissions.service";
+import { MatMenuModule } from "@angular/material/menu";
+import { CommonModule } from "@angular/common";
+import { MenuItemComponent } from "../menu-item.component";
 
 /**
  * Main app menu listing.
@@ -41,6 +44,9 @@ import { RoutePermissionsService } from "../../../config/dynamic-routing/route-p
     Angulartics2Module,
     RouterLink,
     FaDynamicIconComponent,
+    MatMenuModule,
+    CommonModule,
+    MenuItemComponent,
   ],
   standalone: true,
 })
@@ -82,16 +88,16 @@ export class NavigationComponent {
    */
   private computeActiveLink(newUrl: string): string {
     // conservative filter matching all items that could fit to the given url
-    const items: MenuItem[] = this.menuItems.filter((item) =>
-      newUrl.startsWith(item.link),
+    const items: MenuItem[] = this.menuItems.filter(
+      (item) => typeof item.link === "string" && newUrl.startsWith(item.link),
     );
     switch (items.length) {
       case 0:
         return "";
       case 1:
-        const link = items[0].link;
+        const target = items[0].link as string;
         // for root "/" only return on exact match to avoid confusing highlighting of unrelated items
-        return newUrl === link || link.length > 1 ? link : "";
+        return newUrl === target || target.length > 1 ? target : "";
       default:
         // If there are multiple matches (A user navigates with a URL that starts with
         // multiple links from a MenuItem), use the element where the length is bigger.
@@ -105,8 +111,8 @@ export class NavigationComponent {
         // both '/attendance' and '/attendance/add/day' are a prefix of '/attendance/add/day'.
         // In the latter case, the one with the longer URL should match.
         return items.reduce((i1, i2) =>
-          i1.link.length > i2.link.length ? i1 : i2,
-        ).link;
+          (i1.link as string).length > (i2.link as string).length ? i1 : i2,
+        ).link as string;
     }
   }