From f18da19bcc0cb2b4e35b720ce2288bccb7bbf087 Mon Sep 17 00:00:00 2001
From: Max Ehrlicher-Schmidt <maxes2000@t-online.de>
Date: Mon, 23 Nov 2020 23:57:34 +0100
Subject: [PATCH] Add headline to tables

---
 src/app/components/table/table.component.html | 454 +++++++++---------
 src/app/components/table/table.component.scss |   3 +
 src/app/components/table/table.component.ts   |   2 +
 .../pages/tables/bikes/bikes.component.html   |   1 +
 src/app/pages/tables/bikes/bikes.component.ts |   8 +-
 .../equipment-types.component.html            |   1 +
 .../equipment-types.component.ts              |   2 +
 7 files changed, 245 insertions(+), 226 deletions(-)

diff --git a/src/app/components/table/table.component.html b/src/app/components/table/table.component.html
index 955a759..e2a2486 100644
--- a/src/app/components/table/table.component.html
+++ b/src/app/components/table/table.component.html
@@ -1,234 +1,244 @@
 <div class="table-page-wrapper">
-    <div class="table-control">
-      <button
-        mat-raised-button
-        color="primary"
-        class="table-control-button"
-        disabled
-        i18n
-      >
-        Alle ausgewählten Fahrräder bearbeiten
-      </button>
-      <button
-        mat-raised-button
-        class="table-control-button"
-        matTooltip="Tabllendaten aktualisieren. Achtung! Alle ungespeicherten Änderungen gehen verloren."
-        (click)="reloadTable()"
-        [disabled]="reloadingTable"
-      >
-        <mat-icon class="spin">sync</mat-icon>
-      </button>
-      <button
-        mat-raised-button
-        class="table-control-button"
-        (click)="addNewObject()"
-        [disabled]="reloadingTable"
-      >
-        <mat-icon class="spin">add</mat-icon>
-      </button>
-      <mat-form-field class="filter">
-        <mat-label>Filter</mat-label>
-        <input
-          matInput
-          [(ngModel)]="filter.includesString"
-          (input)="applyFilter()"
-          placeholder="Suchbegriff eingeben..."
-        />
-      </mat-form-field>
-      <button
-        *ngIf="!filter.onlyUnsaved && countUnsavedRows() > 0"
-        mat-raised-button
-        color="accent"
-        class="table-control-button"
-        (click)="showOnlyUnsavedElements(true)"
-        [disabled]="reloadingTable"
-        i18n
-      >
-        {{ countUnsavedRows() }} ungespeicherte(s) Element(e) anzeigen
-      </button>
-      <mat-checkbox
-        *ngIf="filter.onlyUnsaved"
-        (change)="showOnlyUnsavedElements(false)"
-        [(ngModel)]="filter.onlyUnsaved"
-      >
-        nur ungespeicherte Elemente anzeigen
-      </mat-checkbox>
-      <mat-paginator
-        [pageSizeOptions]="[15, 25, 30, 50, 100]"
-        showFirstLastButtons
-      ></mat-paginator>
-    </div>
-    <div class="table-container">
-      <table
-        mat-table
-        class="mat-elevation-z8"
-        matSort
-        cdkDropList
-        cdkDropListOrientation="horizontal"
-        (cdkDropListDropped)="drop($event)"
-        [dataSource]="data"
-      >
-        <!--- Note that these columns can be defined in any order.
+  <h1 class="headline">
+    {{ headline }}
+  </h1>
+  <div class="table-control">
+    <button
+      mat-raised-button
+      color="primary"
+      class="table-control-button"
+      disabled
+      i18n
+    >
+      Alle ausgewählten Fahrräder bearbeiten
+    </button>
+    <button
+      mat-raised-button
+      class="table-control-button"
+      matTooltip="Tabllendaten aktualisieren. Achtung! Alle ungespeicherten Änderungen gehen verloren."
+      (click)="reloadTable()"
+      [disabled]="reloadingTable"
+    >
+      <mat-icon class="spin">sync</mat-icon>
+    </button>
+    <button
+      mat-raised-button
+      class="table-control-button"
+      (click)="addNewObject()"
+      [disabled]="reloadingTable"
+    >
+      <mat-icon class="spin">add</mat-icon>
+    </button>
+    <mat-form-field class="filter">
+      <mat-label>Filter</mat-label>
+      <input
+        matInput
+        [(ngModel)]="filter.includesString"
+        (input)="applyFilter()"
+        placeholder="Suchbegriff eingeben..."
+      />
+    </mat-form-field>
+    <button
+      *ngIf="!filter.onlyUnsaved && countUnsavedRows() > 0"
+      mat-raised-button
+      color="accent"
+      class="table-control-button"
+      (click)="showOnlyUnsavedElements(true)"
+      [disabled]="reloadingTable"
+      i18n
+    >
+      {{ countUnsavedRows() }} ungespeicherte(s) Element(e) anzeigen
+    </button>
+    <mat-checkbox
+      *ngIf="filter.onlyUnsaved"
+      (change)="showOnlyUnsavedElements(false)"
+      [(ngModel)]="filter.onlyUnsaved"
+    >
+      nur ungespeicherte Elemente anzeigen
+    </mat-checkbox>
+    <mat-paginator
+      [pageSizeOptions]="[15, 25, 30, 50, 100]"
+      showFirstLastButtons
+    ></mat-paginator>
+  </div>
+  <div class="table-container">
+    <table
+      mat-table
+      class="mat-elevation-z8"
+      matSort
+      cdkDropList
+      cdkDropListOrientation="horizontal"
+      (cdkDropListDropped)="drop($event)"
+      [dataSource]="data"
+    >
+      <!--- Note that these columns can be defined in any order.
           The actual rendered columns are set as a property on the row definition" -->
