Hide members columns #79

kdb-web/package.json

@@ -1,6 +1,6 @@
 {
     "name": "kdb-web",
-    "version": "1.1.dev79_hide_table_attributes",
+    "version": "1.1.dev79_hide_table_columns",
     "scripts": {
         "ng": "ng",
         "update-version": "ts-node-esm update-version.ts",

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

@@ -20,7 +20,7 @@
             <div class="table-caption-column-select">
               <p-multiSelect [options]="columns" [(ngModel)]="hiddenColumns" optionLabel="name" placeholder="{{'common.hidden_columns' | translate}}" [filter]=false>
                 <ng-template let-item pTemplate="item">
-                  <div>{{'view.server.levels.headers.' + item.name | translate}}</div>
+                  <div>{{'common.' + item.name | translate}}</div>
                 </ng-template>
               </p-multiSelect>
             </div>
@@ -39,7 +39,7 @@
 
       <ng-template pTemplate="header">
         <tr>
-          <th pSortableColumn="id">
+          <th *ngIf="isColumnVisible('id')" pSortableColumn="id">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.id' | translate}}</div>
               <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
@@ -48,28 +48,28 @@
 
           <th *ngIf="isColumnVisible('name')" pSortableColumn="name">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.levels.headers.name' | translate}}</div>
+              <div class="table-header-text">{{'common.name' | translate}}</div>
               <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
           <th *ngIf="isColumnVisible('color')" pSortableColumn="color">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.levels.headers.color' | translate}}</div>
+              <div class="table-header-text">{{'common.color' | translate}}</div>
               <p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
           <th *ngIf="isColumnVisible('min_xp')" pSortableColumn="minXp">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.levels.headers.min_xp' | translate}}</div>
+              <div class="table-header-text">{{'common.min_xp' | translate}}</div>
               <p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
           <th *ngIf="isColumnVisible('permissions')" pSortableColumn="permissions">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.levels.headers.permissions' | translate}}</div>
+              <div class="table-header-text">{{'common.permissions' | translate}}</div>
               <p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
@@ -94,7 +94,7 @@
         </tr>
 
         <tr>
-          <th class="table-header-small">
+          <th *ngIf="isColumnVisible('id')" class="table-header-small">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="id"
                      placeholder="{{'common.id' | translate}}">
@@ -103,7 +103,7 @@
           <th *ngIf="isColumnVisible('name')">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="name"
-                     placeholder="{{'view.server.levels.headers.name' | translate}}">
+                     placeholder="{{'common.name' | translate}}">
             </form>
           </th>
           <th *ngIf="isColumnVisible('color')"></th>
@@ -117,7 +117,7 @@
 
       <ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex">
         <tr [pEditableRow]="level">
-          <td>
+          <td *ngIf="isColumnVisible('id')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{level.id}}

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

@@ -74,7 +74,7 @@ export class LevelsComponent extends ComponentWithTable implements OnInit, OnDes
     private sidebar: SidebarService,
     private route: ActivatedRoute
   ) {
-    super("level", ["name", "color", "min_xp", "permissions"]);
+    super("level", ["id", "name", "color", "min_xp", "permissions"]);
   }
 
   public ngOnInit(): void {

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

@@ -9,6 +9,7 @@
 
       <ng-template pTemplate="caption">
         <div class="table-caption">
+          <div class="table-caption-table-info">
             <div class="table-caption-text">
               <ng-container *ngIf="!loading">{{members.length}} {{'common.of' | translate}}
                 {{dt.totalRecords}}
@@ -16,6 +17,15 @@
               {{'view.server.members.members' | translate}}
             </div>
 
+            <div class="table-caption-column-select">
+              <p-multiSelect [options]="columns" [(ngModel)]="hiddenColumns" optionLabel="name" placeholder="{{'common.hidden_columns' | translate}}" [filter]=false>
+                <ng-template let-item pTemplate="item">
+                  <div>{{'common.' + item.name | translate}}</div>
+                </ng-template>
+              </p-multiSelect>
+            </div>
+          </div>
+
           <div class="table-caption-btn-wrapper btn-wrapper">
             <button pButton label="{{'common.reset_filters' | translate}}" icon="pi pi-undo"
                     class="icon-btn btn" (click)="resetFilters()">
@@ -26,51 +36,51 @@
 
       <ng-template pTemplate="header">
         <tr>
-          <th pSortableColumn="id">
+          <th *ngIf="isColumnVisible('id')" pSortableColumn="id">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.id' | translate}}</div>
               <p-sortIcon field="id" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="discordId">
+          <th *ngIf="isColumnVisible('discord_id')" pSortableColumn="discordId">
             <div class="table-header-label">
               <div class="table-header-text">{{'common.discord_id' | translate}}</div>
               <p-sortIcon field="discordId" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="name">
+          <th *ngIf="isColumnVisible('name')" pSortableColumn="name">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.members.headers.name' | translate}}</div>
+              <div class="table-header-text">{{'common.name' | translate}}</div>
               <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="xp">
+          <th *ngIf="isColumnVisible('xp')" pSortableColumn="xp">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.members.headers.xp' | translate}}</div>
+              <div class="table-header-text">{{'common.xp' | translate}}</div>
               <p-sortIcon field="xp" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="ontime">
+          <th *ngIf="isColumnVisible('ontime')" pSortableColumn="ontime">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.members.headers.ontime' | translate}}</div>
+              <div class="table-header-text">{{'common.ontime' | translate}}</div>
               <p-sortIcon field="ontime" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="leftServer">
+          <th *ngIf="isColumnVisible('left_server')" pSortableColumn="leftServer">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.members.headers.left_server' | translate}}</div>
+              <div class="table-header-text">{{'common.left_server' | translate}}</div>
               <p-sortIcon field="leftServer" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="level.name">
+          <th *ngIf="isColumnVisible('level')" pSortableColumn="level.name">
             <div class="table-header-label">
-              <div class="table-header-text">{{'view.server.members.headers.level' | translate}}</div>
+              <div class="table-header-text">{{'common.level' | translate}}</div>
               <p-sortIcon field="level.name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
@@ -95,31 +105,31 @@
         </tr>
 
         <tr>
-          <th class="table-header-small">
+          <th *ngIf="isColumnVisible('id')" class="table-header-small">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="id" placeholder="{{'common.id' | translate}}">
             </form>
           </th>
-          <th class="table-header-medium">
+          <th *ngIf="isColumnVisible('discord_id')" class="table-header-medium">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="discordId" placeholder="{{'common.discord_id' | translate}}">
             </form>
           </th>
-          <th>
+          <th *ngIf="isColumnVisible('name')" >
             <form [formGroup]="filterForm">
-              <input type="text" pInputText formControlName="name" placeholder="{{'view.server.members.headers.name' | translate}}">
+              <input type="text" pInputText formControlName="name" placeholder="{{'common.name' | translate}}">
             </form>
           </th>
-          <th></th>
-          <th></th>
-          <th class="table-header-small-dropdown">
+          <th *ngIf="isColumnVisible('xp')" ></th>
+          <th *ngIf="isColumnVisible('ontime')" ></th>
+          <th *ngIf="isColumnVisible('left_server')" class="table-header-small-dropdown">
             <form [formGroup]="filterForm">
-              <p-dropdown formControlName="leftServer" [options]="leftServerOptions" placeholder="{{'view.server.members.headers.left_server' | translate}}"></p-dropdown>
+              <p-dropdown formControlName="leftServer" [options]="leftServerOptions" placeholder="{{'common.left_server' | translate}}"></p-dropdown>
             </form>
           </th>
-          <th class="table-header-small-dropdown">
+          <th *ngIf="isColumnVisible('level')" class="table-header-small-dropdown">
             <form [formGroup]="filterForm">
-              <p-dropdown formControlName="level" [options]="levels" placeholder="{{'view.server.members.headers.level' | translate}}"></p-dropdown>
+              <p-dropdown formControlName="level" [options]="levels" placeholder="{{'common.level' | translate}}"></p-dropdown>
             </form>
           </th>
           <th></th>
@@ -130,7 +140,7 @@
 
       <ng-template pTemplate="body" let-member let-editing="editing" let-ri="rowIndex">
         <tr [pEditableRow]="member">
-          <td>
+          <td *ngIf="isColumnVisible('id')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{member.id}}
@@ -140,7 +150,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td *ngIf="isColumnVisible('discord_id')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{member.discordId}}
@@ -150,7 +160,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td *ngIf="isColumnVisible('name')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{member.name}}
@@ -160,7 +170,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td *ngIf="isColumnVisible('xp')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <p-inputNumber class="table-edit-input" styleClass="input-number" [(ngModel)]="member.xp" mode="decimal" [min]="0" [useGrouping]="false" [showButtons]="true"
@@ -172,7 +182,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td *ngIf="isColumnVisible('ontime')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{member.ontime}}
@@ -182,7 +192,7 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td *ngIf="isColumnVisible('left_server')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 {{!member.leftServer | bool}}
@@ -192,10 +202,10 @@
               </ng-template>
             </p-cellEditor>
           </td>
-          <td>
+          <td *ngIf="isColumnVisible('level')">
             <p-cellEditor>
               <ng-template pTemplate="input">
-                <p-dropdown [options]="levels" [(ngModel)]="member.level" placeholder="{{'view.server.members.headers.level' | translate}}"></p-dropdown>
+                <p-dropdown [options]="levels" [(ngModel)]="member.level" placeholder="{{'common.level' | translate}}"></p-dropdown>
               </ng-template>
               <ng-template pTemplate="output">
                 {{member.level.name}}

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

@@ -20,19 +20,17 @@ import { UpdateUserMutationResult } from "../../../../models/graphql/result.mode
 import { ActivatedRoute } from "@angular/router";
 import { Level } from "../../../../models/data/level.model";
 import { Server } from "../../../../models/data/server.model";
+import { ComponentWithTable } from "../../../../base/component-with-table";
 
 @Component({
   selector: "app-members",
   templateUrl: "./members.component.html",
   styleUrls: ["./members.component.scss"]
 })
-export class MembersComponent implements OnInit, OnDestroy {
+export class MembersComponent extends ComponentWithTable implements OnInit, OnDestroy {
   members!: User[];
   levels!: MenuItem[];
-  leftServerOptions = [
-    { label: this.translate.instant("common.bool_as_string.true"), value: false },
-    { label: this.translate.instant("common.bool_as_string.false"), value: true }
-  ];
+  leftServerOptions: { label: string; value: boolean; }[] = [];
   loading = true;
 
   clonedUsers: { [s: string]: User; } = {};
@@ -93,6 +91,7 @@ export class MembersComponent implements OnInit, OnDestroy {
     private data: DataService,
     private route: ActivatedRoute
   ) {
+    super("member", ["id", "discord_id", "name", "xp", "ontime", "left_server", "level"]);
   }
 
   ngOnInit(): void {
@@ -112,9 +111,14 @@ export class MembersComponent implements OnInit, OnDestroy {
           return { label: level.name, value: level };
         });
       });
+      this.leftServerOptions = [
+        { label: this.translate.instant("common.bool_as_string.true"), value: false },
+        { label: this.translate.instant("common.bool_as_string.false"), value: true }
+      ];
       this.loadNextPage();
     });
   }
