Consolidated commit message to v22 signals

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

@@ -1,21 +1,24 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { AsyncPipe } from '@angular/common';
-import { Component, inject, OnInit } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+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 { Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
+import { round } from 'mathjs';
 
 import { Batch } from '../core/batch';
 import { BatchService } from '../core/batch.service';
 import { Inventory } from '../core/inventory';
 import { MathService } from '../shared/math.service';
 
+export interface IssueDialogFormData {
+  batch: Batch | string | null;
+  quantity: string;
+}
+
 @Component({
   selector: 'app-issue-dialog',
   templateUrl: './issue-dialog.component.html',
@@ -23,16 +26,16 @@ import { MathService } from '../shared/math.service';
   imports: [
     MatDialogModule,
     CdkScrollableModule,
-    ReactiveFormsModule,
+    FormField,
+    FormRoot,
     MatFormFieldModule,
     MatInputModule,
     MatAutocompleteModule,
     MatOptionModule,
     MatButtonModule,
-    AsyncPipe,
   ],
 })
-export class IssueDialogComponent implements OnInit {
+export class IssueDialogComponent {
   dialogRef = inject<MatDialogRef<IssueDialogComponent>>(MatDialogRef);
   data = inject<{
     inventory: Inventory;
@@ -42,52 +45,51 @@ export class IssueDialogComponent implements OnInit {
   private math = inject(MathService);
   private batchSer = inject(BatchService);
 
-  batches: Observable<Batch[]>;
-  form: FormGroup<{
-    batch: FormControl<string | null>;
-    quantity: FormControl<string>;
-  }>;
+  formModel = linkedSignal<
+    {
+      inventory: Inventory;
+      date: string;
+    },
+    IssueDialogFormData
+  >({
+    source: () => this.data,
+    computation: (data: { inventory: Inventory; date: string }): IssueDialogFormData => ({
+      batch: data.inventory.batch ?? null,
+      quantity: `${data.inventory.quantity}`,
+    }),
+  });
 
-  batch: Batch = new Batch();
+  form = form(this.formModel);
 
-  constructor() {
-    this.form = new FormGroup({
-      batch: new FormControl<string | null>(null),
-      quantity: new FormControl<string>('', { nonNullable: true }),
-    });
-    // Listen to Batch Autocomplete Change
-    this.batches = this.form.controls.batch.valueChanges.pipe(
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.batchSer.autocomplete(this.data.date, x))),
-    );
-  }
+  batchSearch = computed(() => {
+    const v = this.form.batch().value();
+    return typeof v === 'string' ? v : null;
+  });
 
-  ngOnInit() {
-    this.form.setValue({
-      batch: this.data.inventory.batch.name,
-      quantity: `${this.data.inventory.quantity}`,
-    });
-    this.batch = this.data.inventory.batch;
-  }
+  batchesResource = this.batchSer.autocomplete(
+    computed(() => this.data.date),
+    this.batchSearch,
+  );
+
+  batches = computed(() => this.batchesResource.value() ?? []);
 
   displayFn(batch?: Batch | string): string {
     return !batch ? '' : typeof batch === 'string' ? batch : batch.name;
   }
 
-  batchSelected(event: MatAutocompleteSelectedEvent): void {
-    this.batch = event.option.value as Batch;
-  }
-
   accept(): void {
-    const formValue = this.form.value;
-    const quantity = this.math.parseAmount(formValue.quantity, 2);
-    this.data.inventory.batch = this.batch;
+    const formValue = this.form().value();
+    const batch = typeof formValue.batch === 'string' ? null : formValue.batch;
+    if (!batch || !batch.id) {
+      return;
+    }
+    const quantity = this.math.parseAmount(formValue.quantity ?? '0', 2);
+    this.data.inventory.batch = batch;
     this.data.inventory.quantity = quantity;
-    this.data.inventory.rate = this.batch.rate;
-    this.data.inventory.tax = this.batch.tax;
-    this.data.inventory.discount = this.batch.discount;
-    this.data.inventory.amount = quantity * this.batch.rate * (1 + this.batch.tax) * (1 - this.batch.discount);
+    this.data.inventory.rate = batch.rate;
+    this.data.inventory.tax = batch.tax;
+    this.data.inventory.discount = batch.discount;
+    this.data.inventory.amount = round(quantity * batch.rate * (1 + batch.tax) * (1 - batch.discount), 2);
     this.dialogRef.close(this.data.inventory);
   }
 }