Added base logic to hide columns & added hide columns to levels #79

kdb-web/package.json

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

kdb-web/src/app/base/component-with-table.spec.ts

@@ -0,0 +1,7 @@
+import { ComponentWithTable } from './component-with-table';
+
+describe('ComponentWithTable', () => {
+  it('should create an instance', () => {
+    expect(new ComponentWithTable()).toBeTruthy();
+  });
+});

kdb-web/src/app/base/component-with-table.ts

@@ -0,0 +1,39 @@
+interface Column {
+  key: string;
+  name: string;
+}
+
+export class ComponentWithTable {
+
+  private _hiddenColumns: Column[] = [];
+  set hiddenColumns(value: Column[]) {
+    this._hiddenColumns = value;
+    localStorage.setItem("hiddenColumns", JSON.stringify(value));
+  }
+
+  get hiddenColumns(): Column[] {
+    return this._hiddenColumns;
+  }
+
+  private name: string = "";
+  public columns: Column[] = [];
+
+  constructor(
+    name: string,
+    columns: string[]
+  ) {
+    this.name = name;
+    this.columns = columns.map(column => {
+      return { key: this.getKey(column), name: column };
+    });
+    this._hiddenColumns = JSON.parse(localStorage.getItem("hiddenColumns") ?? "");
+  }
+
+  private getKey(column: string): string {
+    return `${this.name}_${column}`;
+  }
+
+  public isColumnVisible(column: string): boolean {
+    return !this._hiddenColumns.map(column => column.key).includes(this.getKey(column));
+  }
+}

kdb-web/src/app/modules/shared/shared.module.ts

@@ -23,9 +23,10 @@ import { PanelModule } from "primeng/panel";
 import { InputNumberModule } from "primeng/inputnumber";
 import { ImageModule } from "primeng/image";
 import { SidebarModule } from "primeng/sidebar";
-import { HistoryBtnComponent } from './components/history-btn/history-btn.component';
+import { HistoryBtnComponent } from "./components/history-btn/history-btn.component";
-import { DataViewModule, DataViewLayoutOptions } from 'primeng/dataview';
+import { DataViewModule, DataViewLayoutOptions } from "primeng/dataview";
-import { ConfigListComponent } from './components/config-list/config-list.component';
+import { ConfigListComponent } from "./components/config-list/config-list.component";
+import { MultiSelectModule } from "primeng/multiselect";
 
 
 @NgModule({
@@ -34,7 +35,7 @@ import { ConfigListComponent } from './components/config-list/config-list.compon
     IpAddressPipe,
     BoolPipe,
     HistoryBtnComponent,
-    ConfigListComponent,
+    ConfigListComponent
   ],
   imports: [
     CommonModule,
@@ -60,6 +61,7 @@ import { ConfigListComponent } from './components/config-list/config-list.compon
     ImageModule,
     SidebarModule,
     DataViewModule,
+    MultiSelectModule
   ],
   exports: [
     ButtonModule,
@@ -89,7 +91,9 @@ import { ConfigListComponent } from './components/config-list/config-list.compon
     HistoryBtnComponent,
     DataViewModule,
     DataViewLayoutOptions,
-        ConfigListComponent
+    ConfigListComponent,
+    MultiSelectModule
   ]
 })
-export class SharedModule { }
+export class SharedModule {
+}

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

@@ -110,7 +110,7 @@ export class ConfigComponent implements OnInit {
       return throwError(err);
     })).subscribe(result => {
       this.spinner.hideSpinner();
-      this.toastService.success(this.translate.instant("view.server.config.message.server_config_create"), this.translate.instant("view.server.config.message.server_config_create_d"));
+      this.toastService.success(this.translate.instant("view.server.config.message.server#_config_create"), this.translate.instant("view.server.config.message.server_config_create_d"));
     });
   }
 }

kdb-web/src/app/modules/view/server/levels/components/levels/levels.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">{{levels.length}} {{'common.of' | translate}}
                 {{dt.totalRecords}}
