WIP: dynamic table generation

src/app/pages/tables/bikes/bikes.component.html

@@ -47,103 +47,18 @@
         </td>
       </ng-container>
 
-      <!-- Name Column -->
+      <!-- Other Columns -->
-      <ng-container matColumnDef="name" sticky>
+      <ng-container *ngFor="let column of dataColumns;" [matColumnDef]="column" [sticky]=isStickyColumn(column)>
-        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
+        <!-- add cdkDrag to make columns draggable-->
-        <td mat-cell *matCellDef="let element">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
-          <app-cell
+          {{getHeader(column)}}
-            [editable]="element.isLockedByMe"
-            [(value)]="element.name"
-          ></app-cell>
-        </td>
-      </ng-container>
-
-      <!-- ID Column -->
-      <ng-container matColumnDef="id">
-        <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>ID</th>
-        <td mat-cell *matCellDef="let element">{{ element.id }}</td>
-      </ng-container>
-
-      <!-- Group Column -->
-      <ng-container matColumnDef="group">
-        <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>
-          Gruppe
-        </th>
-        <td mat-cell *matCellDef="let element">
-          <app-cell
-            [editable]="element.isLockedByMe"
-            [(value)]="element.group"
-            inputType="enum"
-            [(enumValues)]="groupEnum"
-          ></app-cell>
-        </td>
-      </ng-container>
-
-      <!-- FrameNumber Column -->
-      <ng-container matColumnDef="frameNumber">
-        <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>
-          Fahrgestellnummer
-        </th>
-        <td mat-cell *matCellDef="let element">
-          <app-cell
-            [editable]="element.isLockedByMe"
-            [(value)]="element.security.frameNumber"
-          ></app-cell>
-        </td>
-      </ng-container>
-
-      <!-- ForChildren Column -->
-      <ng-container matColumnDef="forChildren">
-        <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>
-          Für Kinder
-        </th>
-        <td mat-cell *matCellDef="let element">
-          <app-cell
-            [editable]="element.isLockedByMe"
-            [(value)]="element.forChildren"
-            inputType="boolean"
-          ></app-cell>
-        </td>
-      </ng-container>
-
-      <!-- NumberOfChildren Column -->
-      <ng-container matColumnDef="numberOfChildren">
-        <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>
-          Anzahl Kinder
-        </th>
-        <td mat-cell *matCellDef="let element">
-          <app-cell
-            [editable]="element.isLockedByMe"
-            [(value)]="element.numberOfChildren"
-            inputType="number"
-          ></app-cell>
-        </td>
-      </ng-container>
-
-      <!-- NumberOfWheels Column -->
-      <ng-container matColumnDef="numberOfWheels">
-        <th mat-header-cell cdkDrag *matHeaderCellDef i18n="WheelCount">
-          Räderanzahl
-        </th>
-        <td mat-cell *matCellDef="let element">
-          <app-cell
-            [editable]="element.isLockedByMe"
-            [(value)]="element.numberOfWheels"
-            inputType="number"
-          ></app-cell>
-        </td>
-      </ng-container>
-
-      <!-- ForCargo Column -->
-      <ng-container matColumnDef="forCargo">
-        <th mat-header-cell cdkDrag *matHeaderCellDef mat-sort-header>
-          Für Lasten
         </th>
         <td mat-cell *matCellDef="let element">
           <app-cell
-            [editable]="element.isLockedByMe"
+            [editable]="element.isLockedByMe && !isReadonly(column)"
-            [(value)]="element.forCargo"
+            [(value)]="element[column]"
-            inputType="boolean"
+            [inputType]="getType(column)"
+            [enumValues]="getEnumValues(column)"
           ></app-cell>
         </td>
       </ng-container>

src/app/pages/tables/bikes/bikes.component.ts

