Fix: Discount and payment received were not working

Dockerfile

@@ -62,4 +62,4 @@ RUN chmod 777 /app/docker-entrypoint.sh \
     && ln -s /app/docker-entrypoint.sh /
 ENTRYPOINT ["docker-entrypoint.sh"]
 
-CMD ["poetry", "run", "gunicorn", "barker.main:app", "--worker-class", "uvicorn.workers.UvicornWorker", "--config", "/app/gunicorn.conf.py", "--log-config", "/app/logging.conf"]
+CMD ["poetry", "run", "run.sh"]

bookie/src/app/sales/discount/discount-datasource.ts

@@ -1,13 +1,13 @@
 import { DataSource } from '@angular/cdk/collections';
-import { Observable, of as observableOf } from 'rxjs';
+import { Observable } from 'rxjs';
 
 export class DiscountDataSource extends DataSource<{ name: string; discount: number }> {
-  constructor(private data: { name: string; discount: number }[]) {
+  constructor(private data: Observable<{ name: string; discount: number }[]>) {
     super();
   }
 
   connect(): Observable<{ name: string; discount: number }[]> {
-    return observableOf(this.data);
+    return this.data;
   }
 
   disconnect() {}

bookie/src/app/sales/discount/discount.component.ts

@@ -26,7 +26,7 @@ import {
   MatRow,
 } from '@angular/material/table';
 import { round } from 'mathjs';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 import { DiscountDataSource } from './discount-datasource';
 import { DiscountItem } from './discount-item';
@@ -71,7 +71,8 @@ export class DiscountComponent {
     >;
   }>;
 
-  dataSource: DiscountDataSource = new DiscountDataSource([]);
+  public listObservable = new BehaviorSubject<DiscountItem[]>([]);
+  dataSource: DiscountDataSource = new DiscountDataSource(this.listObservable);
 
   displayedColumns = ['name', 'discount'];
 
@@ -91,6 +92,7 @@ export class DiscountComponent {
 
     this.data.subscribe((list: DiscountItem[]) => {
       this.list = list;
+      console.log(list);
       this.form.controls.discounts.clear();
 
       this.list.forEach((x) => {
@@ -104,7 +106,7 @@ export class DiscountComponent {
           }),
         );
       });
-      this.dataSource = new DiscountDataSource(this.list);
+      this.listObservable.next(this.list);
     });
   }
 

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

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

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

@@ -1,15 +1,14 @@
 <h2 mat-dialog-title>Receive Payment</h2>
 <mat-dialog-content>
   <form [formGroup]="form" class="flex flex-col">
-    @if (this.displayTable) {
-      <mat-table #table [dataSource]="dataSource" formArrayName="amounts">
+    <mat-table #table [dataSource]="dataSource" formArrayName="amounts" [style.visibility]="this.displayTable ? 'visible': 'hidden'">
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef class="bold">Amount</mat-header-cell>
         <mat-cell *matCellDef="let row; let i = index" (click)="maxAmount(row, i)">{{ row.name }}</mat-cell>
         <mat-footer-cell *matFooterCellDef class="bold">Balance</mat-footer-cell>
       </ng-container>
-        <!-- Discount Column -->
+      <!-- Amount Column -->
       <ng-container matColumnDef="amount">
         <mat-header-cell *matHeaderCellDef class="center bold" class="flex-auto">{{
           amount | currency: 'INR'
@@ -25,9 +24,7 @@
       <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
       <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
     </mat-table>
-    }
-    @if (this.displayReason) {
-      <mat-form-field class="flex-auto">
+    <mat-form-field class="flex-auto" [style.visibility]="this.displayReason ? 'visible': 'hidden'">
       <mat-label>Reason</mat-label>
       <input
         type="text"
@@ -39,7 +36,6 @@
         (input)="select(son.value)"
       />
     </mat-form-field>
-    }
   </form>
 </mat-dialog-content>
 <mat-dialog-actions align="end">

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

@@ -29,7 +29,8 @@ import {
   MatFooterRowDef,
   MatFooterRow,
 } from '@angular/material/table';
-import { distinctUntilChanged, map, tap } from 'rxjs/operators';
+import { BehaviorSubject } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
 
 import { ReceivePaymentItem } from '../../core/receive-payment-item';
 import { SettleOption } from '../../core/settle-option';
@@ -73,6 +74,7 @@ import { ReceivePaymentDatasource } from './receive-payment-datasource';
 export class ReceivePaymentComponent {
   @ViewChild('son', { static: true }) son?: ElementRef;
   choices: ReceivePaymentItem[] = [];
+  choicesSubject = new BehaviorSubject<ReceivePaymentItem[]>([]);
 
   type: VoucherType;
   amount: number;
@@ -90,7 +92,7 @@ export class ReceivePaymentComponent {
     son: FormControl<string>;
   }>;
 
-  dataSource: ReceivePaymentDatasource;
+  dataSource: ReceivePaymentDatasource = new ReceivePaymentDatasource(this.choicesSubject);
 
   displayedColumns = ['name', 'amount'];
 
@@ -113,6 +115,7 @@ export class ReceivePaymentComponent {
     this.balance = data.amount;
     this.displayReason = false;
     this.displayTable = false;
+    this.choicesSubject.subscribe((x) => (this.choices = x));
     this.ser
       .listForType(data.type)
       .pipe(
@@ -123,9 +126,9 @@ export class ReceivePaymentComponent {
         ),
       )
       .subscribe((x) => {
-        this.choices = x;
+        this.choicesSubject.next(x);
         this.form.controls.amounts.clear();
-        this.choices.forEach((y: ReceivePaymentItem) =>
+        x.forEach((y: ReceivePaymentItem) =>
           this.form.controls.amounts.push(
             new FormGroup({
               name: new FormControl<string>(y.name, { nonNullable: true }),
@@ -135,22 +138,19 @@ export class ReceivePaymentComponent {
             }),
           ),
         );
-        this.dataSource = new ReceivePaymentDatasource(this.choices);
-        this.listenToAmountChange();
-        this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
+        console.log('re', this.displayReason)
       });
-    this.dataSource = new ReceivePaymentDatasource(this.choices);
-    this.listenToAmountChange();
+    this.form.valueChanges.subscribe((x) => this.listenToAmountChange(x.amounts));
   }
 
-  listenToAmountChange() {
-    const array = this.form.controls.amounts;
-    this.choices.forEach((z, i) =>
-      array.controls[i].valueChanges.pipe(distinctUntilChanged()).subscribe((x) => {
-        (this.choices.find((s) => s.name === x.name) as ReceivePaymentItem).amount = x.amount ?? 0;
+  listenToAmountChange(amounts?: Partial<{ name: string; amount: number }>[]) {
+    if (!amounts) {
+      return;
+    }
+    amounts.forEach((z, i) => {
+      this.choices[i].amount = z.amount ?? 0;
+    });
     this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
-      }),
-    );
   }
 
   select(reason: string) {