tabs

client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.html

@@ -3,40 +3,12 @@
     <mat-spinner></mat-spinner>
   </div>
 }
-
 <h2 mat-dialog-title>Übergaben {{ data.name }}</h2>
 <mat-dialog-content>
-
+<mat-tab-group mat-stretch-tabs="true" mat-align-tabs="start" [dynamicHeight]="true" >
-  <h6>Historie:</h6>
+  <mat-tab label="Neue Übergabe"  >
-    <table class="handouts">
+    <form [formGroup]="handoverForm" class="flex-column" style="margin-top: 12px;">
-      <tr>
+      <!-- <h6>Neue Übergabe anlegen:</h6> -->
-        <th>Kunde</th>
-        <th >Datum</th>
-        <th>
-          Übergabe
-        </th>
-      </tr>
-    
-      @if (handovers.length == 0) {
-        <tr>
-          <td>-</td>
-          <td>-</td>
-          <td>-</td>
-        </tr>
-      }
-      @for (item of handovers; track $index) {
-        <tr>
-          <td>{{ item.customer.name }}</td>
-          <td>{{ item.timestamp | date}}</td>
-          <td>{{ item.direction == 'out' ? 'Ausgabe' : 'Rückgabe'}}</td>
-        </tr>
-      }
-
-        
-    </table>
-
-  <form [formGroup]="handoverForm" class="flex-column" style="margin-top: 48px;">
-    <h6>Neue Übergabe anlegen:</h6>
   
       <mat-form-field>
         <mat-label>Kunde</mat-label>
@@ -68,6 +40,37 @@
         <mat-datepicker #picker></mat-datepicker>
       </mat-form-field>
     </form>
+  </mat-tab>
+
+  <mat-tab label="Historie">
+    <table class="handouts">
+      <tr>
+        <th>Kunde</th>
+        <th >Datum</th>
+        <th>
+          Übergabe
+        </th>
+      </tr>
+    
+      @if (handovers.length == 0) {
+        <tr>
+          <td>-</td>
+          <td>-</td>
+          <td>-</td>
+        </tr>
+      }
+      @for (item of handovers; track $index) {
+        <tr>
+          <td>{{ item.customer.name }}</td>
+          <td>{{ item.timestamp | date}}</td>
+          <td>{{ item.direction == 'out' ? 'Ausgabe' : 'Rückgabe'}}</td>
+        </tr>
+      }
+
+        
+    </table>
+  </mat-tab>
+</mat-tab-group> 
 
   
 </mat-dialog-content>

client/src/app/modules/keys/components/handover-dialog/handover-dialog.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, LOCALE_ID } from '@angular/core';
+import { Component, inject, LOCALE_ID, signal } from '@angular/core';
 import { ApiService } from '../../../../shared/api.service';
 import { IKey } from '../../../../model/interface/key.interface';
 import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -20,11 +20,13 @@ import {MatListModule} from '@angular/material/list';
 import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatRadioModule} from '@angular/material/radio';
 import { HotToastService } from '@ngxpert/hot-toast';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatTabsModule} from '@angular/material/tabs';
 
 @Component({
   selector: 'app-handover-dialog',
   standalone: true,
-  imports: [FormsModule, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule],
+  imports: [FormsModule, MatExpansionModule, MatTabsModule, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule],
   providers: [
     provideNativeDateAdapter(),
     { provide: LOCALE_ID, useValue: 'de-DE' },
@@ -42,6 +44,7 @@ export class HandoverDialogComponent {
   private toast: HotToastService = inject(HotToastService);
 
   isLoading: boolean = false;
+  readonly panelOpenState = signal(false);
 
   customers: { name: string, id: string }[] = [];
   filteredCustomers: Observable<any[]> = new Observable();