Updated to angular 11

Now compiling with strict mode in typescript
Need to error checking now

bookie/src/app/sales/receive-payment/receive-payment-datasource.ts

@@ -1,12 +1,14 @@
 import { DataSource } from '@angular/cdk/collections';
 import { Observable, of as observableOf } from 'rxjs';
 
-export class ReceivePaymentDatasource extends DataSource<{ name: string; discount: number }> {
-  constructor(private data: { name: string; discount: number }[]) {
+import { ReceivePaymentItem } from '../../core/receive-payment-item';
+
+export class ReceivePaymentDatasource extends DataSource<ReceivePaymentItem> {
+  constructor(private data: ReceivePaymentItem[]) {
     super();
   }
 
-  connect(): Observable<{ name: string; discount: number }[]> {
+  connect(): Observable<ReceivePaymentItem[]> {
     return observableOf(this.data);
   }
 

bookie/src/app/sales/receive-payment/receive-payment.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { ReceivePaymentComponent } from './receive-payment.component';
 
@@ -6,11 +6,13 @@ describe('ReceivePaymentComponent', () => {
   let component: ReceivePaymentComponent;
   let fixture: ComponentFixture<ReceivePaymentComponent>;
 
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ReceivePaymentComponent],
-    }).compileComponents();
-  }));
+  beforeEach(
+    waitForAsync(() => {
+      TestBed.configureTestingModule({
+        declarations: [ReceivePaymentComponent],
+      }).compileComponents();
+    }),
+  );
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ReceivePaymentComponent);

bookie/src/app/sales/receive-payment/receive-payment.component.ts

@@ -3,7 +3,9 @@ import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { distinctUntilChanged } from 'rxjs/operators';
 
-import { PrintType } from '../bills/print-type';
+import { ReceivePaymentItem } from '../../core/receive-payment-item';
+import { ReceivePaymentList } from '../../core/receive-payment-list';
+import { VoucherType } from '../bills/voucher-type';
 
 import { ReceivePaymentDatasource } from './receive-payment-datasource';
 
@@ -13,7 +15,7 @@ import { ReceivePaymentDatasource } from './receive-payment-datasource';
   styleUrls: ['./receive-payment.component.css'],
 })
 export class ReceivePaymentComponent {
-  choices = {
+  choices: ReceivePaymentList = {
     REGULAR_BILL: [
       {
         id: 2,
@@ -52,7 +54,7 @@ export class ReceivePaymentComponent {
     ],
   };
 
-  type: PrintType;
+  type: VoucherType;
   amount: number;
   balance: number;
   form: FormGroup;
@@ -63,16 +65,18 @@ export class ReceivePaymentComponent {
   constructor(
     public dialogRef: MatDialogRef<ReceivePaymentComponent>,
     private fb: FormBuilder,
-    @Inject(MAT_DIALOG_DATA) public data: { type: PrintType; amount: number },
+    @Inject(MAT_DIALOG_DATA) public data: { type: VoucherType; amount: number },
   ) {
-    this.createForm();
+    this.form = this.fb.group({
+      amounts: '',
+    });
     this.type = data.type;
     this.amount = data.amount;
     this.balance = data.amount;
     this.form.setControl(
       'amounts',
       this.fb.array(
-        this.choices[this.type].map((x) =>
+        this.choices[this.type].map((x: ReceivePaymentItem) =>
           this.fb.group({
             name: [x.name],
             amount: [''],
@@ -84,17 +88,11 @@ export class ReceivePaymentComponent {
     this.listenToAmountChange();
   }
 
-  createForm() {
-    this.form = this.fb.group({
-      amounts: '',
-    });
-  }
-
   listenToAmountChange() {
     const array = this.form.get('amounts') as FormArray;
     this.choices[this.type].forEach((z, i) =>
       array.controls[i].valueChanges.pipe(distinctUntilChanged()).subscribe((x) => {
-        this.choices[this.type].find((s) => s.name === x.name).amount =
+        (this.choices[this.type].find((s) => s.name === x.name) as ReceivePaymentItem).amount =
           x.amount === '' ? 0 : parseInt(x.amount, 10);
         this.balance = this.amount - this.choices[this.type].reduce((a, c) => a + c.amount, 0);
       }),