fix(vouchers): bug/UX fixes on findReference Modal

This commit fixes usability issues on the findReference modal. 1. Makes the header an `<ol>` headercrumb 2. Uses the `translate` directive 3. Adds a loading indicator to the grid. 4. Makes sure the reference identifier is clearly visible in grid. Closes #1127. Closes 1139.
Third-Culture-Software · Feb 10, 2017 · 063e8d9 · 063e8d9
1 parent c573a48
commit 063e8d9
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 127 deletions.
diff --git a/client/src/js/services/FindReferenceService.js b/client/src/js/services/FindReferenceService.js
@@ -1,5 +1,5 @@
 angular.module('bhima.services')
-.service('FindReferenceService', FindReferenceService);
+  .service('FindReferenceService', FindReferenceService);
 
 FindReferenceService.$inject = ['$uibModal'];
 

diff --git a/client/src/partials/templates/modals/findReference.modal.html b/client/src/partials/templates/modals/findReference.modal.html
@@ -1,40 +1,37 @@
 <div class="modal-header">
-  <h4>
-    <span ng-hide="$ctrl.documentTypeSelected">
-      <span class="glyphicon glyphicon-search"></span>
-      {{ 'VOUCHERS.COMPLEX.REFERENCE' | translate }} /
-      <b class="label label-primary">{{ $ctrl.selectedEntity.label }}</b>
-    </span>
-
-    <span ng-show="$ctrl.documentTypeSelected">
-      <span class="glyphicon glyphicon-search"></span>
-      {{ 'VOUCHERS.COMPLEX.REFERENCE' | translate }} /
-      {{ $ctrl.documentTypeLabel | translate }} /
-      <b class="label label-primary">{{ $ctrl.selectedEntity.label }}</b>
-
-      <div class="pull-right">
-        <span
+  <div class="bhima-title" style="height: 35px;">
+    <ol class="headercrumb">
+      <li ng-class="{ 'static' : $ctrl.documentTypeSelected, 'title' : !$ctrl.documentTypeSelected }" translate>
+        VOUCHERS.COMPLEX.REFERENCE
+      </li>
+      <li class="title" ng-if="$ctrl.documentTypeSelected">
+        <span translate>{{ $ctrl.documentTypeLabel }}</span>
+        <b class="label label-primary" ng-show="$ctrl.selectedEntity">{{ ::$ctrl.selectedEntity.label }}</b>
+      </li>
+    </ol>
+    <div class="toolbar">
+      <div class="toolbar-item">
+        <button type="button"
           ng-click="$ctrl.toggleFilter()"
           class="btn btn-default">
           <span class="fa fa-search"></span>
-        </span>
+        </button>
 
-        <span
+        <button type="button"
           ng-click="$ctrl.refresh()"
           class="btn btn-default">
           <span class="fa fa-refresh"></span>
-        </span>
+        </button>
       </div>
-
-    </span>
-  </h4>
+    </div>
+  </div>
 </div>
 
 <div class="modal-body clearfix">
 
   <!-- select document type  -->
   <div ng-hide="$ctrl.documentTypeSelected">
-    <p class="text-center"><em>{{ 'VOUCHERS.COMPLEX.SELECT_DOCUMENT_TYPE' | translate }}</em></p>
+    <p class="text-center"><em translate>VOUCHERS.COMPLEX.SELECT_DOCUMENT_TYPE</em></p>
 
     <div class="btn-group btn-group-justified">
       <div class="btn-group">
@@ -43,7 +40,7 @@ <h4>
           data-button-patient-invoice
           ng-click="$ctrl.selectDocType('patient_invoice')">
           <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
-          {{ 'VOUCHERS.COMPLEX.PATIENT_INVOICE' | translate }}
+          <span translate>VOUCHERS.COMPLEX.PATIENT_INVOICE</span>
         </button>
       </div>
 
@@ -53,7 +50,7 @@ <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
           ng-click="$ctrl.selectDocType('cash_payment')"
           data-button-cash-payment>
           <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
-          {{ 'VOUCHERS.COMPLEX.CASH_PAYMENT' | translate }}
+          <span translate>VOUCHERS.COMPLEX.CASH_PAYMENT</span>
         </button>
       </div>
 
