fdsa

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

@@ -1,16 +1,14 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { CurrencyPipe } from '@angular/common';
-import { Component, inject, signal, computed } from '@angular/core';
-import { form, FormField } from '@angular/forms/signals';
+import { Component, computed, effect, inject, signal } from '@angular/core';
+import { FormField, form } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
-import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table';
-import { map, tap } from 'rxjs/operators';
 
 import { ReceivePaymentItem } from '../../core/receive-payment-item';
-import { SettleOption } from '../../core/settle-option';
 import { SettleOptionService } from '../../settle-option/settle-option.service';
 import { VoucherType } from '../bills/voucher-type';
 
@@ -45,6 +43,9 @@ export class ReceivePaymentComponent {
     amount: number;
   }>(MAT_DIALOG_DATA);
 
+  typeSignal = signal<VoucherType | undefined>(this.data.type);
+  settleOptionsResource = this.ser.listForType(this.typeSignal);
+
   choices = signal<ReceivePaymentItem[]>([]);
   choicesWithAmount = computed(() => {
     const amounts = this.formModel().amounts;
@@ -77,25 +78,23 @@ export class ReceivePaymentComponent {
     this.amount = data.amount;
     this.displayReason.set(false);
     this.displayTable.set(false);
-    this.ser
-      .listForType(data.type)
-      .pipe(
-        tap((x: SettleOption[]) => this.displayReason.set(x.reduce((o, n) => o || n.hasReason, this.displayReason()))),
-        tap((x: SettleOption[]) => this.displayTable.set(x.length > 1)),
-        map((x: SettleOption[]) =>
-          x.map((y) => ({ ...y, amount: !this.displayTable() ? this.amount : 0 }) as ReceivePaymentItem),
-        ),
-      )
-      .subscribe((x) => {
-        this.choices.set(x);
-        this.formModel.update((f) => ({
-          ...f,
-          amounts: x.map((y) => ({
-            name: y.name,
-            amount: y.amount === 0 ? 0 : this.amount,
-          })),
-        }));
-      });
+
+    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,
+        })),
+      }));
+    });
   }
 
   select(reason: string) {