-  
-        <!-- Checkbox Column -->
-        <ng-container matColumnDef="select" sticky>
-          <th mat-header-cell *matHeaderCellDef>
-            <mat-checkbox
-              (change)="$event ? masterToggle() : null"
-              [checked]="selection.hasValue() && isAllSelected()"
-              [indeterminate]="selection.hasValue() && !isAllSelected()"
-            >
-            </mat-checkbox>
-          </th>
-          <td mat-cell *matCellDef="let row">
-            <mat-checkbox
-              (click)="$event.stopPropagation()"
-              (change)="$event ? selection.toggle(row) : null"
-              [checked]="selection.isSelected(row)"
+
+      <!-- Checkbox Column -->
+      <ng-container matColumnDef="select" sticky>
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox
+            (change)="$event ? masterToggle() : null"
+            [checked]="selection.hasValue() && isAllSelected()"
+            [indeterminate]="selection.hasValue() && !isAllSelected()"
+          >
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-checkbox
+            (click)="$event.stopPropagation()"
+            (change)="$event ? selection.toggle(row) : null"
+            [checked]="selection.isSelected(row)"
+          >
+          </mat-checkbox>
+        </td>
+      </ng-container>
+
+      <!-- Other Columns -->
+      <ng-container
+        *ngFor="let column of columnInfo"
+        [matColumnDef]="column.name"
+        [sticky]="isStickyColumn(column.name)"
+      >
+        <!-- add cdkDrag to make columns draggable-->
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          {{ getTranslation(column.name) }}
+        </th>
+        <td mat-cell *matCellDef="let element">
+          <app-cell
+            *ngIf="
+              column.type === 'Boolean' ||
+                element.newObject ||
+                (!column.readonly && element.isLockedByMe);
+              else stringValue
+            "
+            [editable]="
+              (element.newObject && column.acceptedForCreation) ||
+              (!column.readonly && element.isLockedByMe)
+            "
+            [required]="element.newObject && column.requiredForCreation"
+            (validityChange)="validityChange(element, column.name, $event)"
+            [(value)]="element[column.name]"
+            [inputType]="column.type"
+            [link]="column.link ? column.link(element) : null"
+          ></app-cell>
+          <ng-template #stringValue>
+            <span *ngIf="!column.link">{{ element[column.name] }}</span>
+            <a
+              mat-button
+              color="primary"
+              *ngIf="column.link"
+              [routerLink]="column.link(element)"
+              >{{ element[column.name] }}</a
             >
