Menu building due to user's scopes

src/app/administration/layout/nav-bar/menu-builder.ts

@@ -1,16 +1,47 @@
-import { faCalendarDays, faClock, faTicket } from '@fortawesome/free-solid-svg-icons';
+import { faCalendarDay, faCalendarDays, faClock, faTicket } from '@fortawesome/free-solid-svg-icons';
 import { MenuItem, MenuSubItem } from './menu-items';
 import { IconDefinition } from '@fortawesome/angular-fontawesome';
+import { inject } from '@angular/core';
+import { AuthService } from 'src/app/services/auth.service';
 
 export class MenuBuilder {
-    constructor() { }
+    readonly #auth = inject(AuthService);
+    #defaultMenu: MenuItem[] = [
+        this.#getMenuItem('My events', 'my-events', faCalendarDay, () => this.getSubItemsByPath('my-events')),
+    ].filter(o => o);
 
-    build(): MenuItem[] {
+    ticketsMenuItem: MenuItem = this.#getMenuItem('Tickets', 'tickets', faTicket, () => this.getSubItemsByPath('tickets'));
+    ticketGroupsMenuItem: MenuItem = this.#getMenuItem('Ticket groups', 'ticket_groups', faClock, () => this.getSubItemsByPath('ticket_groups'));
+    eventsMenuItem: MenuItem = this.#getMenuItem('Events', 'events', faCalendarDays, () => this.getSubItemsByPath('events'));
+    #adminMenu: MenuItem[] = [
+        this.ticketsMenuItem,
+        this.ticketGroupsMenuItem,
+        this.eventsMenuItem,
+    ];
+
+    build(currentUrl: string = ''): MenuItem[] {
+        let scopes = this.#auth.getScopes();
+        let username = this.#auth.getUsername();
+
+        // TODO: Add admin mode to condition
+        if (scopes.includes('admin') || username.includes('admin')) {
+            // user is admin and should have access to all things
+            return this.#adminMenu.filter(o => o);
+        }
+
+        // user has restricted access
+        let menu: MenuItem[] = [];
+
+        for (let i = 0; i < this.#adminMenu.length; i++) {
+            const menuItem = this.#adminMenu[i];
+            if (currentUrl.startsWith(`/${menuItem.link}`)) {
+                menu.push(menuItem);
+            }
+        }
 
         return [
-            this.#getMenuItem('Tickets', 'tickets', faTicket, () => this.getTicketsSubItems()),
-            this.#getMenuItem('Ticket groups', 'ticket_groups', faClock, () => this.getSubItemsByPath('ticket_groups')),
-            this.#getMenuItem('Events', 'events', faCalendarDays, () => this.getSubItemsByPath('events')),
+            ...menu,
+            ...this.#defaultMenu,
         ].filter(o => o);
     }
 
@@ -19,14 +50,11 @@ export class MenuBuilder {
     ): MenuSubItem[] {
         const result: MenuSubItem[] = [];
         result.push(new MenuSubItem('List', `/${path}/list`));
-        result.push(new MenuSubItem('New', `/${path}/add`));
-        return result;
-    }
 
-    getTicketsSubItems(): MenuSubItem[] {
-        const result: MenuSubItem[] = [];
-        result.push(new MenuSubItem('List', '/tickets/list'));
-        result.push(new MenuSubItem('New', '/tickets/add'));
+        // TODO: Add admin mode to condition
+        if (this.#auth.getScopes().includes(`${path}:edit`)) {
+            result.push(new MenuSubItem('New', `/${path}/add`));
+        }
         return result;
     }
 

src/app/administration/layout/nav-bar/nav-bar.component.ts

@@ -3,6 +3,8 @@ import { MenuItem } from './menu-items';
 import { MenuBuilder } from './menu-builder';
 import { AuthService } from 'src/app/services/auth.service';
 import { faBars, faChartLine, faSignOutAlt, faTimes, faUser } from '@fortawesome/free-solid-svg-icons';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
 
 @Component({
     selector: 'app-nav-bar',
@@ -12,6 +14,7 @@ import { faBars, faChartLine, faSignOutAlt, faTimes, faUser } from '@fortawesome
 })
 export class NavBarComponent implements OnInit {
     readonly #authService = inject(AuthService);
+    readonly #router = inject(Router);
 
     dashboardItem = new MenuItem('Dashboard', 'dashboard', faChartLine);
     userProfileItem = new MenuItem('My profile', 'profile', faUser);
@@ -26,12 +29,13 @@ export class NavBarComponent implements OnInit {
 
     ngOnInit(): void {
         this.menuOpen = history.state.navBarVisible ?? false;
-        this.availableItems = this.builder.build()
-        this.availableItems.unshift(this.dashboardItem);
-        this.availableItems.push(
-            this.userProfileItem,
-            this.logoutItem
-        );
+        this.#rebuildMenu(this.#router.url);
+
+        this.#router.events.pipe(
+            filter((event): event is NavigationEnd => event instanceof NavigationEnd),
+        ).subscribe(event => {
+            this.#rebuildMenu(event.urlAfterRedirects);
+        });
     }
 
     toggle(): void {
@@ -45,4 +49,13 @@ export class NavBarComponent implements OnInit {
     logout(): void {
         this.#authService.logout();
     }
+
+    #rebuildMenu(currentUrl: string): void {
+        this.availableItems = this.builder.build(currentUrl);
+        this.availableItems.unshift(this.dashboardItem);
+        this.availableItems.push(
+            this.userProfileItem,
+            this.logoutItem
+        );
+    }
 }

src/app/app.routes.ts

@@ -15,6 +15,30 @@ import { EventsFormComponent } from './administration/events/form/events-form.co
 import { authGuard } from './guards/auth.guard';
 import { logoutGuard } from './guards/logout.guard';
 
+let eventsChildren: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'list',
+  },
+  {
+    path: 'list',
+    component: EventsListComponent
+  },
+  {
+    path: 'add',
+    component: EventsFormComponent
+  },
+  {
+    path: 'edit/:id',
+    component: EventsFormComponent
+  },
+  {
+    path: 'detail/:id',
+    component: EventsFormComponent
+  },
+];
+
 export let APP_ROUTES: Routes = [
   {
     path: '',
@@ -96,31 +120,13 @@ export let APP_ROUTES: Routes = [
           }
         ]
       },
+      {
+        path: 'my-events',
+        children: eventsChildren,
+      },
       {
         path: 'events',
-        children: [
-          {
-            path: '',
-            pathMatch: 'full',
-            redirectTo: 'list',
-          },
-          {
-            path: 'list',
-            component: EventsListComponent
-          },
-          {
-            path: 'add',
-            component: EventsFormComponent
-          },
-          {
-            path: 'edit/:id',
-            component: EventsFormComponent
-          },
-          {
-            path: 'detail/:id',
-            component: EventsFormComponent
-          },
-        ]
+        children: eventsChildren,
       },
       {
         path: '**',