Difference between revisions of "FRM PR"
From mn/ifi/inf5750
(Created page with "== #1 == ===Status=== MERGET ===PQ=== The following changes since commit 1e6ce2f50c69ca191a07aaad996f4deb464880f8: Fixed map (pair programming) (2015-11-12 14:11:13 +01...") |
|||
Line 5: | Line 5: | ||
The following changes since commit 1e6ce2f50c69ca191a07aaad996f4deb464880f8: | 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 ( | + | Erik Haider Forsén (10): |
− | + | [search] experimenting with pipes | |
− | + | semi working live search | |
− | src/components/ | + | 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 | diff --git a/src/components/app.ts b/src/components/app.ts | ||
− | index cb9479e.. | + | index cb9479e..7feefc3 100644 |
--- a/src/components/app.ts | --- a/src/components/app.ts | ||
+++ b/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 {Map} from './map/map'; | ||
import {Search} from "./search/search"; | import {Search} from "./search/search"; | ||
import {Filter} from "./filter/filter"; | import {Filter} from "./filter/filter"; | ||
− | + | @@ -18,4 +18,4 @@ class App { | |
− | + | ||
− | |||
− | |||
− | @@ - | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
-bootstrap(App,[HTTP_PROVIDERS]); | -bootstrap(App,[HTTP_PROVIDERS]); | ||
\ No newline at end of file | \ No newline at end of file | ||
− | +bootstrap(App,[HTTP_PROVIDERS, | + | +bootstrap(App,[HTTP_PROVIDERS, ELEMENT_PROBE_PROVIDERS]); |
− | diff --git a/src/components/ | + | diff --git a/src/components/search/SearchService.ts b/src/components/search/SearchService.ts |
new file mode 100644 | new file mode 100644 | ||
− | index 0000000.. | + | index 0000000..c17203d |
--- /dev/null | --- /dev/null | ||
− | +++ b/src/components/ | + | +++ b/src/components/search/SearchService.ts |
− | @@ -0,0 +1, | + | @@ -0,0 +1,21 @@ |
− | +import {Injectable} from 'angular2/angular2'; | + | +import {provide, Injectable} from 'angular2/angular2'; |
+import {Http} from 'angular2/http'; | +import {Http} from 'angular2/http'; | ||
+ | +import * as Rx from '@reactivex/rxjs/dist/cjs/Rx'; | ||
+ | + | ||
+@Injectable() | +@Injectable() | ||
− | +export class | + | +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(){ |
− | + this. | + | + console.log("starting"); |
− | + . | + | + (<any>Rx).Observable.fromEvent(this.el.nativeElement, 'keyup') |
− | + . | + | + .map(e => e.target.value) |
− | + .subscribe( | + | + .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/ | + | + |
− | index | + | diff --git a/src/components/search/search.html b/src/components/search/search.html |
− | --- a/src/components/ | + | index 373e5cc..2d6495f 100644 |
− | +++ b/src/components/ | + | --- a/src/components/search/search.html |
− | @@ -1, | + | +++ b/src/components/search/search.html |
− | import {Component | + | @@ -1 +1,19 @@ |
− | import { | + | -<div style="width: 500px; height: 50px; background: #ff647c; ">Søkefelt! </div> |
− | +import { | + | \ 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="https://www.brown.edu/sites/default/themes/pawtuxet/img/loader-larger.gif"> | ||
+ | + </section> | ||
+ | + <section> | ||
+ | + <div *ng-for="#orgunit of orgunits" style="padding: 0.5em 0.5em 0.5em 0;"> | ||
+ | + <p>{{orgunit.name}}</p> | ||
+ | + </div> | ||
+ | + </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({ | @Component({ | ||
− | selector: 'mou- | + | selector: 'mou-search', |
− | + | - directives: [CORE_DIRECTIVES], | |
− | + | + directives: [CORE_DIRECTIVES, LiveSearch], | |
− | + | templateUrl: './components/search/search.html' | |
− | |||
}) | }) | ||
− | + | - | |
− | export class | + | - |
− | + | export class Search { | |
− | + | + orgunits: Array<any> = []; | |
− | + | + | + loading: boolean = false; |
− | + | ||
− | + | + constructor(){ | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + constructor( | ||
− | |||
+ } | + } | ||
+ | } | ||
+ | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | + | ||
− | |||
diff --git a/src/index.html b/src/index.html | diff --git a/src/index.html b/src/index.html | ||
− | index c712323.. | + | index c712323..d86b77e 100644 |
--- a/src/index.html | --- a/src/index.html | ||
+++ b/src/index.html | +++ b/src/index.html | ||
− | @@ -3, | + | @@ -3,6 +3,9 @@ |
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
<title>Sample App</title> | <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/systemjs/dist/system.src.js"></script> | ||
<script src="../node_modules/angular2/bundles/angular2.dev.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="../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"> |
Revision as of 16:38, 14 November 2015
#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">