From 460c699481b304dcb1154eb62a2b29072ddc9109 Mon Sep 17 00:00:00 2001 From: rubikscraft Date: Thu, 17 Mar 2022 15:35:24 +0100 Subject: [PATCH] change sidebar --- frontend/src/app/app.component.scss | 1 + frontend/src/app/models/picsur-routes.ts | 10 ++- .../settings-sidebar.component.html | 14 ++-- .../settings-sidebar.component.ts | 69 +++++++++++-------- .../app/routes/settings/settings.module.ts | 5 +- .../settings/settings.routing.module.ts | 34 ++++++++- .../routes/upload/upload.routing.module.ts | 1 + 7 files changed, 93 insertions(+), 41 deletions(-) diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss index d465ff6..6e0e873 100644 --- a/frontend/src/app/app.component.scss +++ b/frontend/src/app/app.component.scss @@ -10,6 +10,7 @@ .sidenav-nav { margin-top: 64px; + min-width: 10rem; } .sidenav-content { diff --git a/frontend/src/app/models/picsur-routes.ts b/frontend/src/app/models/picsur-routes.ts index bc32281..264d48a 100644 --- a/frontend/src/app/models/picsur-routes.ts +++ b/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; + sidebar?: string; }; export type PRoute = Route & { diff --git a/frontend/src/app/routes/settings/settings-sidebar/settings-sidebar.component.html b/frontend/src/app/routes/settings/settings-sidebar/settings-sidebar.component.html index 0d426f7..8c27d21 100644 --- a/frontend/src/app/routes/settings/settings-sidebar/settings-sidebar.component.html +++ b/frontend/src/app/routes/settings/settings-sidebar/settings-sidebar.component.html @@ -1,14 +1,16 @@ + Big Peepee Personal - {{ route.icon }} - {{ route.name }} + {{ route.data?.page?.icon }} + {{ route.data?.page?.title }} @@ -20,11 +22,11 @@ - {{ route.icon }} - {{ route.name }} + {{ route.data?.page?.icon }} + {{ route.data?.page?.title }} diff --git a/frontend/src/app/routes/settings/settings-sidebar/settings-sidebar.component.ts b/frontend/src/app/routes/settings/settings-sidebar/settings-sidebar.component.ts index 6e9fdfb..4843daa 100644 --- a/frontend/src/app/routes/settings/settings-sidebar/settings-sidebar.component.ts +++ b/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' + ); + }); } } diff --git a/frontend/src/app/routes/settings/settings.module.ts b/frontend/src/app/routes/settings/settings.module.ts index 7757de8..8f0df50 100644 --- a/frontend/src/app/routes/settings/settings.module.ts +++ b/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, ], diff --git a/frontend/src/app/routes/settings/settings.routing.module.ts b/frontend/src/app/routes/settings/settings.routing.module.ts index bc03de7..ec5f816 100644 --- a/frontend/src/app/routes/settings/settings.routing.module.ts +++ b/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 { + return { + ngModule: SettingsRoutingModule, + providers: [ + { + provide: 'SettingsRoutes', + useFactory: () => SettingsRoutes, + }, + ], + }; + } +} diff --git a/frontend/src/app/routes/upload/upload.routing.module.ts b/frontend/src/app/routes/upload/upload.routing.module.ts index d4e2879..e1e17d0 100644 --- a/frontend/src/app/routes/upload/upload.routing.module.ts +++ b/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 }, ];