Settle Options are now stored in the Database and can be updated

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

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

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

@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>Receive Payment</h2>
 <mat-dialog-content>
   <form [formGroup]="form" fxLayout="column">
-    <mat-table #table [dataSource]="dataSource" formArrayName="amounts">
+    <mat-table #table [dataSource]="dataSource" formArrayName="amounts" *ngIf="this.displayTable">
       <!-- Name Column -->
       <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef class="bold">Amount</mat-header-cell>
@@ -28,9 +28,22 @@
       <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
       <mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
     </mat-table>
+    <mat-form-field fxFlex *ngIf="this.displayReason">
+      <mat-label>Reason</mat-label>
+      <input
+        type="text"
+        matInput
+        #son
+        placeholder="Reason"
+        formControlName="son"
+        autocomplete="off"
+        (focus)="select(son.value) && son.select()"
+        (input)="select(son.value)"
+      />
+    </mat-form-field>
   </form>
 </mat-dialog-content>
 <mat-dialog-actions align="end">
-  <button mat-button [mat-dialog-close]="false">Cancel</button>
+  <button mat-button [mat-dialog-close]>Cancel</button>
   <button mat-button (click)="accept()" color="primary" [disabled]="!!balance">Ok</button>
 </mat-dialog-actions>

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

@@ -1,10 +1,11 @@
-import { Component, Inject } from '@angular/core';
+import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { distinctUntilChanged } from 'rxjs/operators';
+import { distinctUntilChanged, map, tap } from 'rxjs/operators';
 
 import { ReceivePaymentItem } from '../../core/receive-payment-item';
-import { ReceivePaymentList } from '../../core/receive-payment-list';
+import { SettleOption } from '../../core/settle-option';
+import { SettleOptionService } from '../../settle-option/settle-option.service';
 import { VoucherType } from '../bills/voucher-type';
 
 import { ReceivePaymentDatasource } from './receive-payment-datasource';
@@ -15,48 +16,15 @@ import { ReceivePaymentDatasource } from './receive-payment-datasource';
   styleUrls: ['./receive-payment.component.css'],
 })
 export class ReceivePaymentComponent {
-  choices: ReceivePaymentList = {
-    REGULAR_BILL: [
-      {
-        id: 2,
-        name: 'Cash',
-        amount: 0,
-      },
-      {
-        id: 3,
-        name: 'Credit Card',
-        amount: 0,
-      },
-      {
-        id: 5,
-        name: 'Bill To Company',
-        amount: 0,
-      },
-      {
-        id: 6,
-        name: 'Tip',
-        amount: 0,
-      },
-    ],
-    NO_CHARGE: [
-      {
-        id: 4,
-        name: 'No Charge',
-        amount: 0,
-      },
-    ],
-    STAFF: [
-      {
-        id: 10,
-        name: 'Staff Account',
-        amount: 0,
-      },
-    ],
-  };
+  @ViewChild('son', { static: true }) son?: ElementRef;
+  choices: ReceivePaymentItem[] = [];
 
   type: VoucherType;
   amount: number;
   balance: number;
+  reason = '';
+  displayReason: boolean;
+  displayTable: boolean;
   form: FormGroup;
   dataSource: ReceivePaymentDatasource;
 
@@ -65,41 +33,70 @@ export class ReceivePaymentComponent {
   constructor(
     public dialogRef: MatDialogRef<ReceivePaymentComponent>,
     private fb: FormBuilder,
+    private ser: SettleOptionService,
     @Inject(MAT_DIALOG_DATA) public data: { type: VoucherType; amount: number },
   ) {
     this.form = this.fb.group({
       amounts: '',
+      son: '',
     });
     this.type = data.type;
     this.amount = data.amount;
     this.balance = data.amount;
-    this.form.setControl(
-      'amounts',
-      this.fb.array(
-        this.choices[this.type].map((x: ReceivePaymentItem) =>
-          this.fb.group({
-            name: [x.name],
-            amount: [''],
-          }),
+    this.displayReason = false;
+    this.displayTable = false;
+    this.ser
+      .listForType(data.type)
+      .pipe(
+        tap(
+          (x: SettleOption[]) =>
+            (this.displayReason = x.reduce((o, n) => o || n.hasReason, this.displayReason)),
         ),
-      ),
-    );
-    this.dataSource = new ReceivePaymentDatasource(this.choices[this.type]);
+        tap((x: SettleOption[]) => (this.displayTable = x.length > 1)),
+        map((x: SettleOption[]) =>
+          x.map(
+            (y) => ({ ...y, amount: !this.displayTable ? this.amount : 0 } as ReceivePaymentItem),
+          ),
+        ),
+      )
+      .subscribe((x) => {
+        this.choices = x;
+        this.form.setControl(
+          'amounts',
+          this.fb.array(
+            this.choices.map((y: ReceivePaymentItem) =>
+              this.fb.group({
+                name: [y.name],
+                amount: [y.amount === 0 ? '' : '' + this.amount],
+              }),
+            ),
+          ),
+        );
+        this.dataSource = new ReceivePaymentDatasource(this.choices);
+        this.listenToAmountChange();
+        this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
+      });
+    this.dataSource = new ReceivePaymentDatasource(this.choices);
     this.listenToAmountChange();
   }
 
   listenToAmountChange() {
     const array = this.form.get('amounts') as FormArray;
-    this.choices[this.type].forEach((z, i) =>
+    this.choices.forEach((z, i) =>
       array.controls[i].valueChanges.pipe(distinctUntilChanged()).subscribe((x) => {
-        (this.choices[this.type].find((s) => s.name === x.name) as ReceivePaymentItem).amount =
+        (this.choices.find((s) => s.name === x.name) as ReceivePaymentItem).amount =
           x.amount === '' ? 0 : parseInt(x.amount, 10);
-        this.balance = this.amount - this.choices[this.type].reduce((a, c) => a + c.amount, 0);
+        this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
       }),
     );
   }
 
+  select(reason: string) {
+    this.reason = reason.trim();
+    return true;
+  }
+
   accept(): void {
-    this.dialogRef.close(this.choices[this.type]);
+    this.dialogRef.close({ choices: this.choices, reason: this.reason });
   }
 }