Update menu when server is selected #72

kdb-web/src/app/components/sidebar/sidebar.component.ts

@@ -1,8 +1,10 @@
 import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 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 { ServerService } from 'src/app/services/data/server.service';
 import { ThemeService } from 'src/app/services/theme/theme.service';
 
 @Component({
@@ -13,13 +15,16 @@ import { ThemeService } from 'src/app/services/theme/theme.service';
 export class SidebarComponent implements OnInit {
 
   isSidebarOpen: boolean = true;
-
   menuItems!: MenuItem[];
 
+  private serverId!: number;
+
   constructor(
     private authService: AuthService,
     private translateService: TranslateService,
-    private themeService: ThemeService
+    private themeService: ThemeService,
+    private route: ActivatedRoute,
+    private serverService: ServerService
   ) {
     this.themeService.isSidebarOpen$.subscribe(value => {
       this.isSidebarOpen = value;
@@ -29,6 +34,15 @@ export class SidebarComponent implements OnInit {
     this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
       this.setMenu();
     });
+
+    this.serverService.server$.subscribe(server => {
+      if (!server) {
+        return;
+      }
+
+      this.serverId = server.serverId;
+      this.setMenu();
+    });
   }
 
   ngOnInit(): void {
@@ -39,20 +53,32 @@ export class SidebarComponent implements OnInit {
     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' },
-
-        {
-          label: this.isSidebarOpen ? this.translateService.instant('sidebar.server') : '', icon: 'pi pi-server', items: [
-            { label: this.isSidebarOpen ? this.translateService.instant('sidebar.settings') : '', icon: 'pi pi-cog', routerLink: 'server/id/settings' },
-            { label: this.isSidebarOpen ? this.translateService.instant('sidebar.members') : '', icon: 'pi pi-user-edit', routerLink: 'server/id/members' },
-          ]
-        },
+        { label: this.isSidebarOpen ? this.translateService.instant('sidebar.dashboard') : '', icon: 'pi pi-th-large', routerLink: 'dashboard' }
       ];
 
-      if (!hasPermission) {
-        return;
+      if (this.serverId) {
+        this.addServerMenu();
       }
 
+      if (hasPermission) {
+        this.addAdminMenu();
+      }
+      this.menuItems = this.menuItems.slice();
+    });
+  }
+
+  addServerMenu() {
+    this.menuItems.push(
+      {
+        label: this.isSidebarOpen ? this.translateService.instant('sidebar.server') : '', icon: 'pi pi-server', items: [
+          { label: this.isSidebarOpen ? this.translateService.instant('sidebar.settings') : '', icon: 'pi pi-cog', routerLink: 'server/settings' },
+          { label: this.isSidebarOpen ? this.translateService.instant('sidebar.members') : '', icon: 'pi pi-users', routerLink: 'server/members' },
+        ]
+      }
+    );
+  }
+
+  addAdminMenu() {
     this.menuItems.push(
       {
         label: this.isSidebarOpen ? this.translateService.instant('sidebar.administration') : '', icon: 'pi pi-cog', items: [
@@ -61,8 +87,6 @@ export class SidebarComponent implements OnInit {
         ]
       },
     );
-      this.menuItems = this.menuItems.slice();
-    });
   }
 
 }

kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts

@@ -8,6 +8,7 @@ import { ServerDTO } from 'src/app/models/discord/server.dto';
 import { ServerSelectCriterion } from 'src/app/models/selection/server/server-select-criterion.dto';
 import { ConfirmationDialogService } from 'src/app/services/confirmation-dialog/confirmation-dialog.service';
 import { DataService } from 'src/app/services/data/data.service';
+import { ServerService } from 'src/app/services/data/server.service';
 import { SpinnerService } from 'src/app/services/spinner/spinner.service';
 import { ToastService } from 'src/app/services/toast/toast.service';
 
@@ -41,7 +42,8 @@ export class DashboardComponent implements OnInit {
     private confirmDialog: ConfirmationDialogService,
     private fb: FormBuilder,
     private translate: TranslateService,
-    private router: Router
+    private router: Router,
+    private serverService: ServerService
   ) { }
 
   ngOnInit(): void {
@@ -106,7 +108,8 @@ export class DashboardComponent implements OnInit {
   }
 
   selectServer(server: ServerDTO) {
-    this.router.navigate(['/server', server.serverId]);
+    this.serverService.server$.next(server);
+    this.router.navigate(['/server']);
   }
 
 }

kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.ts

@@ -1,8 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { catchError, throwError } from 'rxjs';
 import { ServerDTO } from 'src/app/models/discord/server.dto';
 import { DataService } from 'src/app/services/data/data.service';
+import { ServerService } from 'src/app/services/data/server.service';
 import { SpinnerService } from 'src/app/services/spinner/spinner.service';
 
 @Component({
@@ -19,27 +19,20 @@ export class ServerDashboardComponent implements OnInit {
     private route: ActivatedRoute,
     private router: Router,
     private data: DataService,
-    private spinner: SpinnerService
+    private spinner: SpinnerService,
+    private serverService: ServerService
   ) { }
 
   ngOnInit(): void {
-    this.route.params.subscribe(params => {
-      this.id = +params['id'];
-
-      if (!this.id) {
+    this.spinner.showSpinner();
+    if (!this.serverService.server$.value) {
+      this.spinner.hideSpinner();
       this.router.navigate(['/dashboard']);
       return;
     }
 
-      this.spinner.showSpinner();
-      this.data.getServerByID(this.id).pipe(catchError(err => {
+    this.server = this.serverService.server$.value;
     this.spinner.hideSpinner();
-        return throwError(() => err);
-      })).subscribe(server => {
-        this.server = server;
-        this.spinner.hideSpinner();
-      });
-    });
   }
 
 }

kdb-web/src/app/modules/view/server/server-routing.module.ts

@@ -3,8 +3,7 @@ import { RouterModule, Routes } from '@angular/router';
 import { ServerDashboardComponent } from './server-dashboard/server-dashboard.component';
 
 const routes: Routes = [
-  { path: '', component: ServerDashboardComponent },
-  { path: ':id', component: ServerDashboardComponent }
+  { path: '', component: ServerDashboardComponent }
 ];
 
 @NgModule({

kdb-web/src/app/services/data/server.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ServerService } from './server.service';
+
+describe('ServerService', () => {
+  let service: ServerService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ServerService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

kdb-web/src/app/services/data/server.service.ts

@@ -0,0 +1,23 @@
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { ServerDTO } from 'src/app/models/discord/server.dto';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ServerService {
+
+  private server!: ServerDTO;
+  server$ = new BehaviorSubject<ServerDTO | null>(null);
+
+  constructor() {
+    this.server$.subscribe(server => {
+      if (!server) {
+        return;
+      }
+      this.server = server;
+    });
+  }
+
+
+}