fix mieter overview

hv-ui/src/app/mieters/mieters.component.css

@@ -0,0 +1,3 @@
+table {
+    width: 75%;
+}

hv-ui/src/app/mieters/mieters.component.html

@@ -1,9 +1,36 @@
 <section class="mat-typography">
-<h2>Meine Mieter</h2>
-<ul>
-    <li *ngFor="let mieter of mieters"
-        routerLink="/mieter/{{mieter.id}}">
-        <span>{{mieter.nachname}}, {{mieter.vorname}} ({{mieter.saldo}})</span>
-    </li>
-</ul>
+
+
+<mat-card class="defaultCard">
+    <mat-card-header>
+        <mat-card-title>
+            Meine Mieter
+        </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+        <div>
+            <table mat-table [dataSource]="dataSource" #zftable>
+                <ng-container matColumnDef="nachname">
+                    <th mat-header-cell *matHeaderCellDef>Nachname</th>
+                    <td mat-cell *matCellDef="let element" routerLink="/mieter/{{element.id}}">
+                        {{element.nachname}}
+                    </td>
+                </ng-container>
+                <ng-container matColumnDef="vorname">
+                    <th mat-header-cell *matHeaderCellDef>Vorname</th>
+                    <td mat-cell *matCellDef="let element">{{element.vorname}}</td>
+                </ng-container>
+                <ng-container matColumnDef="saldo">
+                    <th mat-header-cell *matHeaderCellDef>Saldo</th>
+                    <td mat-cell *matCellDef="let element">{{element.saldo}}</td>
+                </ng-container>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+                <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+            </table>
+        </div>
+
+    </mat-card-content>
+</mat-card>
+
+
 </section>

hv-ui/src/app/mieters/mieters.component.ts

@@ -7,6 +7,8 @@ import { ZahlungForderungService} from '../zahlung-forderung.service'
 
 import { Saldo } from '../zahlung-forderung'
 
+import { MatTableDataSource } from '@angular/material/table'
+
 
 @Component({
   selector: 'app-mieters',
@@ -19,6 +21,10 @@ export class MietersComponent implements OnInit {
   year: string
   selectedMieter : Mieter
 
+  displayedColumns: string[] = ["nachname", "vorname", "saldo"]
+  dataSource: MatTableDataSource<Mieter>
+
+
   constructor(
     private mieterService: MieterService, 
     private zahlungForderungService: ZahlungForderungService,
@@ -32,6 +38,8 @@ export class MietersComponent implements OnInit {
       this.messageService.add("Mieters loaded")
       this.loadSaldos();
       this.messageService.add("Saldos loaded")
+
+      this.dataSource = new MatTableDataSource<Mieter>(this.mieters)
     } catch (err) {
       this.messageService.add(JSON.stringify(err, undefined, 4))
     }