-            </mat-checkbox>
-          </td>
-        </ng-container>
-  
-        <!-- Other Columns -->
-        <ng-container
-          *ngFor="let column of columnInfo"
-          [matColumnDef]="column.name"
-          [sticky]="isStickyColumn(column.name)"
-        >
-          <!-- add cdkDrag to make columns draggable-->
-          <th mat-header-cell *matHeaderCellDef mat-sort-header>
-            {{ getTranslation(column.name) }}
-          </th>
-          <td mat-cell *matCellDef="let element">
-            <app-cell
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <!-- Buttons Column -->
+      <ng-container matColumnDef="buttons" stickyEnd>
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let element">
+          <div class="button-wrapper" *ngIf="!element.newObject">
+            <button
+              mat-icon-button
+              (click)="lock(element)"
               *ngIf="
-                column.type === 'Boolean' ||
-                  element.newObject ||
-                  (!column.readonly && element.isLockedByMe);
-                else stringValue
+                !element.isLockedByMe &&
+                !element.isLocked &&
+                !isLoading(element.id)
               "
-              [editable]="
-                (element.newObject && column.acceptedForCreation) ||
-                (!column.readonly && element.isLockedByMe)
+            >
+              <mat-icon>edit</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              [matMenuTriggerFor]="menu"
+              *ngIf="
+                !element.isLockedByMe &&
+                !isLoading(element.id) &&
+                !element.isLocked
               "
-              [required]="element.newObject && column.requiredForCreation"
-              (validityChange)="validityChange(element, column.name, $event)"
-              [(value)]="element[column.name]"
-              [inputType]="column.type"
-              [link]="column.link ? column.link(element) : null"
-            ></app-cell>
-            <ng-template #stringValue>
-              <span *ngIf="!column.link">{{ element[column.name] }}</span>
-              <a mat-button color="primary" *ngIf="column.link" [routerLink]="column.link(element)">{{
-                element[column.name]
-              }}</a>
-            </ng-template>
-            
-          </td>
-        </ng-container>
-  
-        <!-- Buttons Column -->
-        <ng-container matColumnDef="buttons" stickyEnd>
-          <th mat-header-cell *matHeaderCellDef></th>
-          <td mat-cell *matCellDef="let element">
-            <div class="button-wrapper" *ngIf="!element.newObject">
-              <button
-                mat-icon-button
-                (click)="lock(element)"
-                *ngIf="
-                  !element.isLockedByMe &&
-                  !element.isLocked &&
-                  !isLoading(element.id)
-                "
-              >
-                <mat-icon>edit</mat-icon>
-              </button>
-              <button
-                mat-icon-button
-                [matMenuTriggerFor]="menu"
-                *ngIf="
-                  !element.isLockedByMe &&
-                  !isLoading(element.id) &&
-                  !element.isLocked
-                "
-              >
-                <mat-icon>more_vert</mat-icon>
-              </button>
-              <mat-menu #menu="matMenu">
-                <button
-                  mat-menu-item
-                  (click)="openDeleteConfirmationDialog(element)"
-                >
-                  <mat-icon>delete</mat-icon>Löschen
-                </button>
-                <button mat-menu-item>
-                  <mat-icon>content_copy</mat-icon>Duplizieren
-                </button>
-              </mat-menu>
-  
-              <mat-spinner
-                [diameter]="32"
-                *ngIf="isLoading(element.id)"
-              ></mat-spinner>
-  
-              <button
-                mat-icon-button
-                *ngIf="element.isLockedByMe && !isLoading(element.id)"
-                (click)="save(element)"
-              >
-                <mat-icon>save</mat-icon>
-              </button>
-              <button
-                mat-icon-button
-                matTooltip="Alle ungespeicherten Änderungen verwerfen."
-                *ngIf="element.isLockedByMe && !isLoading(element.id)"
-                (click)="cancel(element)"
-              >
-                <mat-icon>cancel</mat-icon>
-              </button>
-  
-              <mat-icon
-                *ngIf="element.isLocked"
-                matTooltip="Dieser Eintrag wird gerade von einem anderen Bearbeiter editiert. Aktualisieren Sie die Tabelle, um den neuen Status abzurufen."
-                >locked</mat-icon
-              >
-            </div>
-            <div
-              class="button-wrapper"
-              *ngIf="element.newObject"
-              [matTooltip]="(countUnvalidFields(element) > 0) ? ('Nicht ausgefüllte Pflichtfelder (rot): ' + countUnvalidFields(element)) : 'Erstellen'"
             >
