From 6831d349890e5d1a63565f949be0f808e38dfa25 Mon Sep 17 00:00:00 2001
From: Karol Bakas <karol.bakas@fau.de>
Date: Sun, 24 Jul 2022 04:55:37 +0200
Subject: [PATCH 1/3] #208 added tooltip and scrollbar to mat-cell items

Signed-off-by: Karol Bakas <karol.bakas@fau.de>
---
 .../components/material/material.module.ts    |  2 +
 .../filtered-table.component.css              | 41 +++++++++++++++++++
 .../filtered-table.component.html             | 28 ++++++++++---
 .../filtered-table.component.ts               | 21 +++++-----
 4 files changed, 76 insertions(+), 16 deletions(-)

diff --git a/src/digitalIdentity-frontend/src/app/components/material/material.module.ts b/src/digitalIdentity-frontend/src/app/components/material/material.module.ts
index 11abca47..bab028ac 100644
--- a/src/digitalIdentity-frontend/src/app/components/material/material.module.ts
+++ b/src/digitalIdentity-frontend/src/app/components/material/material.module.ts
@@ -22,6 +22,7 @@ import { MatRadioModule } from '@angular/material/radio';
 
 //module for DD/MM/YYYY date format
 import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 const MaterialComponents = [
   MatButtonModule,
@@ -42,6 +43,7 @@ const MaterialComponents = [
   MatProgressSpinnerModule,
   MatStepperModule,
   MatRadioModule,
+  MatTooltipModule,
 ];
 const MaterialDatePicker = [MatDatepickerModule, MatNativeDateModule];
 @NgModule({
diff --git a/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.css b/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.css
index 5eaab791..74f53132 100644
--- a/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.css
+++ b/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.css
@@ -8,3 +8,44 @@
   height: flex;
   min-height: 0px;
 }
+
+mat-header-cell .contains-data,
+mat-cell .contains-data {
+  margin-right: 15%;
+  width: 85%;
+}
+
+mat-cell p {
+  margin-bottom: 0;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+mat-cell p:hover {
+  overflow: auto;
+}
+
+.mat-column-Edit,
+.mat-column-Delete,
+.mat-column-Show-details {
+  flex: 0 0 4%;
+}
+
+/* width */
+::-webkit-scrollbar {
+  margin-bottom: -15px;
+  width: 2px;
+  height: 9px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 5px rgba(128, 128, 128, 1);
+  border-radius: 10px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background-color: #869196;
+  border-radius: 10px;
+}
\ No newline at end of file
diff --git a/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.html b/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.html
index ab9b512c..a358efc7 100644
--- a/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.html
+++ b/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.html
@@ -35,6 +35,7 @@
 </ng-container>
 <br />
 <br />
+<!-- <div class="table-responsive"> -->
 <mat-table
   class="filtered-table mat-elevation-z8"
   [dataSource]="filteredTableSource"
@@ -54,12 +55,23 @@
         col != 'delete'
       "
     >
-      <mat-header-cell *matHeaderCellDef>{{
-        displayedColNames[i]
-      }}</mat-header-cell>
+      <mat-header-cell *matHeaderCellDef>
+        <div class="contains-data">
+          {{ displayedColNames[i] }}
+        </div>
+      </mat-header-cell>
       <mat-cell *matCellDef="let data">
-        <p *ngIf="data[col] == null">-</p>
-        <p *ngIf="data[col] != null">{{ data[col] }}</p>
+        <div class="contains-data">
+          <p *ngIf="data[col] == null">-</p>
+
+          <p
+            *ngIf="data[col] != null"
+            class="contains-data"
+            matTooltip="{{ data[col] }}"
+          >
+            {{ data[col] }}
+          </p>
+        </div>
       </mat-cell>
     </div>
     <div *ngIf="col == 'checkbox'">
@@ -101,7 +113,10 @@
     <div *ngIf="col == 'button'">
       <!-- normal buttons -->
       <ng-container>
-        <mat-header-cell *matHeaderCellDef></mat-header-cell>
+        <mat-header-cell
+          *matHeaderCellDef
+          class="{{ 'header-' + displayedColNames[i] }}"
+        ></mat-header-cell>
         <mat-cell *matCellDef="let row = dataIndex">
           <div [ngSwitch]="displayedColNames[i]">
             <div *ngSwitchCase="'Edit'">
@@ -237,3 +252,4 @@
     ></mat-row>
   </div>
 </mat-table>
+<!-- </div> -->
diff --git a/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.ts b/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.ts
index 9546a1e2..2a2abf2c 100644
--- a/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.ts
+++ b/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.ts
@@ -17,7 +17,6 @@ import {
 } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { MatTableDataSource } from '@angular/material/table';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import {
   animate,
   state,
@@ -116,7 +115,10 @@ export class FilteredTableComponent implements OnInit {
   selection: SelectionModel<any>;
   expandedDetailsFormArray: FormArray = new FormArray([]);
 
-  constructor(public fb: FormBuilder, private dataUpdateService: DataUpdateService) {
+  constructor(
+    public fb: FormBuilder,
+    private dataUpdateService: DataUpdateService
+  ) {
     const initialSelection: any[] | undefined = [];
     const allowMultiSelect = true;
     this.selection = new SelectionModel<any>(
@@ -255,12 +257,12 @@ export class FilteredTableComponent implements OnInit {
       dataStr = Object.keys(data)
         .reduce((currentTerm: string, key: string) => {
           if (this.internalColSelectNames.find((x) => key == x)) {
-            let tmp_data = (data as { [key: string]: any })[key]
+            let tmp_data = (data as { [key: string]: any })[key];
             if (tmp_data == undefined) {
-              return currentTerm + '◬'
+              return currentTerm + '◬';
             }
             if (key == 'active') {
-              return currentTerm + '◬' + (tmp_data) ? 'active' : 'inactive';;
+              return currentTerm + '◬' + tmp_data ? 'active' : 'inactive';
             } else {
               return currentTerm + '◬' + tmp_data;
             }
@@ -270,13 +272,12 @@ export class FilteredTableComponent implements OnInit {
         }, '')
         .toLowerCase();
     } else {
-      let tmp_data = (data as { [key: string]: any })[column]
+      let tmp_data = (data as { [key: string]: any })[column];
       if (tmp_data == undefined) {
-        dataStr = ''
-      }
-      else {
+        dataStr = '';
+      } else {
         if (column == 'active') {
-          dataStr = '◬' + (tmp_data) ? 'active' :'inactive';
+          dataStr = '◬' + tmp_data ? 'active' : 'inactive';
         } else {
           dataStr = '◬' + tmp_data.toLowerCase();
         }

From f81f975b212d4d10144e18584bb5b92b9b4caec2 Mon Sep 17 00:00:00 2001
From: Karol Bakas <karol.bakas@fau.de>
Date: Sun, 24 Jul 2022 04:55:52 +0200
Subject: [PATCH 2/3] #208 added tooltip and scrollbar to mat-cell items

Signed-off-by: Karol Bakas <karol.bakas@fau.de>
---
 src/digitalIdentity-frontend/src/styles.scss | 43 ++++++++++++++++++--
 1 file changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/digitalIdentity-frontend/src/styles.scss b/src/digitalIdentity-frontend/src/styles.scss
index a387aea4..6892649f 100644
--- a/src/digitalIdentity-frontend/src/styles.scss
+++ b/src/digitalIdentity-frontend/src/styles.scss
@@ -346,6 +346,44 @@ h2 {
   justify-content: left;
   color: $adorsys-text !important;
 }
+// tooltip
+.mat-tooltip {
+  font-size: larger;
+  max-width: 20rem !important;
+  background-color: $adorsys-primary;
+}
+
+// scroll able table
+
+// .table-responsive {
+//   display: block;
+//   width: 100%;
+//   overflow-x: auto;
+//   .mat-table {
+//     width: 100%;
+//     max-width: 100%;
+// margin-bottom: 1rem;
+// display: table;
+// border-collapse: collapse;
+// margin: 0px;
+// }
+// .mat-row,
+// .mat-header-row {
+//   display: table-row;
+//   padding: 0.8rem 0.2rem;
+// }
+// .mat-cell,
+// .mat-header-cell {
+// word-wrap: initial;
+// display: table-cell;
+// // padding: 0px 5px;
+// line-break: unset;
+// width: auto;
+// white-space: nowrap;
+// overflow: hidden;
+// vertical-align: middle;
+// }
+// }
 
 // filters
 .filter-selection {
@@ -372,8 +410,7 @@ h2 {
 .filter-col-selection {
   .mat-select-value,
   .mat-select-arrow,
-  .mat-input-element
-  {
+  .mat-input-element {
     color: white !important;
   }
 }
@@ -506,7 +543,7 @@ mat-card {
   color: white !important;
 }
 
-.aligned-with-icon{
+.aligned-with-icon {
   position: absolute;
   margin-top: 5px;
 }

From 79b02e69e8866e944d0b30b57948b35662ace52a Mon Sep 17 00:00:00 2001
From: Karol Bakas <karol.bakas@fau.de>
Date: Sun, 24 Jul 2022 12:42:56 +0200
Subject: [PATCH 3/3] #208 improved buttom col sizes

Signed-off-by: Karol Bakas <karol.bakas@fau.de>
---
 .../credDef-overview-page.component.html                 | 2 +-
 .../credDef-overview-page.component.ts                   | 2 +-
 .../proofTemplate-overview-page.component.html           | 2 +-
 .../proofTemplate-overview-page.component.ts             | 2 +-
 .../shared/filtered-table/filtered-table.component.css   | 8 +++++++-
 .../shared/filtered-table/filtered-table.component.html  | 9 ++++++---
 .../shared/filtered-table/filtered-table.component.ts    | 6 ++++++
 7 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/digitalIdentity-frontend/src/app/pages/credential/credential-overview-page/credDef-overview-page.component.html b/src/digitalIdentity-frontend/src/app/pages/credential/credential-overview-page/credDef-overview-page.component.html
index 2e0b1426..a133354d 100644
--- a/src/digitalIdentity-frontend/src/app/pages/credential/credential-overview-page/credDef-overview-page.component.html
+++ b/src/digitalIdentity-frontend/src/app/pages/credential/credential-overview-page/credDef-overview-page.component.html
@@ -15,7 +15,7 @@ <h1>Overview of credential definitions</h1>
     [displayedColSelectNames]="this.displayedColSelectNames"
     [displayedColNames]="this.displayedColumnNames"
     [internalColNames]="this.internalColumnNames"
-    [buttonFunctions]="[this.openCredDefExpandedWindow, this.openAddDIWindow]"
+    [buttonFunctions]="[this.openAddDIWindow, this.openCredDefExpandedWindow]"
     [dialogRef]="this.dialogRef"
   >
   </app-filtered-table>
diff --git a/src/digitalIdentity-frontend/src/app/pages/credential/credential-overview-page/credDef-overview-page.component.ts b/src/digitalIdentity-frontend/src/app/pages/credential/credential-overview-page/credDef-overview-page.component.ts
index 50d23c11..95316643 100644
--- a/src/digitalIdentity-frontend/src/app/pages/credential/credential-overview-page/credDef-overview-page.component.ts
+++ b/src/digitalIdentity-frontend/src/app/pages/credential/credential-overview-page/credDef-overview-page.component.ts
@@ -19,7 +19,7 @@ export class CredDefOverviewPageComponent implements OnInit {
   ) {
     this.initTable();
   }
-  displayedColumnNames: string[] = ['Name', 'Status', 'Expand', 'Send to DI']; //prettier-ignore
+  displayedColumnNames: string[] = ['Name', 'Status', 'Send to DI', 'Expand']; //prettier-ignore
   internalColumnNames: string[] = ['alias', 'active', 'button', 'button']; //prettier-ignore
   displayedColSelectNames: string[] = ['All', 'Name', 'Status']; //prettier-ignore
   internalColSelectNames: string[] = ['all', 'alias', 'active']; //prettier-ignore
diff --git a/src/digitalIdentity-frontend/src/app/pages/proof-templ/proofTemplate-overview-page/proofTemplate-overview-page.component.html b/src/digitalIdentity-frontend/src/app/pages/proof-templ/proofTemplate-overview-page/proofTemplate-overview-page.component.html
index 487c842a..11277da1 100644
--- a/src/digitalIdentity-frontend/src/app/pages/proof-templ/proofTemplate-overview-page/proofTemplate-overview-page.component.html
+++ b/src/digitalIdentity-frontend/src/app/pages/proof-templ/proofTemplate-overview-page/proofTemplate-overview-page.component.html
@@ -15,7 +15,7 @@ <h1>Overview of proof templates</h1>
     [displayedColSelectNames]="this.displayedColSelectNames"
     [displayedColNames]="this.displayedColumnNames"
     [internalColNames]="this.internalColumnNames"
-    [buttonFunctions]="[this.openShowProofDialog, this.openAddDIWindow]"
+    [buttonFunctions]="[this.openAddDIWindow, this.openShowProofDialog]"
     [dialogRef]="this.dialogRef"
   >
   </app-filtered-table>
diff --git a/src/digitalIdentity-frontend/src/app/pages/proof-templ/proofTemplate-overview-page/proofTemplate-overview-page.component.ts b/src/digitalIdentity-frontend/src/app/pages/proof-templ/proofTemplate-overview-page/proofTemplate-overview-page.component.ts
index 71ee761f..8667dc8f 100644
--- a/src/digitalIdentity-frontend/src/app/pages/proof-templ/proofTemplate-overview-page/proofTemplate-overview-page.component.ts
+++ b/src/digitalIdentity-frontend/src/app/pages/proof-templ/proofTemplate-overview-page/proofTemplate-overview-page.component.ts
@@ -19,7 +19,7 @@ export class ProofTemplateOverviewPageComponent implements OnInit {
   ) {
     this.initTable();
   }
-  displayedColumnNames: string[] = ['Name', 'Status', 'Expand', 'Send to DI']; //prettier-ignore
+  displayedColumnNames: string[] = ['Name', 'Status', 'Send to DI', 'Expand', ]; //prettier-ignore
   internalColumnNames: string[] = ['name', 'active', 'button', 'button']; //prettier-ignore
   selectableCols: string[] = ['all', 'name', 'active']; //prettier-ignore
   displayedColSelectNames: string[] = ['All', 'Name', 'Status']; //prettier-ignore
diff --git a/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.css b/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.css
index 74f53132..e1112753 100644
--- a/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.css
+++ b/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.css
@@ -25,12 +25,18 @@ mat-cell p:hover {
   overflow: auto;
 }
 
+.cell-button, .header-button {
+  flex: 0 0 15%;
+}
+
 .mat-column-Edit,
 .mat-column-Delete,
-.mat-column-Show-details {
+.mat-column-Show-details,
+.mat-column-Expand {
   flex: 0 0 4%;
 }
 
+
 /* width */
 ::-webkit-scrollbar {
   margin-bottom: -15px;
diff --git a/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.html b/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.html
index a358efc7..88507d85 100644
--- a/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.html
+++ b/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.html
@@ -115,9 +115,12 @@
       <ng-container>
         <mat-header-cell
           *matHeaderCellDef
-          class="{{ 'header-' + displayedColNames[i] }}"
+          class="{{ 'header-' + getButtonColName(i) }}"
         ></mat-header-cell>
-        <mat-cell *matCellDef="let row = dataIndex">
+        <mat-cell
+          *matCellDef="let row = dataIndex"
+          class="{{ 'cell-' + getButtonColName(i) }}"
+        >
           <div [ngSwitch]="displayedColNames[i]">
             <div *ngSwitchCase="'Edit'">
               <button mat-icon-button (mousedown)="this.buttonEvent(row, i)">
@@ -135,7 +138,7 @@
             </div>
             <div *ngSwitchCase="'Expand'">
               <button mat-icon-button (mousedown)="this.buttonEvent(row, i)">
-                <mat-icon>manage_accounts</mat-icon>
+                <mat-icon>contacts</mat-icon>
               </button>
             </div>
             <div *ngSwitchCase="'Show details'">
diff --git a/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.ts b/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.ts
index 2a2abf2c..665e4db1 100644
--- a/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.ts
+++ b/src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.ts
@@ -386,4 +386,10 @@ export class FilteredTableComponent implements OnInit {
   isRowDisabled(row: number) {
     return !this.selection.isSelected(this.tableData[row]);
   }
+
+  getButtonColName(i: number) {
+    return this.internalColNames[i] == 'button'
+      ? 'button'
+      : this.displayedColNames[i];
+  }
 }