@@ -63,14 +60,14 @@ <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
           ng-click="$ctrl.selectDocType('voucher')"
           data-button-voucher>
           <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
-          {{ 'VOUCHERS.COMPLEX.VOUCHER' | translate }}
+          <span translate>VOUCHERS.COMPLEX.VOUCHER</span>
         </button>
       </div>
     </div>
   </div>
 
   <!-- select references  -->
-  <div ng-show="$ctrl.documentTypeSelected">
+  <div class="row" ng-show="$ctrl.documentTypeSelected">
     <div class="col-xs-12">
       <div
         id="referenceGrid"
@@ -80,6 +77,11 @@ <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
         ui-grid-resize-columns
         ui-grid-selection>
       </div>
+      <bh-grid-loading-indicator
+        loading-state="$ctrl.loading"
+        empty-state="$ctrl.gridOptions.data.length === 0"
+        error-state="$ctrl.hasError">
+      </bh-grid-loading-indicator>
     </div>
   </div>
 </div>
@@ -90,7 +92,7 @@ <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
     class="btn btn-default"
     ng-click="$ctrl.cancel()"
     data-method="cancel">
-    {{ 'FORM.BUTTONS.CANCEL' | translate }}
+    <span translate>FORM.BUTTONS.CANCEL</span>
   </button>
 
   <button
@@ -99,6 +101,6 @@ <h2 class="glyphicon glyphicon-list-alt"></h2> <br>
     ng-show="$ctrl.documentTypeSelected"
     ng-click="$ctrl.submit()"
     data-method="submit">
-    {{ 'FORM.BUTTONS.SUBMIT' | translate }}
+    <span translate>FORM.BUTTONS.SUBMIT</span>
   </button>
 </div>
diff --git a/client/src/partials/templates/modals/findReference.modal.js b/client/src/partials/templates/modals/findReference.modal.js
@@ -1,10 +1,9 @@
 angular.module('bhima.controllers')
-.controller('FindReferenceModalController', FindReferenceModalController);
+  .controller('FindReferenceModalController', FindReferenceModalController);
 
 FindReferenceModalController.$inject = [
-  '$uibModalInstance', 'DebtorService', 'CreditorService',
-  'VoucherService', 'CashService', 'GridFilteringService', 'entity',
-  'PatientInvoiceService', 'uiGridConstants'
+  '$uibModalInstance', 'VoucherService', 'CashService', 'GridFilteringService',
+  'entity', 'PatientInvoiceService', 'uiGridConstants', 'NotifyService'
 ];
 
 /**
@@ -13,11 +12,13 @@ FindReferenceModalController.$inject = [
  * This controller provides bindings for the find references modal.
  * @todo Implement the Cash Payment Data list for the references
  */
