From 75d4dd232559e5c8b5b86619b95e66c5378bec9f Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Mon, 2 Jul 2018 01:16:30 -0400
Subject: [PATCH] LP#1775466 Typeahead is now combobox; entries

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../app/share/combobox/combobox-entry.component.ts | 25 ++++++++++
 .../src/app/share/combobox/combobox.component.html | 23 +++++++++
 .../combobox.component.ts}                         | 54 ++++++++++++++--------
 .../app/share/org-select/org-select.component.ts   |  2 +-
 Open-ILS/src/eg2/src/app/staff/common.module.ts    |  9 ++--
 .../src/app/staff/sandbox/sandbox.component.html   |  2 +-
 6 files changed, 92 insertions(+), 23 deletions(-)
 create mode 100644 Open-ILS/src/eg2/src/app/share/combobox/combobox-entry.component.ts
 create mode 100644 Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
 rename Open-ILS/src/eg2/src/app/share/{typeahead/typeahead.component.ts => combobox/combobox.component.ts} (77%)

diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox-entry.component.ts b/Open-ILS/src/eg2/src/app/share/combobox/combobox-entry.component.ts
new file mode 100644
index 0000000000..1238d8a5fe
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox-entry.component.ts
@@ -0,0 +1,25 @@
+import {Component, Input, Host, OnInit} from '@angular/core';
+import {ComboboxComponent} from './combobox.component';
+
+@Component({
+  selector: 'eg-combobox-entry',
+  template: '<ng-template></ng-template>'
+})
+export class ComboboxEntryComponent implements OnInit{
+
+    @Input() entryId: any;
+    @Input() entryLabel: string;
+    @Input() selected: boolean;
+
+    constructor(@Host() private combobox: ComboboxComponent) {}
+
+    ngOnInit() {
+        if (this.selected) {
+            this.combobox.startId = this.entryId;
+        }
+        this.combobox.addEntries(
+            [{id: this.entryId, label: this.entryLabel}]);
+    }
+}
+
+
diff --git a/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
new file mode 100644
index 0000000000..879a02340c
--- /dev/null
+++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.html
@@ -0,0 +1,23 @@
+
+<!-- todo disabled -->
+<ng-template #displayTemplate let-r="result">
+{{r.label}}
+</ng-template>
+
+<div class="d-flex">
+  <input type="text" 
+    class="form-control"
+    [placeholder]="placeholder"
+    [(ngModel)]="selected" 
+    [ngbTypeahead]="filter"
+    [resultTemplate]="displayTemplate"
+    [inputFormatter]="formatDisplayString"
+    (click)="click$.next($event.target.value)"
+    (blur)="onBlur()"
+    (selectItem)="selectorChanged($event)"
+    #instance="ngbTypeahead"/>
+  <div class="d-flex flex-column icons" (click)="openMe($event)">
+    <span class="material-icons">keyboard_arrow_up</span>
+    <span class="material-icons">keyboard_arrow_down</span>
+  </div>
+</div>
diff --git a/Open-ILS/src/eg2/src/app/share/typeahead/typeahead.component.ts b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
similarity index 77%
rename from Open-ILS/src/eg2/src/app/share/typeahead/typeahead.component.ts
rename to Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
index 1c5afac2c7..d929d62c18 100644
--- a/Open-ILS/src/eg2/src/app/share/typeahead/typeahead.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts
@@ -10,25 +10,25 @@ import {Subject} from 'rxjs/Subject';
 import {NgbTypeahead, NgbTypeaheadSelectItemEvent} from '@ng-bootstrap/ng-bootstrap';
 import {StoreService} from '@eg/core/store.service';
 
