Improved sidebar #130

This commit is contained in:
Sven Heidemann 2023-02-17 13:30:28 +01:00
parent b15bcec20a
commit f44f77d7e5
8 changed files with 28 additions and 24 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "kdb-web", "name": "kdb-web",
"version": "0.3.dev78", "version": "0.3.dev130",
"scripts": { "scripts": {
"ng": "ng", "ng": "ng",
"update-version": "ts-node-esm update-version.ts", "update-version": "ts-node-esm update-version.ts",

View File

@ -1,5 +1,5 @@
import { Component, OnInit } from "@angular/core"; import { Component, OnInit } from "@angular/core";
import { LangChangeEvent, TranslateService } from "@ngx-translate/core"; import { TranslateService } from "@ngx-translate/core";
import { MenuItem } from "primeng/api"; import { MenuItem } from "primeng/api";
import { AuthService } from "src/app/services/auth/auth.service"; import { AuthService } from "src/app/services/auth/auth.service";
import { ThemeService } from "src/app/services/theme/theme.service"; import { ThemeService } from "src/app/services/theme/theme.service";
@ -21,15 +21,6 @@ export class SidebarComponent implements OnInit {
private themeService: ThemeService, private themeService: ThemeService,
private sidebar: SidebarService private sidebar: SidebarService
) { ) {
this.translateService.onLangChange.subscribe((event: LangChangeEvent) => {
this.sidebar.setMenu();
});
this.themeService.isSidebarOpen$.subscribe(value => {
this.isSidebarOpen = value;
this.sidebar.setMenu();
});
this.sidebar.menuItems$.subscribe(value => { this.sidebar.menuItems$.subscribe(value => {
this.menuItems = value; this.menuItems = value;
}); });

View File

@ -122,7 +122,7 @@ export class DashboardComponent implements OnInit {
} }
selectServer(server: Server) { selectServer(server: Server) {
this.sidebar.server$.next(server); this.sidebar.setServer(server);
this.router.navigate(["/server", server.id]); this.router.navigate(["/server", server.id]);
} }

View File

@ -38,7 +38,7 @@ export class ProfileComponent implements OnInit {
return data.servers.length > 0 ? data.servers[0] : null; return data.servers.length > 0 ? data.servers[0] : null;
} }
).subscribe(server => { ).subscribe(server => {
this.sidebar.server$.next(server); this.sidebar.setServer(server);
this.spinner.hideSpinner(); this.spinner.hideSpinner();
}); });
} }

View File

@ -42,7 +42,7 @@ export class ServerDashboardComponent implements OnInit {
} }
).subscribe(server => { ).subscribe(server => {
this.server = server; this.server = server;
this.sidebar.server$.next(server); this.sidebar.setServer(server);
this.spinner.hideSpinner(); this.spinner.hideSpinner();
}); });
} }

View File

@ -29,8 +29,11 @@ export class SidebarService {
this.setMenu(); this.setMenu();
}); });
this.translateService.onLangChange.subscribe(_ => {
this.setMenu();
});
this.server$.subscribe(value => { this.server$.subscribe(_ => {
this.setMenu(); this.setMenu();
}); });
@ -38,13 +41,18 @@ export class SidebarService {
if (!(event instanceof NavigationEnd)) { if (!(event instanceof NavigationEnd)) {
return; return;
} }
if (!event.url.startsWith("/server/") && this.server$.value) {
if (!event.url.startsWith('/server/')) { this.setServer(null);
this.server$.next(null);
} }
}); });
} }
setServer(server: Server | null) {
if (server?.id != this.server$.value?.id) {
this.server$.next(server);
}
}
setMenu() { setMenu() {
this.authService.hasUserPermission(AuthRoles.Admin).then(async hasPermission => { this.authService.hasUserPermission(AuthRoles.Admin).then(async hasPermission => {
let menuItems: MenuItem[] = [ let menuItems: MenuItem[] = [
@ -53,7 +61,8 @@ export class SidebarService {
const serverMenu = { const serverMenu = {
label: this.isSidebarOpen ? this.server$.value?.name : "", icon: "pi pi-server", items: [ label: this.isSidebarOpen ? this.server$.value?.name : "", icon: "pi pi-server", items: [
{ label: this.isSidebarOpen ? this.translateService.instant("sidebar.profile") : "", icon: "pi pi-user", routerLink: `server/${this.server$.value?.id}/profile` }, { label: this.isSidebarOpen ? this.translateService.instant("sidebar.server.dashboard") : "", icon: "pi pi-th-large", routerLink: `server/${this.server$.value?.id}` },
{ label: this.isSidebarOpen ? this.translateService.instant("sidebar.server.profile") : "", icon: "pi pi-user", routerLink: `server/${this.server$.value?.id}/profile` }
// { label: this.isSidebarOpen ? this.translateService.instant("sidebar.members") : "", icon: "pi pi-users", routerLink: "server/members" } // { label: this.isSidebarOpen ? this.translateService.instant("sidebar.members") : "", icon: "pi pi-users", routerLink: "server/members" }
] ]
}; };
@ -63,7 +72,7 @@ export class SidebarService {
if (user?.isAdmin) { if (user?.isAdmin) {
serverMenu.items.push( serverMenu.items.push(
{ label: this.isSidebarOpen ? this.translateService.instant("sidebar.members") : "", icon: "pi pi-users", routerLink: `server/${this.server$.value?.id}/members` } { label: this.isSidebarOpen ? this.translateService.instant("sidebar.server.members") : "", icon: "pi pi-users", routerLink: `server/${this.server$.value?.id}/members` }
); );
} }

View File

@ -3,7 +3,7 @@
"WebVersion": { "WebVersion": {
"Major": "0", "Major": "0",
"Minor": "3", "Minor": "3",
"Micro": "dev78" "Micro": "dev130"
}, },
"Themes": [ "Themes": [
{ {

View File

@ -7,7 +7,11 @@
}, },
"sidebar": { "sidebar": {
"dashboard": "Dashboard", "dashboard": "Dashboard",
"server": "Server", "server": {
"dashboard": "Dashboard",
"profile": "Dein Profil",
"members": "Mitglieder"
},
"server_empty": "Kein Server ausgewählt", "server_empty": "Kein Server ausgewählt",
"members": "Mitglieder", "members": "Mitglieder",
"settings": "Einstellungen", "settings": "Einstellungen",