hv2-all-in-one/ui/hv2-ui/src/app/tenant-details/tenant-details.component.html

<section class="mat-typography">
    <mat-card class="defaultCard">
        <mat-card-header>
            <mat-card-title>
                {{tenant?.firstname}} {{tenant?.lastname}} 
            </mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <mat-accordion>
                <mat-expansion-panel (opened)="collapseTenantDetails = true"
                                    (closed)="collapseTenantDetails = false">
                    <mat-expansion-panel-header>
                        <mat-panel-title *ngIf="!collapseTenantDetails">
                            Details
                        </mat-panel-title>
                        <mat-panel-description>
                        </mat-panel-description>
                    </mat-expansion-panel-header>
                    <div>
                        <form (ngSubmit)="saveTenant()">
                            <div>
                                <mat-form-field appearance="outline">
                                    <mat-label>Anrede</mat-label>
                                    <input matInput name="salutation" [(ngModel)]="tenant.salutation"/>
                                </mat-form-field>
                                <mat-form-field appearance="outline">
                                    <mat-label>Vorname</mat-label>
                                    <input matInput name="firstname" [(ngModel)]="tenant.firstname"/>
                                </mat-form-field>
                                <mat-form-field appearance="outline">
                                    <mat-label>Nachname</mat-label>
                                    <input matInput name="lastname" [(ngModel)]="tenant.lastname"/>
                                </mat-form-field>
                            </div><div>
                                <mat-form-field appearance="outline">
                                    <mat-label>Adresse 1 (Straße)</mat-label>
                                    <input matInput name="address" [(ngModel)]="tenant.address1"/>
                                </mat-form-field>
                                <mat-form-field appearance="outline">
                                    <mat-label>Adresse 2</mat-label>
                                    <input matInput name="address2" [(ngModel)]="tenant.address2"/>
                                </mat-form-field>
                                <mat-form-field appearance="outline">
                                    <mat-label>Adresse 3</mat-label>
                                    <input matInput name="address3" [(ngModel)]="tenant.address3"/>
                                </mat-form-field>
                            </div><div>
                                <mat-form-field appearance="outline">
                                    <mat-label>PLZ</mat-label>
                                    <input matInput name="zip" [(ngModel)]="tenant.zip"/>
                                </mat-form-field>
                                <mat-form-field appearance="outline">
                                    <mat-label>Ort</mat-label>
                                    <input matInput name="city" [(ngModel)]="tenant.city"/>
                                </mat-form-field>
                            </div><div>
                                <mat-form-field appearance="outline">
                                    <mat-label>Telefon 1</mat-label>
                                    <input matInput name="phone1" [(ngModel)]="tenant.phone1"/>
                                </mat-form-field>
                                <mat-form-field appearance="outline">
                                    <mat-label>Telefon 2</mat-label>
                                    <input matInput name="phone2" [(ngModel)]="tenant.phone2"/>
                                </mat-form-field>
                            </div><div>
                                <mat-form-field appearance="outline">
                                    <mat-label>IBAN</mat-label>
                                    <input matInput name="iban" [(ngModel)]="tenant.iban"/>
                                </mat-form-field>
                            </div>
<!--
                            <div>
                                <mat-form-field appearance="outline">
                                    <mat-label>Account ID</mat-label>
                                    <input matInput name="account_id" [readonly]="true" [ngModel]="account.id"/>
                                </mat-form-field>
                                <mat-form-field appearance="outline">
                                    <mat-label>Account Description</mat-label>
                                    <input matInput name="account_desc" [readonly]="true" [ngModel]="account.description"/>
                                </mat-form-field>
                            </div>
