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,
@@ -28,6 +34,12 @@ export class MietersComponent implements OnInit {
   async getMieters() {
     try {
       this.mieters = await this.mieterService.getMieters();    
+      this.mieters.sort((a, b) => (a.nachname < b.nachname ? -1 : 1))
+      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))
     }
@@ -36,6 +48,7 @@ export class MietersComponent implements OnInit {
   async loadSaldos() {
     try {
       this.mieters.forEach(async (m:Mieter) => {
+        this.messageService.add(`Loading saldo for mieter ${m.id}`)
         let saldo: Saldo = await this.zahlungForderungService.getSaldoByMieterAndYear(m.id, +this.year)
         m.saldo = saldo.saldo
       })
@@ -47,6 +60,5 @@ export class MietersComponent implements OnInit {
   ngOnInit(): void {
     this.year = new Date().getFullYear().toString()
     this.getMieters();
-    this.loadSaldos();
   }
 }