LP1903358 Staff catalog holds barcode realtime lookup

Avoid requiring staff to send an Enter event (keyword / scanner) when
entering a patron barcode into the place holds form.  Instead, look the
barcode up after a sufficient amount of time has passed.

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html
index 0e764ff..d76b2df 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.html
@@ -54,8 +54,9 @@
             <input type='text' class="form-control" name="userBarcode"
               [disabled]="holdFor!='patron'" id='patron-barcode'
               aria-label="Patron barcode" i18n-aria-label
-              (keyup.enter)="userBarcodeChanged()"
-              [(ngModel)]="userBarcode" (change)="userBarcodeChanged()"/>
+              (ngModelChange)="debounceUserBarcodeLookup($event)"
+              (paste)="debounceUserBarcodeLookup($event)"
+              [(ngModel)]="userBarcode"/>
             <div class="input-group-append">
               <button class="btn btn-outline-dark" (click)="userBarcodeChanged()">Submit</button>
             </div>

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.ts b/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.ts
index ef10228..2a274cd 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/hold/hold.component.ts
@@ -71,6 +71,7 @@ export class HoldComponent implements OnInit {
 
     currentUserBarcode: string;
     smsCarriers: ComboboxEntry[];
+    userBarcodeTimeout: number;
 
     smsEnabled: boolean;
 
@@ -328,6 +329,22 @@ export class HoldComponent implements OnInit {
         this.activeDateStr = dateStr;
     }
 
+    // Note this is called before this.userBarcode has its latest value.
+    debounceUserBarcodeLookup(barcode: string | ClipboardEvent) {
+        clearTimeout(this.userBarcodeTimeout);
+
+        if (!barcode) {
+            this.badBarcode = null;
+            return;
+        }
+
+        const timeout =
+            (barcode && (barcode as ClipboardEvent).target) ? 0 : 500;
+
+        this.userBarcodeTimeout =
+            setTimeout(() => this.userBarcodeChanged(), timeout);
+    }
+
     userBarcodeChanged() {
         const newBc = this.userBarcode;