Breaking: Discount is applicable on sale category and not on menu category

Fix the import, etc on this.
While entering discount in sale, it checks the max allowed.

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

@@ -14,6 +14,7 @@
         <mat-cell *matCellDef="let row; let i = index" class="center" [formGroupName]="i" fxFlex>
           <mat-form-field>
             <input matInput type="number" formControlName="discount" autocomplete="off" />
+            <mat-hint>Maximum Discount {{ row.discountLimit | percent: '1.2-2' }}</mat-hint>
           </mat-form-field>
         </mat-cell>
       </ng-container>

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

@@ -1,6 +1,7 @@
 import { Component, Inject } from '@angular/core';
 import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { round } from 'mathjs';
 import { Observable } from 'rxjs';
 
 import { DiscountDataSource } from './discount-datasource';
@@ -11,7 +12,7 @@ import { DiscountDataSource } from './discount-datasource';
   styleUrls: ['./discount.component.css'],
 })
 export class DiscountComponent {
-  list: { name: string; discount: number }[] = [];
+  list: { name: string; discount: number; discountLimit: number }[] = [];
   form: FormGroup;
   dataSource: DiscountDataSource = new DiscountDataSource([]);
 
@@ -20,12 +21,13 @@ export class DiscountComponent {
   constructor(
     public dialogRef: MatDialogRef<DiscountComponent>,
     private fb: FormBuilder,
-    @Inject(MAT_DIALOG_DATA) public data: Observable<{ name: string; discount: number }[]>,
+    @Inject(MAT_DIALOG_DATA)
+    public data: Observable<{ name: string; discount: number; discountLimit: number }[]>,
   ) {
     this.form = this.fb.group({
       discounts: '',
     });
-    this.data.subscribe((list: { name: string; discount: number }[]) => {
+    this.data.subscribe((list: { name: string; discount: number; discountLimit: number }[]) => {
       this.list = list;
       this.form.setControl(
         'discounts',
@@ -33,7 +35,7 @@ export class DiscountComponent {
           this.list.map((x) =>
             this.fb.group({
               name: [x.name],
-              discount: ['', [Validators.min(0), Validators.max(100)]],
+              discount: ['', [Validators.min(0), Validators.max(x.discountLimit * 100)]],
             }),
           ),
         ),
@@ -45,7 +47,10 @@ export class DiscountComponent {
   accept(): void {
     const array = this.form.get('discounts') as FormArray;
     this.list.forEach((item, index) => {
-      item.discount = Math.max(Math.min(array.controls[index].value.discount, 100), 0);
+      item.discount = Math.max(
+        Math.min(round(array.controls[index].value.discount / 100, 5), item.discountLimit),
+        0,
+      );
     });
     this.dialogRef.close(this.list);
   }