Add highlighting of columns whicht dataPath starts with the same string

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' &&

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 {

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

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',