+
   public ngOnDestroy(): void {
     this.unsubscriber.next();
     this.unsubscriber.complete();

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

@@ -2,15 +2,6 @@
   "admin": {
     "auth_users": {
       "header": "Benutzer",
-      "headers": {
-        "active": "Aktiv",
-        "auth_role": "Rolle",
-        "first_name": "Vorname",
-        "last_name": "Nachname",
-        "password": "Passwort",
-        "role": "Rolle",
-        "users": "Benutzer"
-      },
       "message": {
         "cannot_delete_user": "Benutzer kann nicht gelöscht werden",
         "invalid_email": "Ungültige E-Mail",
@@ -131,6 +122,20 @@
     }
   },
   "common": {
+    "active": "Aktiv",
+    "auth_role": "Rolle",
+    "first_name": "Vorname",
+    "last_name": "Nachname",
+    "password": "Passwort",
+    "role": "Rolle",
+    "users": "Benutzer",
+    "color": "Farbe",
+    "min_xp": "Min. XP",
+    "permissions": "Rechte",
+    "left_server": "Aktiv",
+    "level": "Level",
+    "ontime": "Ontime",
+    "xp": "XP",
     "404": "404 - Der Eintrag konnte nicht gefunden werden",
     "actions": "Aktionen",
     "add": "Hinzufügen",
@@ -447,12 +452,6 @@
       "header": "Server",
       "levels": {
         "header": "Level",
-        "headers": {
-          "color": "Farbe",
-          "min_xp": "Min. XP",
-          "name": "Name",
-          "permissions": "Rechte"
-        },
         "levels": "Level",
         "message": {
           "level_create": "Level erstellt",
@@ -473,13 +472,6 @@
       },
       "members": {
         "header": "Mitglieder",
-        "headers": {
-          "left_server": "Aktiv",
-          "level": "Level",
-          "name": "Name",
-          "ontime": "Ontime",
-          "xp": "XP"
-        },
         "members": "Mitgliedern",
         "message": {
           "user_change_failed": "Benutzeränderung fehlgeschlagen",

kdb-web/src/assets/version.json

@@ -2,6 +2,6 @@
     "WebVersion": {
         "Major": "1",
         "Minor": "1",
-        "Micro": "dev79_hide_table_attributes"
+        "Micro": "dev79_hide_table_columns"
     }
 }