+              <mat-icon>more_vert</mat-icon>
+            </button>
+            <mat-menu #menu="matMenu">
               <button
-                mat-icon-button
-                [disabled]="countUnvalidFields(element) > 0"
-                (click)="create(element)"
+                mat-menu-item
+                (click)="openDeleteConfirmationDialog(element)"
               >
-                <mat-icon>save</mat-icon>
+                <mat-icon>delete</mat-icon>Löschen
               </button>
-              <button
-                mat-icon-button
-                matTooltip="Verwerfen"
-                (click)="deleteNewObject(element)"
-              >
-                <mat-icon>delete</mat-icon>
+              <button mat-menu-item>
+                <mat-icon>content_copy</mat-icon>Duplizieren
               </button>
-            </div>
-          </td>
-        </ng-container>
-  
-        <!-- Table Definition -->
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
-      </table>
-  
-      <mat-card
-        *ngIf="!isLoaded"
-        style="display: flex; justify-content: center; align-items: center"
-      >
-        <mat-spinner [diameter]="32"></mat-spinner>
-      </mat-card>
-    </div>
+            </mat-menu>
+
+            <mat-spinner
+              [diameter]="32"
+              *ngIf="isLoading(element.id)"
+            ></mat-spinner>
+
+            <button
+              mat-icon-button
+              *ngIf="element.isLockedByMe && !isLoading(element.id)"
+              (click)="save(element)"
+            >
+              <mat-icon>save</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              matTooltip="Alle ungespeicherten Änderungen verwerfen."
+              *ngIf="element.isLockedByMe && !isLoading(element.id)"
+              (click)="cancel(element)"
+            >
+              <mat-icon>cancel</mat-icon>
+            </button>
+
+            <mat-icon
+              *ngIf="element.isLocked"
+              matTooltip="Dieser Eintrag wird gerade von einem anderen Bearbeiter editiert. Aktualisieren Sie die Tabelle, um den neuen Status abzurufen."
+              >locked</mat-icon
+            >
+          </div>
+          <div
+            class="button-wrapper"
+            *ngIf="element.newObject"
+            [matTooltip]="
+              countUnvalidFields(element) > 0
+                ? 'Nicht ausgefüllte Pflichtfelder (rot): ' +
+                  countUnvalidFields(element)
+                : 'Erstellen'
+            "
+          >
+            <button
+              mat-icon-button
+              [disabled]="countUnvalidFields(element) > 0"
+              (click)="create(element)"
+            >
+              <mat-icon>save</mat-icon>
+            </button>
+            <button
+              mat-icon-button
+              matTooltip="Verwerfen"
+              (click)="deleteNewObject(element)"
+            >
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        </td>
+      </ng-container>
+
+      <!-- Table Definition -->
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+
+    <mat-card
+      *ngIf="!isLoaded"
+      style="display: flex; justify-content: center; align-items: center"
+    >
+      <mat-spinner [diameter]="32"></mat-spinner>
+    </mat-card>
   </div>
