Added message for no result when searching
[u/erikhf/frm.git] / src / components / search / livesearch.ts
1 import {CORE_DIRECTIVES, Directive, View, EventEmitter, ElementRef} from 'angular2/angular2';
2 import {Http} from 'angular2/http';
3
4 // RxJs
5 import * as Rx from '@reactivex/rxjs/dist/cjs/Rx';
6
7 import {SearchService} from "./SearchService";
8
9 declare var zone: Zone;
10
11 @Directive({
12     selector: 'input[type=text][mou-live-search]',
13     outputs: ['results', 'loading'],
14     providers: [CORE_DIRECTIVES, SearchService]
15 })
16 export class LiveSearch {
17     results:EventEmitter = new EventEmitter();
18     loading:EventEmitter = new EventEmitter();
19     
20
21     constructor(private el:ElementRef, public http:Http, public search:SearchService) {
22
23     }
24
25     onInit() {
26         console.log("starting");
27         (<any>Rx).Observable.fromEvent(this.el.nativeElement, 'keyup')
28             .map(e => e.target.value)
29             .filter(text => text.length > 0)
30             .debounceTime(250)
31             .distinctUntilChanged()
32             .do(zone.bind(() => this.loading.next(true)))
33             .flatMap(query => this.search.search(query))
34             .do(zone.bind(() => this.loading.next(false)))
35             .subscribe(
36                 zone.bind(orgunits => {
37                     //this.filterUnits(orgunits)
38                     this.results.next(orgunits/*this.filterUnits(orgunits)*/);
39                 }),
40                 zone.bind(err => {
41                     console.log(err);
42                     this.results.next(['ERROR, see console']);
43                 }),
44                 () => {
45                     console.log("complete");
46                 }
47             )
48     }
49 }
50