Removed themeService from templates #70

kdb-web/src/app/app.component.html

@@ -1,11 +1,11 @@
-<main [class]="themeService.themeName">
+<main [class]="themeName">
   <ng-container *ngIf="authService.isLoggedIn; else login">
-    <app-header (isSidebarFullWidth)="themeService.setSideWidth($event)"></app-header>
+    <app-header></app-header>
 
     <section class="app">
       <div>
-        <section class="sidebar" [style.width]="themeService.sidebarWidth">
-          <app-sidebar [isSidebarOpen]="themeService.isSidebarOpen"></app-sidebar>
+        <section class="sidebar" [style.width]="sidebarWidth">
+          <app-sidebar></app-sidebar>
         </section>
       </div>
       <div class="component-wrapper">

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);
+  }
 }

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<boolean> = new EventEmitter<boolean>(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 {

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<void> {
-    if (!changes)
-      return;
-
-    await this.setMenu(changes['isSidebarOpen'].currentValue);
-  }
-
 }

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;
   }

kdb-web/src/app/services/auth/auth.service.ts

@@ -229,12 +229,14 @@ export class AuthService {
     return false;
   }
 
-  async hasUserPermission(role: AuthRoles): Promise<boolean> {
-    if (!role || !await this.isUserLoggedInAsync()) {
-      return false;
-    }
-    const token = this.getDecodedToken();
-    return AuthRoles[token['role']] === AuthRoles[role];
+  hasUserPermission(role: AuthRoles): Promise<boolean> {
+    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 {

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<string>();
   isSidebarOpen$ = new Subject<boolean>();
+  sidebarWidth$ = new Subject<string>();
 
   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);
   }
 }