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,45 +1,41 @@
 <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" [style.visibility]="this.displayTable ? 'visible': 'hidden'">
-      <mat-table #table [dataSource]="dataSource" formArrayName="amounts">
+      <!-- Name Column -->
-        <!-- Name Column -->
+      <ng-container matColumnDef="name">
-        <ng-container matColumnDef="name">
+        <mat-header-cell *matHeaderCellDef class="bold">Amount</mat-header-cell>
-          <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-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>
-          <mat-footer-cell *matFooterCellDef class="bold">Balance</mat-footer-cell>
+      </ng-container>
-        </ng-container>
+      <!-- Amount Column -->
-        <!-- Discount Column -->
+      <ng-container matColumnDef="amount">
-        <ng-container matColumnDef="amount">
+        <mat-header-cell *matHeaderCellDef class="center bold" class="flex-auto">{{
-          <mat-header-cell *matHeaderCellDef class="center bold" class="flex-auto">{{
+          amount | currency: 'INR'
-            amount | currency: 'INR'
+        }}</mat-header-cell>
-          }}</mat-header-cell>
+        <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i" class="flex-auto">
-          <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i" class="flex-auto">
+          <mat-form-field>
-            <mat-form-field>
+            <input matInput type="number" formControlName="amount" autocomplete="off" />
-              <input matInput type="number" formControlName="amount" autocomplete="off" />
+          </mat-form-field>
-            </mat-form-field>
+        </mat-cell>
-          </mat-cell>
+        <mat-footer-cell *matFooterCellDef class="bold">{{ balance | currency: 'INR' }}</mat-footer-cell>
-          <mat-footer-cell *matFooterCellDef class="bold">{{ balance | currency: 'INR' }}</mat-footer-cell>
+      </ng-container>
-        </ng-container>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-        <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-        <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+      <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
-        <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
+    </mat-table>
-      </mat-table>
+    <mat-form-field class="flex-auto" [style.visibility]="this.displayReason ? 'visible': 'hidden'">
-    }
+      <mat-label>Reason</mat-label>
-    @if (this.displayReason) {
+      <input
-      <mat-form-field class="flex-auto">
+        type="text"
-        <mat-label>Reason</mat-label>
+        matInput
-        <input
+        #son
-          type="text"
+        formControlName="son"
-          matInput
+        autocomplete="off"
-          #son
+        (focus)="select(son.value) && son.select()"
-          formControlName="son"
+        (input)="select(son.value)"
-          autocomplete="off"
+      />
-          (focus)="select(son.value) && son.select()"
+    </mat-form-field>
-          (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);
+        console.log('re', this.displayReason)
-        this.listenToAmountChange();
-        this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
       });
-    this.dataSource = new ReceivePaymentDatasource(this.choices);
+    this.form.valueChanges.subscribe((x) => this.listenToAmountChange(x.amounts));
-    this.listenToAmountChange();
   }
 
-  listenToAmountChange() {
+  listenToAmountChange(amounts?: Partial<{ name: string; amount: number }>[]) {
-    const array = this.form.controls.amounts;
+    if (!amounts) {
-    this.choices.forEach((z, i) =>
+      return;
-      array.controls[i].valueChanges.pipe(distinctUntilChanged()).subscribe((x) => {
+    }
-        (this.choices.find((s) => s.name === x.name) as ReceivePaymentItem).amount = x.amount ?? 0;
+    amounts.forEach((z, i) => {
-        this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
+      this.choices[i].amount = z.amount ?? 0;
-      }),
+    });
-    );
+    this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
   }
 
   select(reason: string) {