@@ -16,6 +17,15 @@
               {{'view.server.levels.levels' | 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>{{'view.server.levels.headers.' + item.name | translate}}</div>
+                </ng-template>
+              </p-multiSelect>
+            </div>
+          </div>
+
           <div class="table-caption-btn-wrapper btn-wrapper">
             <button pButton label="{{'common.add' | translate}}" class="icon-btn btn"
                     icon="pi pi-user-plus" (click)="addLevel(dt)" [disabled]="isEditingNew || user?.isModerator && !user?.isAdmin">
@@ -36,28 +46,28 @@
             </div>
           </th>
 
-          <th pSortableColumn="name">
+          <th *ngIf="isColumnVisible('name')" pSortableColumn="name">
             <div class="table-header-label">
               <div class="table-header-text">{{'view.server.levels.headers.name' | translate}}</div>
               <p-sortIcon field="name" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="color">
+          <th *ngIf="isColumnVisible('color')" pSortableColumn="color">
             <div class="table-header-label">
               <div class="table-header-text">{{'view.server.levels.headers.color' | translate}}</div>
               <p-sortIcon field="color" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="minXp">
+          <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>
               <p-sortIcon field="minXp" class="table-header-icon"></p-sortIcon>
             </div>
           </th>
 
-          <th pSortableColumn="permissions">
+          <th *ngIf="isColumnVisible('permissions')" pSortableColumn="permissions">
             <div class="table-header-label">
               <div class="table-header-text">{{'view.server.levels.headers.permissions' | translate}}</div>
               <p-sortIcon field="permissions" class="table-header-icon"></p-sortIcon>
@@ -90,15 +100,15 @@
                      placeholder="{{'common.id' | translate}}">
             </form>
           </th>
-          <th>
+          <th *ngIf="isColumnVisible('name')">
             <form [formGroup]="filterForm">
               <input type="text" pInputText formControlName="name"
                      placeholder="{{'view.server.levels.headers.name' | translate}}">
             </form>
           </th>
-          <th></th>
+          <th *ngIf="isColumnVisible('color')"></th>
-          <th></th>
+          <th *ngIf="isColumnVisible('min_xp')"></th>
-          <th></th>
+          <th *ngIf="isColumnVisible('permissions')"></th>
           <th class="table-header-small-dropdown"></th>
           <th class="table-header-small-dropdown"></th>
           <th class="table-header-actions"></th>
@@ -118,7 +128,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td *ngIf="isColumnVisible('name')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.name">
@@ -129,7 +139,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td *ngIf="isColumnVisible('color')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color">
@@ -140,7 +150,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td *ngIf="isColumnVisible('min_xp')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="level.minXp">
@@ -151,7 +161,7 @@
             </p-cellEditor>
           </td>
 
-          <td>
+          <td *ngIf="isColumnVisible('permissions')">
             <p-cellEditor>
               <ng-template pTemplate="input">
                 <input class="table-edit-input" pInputText min="0" type="text" [(ngModel)]="level.permissions">

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

@@ -22,14 +22,14 @@ import { Mutations } from "../../../../../../models/graphql/mutations.model";
 import { Subject, throwError } from "rxjs";
 import { Server } from "../../../../../../models/data/server.model";
 import { UserDTO } from "../../../../../../models/auth/auth-user.dto";
+import { ComponentWithTable } from "../../../../../../base/component-with-table";
 
 @Component({
   selector: "app-levels",
   templateUrl: "./levels.component.html",
   styleUrls: ["./levels.component.scss"]
 })
-export class LevelsComponent implements OnInit, OnDestroy {
+export class LevelsComponent extends ComponentWithTable implements OnInit, OnDestroy {
-
   public levels: Level[] = [];
   public loading = true;
 
@@ -72,7 +72,9 @@ export class LevelsComponent implements OnInit, OnDestroy {
     private translate: TranslateService,
     private data: DataService,
     private sidebar: SidebarService,
-    private route: ActivatedRoute) {
+    private route: ActivatedRoute
+  ) {
+    super("level", ["name", "color", "min_xp", "permissions"]);
   }
 
   public ngOnInit(): void {

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

@@ -142,6 +142,7 @@
     "discord_id": "Discord Id",
     "email": "E-Mail",
     "error": "Fehler",
+    "hidden_columns": "Ausgeblendete Spalten",
     "history": {
       "attribute": "Attribut",
       "autoRole": "Auto Rolle",

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

@@ -142,6 +142,7 @@
     "discord_id": "Discord Id",
     "email": "E-Mail",
     "error": "Error",
+    "hidden_columns": "Hidden columns",
     "history": {
       "attribute": "Attribute",
       "autoRole": "Auto role",

kdb-web/src/assets/version.json

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

kdb-web/src/styles.scss

@@ -241,11 +241,24 @@ header {
           .table-caption {
             display: flex;
 
-            .table-caption-text {
+            .table-caption-table-info {
+              display: flex;
               flex: 1;
+              flex-direction: row;
+              gap: 25px;
+
+              .table-caption-text {
+                display: flex;
+                align-items: center;
+
                 font-weight: 400;
               }
 
+              .table-caption-column-select {
+                flex: 1;
+              }
+            }
+
             .table-caption-search {
             }
           }

kdb-web/src/styles/themes/default-dark-theme.scss

@@ -386,9 +386,14 @@
     color: $primaryTextColor !important;
 
     .table-caption {
+      .table-caption-table-info {
         .table-caption-text {
         }
 
+        .table-caption-column-select {
+        }
+      }
+
       .table-caption-search-wrapper {
         .table-caption-search {
           height: 30px !important;
@@ -611,4 +616,50 @@
       }
     }
   }
+
+  .p-multiselect {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+
+    &:focus,
+    &.p-focus,
+    &:not(.p-disabled):hover {
+      border-color: $primaryHeaderColor !important;
+      box-shadow: none !important;
+    }
+
+    .p-multiselect-panel {
+      .p-multiselect-header {
+        background-color: $primaryBackgroundColor !important;
+      }
+
+      .p-multiselect-items,
+      .p-multiselect-item {
+        background-color: $secondaryBackgroundColor !important;
+      }
+
+      .p-multiselect-item {
+        color: $primaryTextColor !important;
+        border: 1px solid transparent !important;
+
+        &:hover {
+          border: 1px solid $primaryHeaderColor !important;
+          color: $primaryHeaderColor !important;
+        }
+
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+
+      .p-checkbox .p-checkbox-box.p-highlight {
+        border-color: $primaryHeaderColor !important;
+        background: $primaryHeaderColor !important;
+      }
+
+      .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+        border-color: $primaryHeaderColor !important;
+      }
+    }
+  }
 }

kdb-web/src/styles/themes/default-light-theme.scss

@@ -386,9 +386,14 @@
     color: $primaryTextColor !important;
 
     .table-caption {
+      .table-caption-table-info {
         .table-caption-text {
         }
 
+        .table-caption-column-select {
+        }
+      }
+
       .table-caption-search-wrapper {
         .table-caption-search {
           height: 30px !important;
@@ -611,4 +616,50 @@
       }
     }
   }
+
+  .p-multiselect {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+
+    &:focus,
+    &.p-focus,
+    &:not(.p-disabled):hover {
+      border-color: $primaryHeaderColor !important;
+      box-shadow: none !important;
+    }
+
+    .p-multiselect-panel {
+      .p-multiselect-header {
+        background-color: $secondaryBackgroundColor !important;
+      }
+
+      .p-multiselect-items,
+      .p-multiselect-item {
+        background-color: $primaryBackgroundColor !important;
+      }
+
+      .p-multiselect-item {
+        color: $primaryTextColor !important;
+        border: 1px solid transparent !important;
+
+        &:hover {
+          border: 1px solid $primaryHeaderColor !important;
+          color: $primaryHeaderColor !important;
+        }
+
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+
+      .p-checkbox .p-checkbox-box.p-highlight {
+        border-color: $primaryHeaderColor !important;
+        background: $primaryHeaderColor !important;
+      }
+
+      .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+        border-color: $primaryHeaderColor !important;
+      }
+    }
+  }
 }

kdb-web/src/styles/themes/sh-edraft-dark-theme.scss

@@ -390,9 +390,14 @@
     color: $primaryTextColor !important;
 
     .table-caption {
+      .table-caption-table-info {
         .table-caption-text {
         }
 
+        .table-caption-column-select {
+        }
+      }
+
       .table-caption-search-wrapper {
         .table-caption-search {
           height: 30px !important;
@@ -619,4 +624,50 @@
       }
     }
   }
+
+  .p-multiselect {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+
+    &:focus,
+    &.p-focus,
+    &:not(.p-disabled):hover {
+      border-color: $primaryHeaderColor !important;
+      box-shadow: none !important;
+    }
+
+    .p-multiselect-panel {
+      .p-multiselect-header {
+        background-color: $primaryBackgroundColor !important;
+      }
+
+      .p-multiselect-items,
+      .p-multiselect-item {
+        background-color: $secondaryBackgroundColor !important;
+      }
+
+      .p-multiselect-item {
+        color: $primaryTextColor !important;
+        border: 1px solid transparent !important;
+
+        &:hover {
+          border: 1px solid $primaryHeaderColor !important;
+          color: $primaryHeaderColor !important;
+        }
+
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+
+      .p-checkbox .p-checkbox-box.p-highlight {
+        border-color: $primaryHeaderColor !important;
+        background: $primaryHeaderColor !important;
+      }
+
+      .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+        border-color: $primaryHeaderColor !important;
+      }
+    }
+  }
 }

kdb-web/src/styles/themes/sh-edraft-light-theme.scss

@@ -386,9 +386,14 @@
     color: $primaryTextColor !important;
 
     .table-caption {
+      .table-caption-table-info {
         .table-caption-text {
         }
 
+        .table-caption-column-select {
+        }
+      }
+
       .table-caption-search-wrapper {
         .table-caption-search {
           height: 30px !important;
@@ -611,4 +616,50 @@
       }
     }
   }
+
+  .p-multiselect {
+    background-color: $primaryBackgroundColor !important;
+    color: $primaryTextColor !important;
+
+    &:focus,
+    &.p-focus,
+    &:not(.p-disabled):hover {
+      border-color: $primaryHeaderColor !important;
+      box-shadow: none !important;
+    }
+
+    .p-multiselect-panel {
+      .p-multiselect-header {
+        background-color: $secondaryBackgroundColor !important;
+      }
+
+      .p-multiselect-items,
+      .p-multiselect-item {
+        background-color: $primaryBackgroundColor !important;
+      }
+
+      .p-multiselect-item {
+        color: $primaryTextColor !important;
+        border: 1px solid transparent !important;
+
+        &:hover {
+          border: 1px solid $primaryHeaderColor !important;
+          color: $primaryHeaderColor !important;
+        }
+
+        &:focus {
+          box-shadow: none !important;
+        }
+      }
+
+      .p-checkbox .p-checkbox-box.p-highlight {
+        border-color: $primaryHeaderColor !important;
+        background: $primaryHeaderColor !important;
+      }
+
+      .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box:hover {
+        border-color: $primaryHeaderColor !important;
+      }
+    }
+  }
 }