Receive payment working.

TODO: Nested subscribe in Receive Payment in sales-home-component.ts should be refactored into something more readable.

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

@@ -0,0 +1,104 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { FormArray, FormBuilder, FormGroup } from "@angular/forms";
+import { distinctUntilChanged } from "rxjs/operators";
+import { ReceivePaymentDatasource } from "./receive-payment-datasource";
+import { PrintType } from "../bills/bill";
+
+@Component({
+  selector: 'app-receive-payment',
+  templateUrl: './receive-payment.component.html',
+  styleUrls: ['./receive-payment.component.css']
+})
+export class ReceivePaymentComponent {
+  choices = {
+    REGULAR_BILL: [
+      {
+        id: 2,
+        name: "Cash",
+        amount: 0
+      },
+      {
+        id: 3,
+        name: "Credit Card",
+        amount: 0
+      },
+      {
+        id: 5,
+        name: "Bill To Company",
+        amount: 0
+      },
+      {
+        id: 6,
+        name: "Tip",
+        amount: 0
+      }
+    ]
+    ,
+    NO_CHARGE: [
+      {
+        id: 4,
+        name: "No Charge",
+        amount: 0
+      }
+    ],
+    STAFF: [
+      {
+        id: 10,
+        name: "Staff Account",
+        amount: 0
+      }
+    ]
+  };
+  type: PrintType;
+  amount: number;
+  balance: number;
+  form: FormGroup;
+  dataSource: ReceivePaymentDatasource;
+
+  displayedColumns = ['name', 'amount'];
+
+  constructor(
+    public dialogRef: MatDialogRef<ReceivePaymentComponent>,
+    private fb: FormBuilder,
+    @Inject(MAT_DIALOG_DATA) public data: {type: PrintType, amount: number}
+  ) {
+    this.createForm();
+    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.fb.group({
+          name: [x.name],
+          amount: [""]
+        })
+      )
+    ));
+    this.dataSource = new ReceivePaymentDatasource(this.choices[this.type]);
+    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 = (x.amount === "" ? 0 : parseInt(x.amount, 10));
+        this.balance = this.amount - this.choices[this.type].reduce((a, c) => a + c.amount, 0);
+      })
+    );
+  }
+
+
+  accept(): void {
+    this.dialogRef.close(this.choices[this.type]);
+  }
+}