Improved sidebar handling & added minecraftId to profile #130

kdb-web/src/app/models/graphql/queries.model.ts

@@ -87,6 +87,7 @@ export class Queries {
         name
         xp
         ontime
+        minecraftId
         level {
           id
           name

kdb-web/src/app/modules/view/server/profile/profile.component.html

@@ -41,6 +41,13 @@
       </div>
     </div>
 
+    <div class="content-row">
+      <div class="content-column">
+        <div class="content-data-name">{{'view.server.profile.minecraft_id' | translate}}:</div>
+        <div class="content-data-value">{{user.minecraftId}}</div>
+      </div>
+    </div>
+
     <div class="content-row">
       <div class="content-column">
         <div class="content-data-name">{{'view.server.profile.level' | translate}}:</div>
@@ -81,6 +88,11 @@
           <div class="content-data-value">{{join.time}} {{'general.hours' | translate}}</div>
         </div>
 
+        <div class="content-column">
+          <div class="content-data-name">{{'view.server.profile.joined_voice_channel.channel' | translate}}:</div>
+          <div class="content-data-value">{{join.channelName}}</div>
+        </div>
+
         <div class="content-column">
           <div class="content-data-name">{{'view.server.profile.joined_voice_channel.joined_at' | translate}}:</div>
           <div class="content-data-value">{{join.joinedOn | date:'dd.MM.yyyy HH:mm:ss'}}</div>

kdb-web/src/app/services/sidebar/sidebar.service.ts

@@ -18,6 +18,15 @@ export class SidebarService {
   menuItems$ = new BehaviorSubject<MenuItem[]>(new Array<MenuItem>());
   server$ = new BehaviorSubject<Server | null>(null);
 
+  dashboard!: MenuItem;
+  serverDashboard!: MenuItem;
+  serverProfile!: MenuItem;
+  serverMembers!: MenuItem;
+  serverMenu!: MenuItem;
+  adminConfig!: MenuItem;
+  adminUsers!: MenuItem;
+  adminMenu!: MenuItem;
+
   constructor(
     private themeService: ThemeService,
     private authService: AuthService,
@@ -33,10 +42,6 @@ export class SidebarService {
       this.setMenu();
     });
 
-    this.server$.subscribe(_ => {
-      this.setMenu();
-    });
-
     this.router.events.subscribe(event => {
       if (!(event instanceof NavigationEnd)) {
         return;
@@ -50,55 +55,75 @@ export class SidebarService {
   setServer(server: Server | null) {
     if (server?.id != this.server$.value?.id) {
       this.server$.next(server);
+      if (server) {
+        this.setMenu(true);
+      } else {
+        this.setMenu(false);
+      }
     }
   }
 
-  setMenu() {
-    this.authService.hasUserPermission(AuthRoles.Admin).then(async hasPermission => {
-      let menuItems: MenuItem[] = [
-        { label: this.isSidebarOpen ? this.translateService.instant("sidebar.dashboard") : "", icon: "pi pi-th-large", routerLink: "dashboard" }
-      ];
+  async buildMenu(user: UserDTO | null, hasPermission: boolean) {
+    this.dashboard = { label: this.isSidebarOpen ? this.translateService.instant("sidebar.dashboard") : "", icon: "pi pi-th-large", routerLink: "dashboard" };
+    this.serverDashboard = {
+      label: this.isSidebarOpen ? this.translateService.instant("sidebar.server.dashboard") : "",
+      icon: "pi pi-th-large",
+      routerLink: `server/${this.server$.value?.id}`
+    };
+    this.serverProfile = {
+      label: this.isSidebarOpen ? this.translateService.instant("sidebar.server.profile") : "",
+      icon: "pi pi-user",
+      routerLink: `server/${this.server$.value?.id}/members/${user?.id}`
+    };
+    this.serverMembers = {
+      label: this.isSidebarOpen ? this.translateService.instant("sidebar.server.members") : "",
+      icon: "pi pi-users",
+      visible: true,
+      routerLink: `server/${this.server$.value?.id}/members`
+    };
+    this.serverMenu = {
+      label: this.isSidebarOpen ? this.server$.value?.name : "",
+      icon: "pi pi-server",
+      visible: false,
+      expanded: true,
+      items: [this.serverDashboard, this.serverProfile, this.serverMembers]
+    };
+    this.adminConfig = { label: this.isSidebarOpen ? this.translateService.instant("sidebar.config") : "", icon: "pi pi-cog", routerLink: "/admin/settings" };
+    this.adminUsers = {
+      label: this.isSidebarOpen ? this.translateService.instant("sidebar.auth_user_list") : "",
+      icon: "pi pi-user-edit",
+      routerLink: "/admin/users"
+    };
+    this.adminMenu = {
+      label: this.isSidebarOpen ? this.translateService.instant("sidebar.administration") : "",
+      icon: "pi pi-cog",
+      visible: hasPermission,
+      expanded: true,
+      items: [this.adminConfig, this.adminUsers]
+    };
+  }
 
+  setMenu(build: boolean = false) {
+    this.authService.hasUserPermission(AuthRoles.Admin).then(async hasPermission => {
       let authUser = await this.authService.getLoggedInUser();
       let user: UserDTO | null = authUser?.users?.find(u => u.server == this.server$.value?.id) ?? null;
-      const serverMenu = {
-        label: this.isSidebarOpen ? this.server$.value?.name : "", icon: "pi pi-server", items: [
-          { 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}/members/${user?.id}`
-          }
-          // { label: this.isSidebarOpen ? this.translateService.instant("sidebar.members") : "", icon: "pi pi-users", routerLink: "server/members" }
-        ]
-      };
+
+      if (build || this.menuItems$.value.length == 0) {
+        await this.buildMenu(user, hasPermission);
+      }
 
       if (this.server$.value) {
-        if (user?.isAdmin) {
-          serverMenu.items.push(
-            {
-              label: this.isSidebarOpen ? this.translateService.instant("sidebar.server.members") : "",
-              icon: "pi pi-users",
-              routerLink: `server/${this.server$.value?.id}/members`
-            }
-          );
-        }
-
-        menuItems.push(serverMenu);
-      } else if (menuItems.find(x => x.icon == "pi pi-server")) {
-        menuItems.splice(menuItems.indexOf(serverMenu), 1);
+        this.serverMenu.visible = true;
+        this.serverMembers.visible = !!user?.isAdmin;
+      } else {
+        this.serverMenu.visible = false;
       }
 
-      if (hasPermission) {
-        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" }
-            ]
-          }
-        );
-      }
+      let menuItems: MenuItem[] = [
+        this.dashboard,
+        this.serverMenu,
+        this.adminMenu
+      ];
       this.menuItems$.next(menuItems);
     });
   }

kdb-web/src/assets/i18n/de.json

@@ -167,11 +167,13 @@
         "name": "Name",
         "xp": "XP",
         "ontime": "Ontime",
+        "minecraft_id": "Minecraft Id",
         "level": "Level",
         "left_server": "Hat Server verlassen",
         "joined_voice_channel": {
           "header": "Sprachkanal-beitritte",
           "time": "Zeit",
+          "channel": "Sprachkanal",
           "joined_at": "Beigetreten am",
           "leaved_at": "Verlassen am"
         },