Chore: Moved from Untyped to Stongly Typed forms.

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

@@ -1,10 +1,10 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { round } from 'mathjs';
 import { Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 
 import { Batch } from '../core/batch';
 import { Inventory } from '../core/inventory';
@@ -20,26 +20,32 @@ import { MathService } from '../shared/math.service';
 })
 export class PurchaseDialogComponent implements OnInit {
   products: Observable<ProductSku[]>;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    product: FormControl<ProductSku | string | null>;
+    quantity: FormControl<string>;
+    price: FormControl<string>;
+    tax: FormControl<string>;
+    discount: FormControl<string>;
+  }>;
+
   product: ProductSku = new ProductSku();
 
   constructor(
     public dialogRef: MatDialogRef<PurchaseDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: { inventory: Inventory },
-    private fb: UntypedFormBuilder,
     private math: MathService,
     private productSer: ProductService,
   ) {
-    this.form = this.fb.group({
-      product: '',
-      quantity: '',
-      price: '',
-      tax: '',
-      discount: '',
+    this.form = new FormGroup({
+      product: new FormControl<ProductSku | string | null>(null),
+      quantity: new FormControl('', { nonNullable: true }),
+      price: new FormControl('', { nonNullable: true }),
+      tax: new FormControl('', { nonNullable: true }),
+      discount: new FormControl('', { nonNullable: true }),
     });
     // Listen to Product Autocomplete Change
-    this.products = (this.form.get('product') as UntypedFormControl).valueChanges.pipe(
-      startWith(null),
+    this.products = this.form.controls.product.valueChanges.pipe(
+      map((x) => (x instanceof ProductSku ? x.name : x)),
       map((x) => (x !== null && x.length >= 1 ? x : null)),
       debounceTime(150),
       distinctUntilChanged(),
@@ -50,10 +56,10 @@ export class PurchaseDialogComponent implements OnInit {
   ngOnInit() {
     this.form.setValue({
       product: this.data.inventory.batch?.sku,
-      quantity: this.data.inventory.quantity,
-      price: this.data.inventory.rate,
-      tax: this.data.inventory.tax,
-      discount: this.data.inventory.discount,
+      quantity: `${this.data.inventory.quantity}`,
+      price: `${this.data.inventory.rate}`,
+      tax: `${this.data.inventory.tax}`,
+      discount: `${this.data.inventory.discount}`,
     });
     this.product = this.data.inventory.batch?.sku;
   }
@@ -63,8 +69,22 @@ export class PurchaseDialogComponent implements OnInit {
   }
 
   productSelected(event: MatAutocompleteSelectedEvent): void {
-    this.product = event.option.value;
-    (this.form.get('price') as UntypedFormControl).setValue(this.product.costPrice);
+    const product: ProductSku = event.option.value;
+    this.product = product;
+    this.form.controls.price.setValue(`${product.costPrice}`);
+    if (product.isRateContracted) {
+      this.form.controls.price.disable();
+      this.form.controls.tax.disable();
+      this.form.controls.discount.disable();
+      this.form.controls.tax.setValue('RC');
+      this.form.controls.discount.setValue('RC');
+    } else {
+      this.form.controls.price.enable();
+      this.form.controls.tax.enable();
+      this.form.controls.discount.enable();
+      this.form.controls.tax.setValue('');
+      this.form.controls.discount.setValue('');
+    }
   }
 
   accept(): void {