Consolidated commit message to v22 signals

overlord/src/app/journal/journal-dialog.component.ts

@@ -1,24 +1,27 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { AsyncPipe, CurrencyPipe } from '@angular/common';
-import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { CurrencyPipe } from '@angular/common';
+import { Component, computed, inject, linkedSignal } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
-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';
 
+export interface JournalDialogFormData {
+  debit: number;
+  account: Account | string | null;
+  amount: string;
+}
+
 @Component({
   selector: 'app-journal-dialog',
   templateUrl: './journal-dialog.component.html',
@@ -26,81 +29,74 @@ import { MathService } from '../shared/math.service';
   imports: [
     MatDialogModule,
     CdkScrollableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatSelectModule,
     MatOptionModule,
     MatInputModule,
     MatAutocompleteModule,
     MatButtonModule,
-    AsyncPipe,
     CurrencyPipe,
     AccountingPipe,
   ],
 })
-export class JournalDialogComponent implements OnInit {
+export class JournalDialogComponent {
+  private math = inject(MathService);
+  private accountSer = inject(AccountService);
   dialogRef = inject<MatDialogRef<JournalDialogComponent>>(MatDialogRef);
   data = inject<{
     journal: Journal;
     date: string;
   }>(MAT_DIALOG_DATA);
 
-  private math = inject(MathService);
-  private accountSer = inject(AccountService);
-  private cd = inject(ChangeDetectorRef);
+  formModel = linkedSignal<
+    {
+      journal: Journal;
+      date: string;
+    },
+    JournalDialogFormData
+  >({
+    source: () => this.data,
+    computation: (data: { journal: Journal; date: string }) => ({
+      debit: data.journal.debit,
+      account: data.journal.account,
+      amount: `${data.journal.amount}`,
+    }),
+  });
 
-  accounts: Observable<Account[]>;
-  form: FormGroup<{
-    debit: FormControl<number>;
-    account: FormControl<string | null>;
-    amount: FormControl<string>;
-  }>;
+  form = form(this.formModel);
 
-  account: Account = new Account();
-  accBal: AccountBalance | null = null;
+  accountSearch = computed(() => {
+    const v = this.form.account().value();
+    return typeof v === 'string' ? v : null;
+  });
 
-  constructor() {
-    this.form = new FormGroup({
-      debit: new FormControl(1, { nonNullable: true }),
-      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))),
-    );
-  }
+  accountsResource = this.accountSer.autocomplete(this.accountSearch);
+  accounts = computed(() => this.accountsResource.value() ?? []);
 
-  ngOnInit() {
-    this.form.setValue({
-      debit: this.data.journal.debit,
-      account: this.data.journal.account.name,
-      amount: `${this.data.journal.amount}`,
-    });
-    this.account = this.data.journal.account;
-  }
+  balanceDate = computed(() => this.data.date);
+  accountId = computed((): string | null => {
+    const account = this.form.account().value();
+    return typeof account === 'string' ? null : (account?.id ?? null);
+  });
 
-  displayFn(account?: Account | string): string {
-    return !account ? '' : typeof account === 'string' ? account : account.name;
-  }
+  accBalResource = this.accountSer.balance(this.accountId, this.balanceDate);
+  accBal = computed(() => this.accBalResource.value() ?? null);
 
-  accountSelected(event: MatAutocompleteSelectedEvent): void {
-    const account = event.option.value as Account;
-    this.account = account;
-    this.accountSer.balance(account.id as string, this.data.date).subscribe((v) => {
-      this.accBal = v;
-      this.cd.detectChanges();
-    });
+  displayFn(account?: Account): string {
+    return account ? account.name : '';
   }
 
   accept(): void {
-    const formValue = this.form.value;
-    const amount = this.math.journalAmount(formValue.amount, formValue.debit ?? 1);
+    const formValue = this.form().value();
+    const account = typeof formValue.account === 'string' ? null : formValue.account;
+    if (!account || !account.id) {
+      return;
+    }
+    const amount = this.math.journalAmount(formValue.amount ?? '', Number(formValue.debit) || 1);
     this.data.journal.debit = amount.debit;
-    this.data.journal.account = this.account;
+    this.data.journal.account = account;
     this.data.journal.amount = amount.amount;
     this.dialogRef.close(this.data.journal);
   }