fix mieter overview

Dockerfile

@@ -1,3 +1,4 @@
 FROM nginx:stable
+COPY default.conf /etc/nginx/conf.d/
 COPY dist/hv-ui/* /usr/share/nginx/html/
 

default.conf

@@ -0,0 +1,9 @@
+server {
+  listen 80;
+  server_name hv-ui;
+  location / {
+    root /usr/share/nginx/html;
+    try_files $uri $uri/ /index.html;
+  }
+}
+

hv-ui/src/app/config.ts

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

hv-ui/src/app/forderung.ts

@@ -1,7 +0,0 @@
-export interface Forderung {
-    id: number;
-    mieter: number;
-    ref_wohnung: number;
-    datum: string;
-    betrag: number;
-}

hv-ui/src/app/mieter-detail/mieter-detail.component.html

@@ -37,9 +37,11 @@
                 </label>-->
                 <mat-form-field appearance="outline">
                     <mat-label>Jahr</mat-label>
-                    <!-- <input matInput [(ngModel)]="year" (input)="onYearInput()"/> -->
+                    <!-- <input matInput [(ngModel)]="year"/> -->
-                    <input matInput [(ngModel)]="year" (input)="onYearInput()"/>
+                    <input matInput [(ngModel)]="year"/>
                 </mat-form-field>
+                <br/>
+                <button mat-raised-button (click)="loadForYear()" color="primary">Laden</button>
             </div>
             <div id="second">
                 <div class="saldo">
@@ -49,26 +51,27 @@
                 </div>
             </div>
             <div id="third">
-
+                <form (ngSubmit)="insertNewZahlung(zahlungForm.value)" #zahlungForm="ngForm">
                 <mat-form-field appearance="outline">
 <!--
                     <input matInput [matDatepicker]="picker"/>
                     <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                     <mat-datepicker #picker></mat-datepicker>
 -->
-                    <mat-label>Datum soll</mat-label> <input matInput/>
+                    <mat-label>Datum soll</mat-label> <input matInput name="datum_soll" ngModel/>
                 </mat-form-field>
                 
                 <mat-form-field appearance="outline">
-                    <mat-label>Datum ist</mat-label> <input matInput/>
+                    <mat-label>Datum ist</mat-label> <input matInput name="datum_ist" ngModel/>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                    <mat-label>Betrag Zahlung</mat-label> <input matInput/>
+                    <mat-label>Betrag Zahlung</mat-label> <input matInput name="betrag" ngModel/>
                 </mat-form-field>
                 <mat-form-field appearance="outline">
-                    <mat-label>Kommentar</mat-label> <input matInput/>
+                    <mat-label>Kommentar</mat-label> <input matInput name="kommentar" ngModel/>
                 </mat-form-field>
-                <button mat-raised-button color="primary">Erfassen</button>
+                <button type="submit" mat-raised-button color="primary">Erfassen</button>
+                </form>
             </div>
         </div>
     </mat-card-content>
@@ -84,7 +87,7 @@
     </mat-card-header>
     <mat-card-content>
         <div>
-            <table mat-table [dataSource]="dataSource">
+            <table mat-table [dataSource]="dataSource" #zftable>
                 <ng-container matColumnDef="datum_soll">
                     <th mat-header-cell *matHeaderCellDef>Datum soll</th>
                     <td mat-cell *matCellDef="let element">{{element.datum_soll}}</td>

hv-ui/src/app/mieter-detail/mieter-detail.component.ts

@@ -1,10 +1,10 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnInit, ViewChild } from '@angular/core'
+import { MatTable } from '@angular/material/table'
 import { ActivatedRoute } from '@angular/router'
 import { Location } from '@angular/common'
 
 import { Mieter } from '../mieter'
-import { ZahlungForderung } from '../zahlung-forderung'
+import { ZahlungForderung, Saldo, Zahlung, ZahlungRaw } from '../zahlung-forderung'
-import { Saldo } from '../saldo'
 
 import { MieterService} from '../mieter.service'
 import { ZahlungForderungService} from '../zahlung-forderung.service'
@@ -22,6 +22,7 @@ export class MieterDetailComponent implements OnInit {
   year: string
   zahlungenForderungen : ZahlungForderung[]
   saldo: Saldo
+  newZahlung: Zahlung
 
   displayedColumns: string[] = ["datum_soll", "datum_ist", "betrag_forderung", "betrag_zahlung", "kommentar"]
   dataSource: MatTableDataSource<ZahlungForderung>
@@ -48,15 +49,34 @@ export class MieterDetailComponent implements OnInit {
     const id = this.mieter?.id ?? 0
     try {
       this.zahlungenForderungen = await this.zahlungForderungService.getZahlungenForderungenByMieterAndYear(id, +this.year)
+      this.dataSource = new MatTableDataSource<ZahlungForderung>(this.zahlungenForderungen)
       this.saldo = await this.zahlungForderungService.getSaldoByMieterAndYear(id, +this.year)
     } catch (err) {
       this.messageService.add(JSON.stringify(err, undefined, 4))
     }
   }
 
-  async onYearInput(): Promise<void> {
+  async loadForYear(): Promise<void> {
     await this.getZahlungenForderungen()
-    this.dataSource = new MatTableDataSource<ZahlungForderung>(this.zahlungenForderungen)
+  }
+
+  async insertNewZahlung(newZahlungRaw: ZahlungRaw): Promise<void> {
+    try {
+      this.messageService.add(`New ZahlungRaw: ${newZahlungRaw.datum_soll}, ${newZahlungRaw.datum_ist}, ${newZahlungRaw.betrag}, ${newZahlungRaw.kommentar}`)
+      let newZahlung : Zahlung = {
+        'id': 0,
+        'mieter': this.mieter.id,
+        'datum_soll': newZahlungRaw.datum_soll,
+        'datum_ist': newZahlungRaw.datum_ist,
+        'betrag': +(newZahlungRaw.betrag.replace(',','.')),
+        'kommentar': newZahlungRaw.kommentar
+      }
+      this.messageService.add(`New Zahlung: ${newZahlung.datum_soll}, ${newZahlung.datum_ist}, ${newZahlung.betrag}, ${newZahlung.kommentar}, ${newZahlung.mieter}`)
+      await this.zahlungForderungService.postZahlung(newZahlung)
+      await this.getZahlungenForderungen()
+    } catch (err) {
+      this.messageService.add(`Error when inserted zahlung: ${JSON.stringify(err, undefined, 4)}`)
+    }
   }
 
   async ngOnInit(): Promise<void> {

hv-ui/src/app/mieter.ts

@@ -13,4 +13,5 @@ export interface Mieter {
     telefon: string;
     einzug: string;
     auszug: string;
+    saldo: number;
 }

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"
+<mat-card class="defaultCard">
-        routerLink="/mieter/{{mieter.id}}">
+    <mat-card-header>
-        <span>{{mieter.vorname}} {{mieter.nachname}}</span>
+        <mat-card-title>
-    </li>
+            Meine Mieter
-</ul>
+        </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 = 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();
   }
 }

hv-ui/src/app/saldo.ts

@@ -1,5 +0,0 @@
-export interface Saldo {
-    forderungen: number
-    zahlungen: number
-    saldo: number
-}

hv-ui/src/app/zahlung-forderung.service.ts

@@ -2,9 +2,7 @@ import { Injectable } from '@angular/core'
 import { Observable, of } from 'rxjs'
 import { HttpClient, HttpHeaders } from '@angular/common/http'
 
-import { ZahlungForderung } from './zahlung-forderung'
+import { ZahlungForderung, Forderung, Zahlung, Saldo } from './zahlung-forderung'
-import { Forderung } from './forderung'
-import { Saldo } from './saldo'
 import { MessageService } from './message.service'
 import { serviceBaseUrl } from './config'
 
@@ -24,6 +22,11 @@ export class ZahlungForderungService {
     return this.http.get<Forderung>(`${serviceBaseUrl}/hv/forderung/${id}`).toPromise()
   }
 
+  postZahlung(zahlung: Zahlung): Promise<string> {
+    this.messageService.add(`ZahlungForderungService: insert zahlung ${JSON.stringify(zahlung, undefined, 4)}`)
+    return this.http.post<string>(`${serviceBaseUrl}/hv/zahlung`, zahlung).toPromise()
+  }
+
   getSaldoByMieterAndYear(mieterId: number, year: number): Promise<Saldo> {
     this.messageService.add(`ZahlungForderungService: fetched saldo by mieter ${mieterId} and year ${year}`)
     return this.http.get<Saldo>(`${serviceBaseUrl}/hv/mieter/${mieterId}/saldo/${year}`).toPromise()

hv-ui/src/app/zahlung-forderung.ts

@@ -7,4 +7,34 @@ export interface ZahlungForderung {
     betrag_zahlung: number
     betrag_forderung: number
     kommentar: string
+}
+
+export interface Forderung {
+    id: number
+    mieter: number
+    ref_wohnung: number
+    datum: string
+    betrag: number
+}
+
+export interface Zahlung {
+    id: number
+    mieter: number
+    datum_soll: string
+    datum_ist: string
+    betrag: number
+    kommentar: string
+}
+
+export interface ZahlungRaw {
+    datum_soll: string
+    datum_ist: string
+    betrag: string
+    kommentar: string
+}
+
+export interface Saldo {
+    forderungen: number
+    zahlungen: number
+    saldo: number
 }