brewman/overlord/src/app/payment/payment-dialog.component.ts

import { Component, Inject, OnInit } from '@angular/core';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
import { Account } from '../core/account';
import { AccountService } from '../core/account.service';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Observable, of as observableOf } from 'rxjs';

@Component({
  selector: 'app-payment-dialog',
  templateUrl: './payment-dialog.component.html',
  styleUrls: ['./payment-dialog.component.css'],
})
export class PaymentDialogComponent implements OnInit {
  accounts: Observable<Account[]>;
  form: FormGroup;
  account: Account;
  accBal: any;

  constructor(
    public dialogRef: MatDialogRef<PaymentDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
    private fb: FormBuilder,
    private accountSer: AccountService,
  ) {
    this.createForm();
    this.setupAccountAutocomplete();
  }

  ngOnInit() {
    this.form.setValue({
      account: this.data.journal.account,
      amount: this.data.journal.amount,
    });
    this.account = this.data.journal.account;
  }

  createForm() {
    this.form = this.fb.group({
      account: '',
      amount: '',
    });
    this.accBal = null;
  }

  setupAccountAutocomplete(): void {
    const control = this.form.get('account');
    this.accounts = control.valueChanges.pipe(
      startWith(null),
      map((x) => (x !== null && x.length >= 1 ? x : null)),
      debounceTime(150),
      distinctUntilChanged(),
      switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
    );
  }

  displayAccount(account?: Account): string | undefined {
    return account ? account.name : undefined;
  }

  accountSelected(event: MatAutocompleteSelectedEvent): void {
    this.account = event.option.value;
    this.accountSer.balance(this.account.id, this.data.date).subscribe((v) => {
      this.accBal = v;
    });
  }

  accept(): void {
    const formValue = this.form.value;
    const amount = +formValue.amount;
    this.data.journal.account = this.account;
    this.data.journal.amount = amount;
    this.dialogRef.close(this.data.journal);
  }
}