accordion

ui/hv2-ui/src/app/app.module.ts

@@ -40,6 +40,7 @@ import { MatDatepickerModule } from '@angular/material/datepicker'
 import { MatNativeDateModule } from '@angular/material/core';
 import { FeeListComponent } from './fee-list/fee-list.component';
 import { FeeDetailsComponent } from './fee-details/fee-details.component';
+import { MatExpansionModule } from '@angular/material/expansion'
 
 @NgModule({
   declarations: [
@@ -84,6 +85,7 @@ import { FeeDetailsComponent } from './fee-details/fee-details.component';
     MatSelectModule,
     MatDatepickerModule,
     MatNativeDateModule,
+    MatExpansionModule
   ],
   providers: [
     { provide: HTTP_INTERCEPTORS, useClass: ErrorHandlerInterceptor, multi: true },

ui/hv2-ui/src/app/tenant-details/tenant-details.component.html

@@ -3,14 +3,19 @@
         <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">
+        <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>
@@ -75,8 +80,11 @@
                     <button #submitButton type="submit" mat-raised-button color="primary">Speichern</button>
                 </form>
             </div>
+    </mat-expansion-panel>
+          </mat-accordion>
         </mat-card-content>
     </mat-card>
+          
     <mat-card class="defaultCard">
         <mat-card-header>
             <mat-card-title>
@@ -84,6 +92,16 @@
             </mat-card-title>
         </mat-card-header>
         <mat-card-content>
+            <mat-accordion>
+                <mat-expansion-panel (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">
@@ -114,6 +132,8 @@
                     <tr mat-row *matRowDef="let row; columns: tenancyDisplayColumns;"></tr>
                 </table>
             </div>
+        </mat-expansion-panel>
+    </mat-accordion>
   </mat-card-content>
     </mat-card>
 

ui/hv2-ui/src/app/tenant-details/tenant-details.component.ts

@@ -32,7 +32,6 @@ export class TenantDetailsComponent implements OnInit {
   collapseTenantDetails: boolean = false
   collapseTenancies: boolean = false
 
-
   @ViewChild('submitButton') submitButton: MatButton
 
   constructor(