change sidebar

frontend/src/app/app.component.scss

@@ -10,6 +10,7 @@
 
 .sidenav-nav {
   margin-top: 64px;
+  min-width: 10rem;
 }
 
 .sidenav-content {

frontend/src/app/models/picsur-routes.ts

@@ -1,12 +1,16 @@
-import { ComponentType } from '@angular/cdk/portal';
 import { Route } from '@angular/router';
 import { Permissions } from 'picsur-shared/dist/dto/permissions';
 
+
 export type PRouteData = {
-  title?: string;
+  page?: {
+    title?: string;
+    icon?: string;
+    category?: string;
+  };
   permissions?: Permissions;
   noContainer?: boolean;
-  sidebar?: ComponentType<unknown>;
+  sidebar?: string;
 };
 
 export type PRoute = Route & {

frontend/src/app/routes/settings/settings-sidebar/settings-sidebar.component.html

@@ -1,14 +1,16 @@
 <mat-nav-list>
+  <span mat-subheader>Big Peepee</span>
   <ng-container *ngIf="personalRoutes.length > 0">
     <span mat-subheader>Personal</span>
     <a
       *ngFor="let route of personalRoutes"
       mat-list-item
-      [routerLink]="route.path"
+      [routerLink]="'/settings/' + route.path"
       routerLinkActive="active"
+      [routerLinkActiveOptions]="{ exact: true }"
     >
-      <mat-icon mat-list-icon>{{ route.icon }}</mat-icon>
-      <span mat-line>{{ route.name }}</span>
+      <mat-icon mat-list-icon>{{ route.data?.page?.icon }}</mat-icon>
+      <span mat-line>{{ route.data?.page?.title }}</span>
     </a>
   </ng-container>
 
@@ -20,11 +22,11 @@
     <a
       *ngFor="let route of systemRoutes"
       mat-list-item
-      [routerLink]="route.path"
+      [routerLink]="'/settings/' + route.path"
       routerLinkActive="active"
     >
-      <mat-icon mat-list-icon>{{ route.icon }}</mat-icon>
-      <span mat-line>{{ route.name }}</span>
+      <mat-icon mat-list-icon>{{ route.data?.page?.icon }}</mat-icon>
+      <span mat-line>{{ route.data?.page?.title }}</span>
     </a>
   </ng-container>
 </mat-nav-list>

frontend/src/app/routes/settings/settings-sidebar/settings-sidebar.component.ts

@@ -1,40 +1,55 @@
 import { Component, OnInit } from '@angular/core';
-
-type SideBarRoute = {
-  type: 'personal' | 'system';
-  path: string;
-  name: string;
-  icon: string;
-};
-
-const SideBarRoutes: SideBarRoute[] = [
-  {
-    type: 'personal',
-    path: '',
-    name: 'General',
-    icon: 'settings',
-  },
-];
+import { Router } from '@angular/router';
+import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
+import { PRoutes } from 'src/app/models/picsur-routes';
+import { PermissionService } from 'src/app/services/api/permission.service';
 
 @Component({
   templateUrl: './settings-sidebar.component.html',
   styleUrls: ['./settings-sidebar.component.scss'],
 })
 export class SettingsSidebarComponent implements OnInit {
-  personalRoutes: SideBarRoute[] = [];
-  systemRoutes: SideBarRoute[] = [];
+  private accessibleRoutes: PRoutes = [];
+  private settingsRoutes: PRoutes = [];
 
-  constructor() {}
+  personalRoutes: PRoutes = [];
+  systemRoutes: PRoutes = [];
+
+  constructor(
+    /* @Inject('SettingsRoutes')*/
+    private permissionService: PermissionService,
+    private router: Router
+  ) {
+    console.error("contstruct");
+    console.log('stat', this.router.getCurrentNavigation());
+  }
 
   ngOnInit() {
-    const routes = SideBarRoutes.map((route) => {
-      return {
-        ...route,
-        path: `/settings/${route.path}`,
-      };
-    });
+    console.log('SettingsSidebarComponent.ngOnInit()');
+    this.subscribePermissions();
 
-    this.personalRoutes = routes.filter((route) => route.type === 'personal');
-    this.systemRoutes = routes.filter((route) => route.type === 'system');
+
+  }
+
+  @AutoUnsubscribe()
+  private subscribePermissions() {
+    return this.permissionService.live.subscribe((permissions) => {
+      this.accessibleRoutes = this.settingsRoutes
+        .filter((route) => route.path !== '')
+        .filter((route) =>
+          route.data?.permissions !== undefined
+            ? route.data?.permissions?.every((permission) =>
+                permissions.includes(permission)
+              )
+            : true
+        );
+
+      this.personalRoutes = this.accessibleRoutes.filter(
+        (route) => route.data?.page?.category === 'personal'
+      );
+      this.systemRoutes = this.accessibleRoutes.filter(
+        (route) => route.data?.page?.category === 'system'
+      );
+    });
   }
 }

frontend/src/app/routes/settings/settings.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
+import { ApiModule } from 'src/app/services/api/api.module';
 import { SettingsSidebarComponent } from './settings-sidebar/settings-sidebar.component';
 import { SettingsRoutingModule } from './settings.routing.module';
 
@@ -9,8 +10,8 @@ import { SettingsRoutingModule } from './settings.routing.module';
   declarations: [SettingsSidebarComponent],
   imports: [
     CommonModule,
-    SettingsRoutingModule,
-
+    SettingsRoutingModule.forRoot(),
+    ApiModule,
     MatListModule,
     MatIconModule,
   ],

frontend/src/app/routes/settings/settings.routing.module.ts

@@ -1,5 +1,7 @@
-import { NgModule } from '@angular/core';
+import { ModuleWithProviders, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { Permission } from 'picsur-shared/dist/dto/permissions';
+import { PermissionGuard } from 'src/app/guards/permission.guard';
 import { PRoutes } from 'src/app/models/picsur-routes';
 import { SettingsGeneralRouteModule } from './settings-general/settings-home.module';
 import { SettingsSidebarComponent } from './settings-sidebar/settings-sidebar.component';
@@ -7,15 +9,41 @@ import { SettingsSidebarComponent } from './settings-sidebar/settings-sidebar.co
 const SettingsRoutes: PRoutes = [
   {
     path: '',
+    redirectTo: 'general',
+  },
+  {
+    path: 'general',
     loadChildren: () => SettingsGeneralRouteModule,
+    canActivate: [PermissionGuard],
     data: {
-      sidebar: SettingsSidebarComponent,
+      permissions: [Permission.Settings],
+      page: {
+        title: 'General',
+        icon: 'settings',
+        category: 'personal',
+      },
     },
   },
+  {
+    path: 'sidebar',
+    component: SettingsSidebarComponent,
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forChild(SettingsRoutes)],
   exports: [RouterModule],
 })
-export class SettingsRoutingModule {}
+export class SettingsRoutingModule {
+  static forRoot(): ModuleWithProviders<SettingsRoutingModule> {
+    return {
+      ngModule: SettingsRoutingModule,
+      providers: [
+        {
+          provide: 'SettingsRoutes',
+          useFactory: () => SettingsRoutes,
+        },
+      ],
+    };
+  }
+}

frontend/src/app/routes/upload/upload.routing.module.ts

@@ -7,6 +7,7 @@ const routes: PRoutes = [
   {
     path: '',
     component: UploadComponent,
+    // No permission check here, as that is handled ui friendly in the component itself
   },
 ];