Merge pull request 'Als Nutzer des WI möchte ich nicht, dass Tabellen mit vielen Daten so lange laden #300' (#312) from #300 into support

Reviewed-on: sh-edraft.de/kd_discord_bot#312
Reviewed-by: edraft-dev <dev.sven.heidemann@sh-edraft.de>
Closes #300

kdb-web/package.json

@@ -1,6 +1,6 @@
 {
     "name": "kdb-web",
-    "version": "1.0.5",
+    "version": "1.0.7",
     "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

@@ -62,6 +62,17 @@ export class Queries {
           }
           createdAt
           modifiedAt
+        }
+      }
+    }
+  `;
+
+  static levelWithHistoryQuery = `
+    query LevelHistory($serverId: ID, $id: ID) {
+      servers(filter: {id: $serverId}) {
+        levelCount
+        levels(filter: {id: $id}) {
+          id
 
           history {
             id
@@ -94,6 +105,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 +158,17 @@ export class Queries {
             joinedOn
             leavedOn
           }
+        }
+      }
+    }
+  `;
 
-          createdAt
+  static userQueryWithHistory = `
-          modifiedAt
+    query UsersWithHistory($serverId: ID, $id: ID) {
+      servers(filter: {id: $serverId}) {
+        userCount
+        users(filter: {id: $id}) {
+          id
 
           history {
             id
@@ -159,6 +201,17 @@ export class Queries {
 
           createdAt
           modifiedAt
+        }
+      }
+    }
+  `;
+
+  static autoRolesWithHistoryQuery = `
+    query AutoRoleWithHistoryQuery($serverId: ID, $id: ID) {
+      servers(filter: {id: $serverId}) {
+        autoRoleCount
+        autoRoles(filter: {id: $id}) {
+          id
 
           history {
             id
@@ -191,6 +244,19 @@ export class Queries {
 
             createdAt
             modifiedAt
+          }
+        }
+      }
+    }
+  `;
+
+  static autoRoleRulesHistoryQuery = `
+    query AutoRoleRuleHistoryQuery($serverId: ID, $autoRoleId: ID, $id: ID) {
+      servers(filter: {id: $serverId}) {
+        autoRoles(filter: {id: $autoRoleId}) {
+          autoRoleRuleCount
+          autoRoleRules(filter: {id: $id}) {
+            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,62 @@ 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 ?? {};
+  }
+
+  private findVal(object: any, key: string) {
+    var value;
+    Object.keys(object).some((k: string) => {
+      if (k === key) {
+        value = object[k];
+        return true;
+      }
+      if (object[k] && typeof object[k] === "object") {
+        value = this.findVal(object[k], key);
+        return value !== undefined;
+      }
+      return null;
+    });
+    return value;
   }
 
   public openHistory(): void {
     this.showSidebar = true;
+    this.data.query<UserListQuery>(this.query, {
+        serverId: this.server.id, id: this.id
+      },
+      (x: { servers: Server[] }) => {
+        return x.servers[0];
+      }
+    ).subscribe(data => {
+      this.history = this.findVal(data, "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.id" [query]="query" 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-rules/auto-roles-rules.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit } from "@angular/core";
+import { Component, OnDestroy, OnInit, Query } from "@angular/core";
 import { DataService } from "../../../../../../services/data/data.service";
 import { ActivatedRoute, Router } from "@angular/router";
 import { AutoRoleRule, AutoRoleRuleFilter } from "../../../../../../models/data/auto_role.model";
@@ -66,6 +66,8 @@ export class AutoRolesRulesComponent implements OnInit, OnDestroy {
   private unsubscriber = new Subject<void>();
   private server: Server = {};
 
+  query: string = Queries.autoRoleRulesHistoryQuery;
+
   constructor(
     private authService: AuthService,
     private spinner: SpinnerService,

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

@@ -126,7 +126,8 @@
           <td>
             <p-cellEditor>
               <ng-template pTemplate="input">
-                <p-dropdown [options]="channels" optionValue="value.id" [(ngModel)]="autoRole.channelId" placeholder="{{'view.server.auto_roles.headers.channel_id' | translate}}"></p-dropdown>
+                <p-dropdown [options]="channels" optionValue="value.id" [(ngModel)]="autoRole.channelId"
+                            placeholder="{{'view.server.auto_roles.headers.channel_id' | translate}}"></p-dropdown>
               </ng-template>
               <ng-template pTemplate="output">
                 {{autoRole.channelId}}
@@ -191,9 +192,9 @@
 
           <td>
             <div class="btn-wrapper">
-<!--              <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"-->
+              <!--              <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"-->
-<!--                      (click)="onRowEditInit(dt, autoRole, ri)"></button>-->
+              <!--                      (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.id" [query]="query" 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/auto-role/components/auto-roles/auto-roles.component.ts

@@ -63,6 +63,8 @@ export class AutoRolesComponent implements OnInit, OnDestroy {
   private unsubscriber = new Subject<void>();
   private server: Server = {};
 
+  query: string = Queries.autoRolesWithHistoryQuery;
+
   constructor(
     private authService: AuthService,
     private spinner: SpinnerService,

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.id" [query]="query" 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/levels/components/levels/levels.component.ts

@@ -61,6 +61,8 @@ export class LevelsComponent implements OnInit, OnDestroy {
   private server: Server = {};
   public user: UserDTO | null = null;
 
+  query: string = Queries.levelWithHistoryQuery;
+
   public constructor(
     private authService: AuthService,
     private spinner: SpinnerService,

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": "7"
     },
     "Themes": [
         {