Merge pull request #2025 from openhealthcare/163-disable-search-while…

…-searching

163 disable search while searching

changelog.md

@@ -1,5 +1,10 @@
 ### 0.24.0 (Major Release)
 
+#### Disable search button while searching
+
+While waiting for search results the search button and form are now disabled unless 
+the user has changed the search string.
+
 #### Fixes a sporadic failure in create_random_data
 Fixes a bug where in an edge case create_random.data.date_generator would raise "ValueError: empty range for randrange()".
 

opal/core/search/static/js/search/controllers/search.js

@@ -11,6 +11,7 @@ angular.module('opal.controllers').controller(
   $scope.limit = 10;
   $scope.results = [];
   $scope.searched = false;
+  $scope.searching = false;
   $scope.paginator = new Paginator($scope.search);
 
   $scope.getQueryParam = function(){
@@ -38,7 +39,6 @@ angular.module('opal.controllers').controller(
   };
 
   $scope.loadResults = function(){
-    var queryString;
     var urlParams = $location.search();
 
     // this view only allows a couple a couple of search columns
@@ -53,13 +53,15 @@ angular.module('opal.controllers').controller(
         ngProgressLite.set(0);
         ngProgressLite.start();
         var queryParams = $location.search();
+        $scope.searching = true;
         queryBackend(queryParams).then(
             function(response){
                 ngProgressLite.done();
                 $scope.searched = true;
                 $scope.paginator = new Paginator($scope.search, response.data);
             },
             function(){
+                $scope.searching = false;
                 ngProgressLite.done();
             }
         );

opal/core/search/static/js/test/search.controller.test.js

@@ -125,13 +125,47 @@ describe('SearchCtrl', function (){
             });
 
             var expectedUrl = "/search/simple/?query=Bond&page_number=1";
-            $httpBackend.expectGET().respond(500);
+            $httpBackend.expectGET(expectedUrl).respond(500);
             spyOn(ngProgressLite, 'done');
             $scope.loadResults();
             $httpBackend.flush();
             expect(ngProgressLite.done).toHaveBeenCalledWith();
         });
 
+        it('loadResults() should set and reset the searching variable', function(){
+            location.search({
+                query: "Bond",
+                page_number: 1
+            });
+
+            var expectedUrl = "/search/simple/?query=Bond&page_number=1";
+            $httpBackend.expectGET(expectedUrl).respond({
+                page_number: 1,
+                object_list: [],
+                total_pages: 1
+            });
+            expect($scope.searching).toBe(false);
+            $scope.loadResults();
+            expect($scope.searching).toBe(true);
+            $httpBackend.flush();
+            expect($scope.searching).toBe(true);
+        });
+
+        it('loadResults() should set and reset the searching variable if the server errors', function(){
+            location.search({
+                query: "Bond",
+                page_number: 1
+            });
+
+            var expectedUrl = "/search/simple/?query=Bond&page_number=1";
+            $httpBackend.expectGET(expectedUrl).respond(500);
+            expect($scope.searching).toBe(false);
+            $scope.loadResults();
+            expect($scope.searching).toBe(true);
+            $httpBackend.flush();
+            expect($scope.searching).toBe(false);
+        });
+
         it("should redirect to the search page", function(){
             locationDetails.href = "";
             locationDetails.pathname = "/somewhere";

opal/core/search/templates/search.html

@@ -10,14 +10,16 @@ <h2>
       </h2>
     </div>
     <div class="panel-body">
-      <form ng-submit="search()" class="form form-horizontal">
+      <form ng-submit="!searching && search()" class="form form-horizontal">
         <div class="row content-offset">
             <div class="col-sm-4 col-sm-push-4">
               <input type="text" autofocus
                      name="name"
                      slash-key-focus="!state || state==='normal'"
                      ng-blur="enableShortcuts()"
                      ng-focus="disableShortcuts()"
+                     {# Reenables the search button/form after the input box is changed #}
+                     ng-change="searching=false"
                      placeholder="Name or Hospital Number"
                      ng-model="query.searchTerm"
                      class="form-control"
@@ -33,7 +35,7 @@ <h2>
         </div>
         <div class="row">
             <div class="col-sm-4 col-sm-push-4 text-center">
-                <a ng-click="search()" class="btn btn-lg btn-primary content-offset-25">
+                <a ng-disabled="searching" ng-click="search()" class="btn btn-lg btn-primary content-offset-25">
                     <i class="glyphicon glyphicon-search"></i>
                     {% trans "Search" %}
                 </a>