Fix: Receive payment refactored. Earlier it would refresh on input.

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

@@ -6,7 +6,12 @@
   <h2 mat-dialog-title>Receive Payment</h2>
   <mat-dialog-content>
     <form class="flex-col">
-      <mat-table #table [dataSource]="dataSource()" [style.visibility]="this.displayTable() ? 'visible' : 'hidden'">
+      <mat-table
+        #table
+        [dataSource]="formModel().amounts"
+        [trackBy]="trackByRow"
+        [style.visibility]="displayTable() ? 'visible' : 'hidden'"
+      >
         <!-- Name Column -->
         <ng-container matColumnDef="name">
           <mat-header-cell *matHeaderCellDef class="bold">Amount</mat-header-cell>
@@ -16,7 +21,7 @@
         <!-- Amount Column -->
         <ng-container matColumnDef="amount">
           <mat-header-cell *matHeaderCellDef class="center bold" class="flex-auto">{{
-            amount | currency: 'INR'
+            data.amount | currency: 'INR'
           }}</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" class="center flex-auto">
             <mat-form-field>
@@ -29,7 +34,7 @@
         <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
         <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
       </mat-table>
-      <mat-form-field class="flex-auto" [style.visibility]="this.displayReason() ? 'visible' : 'hidden'">
+      <mat-form-field class="flex-auto" [style.visibility]="displayReason() ? 'visible' : 'hidden'">
         <mat-label>Reason</mat-label>
         <input
           type="text"