208 adjustable size of col

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({

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>

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

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>

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

src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.css

@@ -8,3 +8,50 @@
   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;
+}
+
+.cell-button, .header-button {
+  flex: 0 0 15%;
+}
+
+.mat-column-Edit,
+.mat-column-Delete,
+.mat-column-Show-details,
+.mat-column-Expand {
+  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;
+}

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,8 +113,14 @@
     <div *ngIf="col == 'button'">
       <!-- normal buttons -->
       <ng-container>
-        <mat-header-cell *matHeaderCellDef></mat-header-cell>
-        <mat-cell *matCellDef="let row = dataIndex">
+        <mat-header-cell
+          *matHeaderCellDef
+          class="{{ 'header-' + getButtonColName(i) }}"
+        ></mat-header-cell>
+        <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)">
@@ -120,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'">
@@ -237,3 +255,4 @@
     ></mat-row>
   </div>
 </mat-table>
+<!-- </div> -->

src/digitalIdentity-frontend/src/app/shared/filtered-table/filtered-table.component.ts

@@ -115,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>(
@@ -254,9 +257,9 @@ 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');
@@ -269,11 +272,10 @@ 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');
         } else {
@@ -384,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];
+  }
 }

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;
 }