chore(find-patient): HTML improvements

This commit completes the HTML improvements suggested in #69 and starts on the test harness for the find patient directive.
jniles · Feb 18, 2016 · 76894de · 76894de
1 parent ebd1a98
commit 76894de
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 21 deletions.
diff --git a/client/src/js/directives/findpatient.js b/client/src/js/directives/findpatient.js
@@ -2,9 +2,10 @@ angular.module('bhima.directives')
 .component('bhFindPatient', {
   controller: FindPatientComponent,
   templateUrl : 'partials/templates/findpatient.tmpl.html',
-  bindings : {
-    onSearchComplete : '&',
-    type : '@'
+  bindings: {
+    onSearchComplete: '&',  // bind callback
+    type:             '@',  // bind string
+    required:         '<',  // bind the required 
   }
 });
 

diff --git a/client/src/partials/templates/findpatient.tmpl.html b/client/src/partials/templates/findpatient.tmpl.html
@@ -14,7 +14,7 @@
     <div class="input-group" ng-if="$ctrl.showSearchView">
 
       <!-- dropdown button -->
-      <div class="input-group-btn" uib-dropdown>
+      <div class="input-group-btn" uib-dropdown tabindex=-1>
         <button class="btn btn-default" uib-dropdown-toggle data-find-patient-dropdown-toggle tabindex=-1>
           {{ $ctrl.selected.label | translate }} <span class="caret"></span>
         </button>
@@ -36,8 +36,11 @@
         name="idInput"
         type="text"
         class="form-control"
-        placeholder="{{ $ctrl.selected.placeholder | translate }}..."
-        required>
+        placeholder="{{ $ctrl.selected.placeholder | translate }}...",
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        ng-required="$ctrl.required">
 
       <!-- search by Name  -->
       <input ng-model="$ctrl.nameInput"
@@ -52,7 +55,10 @@
         typeahead-loading="$ctrl.loadingPatients"
         typeahead-template-url="/partials/templates/patientListe.tmpl.html"
         typeahead-on-select="$ctrl.selectPatient($item)"
-        required>
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        ng-required="$ctrl.required">
 
       <!-- submit button for search by ID -->
       <!-- use of fixed width that correspond to notification text margin right -->
@@ -126,21 +132,24 @@
 
     <!-- panel heading -->
     <div class="panel-heading">
-      <i class="glyphicon glyphicon-search"></i> {{ "FIND.TITLE" | translate }}
+      <span class="glyphicon glyphicon-search"></span> {{ "FIND.TITLE" | translate }}
 
       <!-- state notification  -->
       <div class="pull-right"
         ng-if="$ctrl.loadStatus!='loaded' && $ctrl.loadStatus!='error'">
-        <span class="text-warning" ng-if="($ctrl.noPatients && $ctrl.nameInput)"><i class="glyphicon glyphicon-alert"></i> {{ "FIND.PATIENT_NOT_FOUND" | translate }}</span>
-        <span class="text-info" ng-if="($ctrl.loadingPatients && $ctrl.nameInput)"><i class="glyphicon glyphicon-hourglass"></i> {{ "FIND.PATIENT_LOADING" | translate }}</span>
+        <span class="text-warning" ng-if="($ctrl.noPatients && $ctrl.nameInput)">
+          <span class="glyphicon glyphicon-alert"></span> {{ "FIND.PATIENT_NOT_FOUND" | translate }}
+        </span>
+        <span class="text-info" ng-if="($ctrl.loadingPatients && $ctrl.nameInput)">
+          <span class="glyphicon glyphicon-hourglass"></span> {{ "FIND.PATIENT_LOADING" | translate }}
+        </span>
       </div>
-      <!-- state notification  -->
     </div>
 
     <!-- panel body -->
     <div class="panel-body">
 
-      <div class="form-group has-feedback "
+      <div class="form-group has-feedback"
         ng-class="{'has-success': $ctrl.loadStatus ==='loaded', 'has-error': $ctrl.loadStatus === 'error'}"
         ng-form="FindPatientForm"
         novalidate>
@@ -151,7 +160,7 @@
           <!-- dropdown button -->
           <!-- use of fixed width that correspond to notification text margin left -->
           <div class="input-group-btn" uib-dropdown>
-            <button style="width:135px;" class="btn btn-default" uib-dropdown-toggle>
+            <button style="width:135px;" class="btn btn-default" uib-dropdown-toggle tabindex=-1>
               {{ $ctrl.selected.label | translate }} <span class="caret"></span>
             </button>
             <ul uib-dropdown-menu>
@@ -170,10 +179,13 @@
             name="idInput"
             type="text"
             class="form-control"
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
             placeholder="{{ $ctrl.selected.placeholder | translate }}"
-            required>
+            ng-required="$ctrl.required">
 
-          <!-- search by Name  -->
+          <!-- search by name  -->
           <input ng-model="$ctrl.nameInput"
             ng-if="$ctrl.selected.key==1"
             ng-keyup="$ctrl.readInput($event)"
@@ -186,12 +198,14 @@
             typeahead-loading="$ctrl.loadingPatients"
             typeahead-template-url="/partials/templates/patientListe.tmpl.html"
             typeahead-on-select="$ctrl.selectPatient($item)"
-            required>
+            autocomplete="off"
+            autocorrect="off"
+            autocapitalize="off"
+            ng-required="$ctrl.required">
 
         </div>
         <!-- /input zone -->
 
-
         <!-- notification zone  -->
         <!-- HACK: The notification position must correspond to dropdown button width  -->
         <div class="pull-left help-block" style="margin-left:135px; margin-top:10px;"
@@ -206,7 +220,7 @@
 
           <!-- patient not found notification -->
           <span ng-if="$ctrl.loadStatus=='error'">
-            <i class="glyphicon glyphicon-alert"></i> {{ 'FIND.PATIENT_NOT_FOUND' | translate }}
+            <span class="glyphicon glyphicon-alert"></span> {{ 'FIND.PATIENT_NOT_FOUND' | translate }}
           </span>
 
         </div>
@@ -223,10 +237,7 @@
         <!-- /submit button -->
 
       </div>
-
     </div>
-
   </div>
   <!-- /Panel Find Patient Directive UI  -->
-
 </div>
diff --git a/client/test/e2e/shared/components.js b/client/test/e2e/shared/components.js
@@ -149,3 +149,26 @@ exports.currencyInput = {
     return elm.getAttribute('ng-invalid');
   }
 };
+
+/**
+ * hooks for the find patient component described in the component
+ * bhFindPatient.js.
+ * @public
+ */
+exports.findPatient = {
+  selector : '[data-bh-find-patient]',
+
+  /**
+   * searches for a patient by name
+   */
+  findByName: function findByName(name) {
+    // TODO
+  },
+
+  /**
+   * searches for a patient by id 
+   */
+  findById : function findById(id) {
+    // TODO
+  }
+};