-export interface TypeaheadEntry {
+export interface ComboboxEntry {
   id: any;
   label: string;
   freetext?: boolean;
 }
 
 @Component({
-  selector: 'eg-typeahead',
-  templateUrl: './typeahead.component.html',
+  selector: 'eg-combobox',
+  templateUrl: './combobox.component.html',
   styles: [`
     .icons {margin-left:-18px}
     .material-icons {font-size: 16px;font-weight:bold}
   `]
 })
-export class TypeaheadComponent implements OnInit {
+export class ComboboxComponent implements OnInit {
 
-    selected: TypeaheadEntry;
+    selected: ComboboxEntry;
     click$: Subject<string>;
-    entrylist: TypeaheadEntry[];
+    entrylist: ComboboxEntry[];
     freeTextId: number;
 
     @ViewChild('instance') instance: NgbTypeahead;
@@ -44,20 +44,23 @@ export class TypeaheadComponent implements OnInit {
 
     @Input() allowFreeText = false;
 
+    // If true select the first item in the list
+    @Input() selectFirst: boolean;
+
     // Entry ID of the default entry to select (optional)
     // onChange() is NOT fired when applying the default value
     @Input() startId: any;
 
-    @Input() set entries(el: TypeaheadEntry[]) {
-        this.entrylist = el;
+    @Input() set entries(el: ComboboxEntry[]) {
+        this.addEntries(el);
     }
 
     // Emitted when the value is changed via UI.
-    @Output() onChange: EventEmitter<TypeaheadEntry>;
+    @Output() onChange: EventEmitter<ComboboxEntry>;
 
     // Useful for massaging the match string prior to comparison 
     // and display.  Default version trims leading/trailing spaces.
-    formatDisplayString: (TypeaheadEntry) => string;
+    formatDisplayString: (ComboboxEntry) => string;
 
     constructor(
       private elm: ElementRef,
@@ -65,19 +68,15 @@ export class TypeaheadComponent implements OnInit {
     ) {
         this.entrylist = [];
         this.click$ = new Subject<string>();
-        this.onChange = new EventEmitter<TypeaheadEntry>();
+        this.onChange = new EventEmitter<ComboboxEntry>();
         this.freeTextId = -1;
 
-        this.formatDisplayString = (result: TypeaheadEntry) => {
+        this.formatDisplayString = (result: ComboboxEntry) => {
             return result.label.trim();
         };
     }
 
     ngOnInit() {
-        if (this.startId) {
-            this.selected = this.entrylist.filter(
-                e => e.id === this.startId)[0];
-        }
     }
 
     openMe($event) {
@@ -87,13 +86,32 @@ export class TypeaheadComponent implements OnInit {
         setTimeout(() => this.click$.next(''));
     }
 
+    // Called by combobox-entry.component
+    addEntries(entries: ComboboxEntry[]) {
+        entries.forEach(entry => {
+
+            if (this.entrylist.filter(e => e.id === entry.id).length) {
+                // avoid dupes
+                return;
+            }
+
+            this.entrylist.push(entry);
+
+            if (this.startId === entry.id) {
+                this.selected = entry;
+            } else if (this.selectFirst && this.entrylist.length === 1) {
+                this.selected = entry;
+            }
+        });
+    }
+
     onBlur() {
 
         if (typeof this.selected === 'string' && this.selected !== '') {
             // Free text entered which does not match a known entry
 
             if (this.allowFreeText) {
-                // translate it into a dummy TypeaheadEntry
+                // translate it into a dummy ComboboxEntry
                 // and manually fire the onchange handler.
                 this.selected = {
                     id: this.freeTextId--,
@@ -118,7 +136,7 @@ export class TypeaheadComponent implements OnInit {
         this.onChange.emit(selEvent.item.id);
     }
 
-    filter = (text$: Observable<string>): Observable<TypeaheadEntry[]> => {
+    filter = (text$: Observable<string>): Observable<ComboboxEntry[]> => {
         return text$.pipe(
             debounceTime(200),
             distinctUntilChanged(),
diff --git a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts
index 99ea3987b8..83c616da3f 100644
--- a/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/org-select/org-select.component.ts
@@ -1,4 +1,4 @@
-/** TODO PORT ME TO <eg-typeahead> */
+/** TODO PORT ME TO <eg-combobox> */
 import {Component, OnInit, Input, Output, ViewChild, EventEmitter} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {map} from 'rxjs/operators/map';
diff --git a/Open-ILS/src/eg2/src/app/staff/common.module.ts b/Open-ILS/src/eg2/src/app/staff/common.module.ts
index a22b4e0a4e..986a19a56b 100644
--- a/Open-ILS/src/eg2/src/app/staff/common.module.ts
+++ b/Open-ILS/src/eg2/src/app/staff/common.module.ts
@@ -1,7 +1,8 @@
 import {NgModule, ModuleWithProviders} from '@angular/core';
 import {EgCommonModule} from '@eg/common.module';
 import {StaffBannerComponent} from './share/staff-banner.component';
-import {TypeaheadComponent} from '@eg/share/typeahead/typeahead.component';
+import {ComboboxComponent} from '@eg/share/combobox/combobox.component';
+import {ComboboxEntryComponent} from '@eg/share/combobox/combobox-entry.component';
 import {OrgSelectComponent} from '@eg/share/org-select/org-select.component';
 import {AccessKeyDirective} from '@eg/share/accesskey/accesskey.directive';
 import {AccessKeyService} from '@eg/share/accesskey/accesskey.service';
@@ -21,7 +22,8 @@ import {DateSelectComponent} from '@eg/share/date-select/date-select.component';
 @NgModule({
   declarations: [
     StaffBannerComponent,
-    TypeaheadComponent,
+    ComboboxComponent,
+    ComboboxEntryComponent,
     OrgSelectComponent,
     AccessKeyDirective,
     AccessKeyInfoComponent,
@@ -37,7 +39,8 @@ import {DateSelectComponent} from '@eg/share/date-select/date-select.component';
   exports: [
     EgCommonModule,
     StaffBannerComponent,
-    TypeaheadComponent,
+    ComboboxComponent,
+    ComboboxEntryComponent,
     OrgSelectComponent,
     AccessKeyDirective,
     AccessKeyInfoComponent,
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index e560abc897..8f95b19d90 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -39,7 +39,7 @@
    <button class="btn btn-info" (click)="testToast()">Test Toast Message</button>
   </div>
   <div class="col-lg-4">
-    Typeahead: <eg-typeahead [entries]="taEntries" [clickShowsAll]="true"></eg-typeahead>
+    Typeahead: <eg-combobox [entries]="taEntries" [clickShowsAll]="true"></eg-combobox>
   </div>
 </div>
 <!-- /Progress Dialog Experiments ----------------------------- -->
-- 
2.11.0