Add headline to tables

src/app/components/table/table.component.html

@@ -1,4 +1,7 @@
 <div class="table-page-wrapper">
+  <h1 class="headline">
+    {{ headline }}
+  </h1>
   <div class="table-control">
     <button
       mat-raised-button
@@ -121,11 +124,14 @@
           ></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)">{{
+            <a
-                element[column.name]
+              mat-button
-              }}</a>
+              color="primary"
+              *ngIf="column.link"
+              [routerLink]="column.link(element)"
+              >{{ element[column.name] }}</a
+            >
           </ng-template>
-            
         </td>
       </ng-container>
 
@@ -198,7 +204,12 @@
           <div
             class="button-wrapper"
             *ngIf="element.newObject"
-              [matTooltip]="(countUnvalidFields(element) > 0) ? ('Nicht ausgefüllte Pflichtfelder (rot): ' + countUnvalidFields(element)) : 'Erstellen'"
+            [matTooltip]="
+              countUnvalidFields(element) > 0
+                ? 'Nicht ausgefüllte Pflichtfelder (rot): ' +
+                  countUnvalidFields(element)
+                : 'Erstellen'
+            "
           >
             <button
               mat-icon-button
@@ -230,5 +241,4 @@
       <mat-spinner [diameter]="32"></mat-spinner>
     </mat-card>
   </div>
-  </div>
+</div>
-  

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;

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

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

@@ -1,4 +1,5 @@
 <app-table
+  [headline]="headline"
   [columnInfo]="columnInfo"
   [dataService]="dataService"
   [tableDataGQLType]="tableDataGQLType"

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(
+  constructor(private bikesService: BikesService) {}
-    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 });
   }
 

src/app/pages/tables/equipment-types/equipment-types.component.html

@@ -1,4 +1,5 @@
 <app-table
+  [headline]="headline"
   [columnInfo]="columnInfo"
   [dataService]="dataService"
   [tableDataGQLType]="tableDataGQLType"

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