Improved table responsive mode #1.1.0.rc5

2023-08-18 15:59:56 +02:00 · 2023-08-18 15:59:56 +02:00 · e169f12091
commit e169f12091
parent 919970d199
15 changed files with 1004 additions and 2 deletions
--- a/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
+++ b/kdb-web/src/app/modules/admin/auth-users/components/auth-user/auth-user.component.html
@ -123,6 +123,7 @@
      <ng-template pTemplate="body" let-user let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="user">
          <td hideable-td="first_name" [parent]="this">
+            <span class="p-column-title">{{'common.first_name' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input class="table-edit-input" pInputText type="text" [(ngModel)]="user.firstName"
@ -134,6 +135,7 @@
            </p-cellEditor>
          </td>
          <td hideable-td="last_name" [parent]="this">
+            <span class="p-column-title">{{'common.last_name' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input class="table-edit-input" pInputText type="text" [(ngModel)]="user.lastName"
@ -145,6 +147,7 @@
            </p-cellEditor>
          </td>
          <td hideable-td="email" [parent]="this">
+            <span class="p-column-title">{{'common.email' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input class="table-edit-input" pInputText type="email" [(ngModel)]="user.email"
@ -156,6 +159,7 @@
            </p-cellEditor>
          </td>
          <td hideable-td="active" [parent]="this">
+            <span class="p-column-title">{{'common.active' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <p-checkbox [binary]="true" [(ngModel)]="user.isConfirmed"
@ -169,6 +173,7 @@
            </p-cellEditor>
          </td>
          <td hideable-td="auth_role" [parent]="this">
+            <span class="p-column-title">{{'common.auth_role' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <p-dropdown [options]="authRoles" [(ngModel)]="user.authRole"
@ -180,6 +185,7 @@
            </p-cellEditor>
          </td>
          <td hideable-td="password" [parent]="this">
+            <span class="p-column-title">{{'common.password' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input class="table-edit-input" pInputText type="password" [(ngModel)]="user.password"
@ -190,6 +196,7 @@
            </p-cellEditor>
          </td>
          <td>
+            <span class="p-column-title">{{'common.created_at' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{user.createdAt | date:'dd.MM.yy HH:mm'}}
@ -200,6 +207,7 @@
            </p-cellEditor>
          </td>
          <td>
+            <span class="p-column-title">{{'common.modified_at' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{user.modifiedAt | date:'dd.MM.yy HH:mm'}}
--- a/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component
+++ b/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component
--- a/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.scss
+++ b/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.scss
@ -0,0 +1,214 @@
+
+--boundary_.oOo._jr8hB+CSPa28lAJeDsUSxu1VQRGpqI1S
+Content-Length: 685
+Content-Type: application/octet-stream
+X-File-MD5: 1d28256a85a8151eda5ddb0eee5cfb41
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.spec.ts
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MultiSelectColumnsComponent } from './multi-select-columns.component';
+
+describe('MultiSelectColumnsComponent', () => {
+  let component: MultiSelectColumnsComponent;
+  let fixture: ComponentFixture<MultiSelectColumnsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MultiSelectColumnsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MultiSelectColumnsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+--boundary_.oOo._jr8hB+CSPa28lAJeDsUSxu1VQRGpqI1S
+Content-Length: 880
+Content-Type: application/octet-stream
+X-File-MD5: 24258891482f4097bd6573c263a5ee80
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/base/multi-select-columns/multi-select-columns.component.ts
+
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { Column } from "../../../../base/component-with-table";
+
+@Component({
+  selector: "app-multi-select-columns",
+  templateUrl: "./multi-select-columns.component.html",
+  styleUrls: ["./multi-select-columns.component.scss"]
+})
+export class MultiSelectColumnsComponent {
+  @Input() columns: Column[] = [];
+
+  private _hiddenColumns: Column[] = [];
+  @Input() table: String = "";
+
+  @Input()
+  set hiddenColumns(columns: Column[]) {
+    this._hiddenColumns = columns;
+    this.hiddenColumnsChange.emit(columns);
+  }
+
+  get hiddenColumns(): Column[] {
+    return this._hiddenColumns;
+  }
+
+  get visibleHiddenColumns(): Column[] {
+    return this._hiddenColumns.filter(x => x.key?.startsWith(`${this.table}_`));
+  }
+
+  @Output() hiddenColumnsChange: EventEmitter<Column[]> = new EventEmitter<Column[]>();
+}
+
+--boundary_.oOo._jr8hB+CSPa28lAJeDsUSxu1VQRGpqI1S
+Content-Length: 199
+Content-Type: application/octet-stream
+X-File-MD5: 625262cf0af1c5538f6fa7bbe71b41a0
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/base/hideable-component.spec.ts
+
+import { HideableComponent } from './hideable-component';
+
+describe('HideableComponent', () => {
+  it('should create an instance', () => {
+    expect(new HideableComponent()).toBeTruthy();
+  });
+});
+
+--boundary_.oOo._jr8hB+CSPa28lAJeDsUSxu1VQRGpqI1S
+Content-Length: 379
+Content-Type: application/octet-stream
+X-File-MD5: 739e92fabd3a9534351c0a3504d01d9b
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/base/hideable-component.ts
+
+import { Directive, HostBinding, Input } from "@angular/core";
+import { ComponentWithTable } from "../../../base/component-with-table";
+
+@Directive()
+export class HideableComponent {
+  @HostBinding("class.hidden-column")
+  get hidden() {
+    return !(this.parent?.isColumnVisible(this.column) ?? true);
+  };
+
+  @Input() column!: string;
+  @Input() parent!: ComponentWithTable;
+}
+
+--boundary_.oOo._jr8hB+CSPa28lAJeDsUSxu1VQRGpqI1S
+Content-Length: 2593
+Content-Type: application/octet-stream
+X-File-MD5: cb7466e3bdbb7d60d74f2dd62b75b6dc
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/config-list/config-list.component.html
+
+<div class="content-row">
+  <div class="content-column">
+    <div class="content-data-name">
+      {{translationKey | translate}}:
+    </div>
+    <div class="content-data-value-row">
+      <p-table #dt [value]="internal_data" [responsive]="true"  responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row">
+        <ng-template pTemplate="caption">
+          <div class="table-caption">
+            <div class="table-caption-btn-wrapper btn-wrapper">
+              <button pButton class="icon-btn btn"
+                      icon="pi pi-plus" (click)="addNew(dt)">
+              </button>
+            </div>
+          </div>
+        </ng-template>
+        <ng-template pTemplate="body" let-value let-editing="editing" let-ri="rowIndex">
+          <tr class="content-table-row" [pEditableRow]="value" style="display: flex;">
+            <td style="flex: 1;">
+              <p-cellEditor>
+                <ng-template pTemplate="input">
+                  <p-dropdown *ngIf="options" [options]="options" [optionLabel]="optionLabel ?? ''" [optionValue]="optionValue ?? ''" [(ngModel)]="value.value"></p-dropdown>
+
+                  <input *ngIf="!options" class="table-edit-input" pInputText type="text" [(ngModel)]="value.value">
+                </ng-template>
+                <ng-template pTemplate="output">
+                  <p-dropdown *ngIf="options" [options]="options" [optionLabel]="optionLabel ?? ''" [optionValue]="optionValue ?? ''" [(ngModel)]="value.value" [disabled]="true"></p-dropdown>
+                  <input *ngIf="!options" class="table-edit-input" pInputText type="text" [(ngModel)]="value.value" [disabled]="true">
+                </ng-template>
+              </p-cellEditor>
+            </td>
+            <td>
+              <div class="btn-wrapper">
+                <button *ngIf="!editing" pButton type="button" pInitEditableRow class="btn icon-btn" icon="pi pi-pencil" (click)="editInit(value, ri)"></button>
+                <button *ngIf="!editing" pButton type="button" class="btn danger-icon-btn" icon="pi pi-trash" (click)="delete(ri)"></button>
+
+                <button *ngIf="editing" pButton type="button" pSaveEditableRow class="btn icon-btn" icon="pi pi-check" (click)="editSave(value, ri)"></button>
+                <button *ngIf="editing" pButton type="button" pCancelEditableRow class="btn danger-icon-btn" icon="pi pi-times"
+                        (click)="editCancel(ri)"></button>
+              </div>
+            </td>
+          </tr>
+        </ng-template>
+      </p-table>
+    </div>
+  </div>
+</div>
+<div class="content-divider"></div>
+
+--boundary_.oOo._jr8hB+CSPa28lAJeDsUSxu1VQRGpqI1S
+Content-Length: 0
+Content-Type: application/octet-stream
+X-File-MD5: d41d8cd98f00b204e9800998ecf8427e
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/config-list/config-list.component.scss
+
+
+--boundary_.oOo._jr8hB+CSPa28lAJeDsUSxu1VQRGpqI1S
+Content-Length: 628
+Content-Type: application/octet-stream
+X-File-MD5: 3ae713f045160ae23d9e2d7d39c47cc8
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/config-list/config-list.component.spec.ts
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigListComponent } from './config-list.component';
+
+describe('ConfigListComponent', () => {
+  let component: ConfigListComponent;
+  let fixture: ComponentFixture<ConfigListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfigListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ConfigListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+--boundary_.oOo._jr8hB+CSPa28lAJeDsUSxu1VQRGpqI1S
+Content-Length: 1909
+Content-Type: application/octet-stream
+X-File-MD5: ef17560ccaae24eb4ab2d2bea3dfef3e
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/config-list/config-list.component.ts
+
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { Table } from "primeng/table";
+
+@Component({
+  selector: "app-config-list",
+  templateUrl: "./config-list.component.html",
--- a/kdb-web/src/app/modules/shared/components/config-list/config-list.component
+++ b/kdb-web/src/app/modules/shared/components/config-list/config-list.component
--- a/kdb-web/src/app/modules/shared/components/config-list/config-list.component.scss
+++ b/kdb-web/src/app/modules/shared/components/config-list/config-list.component.scss
@ -0,0 +1,232 @@
+
+--boundary_.oOo._it/29I5GYOGQacfyrk8Hzb13cRhzjKUr
+Content-Length: 628
+Content-Type: application/octet-stream
+X-File-MD5: 3ae713f045160ae23d9e2d7d39c47cc8
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/config-list/config-list.component.spec.ts
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfigListComponent } from './config-list.component';
+
+describe('ConfigListComponent', () => {
+  let component: ConfigListComponent;
+  let fixture: ComponentFixture<ConfigListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfigListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ConfigListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+--boundary_.oOo._it/29I5GYOGQacfyrk8Hzb13cRhzjKUr
+Content-Length: 1909
+Content-Type: application/octet-stream
+X-File-MD5: ef17560ccaae24eb4ab2d2bea3dfef3e
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/config-list/config-list.component.ts
+
+import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
+import { Table } from "primeng/table";
+
+@Component({
+  selector: "app-config-list",
+  templateUrl: "./config-list.component.html",
+  styleUrls: ["./config-list.component.scss"]
+})
+export class ConfigListComponent {
+  internal_data: any[] = [];
+
+  @Input() translationKey: string = "";
+  @Input() options?: Array<any>;
+  @Input() optionLabel?: string = "";
+  @Input() optionValue?: string = "";
+
+  @Input()
+  set data(val: any[]) {
+    this.dataChange.emit(val);
+    let id = 0;
+    this.internal_data = val.map(value => {
+      value = { id: id, value: value };
+      id++;
+      return value;
+    });
+  }
+
+  get data() {
+    return this.getData();
+  }
+
+  @Output() dataChange: EventEmitter<any> = new EventEmitter<any>();
+  clonedData: { [s: number]: any } = {};
+
+  private getData(): any[] {
+    return this.internal_data.map(value => {
+      return value.value;
+    });
+  }
+
+  addNew(table: Table) {
+    const id = this.internal_data.length == 0 ? 1 : Math.max.apply(Math, this.internal_data.map(value => {
+      return value.id ?? 0;
+    })) + 1;
+    const newItem = { id: id, value: "" };
+    this.internal_data.push(newItem);
+
+    table.initRowEdit(newItem);
+    const index = this.internal_data.findIndex(l => l.id == newItem.id);
+    this.editInit(newItem, index);
+  }
+
+  editInit(value: any, index: number) {
+    this.clonedData[index] = { ...value };
+  }
+
+  delete(index: number) {
+    this.internal_data.splice(index, 1);
+    this.dataChange.emit(this.getData());
+  }
+
+  editSave(value: any, index: number) {
+    if (!value.value || this.internal_data[index] == this.clonedData[index]) {
+      return;
+    }
+
+    delete this.clonedData[index];
+    this.dataChange.emit(this.getData());
+  }
+
+  editCancel(index: number) {
+    this.internal_data[index] = this.clonedData[index];
+    delete this.clonedData[index];
+  }
+}
+
+--boundary_.oOo._it/29I5GYOGQacfyrk8Hzb13cRhzjKUr
+Content-Length: 2620
+Content-Type: application/octet-stream
+X-File-MD5: 5e6ef4e04375f2a95479719a36283e37
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.html
+
+<div class="content-row">
+  <div class="content-column">
+    <div class="content-data-name">
+      {{'common.feature_flags' | translate}}:
+    </div>
+    <div class="content-data-value-row">
+      <p-table #dt [value]="internal_data" [responsive]="true"  responsiveLayout="stack" [breakpoint]="'720px'" dataKey="id" editMode="row">
+        <ng-template pTemplate="caption">
+          <div class="table-caption">
+            <div class="table-caption-btn-wrapper btn-wrapper">
+              <button pButton class="icon-btn btn"
+                      icon="pi pi-plus" (click)="addNew(dt)">
+              </button>
+            </div>
+          </div>
+        </ng-template>
+        <ng-template pTemplate="body" let-value let-editing="editing" let-ri="rowIndex">
+          <tr [pEditableRow]="value" style="display: flex;">
+            <td style="flex: 3;">
+              <p-cellEditor>
+                <ng-template pTemplate="input">
+                  <p-dropdown class="table-edit-input" [options]="featureFlags" [(ngModel)]="value.value.key"></p-dropdown>
+                </ng-template>
+                <ng-template pTemplate="output">
+                  {{value.value.key}}
+                </ng-template>
+              </p-cellEditor>
+            </td>
+            <td style="flex: 1;">
+              <p-cellEditor>
+                <ng-template pTemplate="input">
+                  <p-inputSwitch class="table-edit-input" [(ngModel)]="value.value.value"></p-inputSwitch>
+                </ng-template>
+                <ng-template pTemplate="output">
+                  <p-inputSwitch class="table-edit-input" [(ngModel)]="value.value.value" [disabled]="true"></p-inputSwitch>
+                </ng-template>
+              </p-cellEditor>
+            </td>
+            <td>
+              <div class="btn-wrapper">
+                <button *ngIf="!editing" pButton type="button" pInitEditableRow class="btn icon-btn" icon="pi pi-pencil" (click)="editInit(value, ri)"></button>
+                <button *ngIf="!editing" pButton type="button" class="btn danger-icon-btn" icon="pi pi-trash" (click)="delete(ri)"></button>
+
+                <button *ngIf="editing" pButton type="button" pSaveEditableRow class="btn icon-btn" icon="pi pi-check" (click)="editSave(value, ri)"></button>
+                <button *ngIf="editing" pButton type="button" pCancelEditableRow class="btn danger-icon-btn" icon="pi pi-times"
+                        (click)="editCancel(ri)"></button>
+              </div>
+            </td>
+          </tr>
+        </ng-template>
+      </p-table>
+    </div>
+  </div>
+</div>
+<div class="content-divider"></div>
+
+--boundary_.oOo._it/29I5GYOGQacfyrk8Hzb13cRhzjKUr
+Content-Length: 0
+Content-Type: application/octet-stream
+X-File-MD5: d41d8cd98f00b204e9800998ecf8427e
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.scss
+
+
+--boundary_.oOo._it/29I5GYOGQacfyrk8Hzb13cRhzjKUr
+Content-Length: 664
+Content-Type: application/octet-stream
+X-File-MD5: 37fdfe67d5f5a8a8c2a405cf3a5b3bc5
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.spec.ts
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeatureFlagListComponent } from './feature-flag-list.component';
+
+describe('FeatureFlagListComponent', () => {
+  let component: FeatureFlagListComponent;
+  let fixture: ComponentFixture<FeatureFlagListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FeatureFlagListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FeatureFlagListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+--boundary_.oOo._it/29I5GYOGQacfyrk8Hzb13cRhzjKUr
+Content-Length: 1293
+Content-Type: application/octet-stream
+X-File-MD5: ede63687557453dc3854bba967467dab
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.ts
+
+import { Component, OnInit } from "@angular/core";
+import { ConfigListComponent } from "../config-list/config-list.component";
+import { Table } from "primeng/table";
+import { PossibleFeatureFlagsQuery } from "../../../../models/graphql/query.model";
+import { DataService } from "../../../../services/data/data.service";
+
+@Component({
+  selector: 
--- a/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component
+++ b/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component
--- a/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.scss
+++ b/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.scss
@ -0,0 +1,243 @@
+
+--boundary_.oOo._H1x5z3eY/ud1zeDI7D2/UcT9gomF2WOe
+Content-Length: 664
+Content-Type: application/octet-stream
+X-File-MD5: 37fdfe67d5f5a8a8c2a405cf3a5b3bc5
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.spec.ts
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeatureFlagListComponent } from './feature-flag-list.component';
+
+describe('FeatureFlagListComponent', () => {
+  let component: FeatureFlagListComponent;
+  let fixture: ComponentFixture<FeatureFlagListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ FeatureFlagListComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FeatureFlagListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+--boundary_.oOo._H1x5z3eY/ud1zeDI7D2/UcT9gomF2WOe
+Content-Length: 1293
+Content-Type: application/octet-stream
+X-File-MD5: ede63687557453dc3854bba967467dab
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/feature-flag-list/feature-flag-list.component.ts
+
+import { Component, OnInit } from "@angular/core";
+import { ConfigListComponent } from "../config-list/config-list.component";
+import { Table } from "primeng/table";
+import { PossibleFeatureFlagsQuery } from "../../../../models/graphql/query.model";
+import { DataService } from "../../../../services/data/data.service";
+
+@Component({
+  selector: "app-feature-flag-list",
+  templateUrl: "./feature-flag-list.component.html",
+  styleUrls: ["./feature-flag-list.component.scss"]
+})
+export class FeatureFlagListComponent extends ConfigListComponent implements OnInit {
+  featureFlags: string[] = [];
+
+
+  constructor(
+    private dataService: DataService
+  ) {
+    super();
+  }
+
+  ngOnInit() {
+    this.dataService.query<PossibleFeatureFlagsQuery>("{possibleFeatureFlags}"
+    ).subscribe(data => {
+      this.featureFlags = data.possibleFeatureFlags;
+    });
+  }
+
+  override addNew(table: Table) {
+    const id = this.internal_data.length == 0 ? 1 : Math.max.apply(Math, this.internal_data.map(value => {
+      return value.id ?? 0;
+    })) + 1;
+    const newItem = { id: id, value: { key: "", value: false } };
+    this.internal_data.push(newItem);
+
+    table.initRowEdit(newItem);
+    const index = this.internal_data.findIndex(l => l.id == newItem.id);
+    this.editInit(newItem, index);
+  }
+}
+
+--boundary_.oOo._H1x5z3eY/ud1zeDI7D2/UcT9gomF2WOe
+Content-Length: 26
+Content-Type: application/octet-stream
+X-File-MD5: e85920b944bbffbc7960571f70b55f05
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.html
+
+<ng-content></ng-content>
+
+--boundary_.oOo._H1x5z3eY/ud1zeDI7D2/UcT9gomF2WOe
+Content-Length: 1
+Content-Type: application/octet-stream
+X-File-MD5: 68b329da9893e34099c7d8ad5cb9c940
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.scss
+
+
+
+--boundary_.oOo._H1x5z3eY/ud1zeDI7D2/UcT9gomF2WOe
+Content-Length: 656
+Content-Type: application/octet-stream
+X-File-MD5: 507dfa7c61fbafbcdea5003a30024135
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.spec.ts
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HideableColumnComponent } from './hideable-column.component';
+
+describe('HideableColumnComponent', () => {
+  let component: HideableColumnComponent;
+  let fixture: ComponentFixture<HideableColumnComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HideableColumnComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HideableColumnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+--boundary_.oOo._H1x5z3eY/ud1zeDI7D2/UcT9gomF2WOe
+Content-Length: 418
+Content-Type: application/octet-stream
+X-File-MD5: 8741a48f8100c9f6db27f9a720fd5b46
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/hideable-column/hideable-column.component.ts
+
+import { Component, Input } from "@angular/core";
+import { HideableComponent } from "../../base/hideable-component";
+
+@Component({
+  selector: "[hideable-td]",
+  templateUrl: "./hideable-column.component.html",
+  styleUrls: ["./hideable-column.component.scss"]
+})
+export class HideableColumnComponent extends HideableComponent {
+  @Input("hideable-td") override column!: string;
+
+  constructor() {
+    super();
+  }
+
+}
+
+--boundary_.oOo._H1x5z3eY/ud1zeDI7D2/UcT9gomF2WOe
+Content-Length: 297
+Content-Type: application/octet-stream
+X-File-MD5: 292d9c607ea51632d90597cf5e693b4b
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.html
+
+<ng-template #content>
+  <ng-content></ng-content>
+</ng-template>
+
+<div *ngIf="sortable; else without" [pSortableColumn]="column">
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</div>
+
+<ng-template #without>
+  <ng-container *ngTemplateOutlet="content"></ng-container>
+</ng-template>
+
+--boundary_.oOo._H1x5z3eY/ud1zeDI7D2/UcT9gomF2WOe
+Content-Length: 0
+Content-Type: application/octet-stream
+X-File-MD5: d41d8cd98f00b204e9800998ecf8427e
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.scss
+
+
+--boundary_.oOo._H1x5z3eY/ud1zeDI7D2/UcT9gomF2WOe
+Content-Length: 656
+Content-Type: application/octet-stream
+X-File-MD5: d5d1643bc0a64485679b2514ae9473f6
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.spec.ts
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HideableHeaderComponent } from './hideable-header.component';
+
+describe('HideableHeaderComponent', () => {
+  let component: HideableHeaderComponent;
+  let fixture: ComponentFixture<HideableHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HideableHeaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HideableHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+--boundary_.oOo._H1x5z3eY/ud1zeDI7D2/UcT9gomF2WOe
+Content-Length: 455
+Content-Type: application/octet-stream
+X-File-MD5: ab629fca59b67e4fafb0876fef35306e
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.ts
+
+import { Component, Input } from "@angular/core";
+import { HideableComponent } from "../../base/hideable-component";
+
+@Component({
+  selector: "[hideable-th]",
+  templateUrl: "./hideable-header.component.html",
+  styleUrls: ["./hideable-header.component.scss"]
+})
+export class HideableHeaderComponent extends HideableComponent {
+  @Input("hideable-th") override column!: string;
+  @Input() sortable: boolean = false;
+  constructor() {
+    super();
+  }
+
+}
+
+--boundary_.oOo._H1x5z3eY/ud1zeDI7D2/UcT9gomF2WOe
+Content-Length: 713
+Content-Type: application/octet-stream
+X-File-MD5: b22ca70e7da1b717860dee4d0ca1d62d
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/history-btn/history-btn.component.html
+
+<button pButton clas
--- a/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component
+++ b/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component
--- a/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.scss
+++ b/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.scss
@ -0,0 +1,254 @@
+
+--boundary_.oOo._daAGe7she4XSHxDe7WcIB0TGtNyzt3jc
+Content-Length: 656
+Content-Type: application/octet-stream
+X-File-MD5: d5d1643bc0a64485679b2514ae9473f6
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.spec.ts
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HideableHeaderComponent } from './hideable-header.component';
+
+describe('HideableHeaderComponent', () => {
+  let component: HideableHeaderComponent;
+  let fixture: ComponentFixture<HideableHeaderComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HideableHeaderComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HideableHeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+--boundary_.oOo._daAGe7she4XSHxDe7WcIB0TGtNyzt3jc
+Content-Length: 455
+Content-Type: application/octet-stream
+X-File-MD5: ab629fca59b67e4fafb0876fef35306e
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/hideable-header/hideable-header.component.ts
+
+import { Component, Input } from "@angular/core";
+import { HideableComponent } from "../../base/hideable-component";
+
+@Component({
+  selector: "[hideable-th]",
+  templateUrl: "./hideable-header.component.html",
+  styleUrls: ["./hideable-header.component.scss"]
+})
+export class HideableHeaderComponent extends HideableComponent {
+  @Input("hideable-th") override column!: string;
+  @Input() sortable: boolean = false;
+  constructor() {
+    super();
+  }
+
+}
+
+--boundary_.oOo._daAGe7she4XSHxDe7WcIB0TGtNyzt3jc
+Content-Length: 713
+Content-Type: application/octet-stream
+X-File-MD5: b22ca70e7da1b717860dee4d0ca1d62d
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/history-btn/history-btn.component.html
+
+<button pButton class="btn icon-btn" icon="pi pi-history" (click)="openHistory()"></button>
+
+<p-sidebar styleClass="history p-sidebar-md" [(visible)]="showSidebar" position="right" [baseZIndex]="10000">
+  <h1>{{translationKey | translate}} {{'common.history.header' | translate}}</h1>
+
+  <div class="entry-list">
+    <div class="entry" *ngFor="let entry of history">
+      <div class="attribute" *ngFor="let item of entry | keyvalue">
+        <div class="key">
+          {{getAttributeTranslationKey(item.key) | translate}}
+        </div>
+        <div class="seperator">
+          ->
+        </div>
+        <div class="value">
+          {{item.value}}
+        </div>
+      </div>
+    </div>
+  </div>
+</p-sidebar>
+
+--boundary_.oOo._daAGe7she4XSHxDe7WcIB0TGtNyzt3jc
+Content-Length: 0
+Content-Type: application/octet-stream
+X-File-MD5: d41d8cd98f00b204e9800998ecf8427e
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/history-btn/history-btn.component.scss
+
+
+--boundary_.oOo._daAGe7she4XSHxDe7WcIB0TGtNyzt3jc
+Content-Length: 628
+Content-Type: application/octet-stream
+X-File-MD5: 9402788f75ea5a8623d79889ad424bd2
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/history-btn/history-btn.component.spec.ts
+
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HistoryBtnComponent } from './history-btn.component';
+
+describe('HistoryBtnComponent', () => {
+  let component: HistoryBtnComponent;
+  let fixture: ComponentFixture<HistoryBtnComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HistoryBtnComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HistoryBtnComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+
+--boundary_.oOo._daAGe7she4XSHxDe7WcIB0TGtNyzt3jc
+Content-Length: 2980
+Content-Type: application/octet-stream
+X-File-MD5: afeaecdcc76b91f894e35534d725e0b5
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/shared/components/history-btn/history-btn.component.ts
+
+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",
+  templateUrl: "./history-btn.component.html",
+  styleUrls: ["./history-btn.component.scss"]
+})
+export class HistoryBtnComponent implements OnInit {
+
+  @Input() id: number = 0;
+  @Input() query: string = "";
+  @Input() translationKey: string = "";
+
+  public history: History[] = [];
+
+  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) => {
+        return key;
+      });
+      for (const attribute of attributes) {
+        if (history[attribute] === oldHistory[attribute]) {
+          delete oldHistory[attribute];
+        }
+      }
+
+      oldHistory = history;
+    }
+  }
+
+  public getAttributeTranslationKey(key: string): string {
+    return `common.history.${key}`;
+  }
+
+}
+
+--boundary_.oOo._daAGe7she4XSHxDe7WcIB0TGtNyzt3jc
+Content-Length: 388
+Content-Type: application/octet-stream
+X-File-MD5: 9c37a4c3e13b9de4de01ae1a75483c17
+X-File-Mtime: 1692365334
+X-File-Path: /Schreibtisch/git_sh-edraft_de/kd_discord_bot/kdb-web/src/app/modules/view/server/achievements/achievements-routing.module.ts
+
+import {NgModule} from "@angular/core";
+import {RouterModule, Routes} from "@angular/router";
+import { AchievementComponent } from "./components/achievement/achievement.component";
+
+const routes: Routes = [
+
+  {path: '', component: AchievementComponent},
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class AchievementsRoutingModule {
+
+}
+
+--boundary_.oOo._daAGe7she4XSHxDe7WcIB0TGtNyzt3jc
--- a/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html
+++ b/kdb-web/src/app/modules/view/server/achievements/components/achievement/achievement.component.html
@ -125,6 +125,7 @@
      <ng-template pTemplate="body" let-achievement let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="achievement">
          <td hideable-td="id" [parent]="this">
+            <span class="p-column-title">{{'common.id' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{achievement.id}}
@ -136,6 +137,7 @@
          </td>

          <td hideable-td="name" [parent]="this">
+            <span class="p-column-title">{{'common.name' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input class="table-edit-input" pInputText type="text" [(ngModel)]="achievement.name">
@ -147,6 +149,7 @@
          </td>

          <td hideable-td="description" [parent]="this">
+            <span class="p-column-title">{{'common.description' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input class="table-edit-input" pInputText type="text" [(ngModel)]="achievement.description">
@ -158,6 +161,7 @@
          </td>

          <td hideable-td="attribute" [parent]="this">
+            <span class="p-column-title">{{'common.attribute' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <p-dropdown [options]="attributes" [(ngModel)]="achievement.attribute"
@ -170,6 +174,7 @@
          </td>

          <td hideable-td="description" [parent]="this">
+            <span class="p-column-title">{{'common.operator' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <p-dropdown [options]="operators" [(ngModel)]="achievement.operator" placeholder="{{'common.operator' | translate}}"></p-dropdown>
@ -181,6 +186,7 @@
          </td>

          <td hideable-td="value" [parent]="this">
+            <span class="p-column-title">{{'common.value' | translate}}:</span>
            <p-cellEditor *ngIf="getAchievementAttributeByName(achievement.attribute)?.type === 'number'">
              <ng-template pTemplate="input">
                <input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="achievement.value">
@ -210,6 +216,7 @@
          </td>

          <td>
+            <span class="p-column-title">{{'common.created_at' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{achievement.createdAt | date:'dd.MM.yy HH:mm'}}
@ -220,6 +227,7 @@
            </p-cellEditor>
          </td>
          <td>
+            <span class="p-column-title">{{'common.modified_at' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{achievement.modifiedAt | date:'dd.MM.yy HH:mm'}}
--- a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html
+++ b/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles-rules/auto-roles-rules.component.html
@ -92,6 +92,7 @@
      <ng-template pTemplate="body" let-autoRoleRule let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="autoRoleRule">
          <td hideable-td="id" [parent]="this">
+            <span class="p-column-title">{{'common.id' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{autoRoleRule.id}}
@ -103,6 +104,7 @@
          </td>

          <td hideable-td="role" [parent]="this">
+            <span class="p-column-title">{{'common.role' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <p-dropdown [options]="roles" optionValue="value.id" [(ngModel)]="autoRoleRule.roleId"
@ -115,6 +117,7 @@
          </td>

          <td hideable-td="emoji" [parent]="this">
+            <span class="p-column-title">{{'common.emoji' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <p-dropdown [options]="emojis" optionValue="value.name" [(ngModel)]="autoRoleRule.emojiName"
@ -140,6 +143,7 @@
          </td>

          <td>
+            <span class="p-column-title">{{'common.created_at' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{autoRoleRule.createdAt | date:'dd.MM.yy HH:mm'}}
@ -152,6 +156,7 @@

          <td>
            <p-cellEditor>
+              <span class="p-column-title">{{'common.modified_at' | translate}}:</span>
              <ng-template pTemplate="input">
                {{autoRoleRule.modifiedAt | date:'dd.MM.yy HH:mm'}}
              </ng-template>
--- a/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html
+++ b/kdb-web/src/app/modules/view/server/auto-role/components/auto-roles/auto-roles.component.html
@ -117,6 +117,7 @@
      <ng-template pTemplate="body" let-autoRole let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="autoRole">
          <td hideable-td="id" [parent]="this">
+            <span class="p-column-title">{{'common.id' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{autoRole.id}}
@ -128,6 +129,7 @@
          </td>

          <td hideable-td="channel_id" [parent]="this">
+            <span class="p-column-title">{{'common.channel_id' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <p-dropdown [options]="channels" optionValue="value.id" [(ngModel)]="autoRole.channelId"
@ -140,6 +142,7 @@
          </td>

          <td hideable-td="channel_name" [parent]="this">
+            <span class="p-column-title">{{'common.channel_name' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{autoRole.channelName}}
@ -151,6 +154,7 @@
          </td>

          <td hideable-td="message_id" [parent]="this">
+            <span class="p-column-title">{{'common.message_id' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input pInputText class="table-edit-input" [(ngModel)]="autoRole.messageId">
@ -162,6 +166,7 @@
          </td>

          <td hideable-td="rule_count" [parent]="this">
+            <span class="p-column-title">{{'common.rule_count' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{autoRole.autoRoleRuleCount}}
@ -173,6 +178,7 @@
          </td>

          <td>
+            <span class="p-column-title">{{'common.created_at' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{autoRole.createdAt | date:'dd.MM.yy HH:mm'}}
@ -184,6 +190,7 @@
          </td>

          <td>
+            <span class="p-column-title">{{'common.modified_at' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{autoRole.modifiedAt | date:'dd.MM.yy HH:mm'}}
@ -196,8 +203,6 @@

          <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" [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"
--- 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
@ -112,6 +112,7 @@
      <ng-template pTemplate="body" let-level let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="level">
          <td hideable-th="id" [parent]="this">
+            <span class="p-column-title">{{'common.id' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{level.id}}
@ -123,6 +124,7 @@
          </td>

          <td hideable-th="name" [parent]="this">
+            <span class="p-column-title">{{'common.name' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.name">
@ -134,6 +136,7 @@
          </td>

          <td hideable-th="color" [parent]="this">
+            <span class="p-column-title">{{'common.color' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input class="table-edit-input" pInputText type="text" [(ngModel)]="level.color">
@ -145,6 +148,7 @@
          </td>

          <td hideable-th="min_xp" [parent]="this">
+            <span class="p-column-title">{{'common.min_xp' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="level.minXp">
@ -156,6 +160,7 @@
          </td>

          <td hideable-th="permissions" [parent]="this">
+            <span class="p-column-title">{{'common.permissions' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input class="table-edit-input" pInputText min="0" type="text" [(ngModel)]="level.permissions">
@ -167,6 +172,7 @@
          </td>

          <td>
+            <span class="p-column-title">{{'common.created_at' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{level.createdAt | date:'dd.MM.yy HH:mm'}}
@ -177,6 +183,7 @@
            </p-cellEditor>
          </td>
          <td>
+            <span class="p-column-title">{{'common.modified_at' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{level.modifiedAt | date:'dd.MM.yy HH:mm'}}
--- a/kdb-web/src/app/modules/view/server/members/members.component.html
+++ b/kdb-web/src/app/modules/view/server/members/members.component.html
@ -135,6 +135,7 @@
      <ng-template pTemplate="body" let-member let-editing="editing" let-ri="rowIndex">
        <tr [pEditableRow]="member">
          <td hideable-th="id" [parent]="this">
+            <span class="p-column-title">{{'common.id' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{member.id}}
@ -145,6 +146,7 @@
            </p-cellEditor>
          </td>
          <td hideable-th="discord_id" [parent]="this">
+            <span class="p-column-title">{{'common.discord_id' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{member.discordId}}
@ -155,6 +157,7 @@
            </p-cellEditor>
          </td>
          <td hideable-th="name" [parent]="this">
+            <span class="p-column-title">{{'common.name' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{member.name}}
@ -165,6 +168,7 @@
            </p-cellEditor>
          </td>
          <td hideable-th="xp" [parent]="this">
+            <span class="p-column-title">{{'common.xp' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <input class="table-edit-input" pInputText min="0" type="number" [(ngModel)]="member.xp">
@ -175,6 +179,7 @@
            </p-cellEditor>
          </td>
          <td hideable-th="ontime" [parent]="this">
+            <span class="p-column-title">{{'common.ontime' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{member.ontime}}
@ -185,6 +190,7 @@
            </p-cellEditor>
          </td>
          <td hideable-th="left_server" [parent]="this">
+            <span class="p-column-title">{{'common.left_server' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{!member.leftServer | bool}}
@ -195,6 +201,7 @@
            </p-cellEditor>
          </td>
          <td hideable-th="level" [parent]="this">
+            <span class="p-column-title">{{'common.level' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                <p-dropdown [options]="levels" [(ngModel)]="member.level" placeholder="{{'common.level' | translate}}"></p-dropdown>
@ -205,6 +212,7 @@
            </p-cellEditor>
          </td>
          <td>
+            <span class="p-column-title">{{'common.created_at' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{member.createdAt | date:'dd.MM.yy HH:mm'}}
@ -215,6 +223,7 @@
            </p-cellEditor>
          </td>
          <td>
+            <span class="p-column-title">{{'common.modified_at' | translate}}:</span>
            <p-cellEditor>
              <ng-template pTemplate="input">
                {{member.modifiedAt | date:'dd.MM.yy HH:mm'}}
--- a/kdb-web/src/styles.scss
+++ b/kdb-web/src/styles.scss
@ -729,8 +729,25 @@ p-inputNumber {
    }
  }

+  td {
+    .btn-wrapper {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+
+  .p-column-title {
+    min-width: 50%;
+    font-weight: 600;
+  }
+
  p-cellEditor {
    width: 100%;
+
+    display: flex;
+    justify-content: flex-end;
+    text-align: end;
+    word-break: break-word;
  }

  .p-multiselect {