Choose / Edit / Create customers during billing.

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

@@ -1,3 +1,23 @@
 .example-card {
   max-width: 400px;
 }
+/*.discounts > div:nth-child(even) .mat-form-field {*/
+/*  margin-left: 8px;*/
+/*}*/
+
+/*.discounts > div:nth-child(odd) .mat-form-field {*/
+/*  margin-right: 8px;*/
+/*}*/
+
+.discounts > div:nth-child(3n + 1) .mat-form-field {
+  margin-right: 4px;
+}
+
+.discounts > div:nth-child(3n + 2) .mat-form-field {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+
+.discounts > div:nth-child(3n) .mat-form-field {
+  margin-left: 4px;
+}

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

@@ -50,18 +50,16 @@
         >
           <mat-checkbox formControlName="printInBill">Print in Bill?</mat-checkbox>
         </div>
-
-        <mat-divider></mat-divider>
-        <div formArrayName="discounts">
+        <p></p>
+        <div formArrayName="discounts" fxLayout="row wrap" class="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"
+            fxFlex="33%"
           >
             <mat-form-field fxFlex>
               <mat-label>Discount on {{ r.name }}</mat-label>

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

@@ -1,4 +1,4 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { catchError } from 'rxjs/operators';
@@ -55,4 +55,13 @@ export class CustomerService {
       .delete<Customer>(`${url}/${id}`, httpOptions)
       .pipe(catchError(this.log.handleError(serviceName, 'delete'))) as Observable<Customer>;
   }
+
+  autocomplete(query: string): Observable<Customer[]> {
+    const options = { params: new HttpParams().set('q', query) };
+    return this.http
+      .get<Customer[]>(`${url}/query`, options)
+      .pipe(catchError(this.log.handleError(serviceName, 'autocomplete'))) as Observable<
+      Customer[]
+    >;
+  }
 }