From 1a3126dfc5b181658489fb35476c1aea52bfd7ec Mon Sep 17 00:00:00 2001 From: Sven Heidemann Date: Sun, 16 Oct 2022 12:57:27 +0200 Subject: [PATCH] Removed themeService from templates #70 --- kdb-web/src/app/app.component.html | 8 +-- kdb-web/src/app/app.component.ts | 19 +++++- .../app/components/header/header.component.ts | 5 +- .../components/sidebar/sidebar.component.ts | 63 ++++++++++--------- .../modules/shared/guards/auth/auth.guard.ts | 11 ++-- kdb-web/src/app/services/auth/auth.service.ts | 14 +++-- .../src/app/services/theme/theme.service.ts | 27 +++++--- 7 files changed, 91 insertions(+), 56 deletions(-) diff --git a/kdb-web/src/app/app.component.html b/kdb-web/src/app/app.component.html index a9daaf7237..94cdd058a1 100644 --- a/kdb-web/src/app/app.component.html +++ b/kdb-web/src/app/app.component.html @@ -1,11 +1,11 @@ -
+
- +
-
- +
+
diff --git a/kdb-web/src/app/app.component.ts b/kdb-web/src/app/app.component.ts index 6d8046ff17..4bf3415267 100644 --- a/kdb-web/src/app/app.component.ts +++ b/kdb-web/src/app/app.component.ts @@ -10,15 +10,32 @@ import { ThemeService } from './services/theme/theme.service'; }) export class AppComponent implements OnInit { + themeName!: string; + sidebarWidth!: string; + + isLoggedIn: boolean = false; + constructor( public authService: AuthService, - public themeService: ThemeService, + private themeService: ThemeService, private socket: SocketService ) { } ngOnInit(): void { + this.themeService.sidebarWidth$.subscribe(value => { + this.sidebarWidth = value; + }); + this.themeService.themeName$.subscribe(value => { + this.themeName = value; + }); + this.socket.startSocket(); this.themeService.loadTheme(); this.themeService.loadMenu(); } + + + setSideWidth($event: any): void { + this.themeService.setSideWidth($event); + } } diff --git a/kdb-web/src/app/components/header/header.component.ts b/kdb-web/src/app/components/header/header.component.ts index 6d4ad0eeeb..ff71d92fca 100644 --- a/kdb-web/src/app/components/header/header.component.ts +++ b/kdb-web/src/app/components/header/header.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, OnInit, Output } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { LangChangeEvent, TranslateService } from '@ngx-translate/core'; import { MenuItem, PrimeNGConfig } from 'primeng/api'; @@ -14,8 +14,6 @@ import { ThemeService } from 'src/app/services/theme/theme.service'; styleUrls: ['./header.component.scss'] }) export class HeaderComponent implements OnInit { - @Output() isSidebarFullWidth: EventEmitter = new EventEmitter(this.themeService.isSidebarOpen); - langList: MenuItem[] = []; themeList: MenuItem[] = []; userMenuList!: MenuItem[]; @@ -112,7 +110,6 @@ export class HeaderComponent implements OnInit { toggleMenu(): void { this.themeService.setIsMenuOpen(!this.themeService.isSidebarOpen); - this.isSidebarFullWidth.emit(this.themeService.isSidebarOpen); } changeTheme(name: string): void { diff --git a/kdb-web/src/app/components/sidebar/sidebar.component.ts b/kdb-web/src/app/components/sidebar/sidebar.component.ts index a87eb35f74..ddc840eac4 100644 --- a/kdb-web/src/app/components/sidebar/sidebar.component.ts +++ b/kdb-web/src/app/components/sidebar/sidebar.component.ts @@ -3,50 +3,57 @@ import { LangChangeEvent, TranslateService } from '@ngx-translate/core'; import { MenuItem } from 'primeng/api'; import { AuthRoles } from 'src/app/models/auth/auth-roles.enum'; import { AuthService } from 'src/app/services/auth/auth.service'; +import { ThemeService } from 'src/app/services/theme/theme.service'; @Component({ selector: 'app-sidebar', templateUrl: './sidebar.component.html', styleUrls: ['./sidebar.component.scss'] }) -export class SidebarComponent implements OnInit, OnChanges { +export class SidebarComponent implements OnInit { - @Input() isSidebarOpen!: boolean; + isSidebarOpen: boolean = true; menuItems!: MenuItem[]; constructor( private authService: AuthService, - private translateService: TranslateService + private translateService: TranslateService, + private themeService: ThemeService ) { } ngOnInit(): void { - this.translateService.onLangChange.subscribe(async (event: LangChangeEvent) => { - await this.setMenu(this.isSidebarOpen); + this.themeService.isSidebarOpen$.subscribe(value => { + this.isSidebarOpen = value; + this.setMenu(); + }); + + + this.translateService.onLangChange.subscribe((event: LangChangeEvent) => { + this.setMenu(); + }); + this.setMenu(); + } + + setMenu() { + + this.authService.hasUserPermission(AuthRoles.Admin).then(hasPermission => { + this.menuItems = []; + this.menuItems = [ + { label: this.isSidebarOpen ? this.translateService.instant('sidebar.dashboard') : '', icon: 'pi pi-th-large', routerLink: 'dashboard' }, + ]; + + if (!hasPermission) { + return; + } + + this.menuItems.push( + { separator: true }, + { label: this.isSidebarOpen ? this.translateService.instant('sidebar.config') : '', icon: 'pi pi-cog', routerLink: '/admin/settings' }, + { label: this.isSidebarOpen ? this.translateService.instant('sidebar.auth_user_list') : '', icon: 'pi pi-user-edit', routerLink: '/admin/users' }, + ); + this.menuItems = this.menuItems.slice(); }); } - async setMenu(isSidebarOpen: boolean) { - this.menuItems = []; - this.menuItems = [ - { label: isSidebarOpen ? this.translateService.instant('sidebar.dashboard') : '', icon: 'pi pi-th-large', routerLink: 'dashboard' }, - ]; - - if (await this.authService.hasUserPermission(AuthRoles.Admin)) { - this.menuItems.push( - { separator: true }, - { label: isSidebarOpen ? this.translateService.instant('sidebar.config') : '', icon: 'pi pi-cog', routerLink: '/admin/settings' }, - { label: isSidebarOpen ? this.translateService.instant('sidebar.auth_user_list') : '', icon: 'pi pi-user-edit', routerLink: '/admin/users' }, - ); - this.menuItems = this.menuItems.slice(); - } - } - - async ngOnChanges(changes: SimpleChanges): Promise { - if (!changes) - return; - - await this.setMenu(changes['isSidebarOpen'].currentValue); - } - } diff --git a/kdb-web/src/app/modules/shared/guards/auth/auth.guard.ts b/kdb-web/src/app/modules/shared/guards/auth/auth.guard.ts index 694dc644a1..deb1be4028 100644 --- a/kdb-web/src/app/modules/shared/guards/auth/auth.guard.ts +++ b/kdb-web/src/app/modules/shared/guards/auth/auth.guard.ts @@ -28,10 +28,13 @@ export class AuthGuard implements CanActivate { const role = route.data['role']; if (role) { - if (!await this.authService.hasUserPermission(role)) { - this.router.navigate(['/dashboard']); - return false; - } + this.authService.hasUserPermission(role).then(hasPermission => { + if (!hasPermission) { + this.router.navigate(['/dashboard']); + return false; + } + return true; + }); } return true; } diff --git a/kdb-web/src/app/services/auth/auth.service.ts b/kdb-web/src/app/services/auth/auth.service.ts index 1608c3f485..5c007891a7 100644 --- a/kdb-web/src/app/services/auth/auth.service.ts +++ b/kdb-web/src/app/services/auth/auth.service.ts @@ -229,12 +229,14 @@ export class AuthService { return false; } - async hasUserPermission(role: AuthRoles): Promise { - if (!role || !await this.isUserLoggedInAsync()) { - return false; - } - const token = this.getDecodedToken(); - return AuthRoles[token['role']] === AuthRoles[role]; + hasUserPermission(role: AuthRoles): Promise { + return this.isUserLoggedInAsync().then(isLoggedIn => { + if (!role || !isLoggedIn) { + return false; + } + const token = this.getDecodedToken(); + return AuthRoles[token['role']] === AuthRoles[role]; + }); } getEMailFromDecodedToken(token: { [key: string]: any }): string | null { diff --git a/kdb-web/src/app/services/theme/theme.service.ts b/kdb-web/src/app/services/theme/theme.service.ts index f83a4510d1..0d3dae59fb 100644 --- a/kdb-web/src/app/services/theme/theme.service.ts +++ b/kdb-web/src/app/services/theme/theme.service.ts @@ -1,4 +1,5 @@ import { Injectable } from '@angular/core'; +import { LangChangeEvent, TranslateService } from '@ngx-translate/core'; import { Subject } from 'rxjs'; import { Themes } from 'src/app/models/view/themes.enum'; import { AuthService } from '../auth/auth.service'; @@ -8,23 +9,31 @@ import { AuthService } from '../auth/auth.service'; }) export class ThemeService { - themeName: string | null; + themeName: string = Themes.Default; sidebarWidth = '150px'; isSidebarOpen = false; hasLangChanged = false; + themeName$ = new Subject(); isSidebarOpen$ = new Subject(); + sidebarWidth$ = new Subject(); constructor( private authService: AuthService ) { - this.isSidebarOpen$.subscribe(isSidebarOpen => { - this.isSidebarOpen = isSidebarOpen + this.themeName$.subscribe(themeName => { + this.themeName = themeName; }); + this.isSidebarOpen$.subscribe(isSidebarOpen => { + this.isSidebarOpen = isSidebarOpen; + }); + this.sidebarWidth$.subscribe(sidebarWidth => { + this.sidebarWidth = sidebarWidth; + }); + this.loadTheme(); this.loadMenu(); - this.themeName = null; } loadTheme(): void { @@ -53,7 +62,7 @@ export class ThemeService { this.authService.isUserLoggedInAsync().then(result => { if (!result) { localStorage.setItem(`default_themeName`, Themes.Default); - this.themeName = Themes.Default; + this.themeName$.next(Themes.Default); } const token = this.authService.getDecodedToken(); @@ -62,7 +71,7 @@ export class ThemeService { localStorage.setItem(`${mail}_themeName`, name); } localStorage.setItem(`default_themeName`, name); - this.themeName = name; + this.themeName$.next(name); }); } @@ -97,8 +106,8 @@ export class ThemeService { this.setSideWidth(isMenuOpen); } - setSideWidth($event: any): void { - this.sidebarWidth = $event ? '150px' : '50px'; - this.isSidebarOpen$.next($event) + setSideWidth(isSidebarOpen: boolean): void { + this.sidebarWidth$.next(isSidebarOpen ? '150px' : '50px'); + this.isSidebarOpen$.next(isSidebarOpen); } }