Handout management

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

@@ -0,0 +1,193 @@
+import { Component, inject, LOCALE_ID } 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';
+import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MAT_DATE_LOCALE, provideNativeDateAdapter } from '@angular/material/core';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { map, Observable, startWith, timestamp } from 'rxjs';
+import {
+  MatBottomSheet,
+  MatBottomSheetModule,
+  MatBottomSheetRef,
+} from '@angular/material/bottom-sheet';
+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';
+
+@Component({
+  selector: 'app-handover-dialog',
+  standalone: true,
+  imports: [FormsModule, ReactiveFormsModule, MatDatepickerModule, MatFormFieldModule, MatInputModule, MatButtonModule, MatDialogModule, CommonModule, MatAutocompleteModule, MatProgressSpinnerModule, MatRadioModule],
+  providers: [
+    provideNativeDateAdapter(),
+    { provide: LOCALE_ID, useValue: 'de-DE' },
+    { provide: MAT_DATE_LOCALE, useValue: 'de-DE' },
+  ],
+  templateUrl: './handover-dialog.component.html',
+  styleUrl: './handover-dialog.component.scss'
+})
+export class HandoverDialogComponent {
+  
+  private api: ApiService = inject(ApiService);
+  readonly dialogRef = inject(MatDialogRef<HandoverDialogComponent>);
+  readonly data = inject<IKey>(MAT_DIALOG_DATA);
+  private _bottomSheet = inject(MatBottomSheet);
+  private toast: HotToastService = inject(HotToastService);
+
+  isLoading: boolean = false;
+
+  customers: { name: string, id: string }[] = [];
+  filteredCustomers: Observable<any[]> = new Observable();
+
+  handovers: any[] = [];
+  
+
+  handoverForm = new FormGroup({
+    customer: new FormControl<any>(null, Validators.required),
+    key: new FormControl(this.data),
+    direction: new FormControl('out', Validators.required),
+    timestamp: new FormControl(new Date(), Validators.required)
+  });
+
+  ngOnInit() {
+    this.loadData();
+  }
+
+  loadData() {
+    this.isLoading = true;
+    const promises: Observable<any>[] = [
+      this.getHandovers(),
+      this.loadCustomers()
+    ];
+
+    Promise.all(promises).then(() => {
+      this.isLoading = false;
+    })
+
+  }
+
+  getHandovers() {
+    const promise = this.api.getHandovers(this.data.id)
+    
+    promise.subscribe({
+      next: n => {
+        this.handovers = n;
+        if (n && n.length > 0) {
+          this.handoverForm.controls.customer.patchValue(n[0].customer.name);
+          this.handoverForm.controls.direction.patchValue(n[0].direction == 'out' ? 'return' : 'out')
+        }
+      }
+    });
+
+    return promise;
+  }
+
+  loadCustomers() {
+    const promise = this.api.getCustomers()
+    
+    promise.subscribe({
+      next: customers => {
+        this.customers = customers;
+        this.filteredCustomers = this.handoverForm.controls.customer.valueChanges.pipe(
+          startWith(''),
+          map(value => this._filter(value || '')),
+        );
+      }
+    });
+
+    return promise;
+    
+  }
+
+  private _filter(value: string): any[] {
+    const filterValue = value.toLowerCase();
+
+    return this.customers.filter(option => option.name.toLowerCase().includes(filterValue) || option.id.toLowerCase().includes(filterValue));
+  }
+
+  save() {
+    const val = this.handoverForm.value;
+    const dto = {
+      key: this.data,
+      customer: this.customers.find(c => c.name == val.customer || c.id == val.customer),
+      timestamp: val.timestamp,
+      direction: val.direction
+    }
+
+    if (dto.customer == null) {
+      this._bottomSheet.open(BottomSheetCreateCustomer).afterDismissed().subscribe({
+        next: async n => {
+          if (!n) { return; }
+          await this.createCustomer(val.customer);
+          this.saveIt(dto);
+        }
+      })
+    } else {
+      this.saveIt(dto);
+    }
+  }
+
+  saveIt(data: any) {
+    this.api.handoverKey(data)
+    .pipe(
+      this.toast.observe({
+        loading: 'Speichern...',
+        error: 'Konnte nicht gespeichert werden. Bitte versuche es später erneut',
+        success: 'Gespeichert'
+      })
+    )
+    .subscribe({
+      next: n => {
+        this.dialogRef.close(data.direction == 'out')
+      }
+    })
+  }
+
+  createCustomer(name: string) {
+    this.isLoading = true;
+    this.api.createCustomer({ name, system: this.data.cylinder.system}).subscribe({
+      next: n => {
+        this.isLoading = false;
+      }
+    })
+  }
+  
+
+}
+
+
+
+@Component({
+  template: `
+  <mat-nav-list>
+  <a mat-list-item (click)="openLink($event, true)">
+    <span matListItemTitle>Anlegen</span>
+    <span matLine>Neuen Empfänger anlegen</span>
+</a>
+
+  <a mat-list-item (click)="openLink($event)">
+    <span matListItemTitle>Abbrechen</span>
+    <span matLine>Zurück zur Auswahl</span>
+  </a>
+
+</mat-nav-list>
+  `,
+  standalone: true,
+  imports: [MatInputModule, MatListModule],
+})
+export class BottomSheetCreateCustomer {
+  private _bottomSheetRef =
+    inject<MatBottomSheetRef<BottomSheetCreateCustomer>>(MatBottomSheetRef);
+
+  openLink(event: MouseEvent, data?: boolean): void {
+    this._bottomSheetRef.dismiss(data);
+    event.preventDefault();
+  }
+}