FRM PR
From mn/ifi/inf5750
Revision as of 16:38, 14 November 2015 by Erikhf@uio.no (talk | contribs)
#1
Status
MERGET
PQ
The following changes since commit 1e6ce2f50c69ca191a07aaad996f4deb464880f8: Fixed map (pair programming) (2015-11-12 14:11:13 +0100)
are available in the git repository at:
gitolite@git.uio.no:u/erikhf/frm.git search
for you to fetch changes up to 2cae79a5fb719d73b248913fa7bf502dc47d8bfa:
[search] Code cleanup (2015-11-14 15:33:39 +0100) ---------------------------------------------------------------- Erik Haider Forsén (10): [search] experimenting with pipes semi working live search No longer needed as we're using the query functionality in the API. Modified to query the api with the search string [search] fixed api query, live/dynamic search is now working (verified on dhis-live platform) [apiService] created a service for getting the API URL Merge branch 'master' into search Revert "[apiService] created a service for getting the API URL" Merge branch 'master' into search [search] Code cleanup
package.json | 1 + src/components/app.ts | 4 +-- src/components/search/SearchService.ts | 21 +++++++++++++++ src/components/search/livesearch.ts | 47 ++++++++++++++++++++++++++++++++++ src/components/search/search.html | 20 ++++++++++++++- src/components/search/search.ts | 13 +++++++--- src/index.html | 5 +++- 7 files changed, 103 insertions(+), 8 deletions(-) create mode 100644 src/components/search/SearchService.ts create mode 100644 src/components/search/livesearch.ts diff --git a/package.json b/package.json index 077cd86..aaef61f 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "author": "", "license": "ISC", "dependencies": { + "@reactivex/rxjs": "^5.0.0-alpha.10", "angular2": "2.0.0-alpha.44", "systemjs": "0.19.2" }, diff --git a/src/components/app.ts b/src/components/app.ts index cb9479e..7feefc3 100644 --- a/src/components/app.ts +++ b/src/components/app.ts @@ -1,5 +1,5 @@ import {HTTP_PROVIDERS} from 'angular2/http'; -import {Component, View, bootstrap, provide} from 'angular2/angular2'; +import {Component, View, bootstrap, provide, ELEMENT_PROBE_PROVIDERS} from 'angular2/angular2'; import {Map} from './map/map'; import {Search} from "./search/search"; import {Filter} from "./filter/filter"; @@ -18,4 +18,4 @@ class App { } -bootstrap(App,[HTTP_PROVIDERS]); \ No newline at end of file +bootstrap(App,[HTTP_PROVIDERS, ELEMENT_PROBE_PROVIDERS]); diff --git a/src/components/search/SearchService.ts b/src/components/search/SearchService.ts new file mode 100644 index 0000000..c17203d --- /dev/null +++ b/src/components/search/SearchService.ts @@ -0,0 +1,21 @@ +import {provide, Injectable} from 'angular2/angular2'; +import {Http} from 'angular2/http'; +import * as Rx from '@reactivex/rxjs/dist/cjs/Rx'; + +@Injectable() +export class SearchService { + + constructor(public http: Http){ + + } + search(query: string): Rx.Observable<any[]>{ + return this.http.get(dhisAPI + "/api/organisationUnits?paging=false&filter=name:like:" + query) + .map(res=>res.json()) + .map(res => res.organisationUnits) + .filter(orgunits => orgunits); + } +} + +export var SEARCH_PROVIDERS: Array<any> = [ + provide(SearchService, {useClass: SearchService}) +]; diff --git a/src/components/search/livesearch.ts b/src/components/search/livesearch.ts new file mode 100644 index 0000000..0158b24 --- /dev/null +++ b/src/components/search/livesearch.ts @@ -0,0 +1,47 @@ +import {Directive, View, EventEmitter, ElementRef} from 'angular2/angular2'; + +// RxJs +import * as Rx from '@reactivex/rxjs/dist/cjs/Rx'; + +import {SearchService} from "./SearchService"; + +declare var zone: Zone; + +@Directive({ + selector: 'input[type=text][mou-live-search]', + outputs: ['results', 'loading'], + providers: [SearchService] +}) +export class LiveSearch { + results: EventEmitter = new EventEmitter(); + loading: EventEmitter = new EventEmitter(); + + constructor( private el: ElementRef, public search: SearchService){ + + } + + onInit(){ + console.log("starting"); + (<any>Rx).Observable.fromEvent(this.el.nativeElement, 'keyup') + .map(e => e.target.value) + .filter(text => text.length > 2) + .debounceTime(250) + .distinctUntilChanged() + .do(zone.bind(() => this.loading.next(true))) + .flatMap(query => this.search.search(query)) + .do(zone.bind(() => this.loading.next(false))) + .subscribe( + zone.bind( orgunits => { + this.results.next(orgunits); + }), + zone.bind(err => { + console.log(err); + this.results.next(['ERROR, see console']); + }), + () => { + console.log("complete"); + } + ) + } +} + diff --git a/src/components/search/search.html b/src/components/search/search.html index 373e5cc..2d6495f 100644 --- a/src/components/search/search.html +++ b/src/components/search/search.html @@ -1 +1,19 @@-
Søkefelt!
\ No newline at end of file + + <section class="form-group"> + <label class="sr-only" for="livesearch">Search</label> + <input + mou-live-search + (results)="orgunits = $event" + (loading)="loading = $event" + type="text" + autofocus + id="livesearch"> + <img style="width: 20px; position: absolute;" + [hidden]="!loading" + src=""> + </section> + <section>+
+ </section> diff --git a/src/components/search/search.ts b/src/components/search/search.ts index f5a52cb..951c866 100644 --- a/src/components/search/search.ts +++ b/src/components/search/search.ts @@ -1,12 +1,17 @@ -import {Component, CORE_DIRECTIVES} from 'angular2/angular2'; +import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'; +import {LiveSearch} from "./livesearch"; @Component({ selector: 'mou-search', - directives: [CORE_DIRECTIVES], + directives: [CORE_DIRECTIVES, LiveSearch], templateUrl: './components/search/search.html' }) - - export class Search { + orgunits: Array<any> = []; + loading: boolean = false; + constructor(){ + } } + + diff --git a/src/index.html b/src/index.html index c712323..d86b77e 100644 --- a/src/index.html +++ b/src/index.html @@ -3,6 +3,9 @@ <head> <meta charset="UTF-8"> <title>Sample App</title> + + <script src="../node_modules/@reactivex/rxjs/dist/global/Rx.js"></script> + <script> var xhReq = new XMLHttpRequest(); xhReq.open("GET", "../manifest.webapp", false); @@ -14,7 +17,7 @@ <script src="../node_modules/systemjs/dist/system.src.js"></script> <script src="../node_modules/angular2/bundles/angular2.dev.js"></script> <script src="../node_modules/angular2/bundles/http.dev.js"></script> - <script src="../node_modules/angular2/bundles/router.dev.js"></script> + <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">