Open-ILS/src/eg2/src/app/share/combobox/combobox.component.ts

   1 /**
   2  * <eg-combobox [allowFreeText]="true" [entries]="comboboxEntryList"/>
   3  *  <!-- see also <eg-combobox-entry> -->
   4  * </eg-combobox>
   5  */
   6 import {Component, OnInit, Input, Output, ViewChild,
   7     TemplateRef, EventEmitter, ElementRef, forwardRef} from '@angular/core';
   8 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
   9 import {Observable, of, Subject} from 'rxjs';
  10 import {map, tap, reduce, mergeMap, mapTo, debounceTime, distinctUntilChanged, merge, filter} from 'rxjs/operators';
  11 import {NgbTypeahead, NgbTypeaheadSelectItemEvent} from '@ng-bootstrap/ng-bootstrap';
  12 import {StoreService} from '@eg/core/store.service';
  13 import {IdlService} from '@eg/core/idl.service';
  14 import {PcrudService} from '@eg/core/pcrud.service';
  15
  16 export interface ComboboxEntry {
  17   id: any;
  18   // If no label is provided, the 'id' value is used.
  19   label?: string;
  20   freetext?: boolean;
  21 }
  22
  23 @Component({
  24   selector: 'eg-combobox',
  25   templateUrl: './combobox.component.html',
  26   styles: [`
  27     .icons {margin-left:-18px}
  28     .material-icons {font-size: 16px;font-weight:bold}
  29   `],
  30   providers: [{
  31     provide: NG_VALUE_ACCESSOR,
  32     useExisting: forwardRef(() => ComboboxComponent),
  33     multi: true
  34   }]
  35 })
  36 export class ComboboxComponent implements ControlValueAccessor, OnInit {
  37
  38     selected: ComboboxEntry;
  39     click$: Subject<string>;
  40     entrylist: ComboboxEntry[];
  41
  42     @ViewChild('instance') instance: NgbTypeahead;
  43
  44     // Applies a name attribute to the input.
  45     // Useful in forms.
  46     @Input() name: string;
  47
  48     // Placeholder text for selector input
  49     @Input() placeholder = '';
  50
  51     @Input() persistKey: string; // TODO
  52
  53     @Input() allowFreeText = false;
  54
  55     // Add a 'required' attribute to the input
  56     isRequired: boolean;
  57     @Input() set required(r: boolean) {
  58         this.isRequired = r;
  59     }
  60
  61     // Disable the input
  62     isDisabled: boolean;
  63     @Input() set disabled(d: boolean) {
  64         this.isDisabled = d;
  65     }
  66
  67     // Entry ID of the default entry to select (optional)
  68     // onChange() is NOT fired when applying the default value,
  69     // unless startIdFiresOnChange is set to true.
  70     @Input() startId: any = null;
  71     @Input() startIdFiresOnChange: boolean;
  72
  73     // Allow the selected entry ID to be passed via the template
  74     // This does NOT not emit onChange events.
  75     @Input() set selectedId(id: any) {
  76         if (id) {
  77             if (this.entrylist.length) {
  78                 this.selected = this.entrylist.filter(e => e.id === id)[0];
  79             }
  80
  81             if (!this.selected) {
  82                 // It's possible the selected ID lives in a set of entries
  83                 // that are yet to be provided.
  84                 this.startId = id;
  85             }
  86         }
  87     }
  88
  89     get selectedId(): any {
  90         return this.selected ? this.selected.id : null;
  91     }
  92
  93     @Input() idlClass: string;
  94     @Input() idlField: string;
  95     @Input() idlIncludeLibraryInLabel: string;
  96     @Input() asyncDataSource: (term: string) => Observable<ComboboxEntry>;
  97
  98     // If true, an async data search is allowed to fetch all
  99     // values when given an empty term. This should be used only
 100     // if the maximum number of entries returned by the data source
 101     // is known to be no more than a couple hundred.
 102     @Input() asyncSupportsEmptyTermClick: boolean;
 103
 104     // Useful for efficiently preventing duplicate async entries
 105     asyncIds: {[idx: string]: boolean};
 106
 107     // True if a default selection has been made.
 108     defaultSelectionApplied: boolean;
 109
 110     @Input() set entries(el: ComboboxEntry[]) {
 111         if (el) {
 112             this.entrylist = el;
 113
 114             // new set of entries essentially means a new instance. reset.
 115             this.defaultSelectionApplied = false;
 116             this.applySelection();
 117
 118             // It's possible to provide an entrylist at load time, but
 119             // fetch all future data via async data source.  Track the
 120             // values we already have so async lookup won't add them again.
 121             // A new entry list wipes out any existing async values.
 122             this.asyncIds = {};
 123             el.forEach(entry => this.asyncIds['' + entry.id] = true);
 124         }
 125     }
 126
 127     // When provided use this as the display template for each entry.
 128     @Input() displayTemplate: TemplateRef<any>;
 129
 130     // Emitted when the value is changed via UI.
 131     // When the UI value is cleared, null is emitted.
 132     @Output() onChange: EventEmitter<ComboboxEntry>;
 133
 134     // Useful for massaging the match string prior to comparison
 135     // and display.  Default version trims leading/trailing spaces.
 136     formatDisplayString: (e: ComboboxEntry) => string;
 137
 138     // Stub functions required by ControlValueAccessor
 139     propagateChange = (_: any) => {};
 140     propagateTouch = () => {};
 141
 142     constructor(
 143       private elm: ElementRef,
 144       private store: StoreService,
 145       private idl: IdlService,
 146       private pcrud: PcrudService,
 147     ) {
 148         this.entrylist = [];
 149         this.asyncIds = {};
 150         this.click$ = new Subject<string>();
 151         this.onChange = new EventEmitter<ComboboxEntry>();
 152         this.defaultSelectionApplied = false;
 153
 154         this.formatDisplayString = (result: ComboboxEntry) => {
 155             const display = result.label || result.id;
 156             return (display + '').trim();
 157         };
 158     }
 159
 160     ngOnInit() {
 161         if (this.idlClass) {
 162             const classDef = this.idl.classes[this.idlClass];
 163             const pkeyField = classDef.pkey;
 164
 165             if (!pkeyField) {
 166                 throw new Error(`IDL class ${this.idlClass} has no pkey field`);
 167             }
 168
 169             if (!this.idlField) {
 170                 this.idlField = classDef.field_map[classDef.pkey].selector || 'name';
 171             }
 172
 173             this.asyncDataSource = term => {
 174                 const field = this.idlField;
 175                 const args = {};
 176                 const extra_args = { order_by : {} };
 177                 args[field] = {'ilike': `%${term}%`}; // could -or search on label
 178                 extra_args['order_by'][this.idlClass] = field;
 179                 if (this.idlIncludeLibraryInLabel) {
 180                     extra_args['flesh'] = 1;
 181                     const flesh_fields: Object = {};
 182                     flesh_fields[this.idlClass] = [ this.idlIncludeLibraryInLabel ];
 183                     extra_args['flesh_fields'] = flesh_fields;
 184                     return this.pcrud.search(this.idlClass, args, extra_args).pipe(map(data => {
 185                         return {
 186                             id: data[pkeyField](),
 187                             label: data[field]() + ' (' + data[this.idlIncludeLibraryInLabel]().shortname() + ')'
 188                         };
 189                     }));
 190                 } else {
 191                     return this.pcrud.search(this.idlClass, args, extra_args).pipe(map(data => {
 192                         return {id: data[pkeyField](), label: data[field]()};
 193                     }));
 194                 }
 195             };
 196         }
 197     }
 198
 199     onClick($event) {
 200         this.click$.next($event.target.value);
 201     }
 202
 203     openMe($event) {
 204         // Give the input a chance to focus then fire the click
 205         // handler to force open the typeahead
 206         this.elm.nativeElement.getElementsByTagName('input')[0].focus();
 207         setTimeout(() => this.click$.next(''));
 208     }
 209
 210     // Apply a default selection where needed
 211     applySelection() {
 212
 213         if (this.startId !== null &&
 214             this.entrylist && !this.defaultSelectionApplied) {
 215
 216             const entry =
 217                 this.entrylist.filter(e => e.id === this.startId)[0];
 218
 219             if (entry) {
 220                 this.selected = entry;
 221                 this.defaultSelectionApplied = true;
 222                 if (this.startIdFiresOnChange) {
 223                     this.selectorChanged(
 224                         {item: this.selected, preventDefault: () => true});
 225                 }
 226             }
 227         }
 228     }
 229
 230     // Called by combobox-entry.component
 231     addEntry(entry: ComboboxEntry) {
 232         this.entrylist.push(entry);
 233         this.applySelection();
 234     }
 235
 236     // Manually set the selected value by ID.
 237     // This does NOT fire the onChange handler.
 238     // DEPRECATED: use this.selectedId = abc or [selectedId]="abc" instead.
 239     applyEntryId(entryId: any) {
 240         this.selected = this.entrylist.filter(e => e.id === entryId)[0];
 241     }
 242
 243     addAsyncEntry(entry: ComboboxEntry) {
 244         // Avoid duplicate async entries
 245         if (!this.asyncIds['' + entry.id]) {
 246             this.asyncIds['' + entry.id] = true;
 247             this.addEntry(entry);
 248         }
 249     }
 250
 251     hasEntry(entryId: any): boolean {
 252         return this.entrylist.filter(e => e.id === entryId)[0] !== undefined;
 253     }
 254
 255     onBlur() {
 256         // When the selected value is a string it means we have either
 257         // no value (user cleared the input) or a free-text value.
 258
 259         if (typeof this.selected === 'string') {
 260
 261             if (this.allowFreeText && this.selected !== '') {
 262                 // Free text entered which does not match a known entry
 263                 // translate it into a dummy ComboboxEntry
 264                 this.selected = {
 265                     id: null,
 266                     label: this.selected,
 267                     freetext: true
 268                 };
 269
 270             } else {
 271
 272                 this.selected = null;
 273             }
 274
 275             // Manually fire the onchange since NgbTypeahead fails
 276             // to fire the onchange when the value is cleared.
 277             this.selectorChanged(
 278                 {item: this.selected, preventDefault: () => true});
 279         }
 280         this.propagateTouch();
 281     }
 282
 283     // Fired by the typeahead to inform us of a change.
 284     selectorChanged(selEvent: NgbTypeaheadSelectItemEvent) {
 285         this.onChange.emit(selEvent.item);
 286         this.propagateChange(selEvent.item);
 287     }
 288
 289     // Adds matching async entries to the entry list
 290     // and propagates the search term for pipelining.
 291     addAsyncEntries(term: string): Observable<string> {
 292
 293         if (!term || !this.asyncDataSource) {
 294             return of(term);
 295         }
 296
 297         let searchTerm: string;
 298         searchTerm = term;
 299         if (searchTerm === '_CLICK_' && this.asyncSupportsEmptyTermClick) {
 300             searchTerm = '';
 301         }
 302
 303         return new Observable(observer => {
 304             this.asyncDataSource(searchTerm).subscribe(
 305                 (entry: ComboboxEntry) => this.addAsyncEntry(entry),
 306                 err => {},
 307                 ()  => {
 308                     observer.next(searchTerm);
 309                     observer.complete();
 310                 }
 311             );
 312         });
 313     }
 314
 315     filter = (text$: Observable<string>): Observable<ComboboxEntry[]> => {
 316         return text$.pipe(
 317             debounceTime(200),
 318             distinctUntilChanged(),
 319
 320             // Merge click actions in with the stream of text entry
 321             merge(
 322                 // Inject a specifier indicating the source of the
 323                 // action is a user click instead of a text entry.
 324                 // This tells the filter to show all values in sync mode.
 325                 this.click$.pipe(filter(() =>
 326                     !this.instance.isPopupOpen()
 327                 )).pipe(mapTo('_CLICK_'))
 328             ),
 329
 330             // mergeMap coalesces an observable into our stream.
 331             mergeMap(term => this.addAsyncEntries(term)),
 332             map((term: string) => {
 333
 334                 if (term === '' || term === '_CLICK_') {
 335                     if (!this.asyncDataSource) {
 336                         // In sync mode, a post-focus empty search or
 337                         // click event displays the whole list.
 338                         return this.entrylist;
 339                     }
 340                 }
 341
 342                 // Filter entrylist whose labels substring-match the
 343                 // text entered.
 344                 return this.entrylist.filter(entry => {
 345                     const label = entry.label || entry.id;
 346                     return label.toLowerCase().indexOf(term.toLowerCase()) > -1;
 347                 });
 348             })
 349         );
 350     }
 351
 352     writeValue(value: ComboboxEntry) {
 353         if (value !== undefined && value !== null) {
 354             this.startId = value.id;
 355             this.applySelection();
 356         }
 357     }
 358
 359     registerOnChange(fn) {
 360         this.propagateChange = fn;
 361     }
 362
 363     registerOnTouched(fn) {
 364         this.propagateTouch = fn;
 365     }
 366
 367 }
 368
 369