Handout management

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

@@ -0,0 +1,77 @@
+@if (isLoading) {
+  <div class="loading-spinner">
+    <mat-spinner></mat-spinner>
+  </div>
+}
+
+<h2 mat-dialog-title>Übergaben {{ data.name }}</h2>
+<mat-dialog-content>
+
+  <h6>Historie:</h6>
+    <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>
+
+  <form [formGroup]="handoverForm" class="flex-column" style="margin-top: 48px;">
+    <h6>Neue Übergabe anlegen:</h6>
+
+    <mat-form-field>
+      <mat-label>Kunde</mat-label>
+      <input type="text"
+             matInput
+             formControlName="customer"
+             [matAutocomplete]="auto">
+      <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+        @for (option of filteredCustomers | async; track option) {
+          <mat-option [value]="option.name">{{option.name}}</mat-option>
+        }
+      </mat-autocomplete>
+      <mat-hint>Wähle den Empfänger oder tippe einen neuen Namen ein</mat-hint>
+    </mat-form-field>
+
+    <div style="margin: 24px 0;">
+      Der Schlüssel wurde
+      <mat-radio-group formControlName="direction" class="flex-column" style="align-items: flex-start; justify-content: flex-start;">
+        <mat-radio-button  [value]="'out'">Ausgegeben</mat-radio-button>
+        <mat-radio-button [value]="'return'">Zurückgegeben</mat-radio-button>
+      </mat-radio-group>
+    </div>
+
+    <mat-form-field>
+      <mat-label>Datum der Übergabe</mat-label>
+      <input matInput [matDatepicker]="picker" formControlName="timestamp">
+      <mat-hint>TT/MM/JJJJ</mat-hint>
+      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+      <mat-datepicker #picker></mat-datepicker>
+    </mat-form-field>
+  </form>
+
+  
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close color="warn" >Schließen</button>
+  <button mat-button (click)="save()" [disabled]="handoverForm.invalid">Speichern</button>
+</mat-dialog-actions>