@@ -21,21 +21,26 @@ type CargoBikeDataRow = CargoBikeResult & {
   styleUrls: ['./bikes.component.scss'],
 })
 export class BikesComponent {
-  displayedColumns: string[] = [
+  columnInfo = [
-    'select',
+    { name: 'name', header: 'Name', type: 'string', sticky: true },
-    'name',
+    { name: 'id', header: 'ID', type: 'number', readonly: true },
-    'id',
+    { name: 'group', header: 'Gruppe', type: 'enum', enumValues: [] },
-    'group',
-    'frameNumber',
-    'forChildren',
-    'numberOfChildren',
-    'numberOfWheels',
-    'forCargo',
-    'buttons',
   ];
 
+  blacklistedColumns = [
+    '__typename',
+    'isLocked',
+    'isLockedByMe',
+    'lockedBy',
+    'lockedUntil',
+  ];
+
+  dataColumns: string[] = [];
+  additionalColumnsFront: string[] = ['select'];
+  additionalColumnsBack: string[] = ['buttons'];
+  displayedColumns: string[] = [];
+
   bikes = <Array<any>>[];
-  groupEnum: string[] = [];
   selection = new SelectionModel<CargoBikeDataRow>(true, []);
 
   reloadingTable = false;
@@ -44,9 +49,14 @@ export class BikesComponent {
   relockingDuration = 1000 * 60 * 1;
 
   constructor(private bikesService: BikesService) {
-    bikesService.groupEnum.subscribe(groupEnum => {
+    this.displayedColumns.unshift(this.additionalColumnsFront[0]);
-      this.groupEnum = groupEnum;
+    this.displayedColumns.push(this.additionalColumnsBack[0]);
-    })
+
+    bikesService.groupEnum.subscribe((groupEnum) => {
+      this.columnInfo.find(
+        (column) => column.name === 'group'
+      ).enumValues = groupEnum;
+    });
 
     bikesService.bikes.subscribe((bikes) => {
       this.reloadingTable = false;
@@ -57,6 +67,27 @@ export class BikesComponent {
           unlocking: false,
         });
       });
+      if (bikes[0]) {
+        this.displayedColumns = [];
+        this.dataColumns = [];
+
+        this.addColumnsFromObject('', bikes[0]);
+
+        this.dataColumns.sort((columnA, columnB) => {
+          const indexA = this.columnInfo.findIndex((c) => c.name == columnA);
+          const indexB = this.columnInfo.findIndex((c) => c.name == columnB);
+          if (indexA == -1) {
+            return 1;
+          } else if (indexB == -1) {
+            return -1;
+          } else {
+            return indexA - indexB;
+          }
+        });
+        this.displayedColumns.push(...this.dataColumns);
+        this.displayedColumns.unshift(...this.additionalColumnsFront);
+        this.displayedColumns.push(...this.additionalColumnsBack);
+      }
     });
     bikesService.loadBikes();
   }
@@ -75,6 +106,54 @@ export class BikesComponent {
     clearInterval(this.relockingInterval);
   }
 
+  addColumnsFromObject(prefix: string, object: Object) {
+    for (const prop in object) {
+      let propName = prefix + prop;
+      console.log(typeof object[prop]);
+      if (typeof object[prop] === 'object') {
+        console.log(object);
+        this.addColumnsFromObject(prefix + prop + '.', object[prop]);
+      } else if (!this.blacklistedColumns.includes(propName)) {
+        this.dataColumns.push(propName);
+      }
+    }
+  }
+
+  getHeader(propertyName: string) {
+    return (
+      this.columnInfo.find((column) => column.name === propertyName)?.header ||
+      propertyName
+    );
+  }
+
+  getType(propertyName: string) {
+    return (
+      this.columnInfo.find((column) => column.name === propertyName)?.type ||
+      'string'
+    );
+  }
+
+  isReadonly(propertyName: string) {
+    return (
+      this.columnInfo.find((column) => column.name === propertyName)?.readonly ||
+      false
+    );
+  }
+
+  isStickyColumn(propertyName: string) {
+    return (
+      this.columnInfo.find((column) => column.name === propertyName)?.sticky ||
+      false
+    );
+  }
+
+  getEnumValues(propertyName: string) {
+    return (
+      this.columnInfo.find((column) => column.name === propertyName)?.enumValues ||
+      []
+    );
+  }
+
   reloadTable() {
     this.reloadingTable = true;
     this.bikesService.loadBikes();