-function FindReferenceModalController(Instance, Debtor, Creditor, Voucher, Cash, Filtering, Entity, Invoices, uiGridConstants) {
+function FindReferenceModalController(Instance, Voucher, Cash, Filtering, Entity, Invoices, uiGridConstants, Notify) {
   var vm = this;
 
   vm.result = {};
 
+  vm.loading = false;
+
   vm.documentType = {
     'patient_invoice' : {
       label : 'VOUCHERS.COMPLEX.PATIENT_INVOICE',
@@ -73,92 +74,104 @@ function FindReferenceModalController(Instance, Debtor, Creditor, Voucher, Cash,
   startup();
 
   function referencePatientInvoice() {
+    toggleLoadingIndicator();
+
     Invoices.read()
-    .then(function (list) {
-      var costTemplate =
-        '<div class="ui-grid-cell-contents text-right">' +
-          '{{ row.entity.cost | currency: grid.appScope.enterprise.currency_id }}' +
-        '</div>';
-
-      vm.gridOptions.columnDefs = [
-        { field : 'reference', displayName : 'TABLE.COLUMNS.REFERENCE', headerCellFilter: 'translate' },
-        {
-          field : 'date',
-          cellFilter:'date',
-          filter : { condition : filtering.byDate },
-          displayName : 'TABLE.COLUMNS.BILLING_DATE',
-          headerCellFilter : 'translate',
-          sort : { priority : 0, direction : 'desc'}
-        },
-        { field : 'patientNames', displayName : 'TABLE.COLUMNS.PATIENT', headerCellFilter : 'translate' },
-        { field : 'cost', displayName : 'TABLE.COLUMNS.COST', headerCellFilter : 'translate', cellTemplate: costTemplate },
-        { field : 'serviceName', displayName : 'TABLE.COLUMNS.SERVICE', headerCellFilter : 'translate'  },
-        { field : 'display_name', displayName : 'TABLE.COLUMNS.BY', headerCellFilter : 'translate' }
-      ];
-
-      vm.gridOptions.data = list;
-    });
+      .then(function (list) {
+        var costTemplate =
+          '<div class="ui-grid-cell-contents text-right">' +
+            '{{ row.entity.cost | currency: grid.appScope.enterprise.currency_id }}' +
+          '</div>';
+
+        vm.gridOptions.columnDefs = [
+          { field : 'reference', displayName : 'TABLE.COLUMNS.REFERENCE', headerCellFilter: 'translate' },
+          {
+            field : 'date',
+            cellFilter:'date',
+            filter : { condition : filtering.byDate },
+            displayName : 'TABLE.COLUMNS.BILLING_DATE',
+            headerCellFilter : 'translate',
+            sort : { priority : 0, direction : 'desc'}
+          },
+          { field : 'patientNames', displayName : 'TABLE.COLUMNS.PATIENT', headerCellFilter : 'translate' },
+          { field : 'cost', displayName : 'TABLE.COLUMNS.COST', headerCellFilter : 'translate', cellTemplate: costTemplate },
+          { field : 'serviceName', displayName : 'TABLE.COLUMNS.SERVICE', headerCellFilter : 'translate'  },
+          { field : 'display_name', displayName : 'TABLE.COLUMNS.BY', headerCellFilter : 'translate' }
+        ];
+
+        vm.gridOptions.data = list;
+      })
+      .catch(handler)
+      .finally(toggleLoadingIndicator);
   }
 
   function referenceCashPayment() {
+    toggleLoadingIndicator();
+
     Cash.read()
-    .then(function (list) {
-      var costTemplate =
-        '<div class="ui-grid-cell-contents text-right">' +
-          '{{ row.entity.amount | currency: grid.appScope.enterprise.currency_id }}' +
-        '</div>';
-
-      vm.gridOptions.columnDefs = [
-        { field : 'reference', displayName : 'TABLE.COLUMNS.REFERENCE', headerCellFilter: 'translate' },
-        {
-          field : 'date',
-          cellFilter:'date',
-          filter : { condition : filtering.byDate },
-          displayName : 'TABLE.COLUMNS.BILLING_DATE',
-          headerCellFilter : 'translate',
-          sort : { priority : 0, direction : 'desc'}
-        },
-        { field : 'description', displayName : 'TABLE.COLUMNS.DESCRIPTION', headerCellFilter : 'translate' },
-        { field : 'amount', displayName : 'TABLE.COLUMNS.COST', headerCellFilter : 'translate', cellTemplate: costTemplate }
-      ];
-
-      vm.gridOptions.data = list;
-    });
+      .then(function (list) {
+        var costTemplate =
+          '<div class="ui-grid-cell-contents text-right">' +
+            '{{ row.entity.amount | currency: grid.appScope.enterprise.currency_id }}' +
+          '</div>';
+
+        vm.gridOptions.columnDefs = [
+          { field : 'reference', displayName : 'TABLE.COLUMNS.REFERENCE', headerCellFilter: 'translate' },
+          {
+            field : 'date',
+            cellFilter:'date',
+            filter : { condition : filtering.byDate },
+            displayName : 'TABLE.COLUMNS.BILLING_DATE',
+            headerCellFilter : 'translate',
+            sort : { priority : 0, direction : 'desc'}
+          },
+          { field : 'description', displayName : 'TABLE.COLUMNS.DESCRIPTION', headerCellFilter : 'translate' },
+          { field : 'amount', displayName : 'TABLE.COLUMNS.COST', headerCellFilter : 'translate', cellTemplate: costTemplate }
+        ];
+
+        vm.gridOptions.data = list;
+      })
+      .catch(handler)
+      .finally(toggleLoadingIndicator);
   }
 
   function referenceVoucher() {
+    toggleLoadingIndicator();
+
     Voucher.read()
-    .then(function (list) {
-      var amountTemplate =
-        '<div class="ui-grid-cell-contents text-right">' +
-          '{{ row.entity.amount | currency: grid.appScope.enterprise.currency_id }}' +
-        '</div>';
-
-      vm.gridOptions.columnDefs  = [
-        { field : 'reference', displayName : 'Reference'},
-        {
-          field : 'date',
-          displayName : 'Date',
-          cellFilter : 'date:"mediumDate"',
-          filter : { condition : filtering.byDate },
-          sort : { priority : 0, direction : 'desc'}
-        },
-        { field : 'description', displayName : 'Description'},
-        { field : 'amount', displayName : 'Amount', cellTemplate: amountTemplate }
-      ];
-
-      // format data for the grid
-      var data = list.map(function (item) {
-        return {
-          uuid          : item.uuid,
-          reference     : item.reference,
-          date          : item.date,
-          description   : item.description,
-          amount        : item.amount
-        };
-      });
-      vm.gridOptions.data = data;
-    });
+      .then(function (list) {
+        var amountTemplate =
+          '<div class="ui-grid-cell-contents text-right">' +
+            '{{ row.entity.amount | currency: grid.appScope.enterprise.currency_id }}' +
+          '</div>';
+
+        vm.gridOptions.columnDefs  = [
+          { field : 'reference', displayName : 'Reference'},
+          {
+            field : 'date',
+            displayName : 'Date',
+            cellFilter : 'date:"mediumDate"',
+            filter : { condition : filtering.byDate },
+            sort : { priority : 0, direction : 'desc'}
+          },
+          { field : 'description', displayName : 'Description'},
+          { field : 'amount', displayName : 'Amount', cellTemplate: amountTemplate }
+        ];
+
+        // format data for the grid
+        var data = list.map(function (item) {
+          return {
+            uuid          : item.uuid,
+            reference     : item.reference,
+            date          : item.date,
+            description   : item.description,
+            amount        : item.amount
+          };
+        });
+        vm.gridOptions.data = data;
+      })
+      .catch(handler)
+      .finally(toggleLoadingIndicator);
   }
 
   function selectDocType(type) {
@@ -181,16 +194,14 @@ function FindReferenceModalController(Instance, Debtor, Creditor, Voucher, Cash,
 
   function startup() {
     vm.selectedEntity = Entity || {};
+  }
 
-    Debtor.read()
-    .then(function (list) {
-      vm.debtorList = list;
-    });
-
-    Creditor.read()
-    .then(function (list) {
-      vm.creditorList = list;
-    });
+  function toggleLoadingIndicator() {
+    vm.loading = !vm.loading;
   }
 
+  function handler(error) {
+    vm.hasError = true;
+    Notify.handleError(error);
+  }
 }
diff --git a/client/src/partials/vouchers/templates/entity.grid.tmpl.html b/client/src/partials/vouchers/templates/entity.grid.tmpl.html
@@ -1,18 +1,18 @@
 <div class="ui-grid-cell-contents"
-  ng-class="{'bg-success': row.entity.entity.type=='D', 'bg-warning': row.entity.entity.type=='C'}">
+  ng-class="{'bg-success': row.entity.entity.type == 'D', 'bg-warning': row.entity.entity.type == 'C'}">
   <a
     class="text-action"
     ng-click="grid.appScope.openEntityModal(row.entity)"
     data-entity-button>
 
     <span
       ng-show="row.entity.entity.uuid"
-      ng-class="{'text-success': row.entity.entity.type=='D', 'text-warning': row.entity.entity.type=='C'}">
+      ng-class="{'text-success': row.entity.entity.type == 'D', 'text-warning': row.entity.entity.type == 'C'}">
       <i class="fa fa-user"></i> {{ row.entity.entity.label }}
     </span>
 
     <span ng-hide="row.entity.entity.uuid">
-      <i class="fa fa-plus"></i> {{ 'FORM.LABELS.ENTITY' | translate }}
+      <i class="fa fa-plus"></i> <span translate>FORM.LABELS.ENTITY</span>
     </span>
   </a>
 </div>