-->                            
                            <button #submitButton type="submit" mat-raised-button color="primary">Speichern</button>
                        </form>
                    </div>
                </mat-expansion-panel>
            </mat-accordion>
        </mat-card-content>
    </mat-card>
          
    <app-note [selectedTenantId]="tenantId"></app-note>

    <mat-card class="defaultCard">
        <mat-card-header>
            <mat-card-title>
                Mietverhältnisse
            </mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <mat-accordion>
                <mat-expansion-panel #panelTenancies
                                     (opened)="collapseTenancies = true"
                                     (closed)="collapseTenancies = false">
                    <mat-expansion-panel-header>
                        <mat-panel-title *ngIf="!collapseTenancies">
                            Übersicht
                        </mat-panel-title>
                        <mat-panel-description>
                        </mat-panel-description>
                    </mat-expansion-panel-header>
                    <div>
                        <table mat-table [dataSource]="tenancyDataSource" #zftable>
                            <ng-container matColumnDef="description">
                                <th mat-header-cell *matHeaderCellDef>Beschreibung</th>
                                <td mat-cell *matCellDef="let element">{{element.rawTenancy.description}}</td>
                            </ng-container>
                            <ng-container matColumnDef="flat">
                                <th mat-header-cell *matHeaderCellDef>Wohnung</th>
                                <td mat-cell *matCellDef="let element">{{element.flat}}</td>
                            </ng-container>
                            <ng-container matColumnDef="parking">
                                <th mat-header-cell *matHeaderCellDef>Garage</th>
                                <td mat-cell *matCellDef="let element">{{element.parking}}</td>
                            </ng-container>
                            <ng-container matColumnDef="commercial_premise">
                                <th mat-header-cell *matHeaderCellDef>Büro</th>
                                <td mat-cell *matCellDef="let element">{{element.commercial_premise}}</td>
                            </ng-container>
                            <ng-container matColumnDef="startdate">
                                <th mat-header-cell *matHeaderCellDef>Beginn</th>
                                <td mat-cell *matCellDef="let element">{{element.rawTenancy.startdate | date}}</td>
                            </ng-container>
                            <ng-container matColumnDef="enddate">
                                <th mat-header-cell *matHeaderCellDef>Ende</th>
                                <td mat-cell *matCellDef="let element">{{element.rawTenancy.enddate | date}}</td>
                            </ng-container>
                            <tr mat-header-row *matHeaderRowDef="tenancyDisplayColumns"></tr>
                            <tr mat-row *matRowDef="let row; columns: tenancyDisplayColumns;" (click)="setSelectedTenancy(row.rawTenancy)"></tr>
                        </table>
                    </div>
                </mat-expansion-panel>
                <mat-expansion-panel #panelAddMapping
                                     (opened)="openTenancyMapping()"
                                     (closed)="closeTenancyMapping()">
                    <mat-expansion-panel-header>
                        <mat-panel-title *ngIf="!collapseTenancyMapping">
                            Mietverhältnis hinzufügen
                        </mat-panel-title>
                        <mat-panel-description>
                        </mat-panel-description>
                    </mat-expansion-panel-header>
                    <div>
                        <form (ngSubmit)="addTenancyToTenant()">
                            <div>
                                <mat-form-field appearance="outline" id="setenddatefield">
                                    <mat-label>Beginn</mat-label>
                                    <input matInput name="startdate" [(ngModel)]="newTenancy.startdate" [matDatepicker]="newtenancystartdatepicker"/>
                                    <mat-datepicker-toggle matSuffix [for]="newtenancystartdatepicker"></mat-datepicker-toggle>
                                    <mat-datepicker #newtenancystartdatepicker></mat-datepicker>
                                </mat-form-field>
                                <mat-form-field appearance="outline">
                                    <mat-label>Beschreibung</mat-label>
                                    <input matInput name="description" [(ngModel)]="newTenancy.description"/>
                                </mat-form-field>
                            </div><div>
                                <mat-form-field appearance="outline">
                                    <mat-select #mapSelect [(ngModel)]="newTenancy.flat" name="flat" (selectionChange)="flatSelected()">
                                    <mat-label>Wohnung</mat-label>
                                        <mat-option *ngFor="let p of allFlats" [value]="p.rawFlat.id">{{p.rawFlat.description}} {{p.premise}}</mat-option>
                                    </mat-select>
                                </mat-form-field>
                                <mat-form-field appearance="outline">
                                    <mat-label>Garage</mat-label>
                                    <mat-select #mapSelect [(ngModel)]="newTenancy.parking" name="parking" (selectionChange)="parkingSelected()">
                                        <mat-option *ngFor="let p of allParkings" [value]="p.rawParking.id">{{p.rawParking.description}} {{p.premise}}</mat-option>
                                    </mat-select>
                                </mat-form-field>
                                <mat-form-field appearance="outline">
                                    <mat-label>Büro</mat-label>
                                    <mat-select #mapSelect [(ngModel)]="newTenancy.commercial_premise" name="commercial_premise" (selectionChange)="commercialPremiseSelected()">
                                        <mat-option *ngFor="let p of allCommercialPremises" [value]="p.rawCommercialPremise.id">{{p.rawCommercialPremise.description}} {{p.premise}}</mat-option>
                                    </mat-select>
                                </mat-form-field>
            
                            </div>
                            <button #addTenancyToTenantButton type="submit" mat-raised-button color="primary">Anlegen</button>
                        </form>
                            </div>
                </mat-expansion-panel>
            </mat-accordion>
        </mat-card-content>
    </mat-card>

    <mat-card class="defaultCard" *ngIf="selectedTenancy">
        <mat-card-header>
            <mat-card-title>
                <span>{{selectedTenancy.description}}</span>
                <button mat-icon-button color="accent" aria-label="Schließen" (click)="clearSelectedTenancy()">
                    <mat-icon>done</mat-icon>
                </button>
            </mat-card-title>
        </mat-card-header>
        <mat-card-content>
            Mietdetails: {{selectedTenancy.description}}

            <div>
                <form (ngSubmit)="setTenancyEndData()">
                    <mat-form-field appearance="outline" id="setenddatefield">
                        <mat-label>Ende</mat-label>
                        <input matInput name="enddate" [(ngModel)]="selectedTenancy.enddate" [matDatepicker]="enddatepicker"/>
                        <mat-datepicker-toggle matSuffix [for]="enddatepicker"></mat-datepicker-toggle>
                        <mat-datepicker #enddatepicker></mat-datepicker>
                    </mat-form-field>
                    <button #setTenancyEndDataButton type="submit" mat-raised-button color="primary">Enddatum setzen</button>
                </form>
            </div>

            <div>
                <table mat-table [dataSource]="mappedFeesDataSource" #zftable>
                    <ng-container matColumnDef="description">
                        <th mat-header-cell *matHeaderCellDef>Beschreibung</th>
                        <td mat-cell *matCellDef="let element">{{element.description}}</td>
                    </ng-container>
                    <ng-container matColumnDef="amount">
                        <th mat-header-cell *matHeaderCellDef>Betrag</th>
                        <td mat-cell *matCellDef="let element">{{element.amount | number:'1.2-2'}} €</td>
                    </ng-container>
                    <ng-container matColumnDef="fee_type">
                        <th mat-header-cell *matHeaderCellDef>Typ</th>
                        <td mat-cell *matCellDef="let element">{{element.fee_type}}</td>
                    </ng-container>
                    <ng-container matColumnDef="startdate">
                        <th mat-header-cell *matHeaderCellDef>Beginn</th>
                        <td mat-cell *matCellDef="let element">{{element.startdate | date}}</td>
                    </ng-container>
                    <ng-container matColumnDef="enddate">
                        <th mat-header-cell *matHeaderCellDef>Ende</th>
                        <td mat-cell *matCellDef="let element">{{element.enddate | date}}</td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="mappedFeesDisplayedColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: mappedFeesDisplayedColumns;"></tr>
                </table>
            </div>
            <div>
                <form (ngSubmit)="addFee()">
                    <mat-form-field appearance="standard" id="addfeefield">
                        <mat-label>Mietsatz</mat-label>
                        <mat-select #mapSelect [(ngModel)]="selectedFee" name="fee">
                            <mat-option *ngFor="let p of allFees" [value]="p.id">{{p.description}} {{p.amount}} {{p.startdate}}</mat-option>
                        </mat-select>
                    </mat-form-field>
                    <button #mapFeeButton type="submit" mat-raised-button color="primary">Zuordnen</button>
                </form>

            </div>

        </mat-card-content>
    </mat-card>

    <app-account [selectedAccountId]="tenant.account" [shallBeRentPayment]="true"></app-account>

</section>