-  
+</div>
diff --git a/src/app/components/table/table.component.scss b/src/app/components/table/table.component.scss
index 78604c2..6af3060 100644
--- a/src/app/components/table/table.component.scss
+++ b/src/app/components/table/table.component.scss
@@ -2,6 +2,9 @@
   display: flex;
   flex-direction: column;
   height: 100%;
+  .headline {
+    margin: 0 0.5em;
+  }
   .table-control {
     margin: 0.5em;
     flex: none;
diff --git a/src/app/components/table/table.component.ts b/src/app/components/table/table.component.ts
index 42d40f7..8024f8d 100644
--- a/src/app/components/table/table.component.ts
+++ b/src/app/components/table/table.component.ts
@@ -23,6 +23,8 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog';
   styleUrls: ['./table.component.scss'],
 })
 export class TableComponent {
+  @Input()
+  headline: string = "Keine Überschrift";
   /** this array defines the columns and translations of the table and the order they are displayed  */
   @Input()
   columnInfo: {
diff --git a/src/app/pages/tables/bikes/bikes.component.html b/src/app/pages/tables/bikes/bikes.component.html
index ba243e4..ecca39d 100644
--- a/src/app/pages/tables/bikes/bikes.component.html
+++ b/src/app/pages/tables/bikes/bikes.component.html
@@ -1,4 +1,5 @@
 <app-table
+  [headline]="headline"
   [columnInfo]="columnInfo"
   [dataService]="dataService"
   [tableDataGQLType]="tableDataGQLType"
diff --git a/src/app/pages/tables/bikes/bikes.component.ts b/src/app/pages/tables/bikes/bikes.component.ts
index 9b5e86c..3bf81e5 100644
--- a/src/app/pages/tables/bikes/bikes.component.ts
+++ b/src/app/pages/tables/bikes/bikes.component.ts
@@ -109,16 +109,16 @@ export class BikesComponent implements OnInit {
   tableDataGQLCreateInputType: string = 'CargoBikeCreateInput';
   tableDataGQLUpdateInputType: string = 'CargoBikeUpdateInput';
 
+  headline = 'Lastenräder';
+
   loadingRowIds: string[] = [];
-  constructor(
-    private bikesService: BikesService
-  ) {}
+  constructor(private bikesService: BikesService) {}
 
   ngOnInit() {
     this.dataService = this.bikesService;
   }
 
-  create(object: {currentId: string, row: any}) {
+  create(object: { currentId: string; row: any }) {
     this.bikesService.createBike(object.currentId, { bike: object.row });
   }
 
diff --git a/src/app/pages/tables/equipment-types/equipment-types.component.html b/src/app/pages/tables/equipment-types/equipment-types.component.html
index 327d791..fb3a5aa 100644
--- a/src/app/pages/tables/equipment-types/equipment-types.component.html
+++ b/src/app/pages/tables/equipment-types/equipment-types.component.html
@@ -1,4 +1,5 @@
 <app-table
+  [headline]="headline"
   [columnInfo]="columnInfo"
   [dataService]="dataService"
   [tableDataGQLType]="tableDataGQLType"
diff --git a/src/app/pages/tables/equipment-types/equipment-types.component.ts b/src/app/pages/tables/equipment-types/equipment-types.component.ts
index 500fead..09b3e9d 100644
--- a/src/app/pages/tables/equipment-types/equipment-types.component.ts
+++ b/src/app/pages/tables/equipment-types/equipment-types.component.ts
@@ -7,6 +7,8 @@ import {EquipmentTypeService} from 'src/app/services/equipmentType.service'
   styleUrls: ['./equipment-types.component.scss']
 })
 export class EquipmentTypesComponent implements OnInit {
+  headline = 'Ausstattungstypen';
+
   columnInfo = [
     { name: 'id', translation: 'ID', readonly: true },
     { name: 'name', translation: 'Name', requiredForCreation: true },