Customer discount with prefill discount in sales.

bookie/src/app/customers/customer-detail/customer-detail.component.html

@@ -38,9 +38,28 @@
         >
           <mat-form-field fxFlex>
             <mat-label>Address</mat-label>
-            <input matInput placeholder="Address" formControlName="address" />
+            <textarea matInput placeholder="Address" formControlName="address"> </textarea>
           </mat-form-field>
         </div>
+        <mat-divider></mat-divider>
+        <div formArrayName="discounts">
+          <div
+            fxLayout="row"
+            *ngFor="let r of item.discounts; index as i"
+            [formGroupName]="i"
+            fxLayout="row"
+            fxLayoutAlign="space-around start"
+            fxLayout.lt-md="column"
+            fxLayoutGap="20px"
+            fxLayoutGap.lt-md="0px"
+          >
+            <mat-form-field fxFlex>
+              <mat-label>Discount on {{ r.name }}</mat-label>
+              <input matInput placeholder="Discount" formControlName="discount" />
+              <span matSuffix>%</span>
+            </mat-form-field>
+          </div>
+        </div>
       </form>
     </mat-card-content>
     <mat-card-actions>

bookie/src/app/customers/customer-detail/customer-detail.component.ts

@@ -2,6 +2,7 @@ import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angula
 import { AbstractControl, FormArray, FormBuilder, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
+import { round } from 'mathjs';
 
 import { Customer } from '../../core/customer';
 import { ToasterService } from '../../core/toaster.service';
@@ -33,6 +34,7 @@ export class CustomerDetailComponent implements OnInit, AfterViewInit {
       name: '',
       phone: '',
       address: '',
+      discounts: this.fb.array([]),
     });
   }
 
@@ -48,6 +50,16 @@ export class CustomerDetailComponent implements OnInit, AfterViewInit {
     (this.form.get('name') as AbstractControl).setValue(item.name);
     (this.form.get('phone') as AbstractControl).setValue(item.phone);
     (this.form.get('address') as AbstractControl).setValue(item.address);
+    this.form.setControl(
+      'discounts',
+      this.fb.array(
+        item.discounts.map((x) =>
+          this.fb.group({
+            discount: '' + x.discount * 100,
+          }),
+        ),
+      ),
+    );
   }
 
   ngAfterViewInit() {
@@ -100,6 +112,13 @@ export class CustomerDetailComponent implements OnInit, AfterViewInit {
     this.item.name = formModel.name;
     this.item.phone = formModel.phone;
     this.item.address = formModel.address;
+    const array = this.form.get('discounts') as FormArray;
+    this.item.discounts.forEach((item, index) => {
+      item.discount = Math.max(
+        Math.min(round(array.controls[index].value.discount / 100, 5), 100),
+        0,
+      );
+    });
     return this.item;
   }
 }

bookie/src/app/customers/customer-discounts.service.spec.ts

@@ -0,0 +1,18 @@
+import { inject, TestBed } from '@angular/core/testing';
+
+import { CustomerDiscountsService } from './customer-discounts.service';
+
+describe('CustomerDiscountsService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [CustomerDiscountsService],
+    });
+  });
+
+  it('should be created', inject(
+    [CustomerDiscountsService],
+    (service: CustomerDiscountsService) => {
+      expect(service).toBeTruthy();
+    },
+  ));
+});

bookie/src/app/customers/customer-discounts.service.ts

@@ -0,0 +1,37 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs/internal/Observable';
+import { catchError } from 'rxjs/operators';
+
+import { ErrorLoggerService } from '../core/error-logger.service';
+import { DiscountItem } from '../sales/discount/discount-item';
+
+const httpOptions = {
+  headers: new HttpHeaders({ 'Content-Type': 'application/json' }),
+};
+const url = '/api/customer-discounts';
+const serviceName = 'CustomerService';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class CustomerDiscountsService {
+  constructor(private http: HttpClient, private log: ErrorLoggerService) {}
+
+  list(id: string | undefined): Observable<DiscountItem[]> {
+    const getUrl: string = id === undefined ? `${url}` : `${url}/${id}`;
+    return this.http
+      .get<DiscountItem[]>(getUrl)
+      .pipe(catchError(this.log.handleError(serviceName, `get id=${id}`))) as Observable<
+      DiscountItem[]
+    >;
+  }
+
+  listForDiscount(): Observable<{ name: string; discount: number; discountLimit: number }[]> {
+    return this.http
+      .get<{ name: string; discount: number; discountLimit: number }[]>(`${url}/for-discount`)
+      .pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<
+      { name: string; discount: number; discountLimit: number }[]
+    >;
+  }
+}

bookie/src/app/customers/customer-list/customer-list.component.html

@@ -28,6 +28,18 @@
         <mat-cell *matCellDef="let row">{{ row.address }}</mat-cell>
       </ng-container>
 
+      <!-- Discounts Column -->
+      <ng-container matColumnDef="discounts">
+        <mat-header-cell *matHeaderCellDef>Discounts</mat-header-cell>
+        <mat-cell *matCellDef="let row">
+          <ul>
+            <li *ngFor="let discount of row.discounts">
+              {{ discount.name }} - {{ discount.discount | percent: '1.2-2' }}
+            </li>
+          </ul>
+        </mat-cell>
+      </ng-container>
+
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
     </mat-table>

bookie/src/app/customers/customer-list/customer-list.component.ts

@@ -14,7 +14,7 @@ export class CustomerListComponent implements OnInit {
   dataSource: CustomerListDatasource = new CustomerListDatasource([]);
   list: Customer[] = [];
   /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-  displayedColumns = ['name', 'phone', 'address'];
+  displayedColumns = ['name', 'phone', 'address', 'discounts'];
 
   constructor(private route: ActivatedRoute) {}