2023-08-24 17:50:25 +02:00
7 changed files with 80 additions and 74 deletions
--- a/kdb-web/package.json
+++ b/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",
--- a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.html
+++ b/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}}
--- a/kdb-web/src/app/modules/view/server/levels/components/levels/levels.component.ts
+++ b/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 {
--- a/kdb-web/src/app/modules/view/server/members/members.component.html
+++ b/kdb-web/src/app/modules/view/server/members/members.component.html
@ -9,11 +9,21 @@

      <ng-template pTemplate="caption">
        <div class="table-caption">
-          <div class="table-caption-text">
-            <ng-container *ngIf="!loading">{{members.length}} {{'common.of' | translate}}
-              {{dt.totalRecords}}
-            </ng-container>
-            {{'view.server.members.members' | translate}}
+          <div class="table-caption-table-info">
+            <div class="table-caption-text">
+              <ng-container *ngIf="!loading">{{members.length}} {{'common.of' | translate}}
+                {{dt.totalRecords}}
+              </ng-container>
+              {{'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">
@ -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}}
--- a/kdb-web/src/app/modules/view/server/members/members.component.ts
+++ b/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();
--- a/kdb-web/src/assets/i18n/de.json
+++ b/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",
--- a/kdb-web/src/assets/version.json
+++ b/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"
    }
 }