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

import { CdkScrollable } from '@angular/cdk/scrolling';
import { AsyncPipe, CurrencyPipe } from '@angular/common';
import { Component, Inject, OnInit } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteSelectedEvent, MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
import { MatButton } from '@angular/material/button';
import { MatOption } from '@angular/material/core';
import {
  MAT_DIALOG_DATA,
  MatDialogRef,
  MatDialogTitle,
  MatDialogContent,
  MatDialogActions,
  MatDialogClose,
} from '@angular/material/dialog';
import { MatFormField, MatLabel, MatHint, MatPrefix } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
import { Observable, of as observableOf } from 'rxjs';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';

import { Account } from '../core/account';
import { AccountBalance } from '../core/account-balance';
import { AccountService } from '../core/account.service';
import { Journal } from '../core/journal';
import { AccountingPipe } from '../shared/accounting.pipe';
import { MathService } from '../shared/math.service';

@Component({
  selector: 'app-payment-dialog',
  templateUrl: './payment-dialog.component.html',
  styleUrls: ['./payment-dialog.component.css'],
  standalone: true,
  imports: [
    MatDialogTitle,
    CdkScrollable,
    MatDialogContent,
    ReactiveFormsModule,
    MatFormField,
    MatLabel,
    MatInput,
    MatAutocompleteTrigger,
    MatHint,
    MatAutocomplete,
    MatOption,
    MatPrefix,
    MatDialogActions,
    MatButton,
    MatDialogClose,
    AsyncPipe,
    CurrencyPipe,
    AccountingPipe,
  ],
})
export class PaymentDialogComponent implements OnInit {
  accounts: Observable<Account[]>;
  form: FormGroup<{
    account: FormControl<string | null>;
    amount: FormControl<string>;
  }>;

  account: Account = new Account();
  accBal: AccountBalance | null = null;

  constructor(
    public dialogRef: MatDialogRef<PaymentDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { journal: Journal; date: string },
    private math: MathService,
    private accountSer: AccountService,
  ) {
    this.form = new FormGroup({
      account: new FormControl(''),
      amount: new FormControl('', { nonNullable: true }),
    });
    this.accBal = null;
    // Setup Account Autocomplete
    this.accounts = this.form.controls.account.valueChanges.pipe(
      debounceTime(150),
      distinctUntilChanged(),
      switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
    );
  }

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

  displayFn(account?: Account | string): string {
    return !account ? '' : typeof account === 'string' ? account : account.name;
  }

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

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