Als Nutzer des WI möchte ich nicht, dass Tabellen mit vielen Daten so lange laden #300 #312
| @@ -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", | ||||
| @@ -51,4 +51,4 @@ | ||||
|         "tslib": "^2.4.1", | ||||
|         "typescript": "~4.9.5" | ||||
|     } | ||||
| } | ||||
| } | ||||
|   | ||||
| @@ -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 { | ||||
|   | ||||
| @@ -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 | ||||
|           modifiedAt | ||||
|   static userQueryWithHistory = ` | ||||
|     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 | ||||
|   | ||||
| @@ -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) => { | ||||
|   | ||||
| @@ -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> | ||||
|   | ||||
| @@ -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, | ||||
|   | ||||
| @@ -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"--> | ||||
| <!--                      (click)="onRowEditInit(dt, autoRole, ri)"></button>--> | ||||
|               <app-history-btn *ngIf="!isEditingNew" [history] ="autoRole.history" translationKey="view.server.auto_roles.header"></app-history-btn> | ||||
|               <!--              <button *ngIf="!editing" pButton pInitEditableRow class="btn icon-btn" icon="pi pi-pencil"--> | ||||
|               <!--                      (click)="onRowEditInit(dt, autoRole, ri)"></button>--> | ||||
|               <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> | ||||
|   | ||||
| @@ -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, | ||||
|   | ||||
| @@ -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" | ||||
|   | ||||
| @@ -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, | ||||
|   | ||||
| @@ -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" | ||||
|   | ||||
| @@ -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, | ||||
|   | ||||
| @@ -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: { | ||||
|               id: params["memberId"] | ||||
|             } | ||||
|             userId: params["memberId"] | ||||
|           }, | ||||
|           (x: { servers: Server[] }) => { | ||||
|             return x.servers[0]; | ||||
|   | ||||
| @@ -5,7 +5,7 @@ | ||||
|     "WebVersion": { | ||||
|         "Major": "1", | ||||
|         "Minor": "0", | ||||
|         "Micro": "5" | ||||
|         "Micro": "7" | ||||
|     }, | ||||
|     "Themes": [ | ||||
|         { | ||||
| @@ -25,4 +25,4 @@ | ||||
|             "Name": "sh-edraft-dark-theme" | ||||
|         } | ||||
|     ] | ||||
| } | ||||
| } | ||||
|   | ||||
		Reference in New Issue
	
	Block a user