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

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();
  }
}