Improved sidebar #130
This commit is contained in:
parent
b15bcec20a
commit
f44f77d7e5
@ -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",
|
||||||
|
@ -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;
|
||||||
});
|
});
|
||||||
|
@ -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]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -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();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -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` }
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
"WebVersion": {
|
"WebVersion": {
|
||||||
"Major": "0",
|
"Major": "0",
|
||||||
"Minor": "3",
|
"Minor": "3",
|
||||||
"Micro": "dev78"
|
"Micro": "dev130"
|
||||||
},
|
},
|
||||||
"Themes": [
|
"Themes": [
|
||||||
{
|
{
|
||||||
|
@ -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",
|
||||||
|
Loading…
Reference in New Issue
Block a user