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