make homepage search work for chu&facilities

Author: ngash

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 The Minisry of Health, Republic of Kenya
+Copyright (c) 2015 The Republic of Kenya, Ministry of Health
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

libs/typeahead.js

@@ -26,12 +26,13 @@
          * @param tokenize_field
          * @param search_url
          * @param limit
+         * @param recreate
          * @returns {*}
          */
-        this.initTT = function (name, tokenize_field, search_url, limit) {
+        this.initTT = function (name, tokenize_field, search_url, limit, recreate) {
             var tt_adapter = tt[name];
             var tt_limit = limit || 10;
-            if (_.isUndefined(tt_adapter)) {
+            if (_.isUndefined(tt_adapter) || recreate) {
                 tt_adapter = new Bloodhound({
                     datumTokenizer: function (d) {
                         return Bloodhound.tokenizers.whitespace(d[tokenize_field]);

src/app/home/controllers.js

@@ -20,15 +20,31 @@
                 $scope.spinner = false;
             });
             $scope.isFocused = false;
+            $scope.chu_mode = false;
+
             $scope.typeaheadFacilities = function () {
+                $scope.chu_mode = false;
+                searchService.destroyTT("facilities");
+                $scope.isFocused = !$scope.isFocused;
+                _.debounce(searchService.typeaheadFacilities("facilities"), 300);
+            };
+
+            $scope.typeaheadCHUs = function () {
+                $scope.chu_mode = true;
+                searchService.destroyTT("facilities");
                 $scope.isFocused = !$scope.isFocused;
-                _.debounce(searchService.typeaheadFacilities("facilities"),
-                300);
+                _.debounce(searchService.typeaheadCHUs("facilities"), 300);
             };
+
             $scope.search = function (query) {
                 $scope.loader = true;
-                $state.go("facility_filter.results", {"search" : query});
+                if ($scope.chu_mode) {
+                    $state.go("chul_filter.results", {"search" : query});
+                } else {
+                    $state.go("facility_filter.results", {"search" : query});
+                }
             };
+
         }
     ]);
 

src/app/home/services.js

@@ -1,4 +1,4 @@
-(function (angular) {
+(function (angular, jQuery) {
 
     "use strict";
 
@@ -20,22 +20,32 @@
     .service("searchService",["SERVER_URL", "mfl.typeahead",
         function (SERVER_URL, typeahead) {
             var facilities_url = "api/facilities/facilities/?fields=name&search=%QUERY";
-            var initFacilities = function () {
-                return typeahead.initTT(
-                    "facilities",
-                    "name",
-                    SERVER_URL+facilities_url,
-                    15
+            var chus_url = "api/chul/units/?fields=name&search=%QUERY";
+
+            var initTT = function (url_stub, fieldclass, recreate) {
+                var f = typeahead.initTT(
+                    "facilities", "name", SERVER_URL+url_stub, 15, recreate
                 );
-            };
-            this.typeaheadFacilities = function (fieldclass) {
-                var f = initFacilities();
                 var name = fieldclass || "facilities";
                 typeahead.typeaheadUI(name, {
                     displayKey: "name",
                     source: f.ttAdapter()
                 });
             };
+
+            this.destroyTT = function (fieldclass) {
+                // yeah...this is criminal
+                return jQuery(fieldclass).typeahead("destroy");
+            };
+
+            this.typeaheadFacilities = function (fieldclass) {
+                initTT(facilities_url, fieldclass, true);
+            };
+
+            this.typeaheadCHUs = function (fieldclass) {
+                initTT(chus_url, fieldclass, true);
+            };
         }
     ]);
-})(window.angular);
+
+})(window.angular, window.jQuery);

src/app/home/tests/controllers.spec.js

@@ -48,7 +48,7 @@
             expect(scope.spinner).toBe(false);
         });
 
-        it("should search facilites on `mfl.home.controllers.home`", function(){
+        it("should launch facility search", function(){
             var scope = rootScope.$new();
             spyOn(state, "go");
             controller("mfl.home.controllers.home", {
@@ -57,9 +57,25 @@
             });
             scope.search("testing");
             expect(scope.loader).toBeTruthy();
+            expect(state.go.calls[0].args[0]).toEqual("facility_filter.results");
+            expect(state.go.calls[0].args[1]).toEqual({"search": "testing"});
         });
 
-        it("should test auto-complete on `mfl.home.controllers.home`", function(){
+        it("should launch CHU search", function(){
+            var scope = rootScope.$new();
+            spyOn(state, "go");
+            controller("mfl.home.controllers.home", {
+                "$scope": scope,
+                "$state": state
+            });
+            scope.chu_mode = true;
+            scope.search("testing");
+            expect(scope.loader).toBeTruthy();
+            expect(state.go.calls[0].args[0]).toEqual("chul_filter.results");
+            expect(state.go.calls[0].args[1]).toEqual({"search": "testing"});
+        });
+
+        it("should test facility typeahead", function(){
             var scope = rootScope.$new();
             spyOn(_, "debounce");
             controller("mfl.home.controllers.home", {
@@ -68,6 +84,16 @@
             scope.typeaheadFacilities();
             expect(_.debounce).toHaveBeenCalled();
         });
+
+        it("should test chu typeahead", function(){
+            var scope = rootScope.$new();
+            spyOn(_, "debounce");
+            controller("mfl.home.controllers.home", {
+                "$scope": scope
+            });
+            scope.typeaheadCHUs();
+            expect(_.debounce).toHaveBeenCalled();
+        });
     });
 
 })(window._);

src/app/home/tpls/main.tpl.html

@@ -1,30 +1,20 @@
 <div class="container-fluid landing-img main-view">
-    <div class="container-fluid bg-overlay">
+    <div class="container-fluid">
         <div class="row margin-h-5">
-            <div class="col-lg-12 margin-b-20">
-                <h2 class="welcome-text text-center hidden-sm hidden-xs">
-                    Welcome to the Kenya Health Master Facility List
-                </h2>
-                <h3 class="welcome-text text-center hidden-lg hidden-md" style="color: #fff;">
-                    Welcome to the Kenya Health Master Facility List
-                </h3>
-            </div>
             <div class="col-lg-8 col-lg-offset-2 search-card text-center margin-t-20" style="border: 1px solid #FFF;">
                 <form role="form" name="search-form" ng-submit="search(search.query)">
                     <div class="col-md-12 input-group">
                         <div class="search-addon-btn input-group-btn">
-                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                              Facilities <i class="fa fa-caret-down"></i>
-                            </button>
+                            <a class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                              {{chu_mode ? 'Community Health Units': 'Facilities'}} <i class="fa fa-caret-down"></i>
+                            </a>
                             <div class="dropdown-menu">
-                              <a class="dropdown-item fw-500" href="#">Facilities</a>
+                              <a class="dropdown-item fw-500" ng-click="typeaheadFacilities()">Facilities</a>
                               <div role="separator" class="dropdown-divider"></div>
-                              <a class="dropdown-item fw-500" href="#">Community Units</a>
+                              <a class="dropdown-item fw-500" ng-click="typeaheadCHUs()">Community Units</a>
                             </div>
                         </div>
-                        <input type="search" class="facilities" ng-model="search.query" placeholder="Search facilities..." ng-focus="typeaheadFacilities()" sync-focus-with="isFocused" autofocus />
-                        <span class="highlight"></span>
-                        <span class="bar"></span>
+                        <input type="search" class="facilities" ng-model="search.query" placeholder="Search by name or code..." sync-focus-with="isFocused" autofocus />
                         <span class="search-addon-btn input-group-addon" id="sizing-addon1" ng-click="search(search.query)">
                             <button type="submit" class="search-btn">
                                 <i class="fa fa-search"></i>
@@ -43,9 +33,6 @@ <h3 class="fw-500 text-black" >
             <span class="pull-left margin-t-10 col-md-6 col-xs-12">
                 About the Master Facility List (MFL)
             </span>
-            <span class="content-right col-md-6 col-xs-12">
-                <img src="assets/img/ehealth_logo.gif" >
-            </span>
         </h3>
         <br>
         <hr class="margin-t-20 margin-b-0" style="border: 1px solid #F0F0F0;">

src/index.html

@@ -156,7 +156,7 @@ <h5 class="fs-16 fw-600 text-white">
                       <p class="text-left margin-t-20">
                       &copy; Copyright 2015,
                         <a href="http://health.go.ke/" target="_blank">
-                          Ministry of Health, Republic of Kenya
+                          Republic of Kenya, Ministry of Health
                         </a>
                         .Powered by
                         <a href="http://savannahinformatics.com/" target="_blank">

src/less/normal_inputs.less

@@ -5,7 +5,7 @@
 }
 input[type=search]{
     font-size:14px;
-    padding:10px 10px 10px 5px;
+    padding:10px 10px 10px 10px;
     background-color: #fff;
     display:block;
     width:90%;
@@ -118,7 +118,7 @@ input:-moz-ui-invalid {
 
 input[type=search] {
     font-size: 18px;
-    padding: 10px 10px 10px 5px;
+    padding: 10px 10px 10px 10px;
     background-color: #fff;
     display: block;
     width: 100%;