From 7058ba4c6f0230ea4099d545396c57bc90b4fd50 Mon Sep 17 00:00:00 2001
From: Max <maxes2000@t-online.de>
Date: Thu, 10 Dec 2020 15:14:51 +0100
Subject: [PATCH] Add highlighting of columns whicht dataPath starts with the
 same string

---
 src/app/components/table/table.component.html |  2 +-
 src/app/components/table/table.component.scss |  8 +++++--
 src/app/components/table/table.component.ts   | 23 +++++++++++++------
 src/app/pages/tables/bikes/bikes.component.ts |  6 ++---
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html
index d0a7fae..b164b8e 100644
--- a/src/app/components/table/table.component.html
+++ b/src/app/components/table/table.component.html
@@ -116,7 +116,7 @@
         <th mat-header-cell *matHeaderCellDef mat-sort-header>
           {{ getTranslation(column.dataPath) }}
         </th>
-        <td mat-cell *matCellDef="let element">
+        <td mat-cell *matCellDef="let element" [ngClass]="{'highlighted-column': column.highlighted}" >
           <ng-container
             *ngIf="
               column.type !== 'DateRange' &&
diff --git a/src/app/components/table/table.component.scss b/src/app/components/table/table.component.scss
index 5c2fa34..70e85ef 100644
--- a/src/app/components/table/table.component.scss
+++ b/src/app/components/table/table.component.scss
@@ -55,9 +55,13 @@
         width: 100%;
       }
 
+      .highlighted-column {
+        box-shadow:inset 0 0 0 99999px rgba(0, 0, 0, 0.05);
+      }
+      
       .mat-table-sticky {
-        filter: brightness(90%);
-        //opacity: 1;
+        box-shadow:inset 0 0 0 99999px rgba(0, 0, 0, 0.1);
+
       }
 
       .button-wrapper {
diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts
index e11d938..008e8cb 100644
--- a/src/app/components/table/table.component.ts
+++ b/src/app/components/table/table.component.ts
@@ -47,6 +47,7 @@ export class TableComponent implements AfterViewInit {
     required?: boolean;
     type?: string;
     link?: (row: any) => string;
+    highlighted: boolean; // whether this column is a bit darker
   }[] = [];
 
   @Input()
@@ -188,17 +189,27 @@ export class TableComponent implements AfterViewInit {
   }
 
   addColumnPropertiesFromGQLSchemaToColumnInfo() {
+    let previousColumnDataPathPrefix = null;
+    let previousColumnIsHighlighted = false;
     for (const column of this.columnInfo) {
-      const typeInformation = this.schemaService.getTypeInformation(
+      const columnnDataPathPrefix = column.dataPath.split('.')[0];
+      if (columnnDataPathPrefix === previousColumnDataPathPrefix) {
+        column.highlighted = previousColumnIsHighlighted;
+      } else {
+        column.highlighted = !previousColumnIsHighlighted;
+        previousColumnIsHighlighted = !previousColumnIsHighlighted;
+        previousColumnDataPathPrefix = columnnDataPathPrefix;
+      }
+
+      let typeInformation = this.schemaService.getTypeInformation(
         this.tableDataGQLType,
         column.dataPath
       );
       column.type = column.type || typeInformation.type;
       column.required =
         column.required != null ? column.required : typeInformation.isRequired;
-    }
-    for (const column of this.columnInfo) {
-      const typeInformation = this.schemaService.getTypeInformation(
+
+      typeInformation = this.schemaService.getTypeInformation(
         this.tableDataGQLUpdateInputType,
         column.dataPath
       );
@@ -211,9 +222,7 @@ export class TableComponent implements AfterViewInit {
         column.requiredForUpdating != null
           ? column.requiredForUpdating
           : column.required || typeInformation.isRequired;
-    }
-    for (const column of this.columnInfo) {
-      const typeInformation = this.schemaService.getTypeInformation(
+      typeInformation = this.schemaService.getTypeInformation(
         this.tableDataGQLCreateInputType,
         column.dataPath
       );
diff --git a/src/app/pages/tables/bikes/bikes.component.ts b/src/app/pages/tables/bikes/bikes.component.ts
index 112817e..170f65e 100644
--- a/src/app/pages/tables/bikes/bikes.component.ts
+++ b/src/app/pages/tables/bikes/bikes.component.ts
@@ -19,15 +19,15 @@ export class BikesComponent implements OnInit {
     { dataPath: 'group', translation: 'Gruppe' },
     { dataPath: 'modelName', translation: 'Modell' },
     { dataPath: 'state', translation: 'Status' },
+    { dataPath: 'insuranceData.name', translation: 'Versicherer' },
+    { dataPath: 'insuranceData.benefactor', translation: 'Kostenträger' },
+    { dataPath: 'insuranceData.noPnP', translation: 'Nr. P&P' },
     {
       dataPath: 'insuranceData.billing',
       translation: 'Versicherung Abrechnung',
     },
     { dataPath: 'insuranceData.hasFixedRate', translation: 'Pauschale j/n' },
     { dataPath: 'insuranceData.fixedRate', translation: 'Pauschale Betrag' },
-    { dataPath: 'insuranceData.name', translation: 'Versicherer' },
-    { dataPath: 'insuranceData.benefactor', translation: 'Kostenträger' },
-    { dataPath: 'insuranceData.noPnP', translation: 'Nr. P&P' },
     {
       dataPath: 'insuranceData.maintenanceResponsible',
       translation: 'Wartung zuständig',