From 7760ee57254c8a1f409ab01d40509da3ea5e424c Mon Sep 17 00:00:00 2001 From: Sven Heidemann Date: Tue, 18 Oct 2022 16:23:40 +0200 Subject: [PATCH] Update menu when server is selected #72 --- .../components/sidebar/sidebar.component.ts | 64 +++++++++++++------ .../dashboard/dashboard.component.ts | 7 +- .../server-dashboard.component.ts | 29 ++++----- .../view/server/server-routing.module.ts | 3 +- .../app/services/data/server.service.spec.ts | 16 +++++ .../src/app/services/data/server.service.ts | 23 +++++++ 6 files changed, 100 insertions(+), 42 deletions(-) create mode 100644 kdb-web/src/app/services/data/server.service.spec.ts create mode 100644 kdb-web/src/app/services/data/server.service.ts diff --git a/kdb-web/src/app/components/sidebar/sidebar.component.ts b/kdb-web/src/app/components/sidebar/sidebar.component.ts index f7815fbdcb..d43b42e522 100644 --- a/kdb-web/src/app/components/sidebar/sidebar.component.ts +++ b/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,30 +53,40 @@ 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(); } - this.menuItems.push( - { - label: this.isSidebarOpen ? this.translateService.instant('sidebar.administration') : '', icon: 'pi pi-cog', items: [ - { 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' }, - ] - }, - ); + 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: [ + { 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' }, + ] + }, + ); + } + } diff --git a/kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts b/kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts index d149298e49..046e00c618 100644 --- a/kdb-web/src/app/modules/view/dashboard/components/dashboard/dashboard.component.ts +++ b/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']); } } diff --git a/kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.ts b/kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.ts index 540ac8b639..158c771167 100644 --- a/kdb-web/src/app/modules/view/server/server-dashboard/server-dashboard.component.ts +++ b/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']; + this.spinner.showSpinner(); + if (!this.serverService.server$.value) { + this.spinner.hideSpinner(); + this.router.navigate(['/dashboard']); + return; + } - if (!this.id) { - this.router.navigate(['/dashboard']); - return; - } - - this.spinner.showSpinner(); - this.data.getServerByID(this.id).pipe(catchError(err => { - this.spinner.hideSpinner(); - return throwError(() => err); - })).subscribe(server => { - this.server = server; - this.spinner.hideSpinner(); - }); - }); + this.server = this.serverService.server$.value; + this.spinner.hideSpinner(); } } diff --git a/kdb-web/src/app/modules/view/server/server-routing.module.ts b/kdb-web/src/app/modules/view/server/server-routing.module.ts index 063beab12c..7b9f3ee70d 100644 --- a/kdb-web/src/app/modules/view/server/server-routing.module.ts +++ b/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({ diff --git a/kdb-web/src/app/services/data/server.service.spec.ts b/kdb-web/src/app/services/data/server.service.spec.ts new file mode 100644 index 0000000000..906c1601bb --- /dev/null +++ b/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(); + }); +}); diff --git a/kdb-web/src/app/services/data/server.service.ts b/kdb-web/src/app/services/data/server.service.ts new file mode 100644 index 0000000000..05d8673d46 --- /dev/null +++ b/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(null); + + constructor() { + this.server$.subscribe(server => { + if (!server) { + return; + } + this.server = server; + }); + } + + +}