Chore: Moved from Untyped to Stongly Typed forms.

overlord/src/app/account/account-list/account-list.component.ts

@@ -1,12 +1,13 @@
 import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angular/core';
-import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute } from '@angular/router';
 import { Observable } from 'rxjs';
-import { debounceTime, distinctUntilChanged, startWith } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
 import { Account } from '../../core/account';
+import { AccountType } from '../../core/account-type';
 
 import { AccountListDataSource } from './account-list-datasource';
 
@@ -21,29 +22,39 @@ export class AccountListComponent implements OnInit, AfterViewInit {
   @ViewChild(MatSort, { static: true }) sort?: MatSort;
   dataSource: AccountListDataSource;
   filter: Observable<string>;
-  form: UntypedFormGroup;
+  form: FormGroup<{
+    filter: FormControl<string>;
+  }>;
+
   list: Account[] = [];
+  accountTypes: AccountType[] = [];
 
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
   displayedColumns = ['name', 'type', 'isActive', 'isReconcilable', 'costCentre'];
 
-  constructor(private route: ActivatedRoute, private fb: UntypedFormBuilder) {
-    this.form = this.fb.group({
-      filter: '',
+  constructor(private route: ActivatedRoute) {
+    this.form = new FormGroup({
+      filter: new FormControl<string>('', { nonNullable: true }),
     });
     // Listen to Filter Change
-    this.filter = (this.form.get('filter') as UntypedFormControl).valueChanges.pipe(
-      startWith(''),
+    this.filter = this.form.controls.filter.valueChanges.pipe(
       debounceTime(150),
       distinctUntilChanged(),
     );
+
     this.dataSource = new AccountListDataSource(this.list, this.filter);
   }
 
   ngOnInit() {
     this.route.data.subscribe((value) => {
-      const data = value as { list: Account[] };
-
+      const data = value as { list: Account[]; accountTypes: AccountType[] };
+      this.accountTypes = data.accountTypes;
+      data.list.forEach(
+        (x) =>
+          (x.type = new AccountType({
+            name: this.accountTypes.find((y) => y.id === x.type)?.name,
+          })),
+      );
       this.list = data.list;
     });
     this.dataSource = new AccountListDataSource(this.list, this.filter, this.paginator, this.sort);