fix mieter overview

hv-ui/src/app/config.ts

@@ -1 +1 @@
-export const serviceBaseUrl = "http://172.16.11.29";
+export const serviceBaseUrl = "http://172.16.10.29:5000";

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

@@ -3,6 +3,11 @@ import { Component, OnInit } from '@angular/core';
 import { Mieter } from '../mieter';
 import { MieterService } from '../mieter.service';
 import { MessageService } from '../message.service';
+import { ZahlungForderungService} from '../zahlung-forderung.service'
+
+import { Saldo } from '../zahlung-forderung'
+
+import { MatTableDataSource } from '@angular/material/table'
 
 
 @Component({
@@ -12,21 +17,48 @@ import { MessageService } from '../message.service';
 })
 export class MietersComponent implements OnInit {
 
-  mieters: Mieter[];
+  mieters: Mieter[]
+  year: string
+  selectedMieter : Mieter
 
-  selectedMieter : Mieter;
+  displayedColumns: string[] = ["nachname", "vorname", "saldo"]
+  dataSource: MatTableDataSource<Mieter>
 
-  constructor(private mieterService: MieterService, private messageService: MessageService) { }
+
+  constructor(
+    private mieterService: MieterService, 
+    private zahlungForderungService: ZahlungForderungService,
+    private messageService: MessageService) {      
+  }
 
   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))
+    }
+  }
+
+  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
+      })
     } catch (err) {
       this.messageService.add(JSON.stringify(err, undefined, 4))
     }
   }
 
   ngOnInit(): void {
+    this.year = new Date().getFullYear().toString()
     this.getMieters();
   }
 }