LP#1775466 Typeahead arrow icons

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

diff --git a/Open-ILS/src/eg2/src/app/share/typeahead/typeahead.component.html b/Open-ILS/src/eg2/src/app/share/typeahead/typeahead.component.html
index ab48238..c47430a 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/typeahead/typeahead.component.html
+++ b/Open-ILS/src/eg2/src/app/share/typeahead/typeahead.component.html
@@ -4,14 +4,19 @@
 {{r.label}}
 </ng-template>
 
-<input type="text" 
-  class="form-control"
-  [placeholder]="placeholder"
-  [(ngModel)]="selected" 
-  [ngbTypeahead]="filter"
-  [resultTemplate]="displayTemplate"
-  [inputFormatter]="formatDisplayString"
-  (click)="click$.next($event.target.value)"
-  (selectItem)="selectorChanged($event)"
-  #instance="ngbTypeahead"
-/>
+<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)"
+    (selectItem)="selectorChanged($event)"
+    #input #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/typeahead/typeahead.component.ts
index 3db99dd..98e9047 100644 (file)
--- a/Open-ILS/src/eg2/src/app/share/typeahead/typeahead.component.ts
+++ b/Open-ILS/src/eg2/src/app/share/typeahead/typeahead.component.ts
@@ -1,4 +1,4 @@
-import {Component, OnInit, Input, Output, ViewChild, EventEmitter} from '@angular/core';
+import {Component, OnInit, Input, Output, ViewChild, EventEmitter, ElementRef} from '@angular/core';
 import {Observable} from 'rxjs/Observable';
 import {map} from 'rxjs/operators/map';
 import {mapTo} from 'rxjs/operators/mapTo';
@@ -18,7 +18,11 @@ export interface TypeaheadEntry {
 
 @Component({
   selector: 'eg-typeahead',
-  templateUrl: './typeahead.component.html'
+  templateUrl: './typeahead.component.html',
+  styles: [`
+    .icons {margin-left:-18px}
+    .material-icons {font-size: 16px;font-weight:bold}
+  `]
 })
 export class TypeaheadComponent implements OnInit {
 
@@ -45,34 +49,41 @@ export class TypeaheadComponent implements OnInit {
         this.entrylist = el;
     }
 
-    // Emitted when the org unit value is changed via the selector.
-    // Does not fire on initialOrg
+    // Emitted when the value is changed via UI.
     @Output() onChange: EventEmitter<TypeaheadEntry>;
 
-    // Useful for massaging the match string prior to comparison
-    // Default version trims leading/trailing spaces
+    // Useful for massaging the match string prior to comparison 
+    // and display.  Default version trims leading/trailing spaces.
     formatDisplayString: (TypeaheadEntry) => string;
 
     constructor(
+      private elm: ElementRef,
       private store: StoreService,
     ) {
         this.entrylist = [];
         this.click$ = new Subject<string>();
         this.onChange = new EventEmitter<TypeaheadEntry>();
+
+        this.formatDisplayString = (result: TypeaheadEntry) => {
+            return result.label.trim();
+        };
     }
 
     ngOnInit() {
-
         if (this.startId) {
             this.selected = this.entrylist.filter(
                 e => e.id === this.startId)[0];
         }
+    }
 
-        this.formatDisplayString = (result: TypeaheadEntry) => {
-            return result.label.trim();
-        };
+    openMe($event) {
+        // Give the input a chance to focus then fire the click
+        // handler to force open the typeahead
+        this.elm.nativeElement.getElementsByTagName('input')[0].focus();
+        setTimeout(() => this.click$.next(''));
     }
 
+
     // Fired by the typeahead to inform us of a change.
     // TODO: this does not fire when the value is cleared :( -- implement
     // change detection on this.selected to look specifically for NULL.
@@ -88,7 +99,8 @@ export class TypeaheadComponent implements OnInit {
             merge(
                 // Inject a specifier indicating the source of the 
                 // action is a user click instead of a text entry.
-                this.click$.pipe(filter(() => !this.instance.isPopupOpen()))
+                this.click$
+                .pipe(filter(() => !this.instance.isPopupOpen()))
                 .pipe(map(nothing => {
                     if (this.clickShowsAll) {
                         return '_CLICK_';
@@ -99,7 +111,6 @@ export class TypeaheadComponent implements OnInit {
             ),
 
             map(term => {
-
                 if (term === '' || term === '_CLICK_') {
                     // Click events display all visible entrylist
                     return this.entrylist;