Customer discount with prefill discount in sales.

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

@@ -0,0 +1,16 @@
+export class DiscountItem {
+  id: string;
+  name: string;
+  discount: number;
+  discountLimit: number;
+  customerDiscount: number;
+
+  public constructor(init?: Partial<DiscountItem>) {
+    this.id = '';
+    this.name = '';
+    this.discount = 0;
+    this.discountLimit = 0;
+    this.customerDiscount = 0;
+    Object.assign(this, init);
+  }
+}

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

@@ -12,9 +12,11 @@
       <ng-container matColumnDef="discount">
         <mat-header-cell *matHeaderCellDef class="center" fxFlex>Discount</mat-header-cell>
         <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i" fxFlex>
-          <mat-form-field>
+          <mat-form-field fxFlex="100%">
             <input matInput type="number" formControlName="discount" autocomplete="off" />
-            <mat-hint>Maximum Discount {{ row.discountLimit | percent: '1.2-2' }}</mat-hint>
+            <span matSuffix>%</span>
+            <mat-hint>Cust: {{ row.customerDiscount | percent: '1.2-2' }}</mat-hint>
+            <mat-hint align="end">Max: {{ row.discountLimit | percent: '1.2-2' }}</mat-hint>
           </mat-form-field>
         </mat-cell>
       </ng-container>

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

@@ -5,6 +5,7 @@ import { round } from 'mathjs';
 import { Observable } from 'rxjs';
 
 import { DiscountDataSource } from './discount-datasource';
+import { DiscountItem } from './discount-item';
 
 @Component({
   selector: 'app-modifiers',
@@ -12,7 +13,7 @@ import { DiscountDataSource } from './discount-datasource';
   styleUrls: ['./discount.component.css'],
 })
 export class DiscountComponent {
-  list: { name: string; discount: number; discountLimit: number }[] = [];
+  list: DiscountItem[] = [];
   form: FormGroup;
   dataSource: DiscountDataSource = new DiscountDataSource([]);
 
@@ -22,12 +23,12 @@ export class DiscountComponent {
     public dialogRef: MatDialogRef<DiscountComponent>,
     private fb: FormBuilder,
     @Inject(MAT_DIALOG_DATA)
-    public data: Observable<{ name: string; discount: number; discountLimit: number }[]>,
+    public data: Observable<DiscountItem[]>,
   ) {
     this.form = this.fb.group({
       discounts: '',
     });
-    this.data.subscribe((list: { name: string; discount: number; discountLimit: number }[]) => {
+    this.data.subscribe((list: DiscountItem[]) => {
       this.list = list;
       this.form.setControl(
         'discounts',
@@ -35,12 +36,15 @@ export class DiscountComponent {
           this.list.map((x) =>
             this.fb.group({
               name: [x.name],
-              discount: ['', [Validators.min(0), Validators.max(x.discountLimit * 100)]],
+              discount: [
+                '' + (x.discount !== 0 ? x.discount * 100 : ''),
+                [Validators.min(0), Validators.max(x.discountLimit * 100)],
+              ],
             }),
           ),
         ),
       );
-      this.dataSource = new DiscountDataSource(list);
+      this.dataSource = new DiscountDataSource(this.list);
     });
   }
 
@@ -49,13 +53,15 @@ export class DiscountComponent {
     for (let i = this.list.length - 1; i >= 0; i--) {
       const item = this.list[i];
       const control = (array.controls[i] as FormGroup).controls.discount as FormControl;
-      if (control.pristine || control.value === null) {
+      console.log(item.name, control.value, typeof control.value);
+      if (
+        control.value === null ||
+        control.value === '' ||
+        (control.pristine && control.value === '0')
+      ) {
         this.list.splice(i, 1);
       } else {
-        item.discount = Math.max(
-          Math.min(round(array.controls[i].value.discount / 100, 5), item.discountLimit),
-          0,
-        );
+        item.discount = Math.max(Math.min(round(control.value / 100, 5), item.discountLimit), 0);
       }
     }
     this.dialogRef.close(this.list);