From 4ea1b5b94cb1172a53fad150836309f58896bc30 Mon Sep 17 00:00:00 2001
From: Sven Heidemann <sven.heidemann@sh-edraft.de>
Date: Fri, 18 Aug 2023 16:01:20 +0200
Subject: [PATCH] Improved table responsive mode #1.1.0.rc5

---
 .../auth-user/auth-user.component.html          |  8 ++++++++
 .../achievement/achievement.component.html      |  8 ++++++++
 .../auto-roles-rules.component.html             |  5 +++++
 .../auto-roles/auto-roles.component.html        |  9 +++++++--
 .../components/levels/levels.component.html     |  7 +++++++
 .../view/server/members/members.component.html  |  9 +++++++++
 kdb-web/src/styles.scss                         | 17 +++++++++++++++++
 7 files changed, 61 insertions(+), 2 deletions(-)

diff --git 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
index 835e7bf6..5e81d634 100644
--- 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'}}
diff --git 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
index 3dda6d09..52f73c62 100644
--- 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'}}
diff --git 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
index f88b09fc..269d0329 100644
--- 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>
diff --git 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
index 02fd6229..bee0c5c7 100644
--- 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"
diff --git 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
index 59d420e9..8d3a6320 100644
--- 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'}}
diff --git a/kdb-web/src/app/modules/view/server/members/members.component.html b/kdb-web/src/app/modules/view/server/members/members.component.html
index 035a3011..1054f688 100644
--- 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'}}
diff --git a/kdb-web/src/styles.scss b/kdb-web/src/styles.scss
index 5eb69010..a1bf817c 100644
--- 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 {