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"

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

@@ -1,7 +1,7 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { CurrencyPipe } from '@angular/common';
-import { Component, computed, effect, inject, signal } from '@angular/core';
-import { FormField, form } from '@angular/forms/signals';
+import { Component, computed, inject, linkedSignal, signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -15,10 +15,7 @@ import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-l
 import { VoucherType } from '../bills/voucher-type';
 
 export interface ReceivePaymentFormData {
-  amounts: {
-    name: string;
-    amount: number;
-  }[];
+  amounts: ReceivePaymentItem[];
   son: string;
 }
 
@@ -47,59 +44,45 @@ export class ReceivePaymentComponent {
     amount: number;
   }>(MAT_DIALOG_DATA);
 
-  typeSignal = signal<VoucherType | undefined>(this.data.type);
+  type = this.data.type;
+
+  typeSignal = signal<VoucherType | undefined>(this.type);
   settleOptionsResource = this.ser.listForType(this.typeSignal);
 
-  choices = signal<ReceivePaymentItem[]>([]);
-  choicesWithAmount = computed(() => {
-    const amounts = this.formModel().amounts;
-    return this.choices().map((c, i) => ({ ...c, amount: amounts[i]?.amount ?? 0 }));
-  });
+  displayReason = computed(() => this.settleOptionsResource.value()?.some((n) => n.hasReason) ?? false);
+  displayTable = computed(() => (this.settleOptionsResource.value()?.length ?? 0) > 1);
 
-  type: VoucherType;
-  amount: number;
-  balance = computed(() => {
-    return this.amount - this.formModel().amounts.reduce((a, c) => a + (c.amount ?? 0), 0);
-  });
-
-  reason = '';
-  displayReason = signal<boolean | undefined>(undefined);
-  displayTable = signal<boolean | undefined>(undefined);
-  formModel = signal<ReceivePaymentFormData>({
-    amounts: [],
-    son: '',
+  formModel = linkedSignal({
+    source: () => this.settleOptionsResource.value(),
+    computation: (options): ReceivePaymentFormData => {
+      if (!options) {
+        return { amounts: [], son: '' };
+      }
+      const isTable = options.length > 1;
+      return {
+        amounts: options.map(
+          (y) =>
+            ({
+              ...y,
+              amount: !isTable ? this.data.amount : 0,
+            }) as ReceivePaymentItem,
+        ),
+        son: '',
+      };
+    },
   });
 
   form = form(this.formModel);
 
-  dataSource = this.choicesWithAmount;
+  balance = computed(() => {
+    return this.data.amount - this.formModel().amounts.reduce((a, c) => a + (c.amount ?? 0), 0);
+  });
 
   displayedColumns = ['name', 'amount'];
 
-  constructor() {
-    const data = this.data;
-    this.type = data.type;
-    this.amount = data.amount;
-    this.displayReason.set(false);
-    this.displayTable.set(false);
+  reason = '';
 
-    effect(() => {
-      const x = this.settleOptionsResource.value();
-      if (!x) return;
-      this.displayReason.set(x.reduce((o, n) => o || n.hasReason, false));
-      this.displayTable.set(x.length > 1);
-      const isTable = x.length > 1;
-      const choices = x.map((y) => ({ ...y, amount: !isTable ? this.amount : 0 }) as ReceivePaymentItem);
-      this.choices.set(choices);
-      this.formModel.update((f) => ({
-        ...f,
-        amounts: x.map((y) => ({
-          name: y.name,
-          amount: !isTable ? this.amount : 0,
-        })),
-      }));
-    });
-  }
+  trackByRow = (_: number, row: ReceivePaymentItem) => row.id ?? row.name ?? _;
 
   select(reason: string) {
     this.reason = reason.trim();
@@ -107,7 +90,7 @@ export class ReceivePaymentComponent {
   }
 
   accept(): void {
-    this.dialogRef.close({ choices: this.choicesWithAmount(), reason: this.reason });
+    this.dialogRef.close({ choices: this.formModel().amounts, reason: this.formModel().son.trim() || this.reason });
   }
 
   maxAmount(row: ReceivePaymentItem, index: number) {