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}}
                <button mat-button *ngIf="!collapseTenantDetails" (click)="collapseTenantDetails=true">Collapse</button>
                <button mat-button *ngIf="collapseTenantDetails" (click)="collapseTenantDetails=false">Expand</button> 
            </mat-card-title>
            <mat-card-subtitle>
                ID: {{tenant?.id}}
            </mat-card-subtitle>
        </mat-card-header>
        <mat-card-content *ngIf="!collapseTenantDetails">
            <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-card-content>
    </mat-card>
    <mat-card class="defaultCard">
        <mat-card-header>
            <mat-card-title>
                Mietverhältnisse
            </mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <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}}</td>
                    </ng-container>
                    <ng-container matColumnDef="enddate">
                        <th mat-header-cell *matHeaderCellDef>Ende</th>
                        <td mat-cell *matCellDef="let element">{{element.rawTenancy.enddate}}</td>
                    </ng-container>
                    <tr mat-header-row *matHeaderRowDef="tenancyDisplayColumns"></tr>
                    <tr mat-row *matRowDef="let row; columns: tenancyDisplayColumns;"></tr>
                </table>
            </div>
        </mat-card-content>
    </mat-card>

</section>