FRM PR

From mn/ifi/inf5750
Revision as of 16:36, 15 November 2015 by Erikhf@uio.no (talk | contribs) (Erikhf@uio.no moved page FRM PQ to FRM PR)

Jump to: navigation, search

#1

Status

MERGET

PR

 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 @@
 - <div style="width: 500px; height: 50px; background: #ff647c; ">Søkefelt! </div>
 \ 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({
     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="../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">

#2

Status

MERGET

PR

The following changes since commit 2cae79a5fb719d73b248913fa7bf502dc47d8bfa:

  [search] Code cleanup (2015-11-14 15:33:39 +0100) 
are available in the git repository at: 
  gitolite@git.uio.no:u/erikhf/frm.git search 
for you to fetch changes up to 42930dd2cd2a8d6ad50eea592ebe888c8db28371: 
  [search] Styling the search input and results (2015-11-15 16:30:21 +0100) 
----------------------------------------------------------------
Erik Haider Forsén (3):
      [search] Make search result clickable
      [search] Moved styles to separate css file
      [search] Styling the search input and results 
 src/components/search/search.css  | 52 +++++++++++++++++++++++++++++++++++++++
 src/components/search/search.html | 20 ++++++++-------
 src/components/search/search.ts   |  8 ++++--
 3 files changed, 69 insertions(+), 11 deletions(-)
 create mode 100644 src/components/search/search.css 
diff --git a/src/components/search/search.css b/src/components/search/search.css
new file mode 100644
index 0000000..2344396
--- /dev/null
+++ b/src/components/search/search.css
@@ -0,0 +1,52 @@
+.search div{
+    position: relative;
+}
+
+.search img{
+    width: 20px;
+    position: absolute;
+}
+
+.search li{
+    padding: 0.5em 0.5em 0.5em 0;
+    float: none;
+}
+
+.search ul {
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: 1000;
+    float: left;
+    min-width: 160px;
+    padding: 5px 0;
+    margin: 4px 0 0;
+    font-size: 14px;
+    text-align: left;
+    list-style: none;
+    background-color: #fff;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #ccc;
+    border: 1px solid rgba(0, 0, 0, .15);
+    border-radius: 4px;
+    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
+}
+
+.results > li > a{
+    display: block;
+    padding: 3px 20px;
+    clear: both;
+    font-weight: 400;
+    line-height: 1.42857143;
+    color: #333;
+    white-space: nowrap
+}
+
+.results > li > a:focus, .results > li > a:hover {
+    color: #262626;
+    text-decoration: none;
+    background-color: #f5f5f5
+}
diff --git a/src/components/search/search.html b/src/components/search/search.html
index 2d6495f..bae546b 100644
--- a/src/components/search/search.html
+++ b/src/components/search/search.html
@@ -1,5 +1,4 @@
-
-    <section class="form-group">
+