Difference between revisions of "FRM PR"

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 @@

\ 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">