Improved members data loading #300

kdb-web/package.json

@@ -1,6 +1,6 @@
 {
     "name": "kdb-web",
-    "version": "1.0.5",
+    "version": "1.0.dev307",
     "scripts": {
         "ng": "ng",
         "update-version": "ts-node-esm update-version.ts",

kdb-web/src/app/models/data/user.model.ts

@@ -23,17 +23,6 @@ export interface User extends DataWithHistory {
 
   userJoinedGameServerCount?: number;
   userJoinedGameServers?: UserJoinedGameServer[];
-
-  // history?: UserHistory[];
-}
-
-export interface UserHistory extends History {
-  id?: number;
-  discordId?: number;
-  xp?: number;
-  level?: number;
-  server?: number;
-  leftServer?: boolean;
 }
 
 export interface UserFilter {

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

@@ -94,6 +94,29 @@ export class Queries {
             name
           }
           leftServer
+
+          createdAt
+          modifiedAt
+        }
+      }
+    }
+  `;
+
+  static userProfile = `
+    query UserProfile($serverId: ID, $userId: ID, $page: Page, $sort: Sort) {
+      servers(filter: {id: $serverId}) {
+        userCount
+        users(filter: {id: $userId}, page: $page, sort: $sort) {
+          id
+          discordId
+          name
+          xp
+          ontime
+          level {
+            id
+            name
+          }
+          leftServer
           server {
             id
             name
@@ -124,9 +147,17 @@ export class Queries {
             joinedOn
             leavedOn
           }
+        }
+      }
+    }
+  `;
 
-          createdAt
+  static userQueryWithHistory = `
-          modifiedAt
+    query UsersWithHistory($serverId: ID, $userId: ID) {
+      servers(filter: {id: $serverId}) {
+        userCount
+        users(filter: {id: $userId}) {
+          id
 
           history {
             id

kdb-web/src/app/modules/shared/components/history-btn/history-btn.component.ts

@@ -1,5 +1,16 @@
 import { Component, Input, OnInit } from "@angular/core";
 import { History } from "../../../../models/data/data.model";
+import { UserListQuery } from "../../../../models/graphql/query.model";
+import { Server } from "../../../../models/data/server.model";
+import { DataService } from "../../../../services/data/data.service";
+import { AuthService } from "../../../../services/auth/auth.service";
+import { SpinnerService } from "../../../../services/spinner/spinner.service";
+import { ToastService } from "../../../../services/toast/toast.service";
+import { ConfirmationDialogService } from "../../../../services/confirmation-dialog/confirmation-dialog.service";
+import { FormBuilder } from "@angular/forms";
+import { TranslateService } from "@ngx-translate/core";
+import { ActivatedRoute } from "@angular/router";
+import { SidebarService } from "../../../../services/sidebar/sidebar.service";
 
 @Component({
   selector: "app-history-btn",
@@ -8,19 +19,46 @@ import { History } from "../../../../models/data/data.model";
 })
 export class HistoryBtnComponent implements OnInit {
 
-  @Input() history: History[] = [];
+  @Input() id: number = 0;
+  @Input() query: string = "";
   @Input() translationKey: string = "";
 
-  public showSidebar: boolean = false;
+  public history: History[] = [];
 
-  public constructor() {
+  public showSidebar: boolean = false;
+  private server: Server = {};
+
+  public constructor(
+    private authService: AuthService,
+    private spinner: SpinnerService,
+    private toastService: ToastService,
+    private confirmDialog: ConfirmationDialogService,
+    private fb: FormBuilder,
+    private translate: TranslateService,
+    private data: DataService,
+    private route: ActivatedRoute,
+    private sidebar: SidebarService
+  ) {
   }
 
   public ngOnInit(): void {
+    this.server = this.sidebar.server$.value ?? {};
   }
 
   public openHistory(): void {
     this.showSidebar = true;
+    this.data.query<UserListQuery>(this.query, {
+        serverId: this.server.id, userId: this.id
+      },
+      (x: { servers: Server[] }) => {
+        return x.servers[0];
+      }
+    ).subscribe(data => {
+      this.history = data.users[0].history ?? [];
+      this.spinner.hideSpinner();
+    });
+
+
     let oldHistory: Partial<History> = {};
     for (const history of this.history) {
       const attributes = Object.keys(history).map((key) => {

kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html

@@ -160,7 +160,7 @@
 
           <td>
             <div class="btn-wrapper">
-              <app-history-btn *ngIf="!isEditingNew" [history] ="autoRoleRule.history" translationKey="view.server.auto_roles.rules.header"></app-history-btn>
+              <app-history-btn *ngIf="!isEditingNew" [id] ="autoRoleRule.history" translationKey="view.server.auto_roles.rules.header"></app-history-btn>
               <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil" (click)="onRowEditInit(dt, autoRoleRule, ri)"></button>
               <button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"
                       (click)="deleteAutoRoleRule(autoRoleRule)"></button>

kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html

@@ -193,7 +193,7 @@
             <div class="btn-wrapper">
 <!--              <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"-->
 <!--                      (click)="onRowEditInit(dt, autoRole, ri)"></button>-->
-              <app-history-btn *ngIf="!isEditingNew" [history] ="autoRole.history" translationKey="view.server.auto_roles.header"></app-history-btn>
+              <app-history-btn *ngIf="!isEditingNew" [id] ="autoRole.history" translationKey="view.server.auto_roles.header"></app-history-btn>
               <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-sliders-h" [routerLink]="[autoRole.id, 'rules']"></button>
               <button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"
                       (click)="deleteAutoRole(autoRole)"></button>

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

@@ -184,7 +184,7 @@
           </td>
           <td>
             <div class="btn-wrapper">
-              <app-history-btn *ngIf="!isEditingNew" [history] ="level.history" translationKey="view.server.levels.header"></app-history-btn>
+              <app-history-btn *ngIf="!isEditingNew" [id] ="level.history" translationKey="view.server.levels.header"></app-history-btn>
               <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"
                       (click)="onRowEditInit(dt, level, ri)" [disabled]="!user || user.isModerator && !user.isAdmin"></button>
               <button *ngIf="!editing" pButton class="btn icon-btn danger-icon-btn" icon="pi pi-trash"

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

@@ -224,7 +224,7 @@
           </td>
           <td>
             <div class="btn-wrapper">
-              <app-history-btn *ngIf="!isEditingNew" [history] ="member.history" translationKey="view.server.members.header"></app-history-btn>
+              <app-history-btn *ngIf="!isEditingNew" [id]="member.id" [query]="query" translationKey="view.server.members.header"></app-history-btn>
               <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"
                       (click)="onRowEditInit(dt, member, ri)"></button>
               <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-user"

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

@@ -81,6 +81,7 @@ export class MembersComponent implements OnInit, OnDestroy {
   totalRecords!: number;
   private unsubscriber = new Subject<void>();
   private server: Server = {};
+  query = Queries.userQueryWithHistory;
 
   constructor(
     private authService: AuthService,

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

@@ -55,11 +55,9 @@ export class ProfileComponent implements OnInit, OnDestroy {
           return;
         }
 
-        this.data.query<UserListQuery>(Queries.usersQuery, {
+        this.data.query<UserListQuery>(Queries.userProfile, {
             serverId: this.server.id,
-            filter: {
+            userId: params["memberId"]
-              id: params["memberId"]
-            }
           },
           (x: { servers: Server[] }) => {
             return x.servers[0];

kdb-web/src/assets/config.json

@@ -5,7 +5,7 @@
     "WebVersion": {
         "Major": "1",
         "Minor": "0",
-        "Micro": "5"
+        "Micro": "dev307"
     },
     "Themes": [
         {