perf(uiGrid): use performance feats where possible

This commit changes the majority of the ui-grids to use `flatEntityAccess` and `fastWatch` where possible. This includes all of the registries. It also adds the `ngTouch` module for better behavior on mobile. Closes #1039.
IMA-WorldHealth · Dec 21, 2016 · c2657ab · c2657ab
1 parent 1df5478
commit c2657ab
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 130 deletions.
diff --git a/bower.json b/bower.json
@@ -36,7 +36,8 @@
     "angular-chart.js": "^1.0.1",
     "components-font-awesome": "^4.6.3",
     "angular-ui-select": "^0.17.1",
-    "JsBarcode": "jsbarcode#^3.5.6"
+    "JsBarcode": "jsbarcode#^3.5.6",
+    "angular-touch": "1.5.9"
   },
   "devDependencies": {
     "angular-mocks": "1.5.9"

diff --git a/client/src/js/app.js b/client/src/js/app.js
@@ -6,7 +6,7 @@ var bhima = angular.module('bhima', [
   'ui.grid.selection', 'ui.grid.autoResize', 'ui.grid.resizeColumns',
   'ui.grid.edit', 'ui.grid.grouping', 'ui.grid.treeView', 'ui.grid.cellNav',
   'ui.grid.pagination', 'ui.grid.moveColumns', 'angularMoment', 'ngMessages',
-  'growlNotifications', 'ngAnimate', 'ngSanitize', 'ui.select'
+  'growlNotifications', 'ngAnimate', 'ngSanitize', 'ui.select', 'ngTouch'
 ]);
 
 function bhimaConfig($stateProvider, $urlMatcherFactoryProvider) {

diff --git a/client/src/partials/finance/reports/cash_payment/cash_payment.html b/client/src/partials/finance/reports/cash_payment/cash_payment.html
@@ -51,7 +51,6 @@
       id="payment-registry"
       ui-grid="CPRCtrl.gridOptions"
       style="height : calc(100vh - 102px)"
-      ui-grid-grouping
       ui-grid-auto-resize
       ui-grid-resize-columns>
 

diff --git a/client/src/partials/finance/reports/cash_payment/cash_payment.js b/client/src/partials/finance/reports/cash_payment/cash_payment.js
@@ -37,56 +37,51 @@ function CashPaymentRegistryController(Cash, bhConstants, Notify, Session, Modal
   var regularBackgroundColor = { 'background-color': 'none' };
 
   // grid default options
-  vm.gridOptions.appScopeProvider  = vm;
-  vm.gridOptions.showColumnFooter  = true;
-  vm.gridOptions.enableColumnMenus = false;
-  vm.gridOptions.enableFiltering   = vm.filterEnabled;
-  vm.gridOptions.columnDefs        = [
+  vm.gridOptions = {
+    appScopeProvider : vm,
+    showColumnFooter : true,
+    enableColumnMenus : false,
+    flatEntityAccess : true,
+    fastWatch : true,
+    enableFiltering  : vm.filterEnabled
+  };
+
+  vm.gridOptions.columnDefs = [
     { field : 'reference', displayName : 'TABLE.COLUMNS.REFERENCE',
-      headerCellFilter: 'translate',
-      aggregationType: uiGridConstants.aggregationTypes.count
-    },
-    { field : 'date', displayName : 'TABLE.COLUMNS.DATE',
-      headerCellFilter: 'translate',
-      cellFilter : 'date:"mediumDate"',
+      headerCellFilter: 'translate', aggregationType: uiGridConstants.aggregationTypes.count, aggregationHideLabel : true
+    }, {
+      field : 'date', displayName : 'TABLE.COLUMNS.DATE', headerCellFilter: 'translate', cellFilter : 'date:"mediumDate"',
       customTreeAggregationFinalizerFn: timeAggregation
-    },
-    { field : 'debtor_name', displayName : 'TABLE.COLUMNS.CLIENT',
-      headerCellFilter: 'translate'
-    },
-    { field : 'description', displayName : 'TABLE.COLUMNS.DESCRIPTION',
-      headerCellFilter: 'translate'
-    },
-    { field : 'amount', displayName : 'TABLE.COLUMNS.AMOUNT',
-      headerCellFilter: 'translate',
+    }, {
+      field : 'debtor_name', displayName : 'TABLE.COLUMNS.CLIENT', headerCellFilter: 'translate'
+    }, {
+      field : 'description', displayName : 'TABLE.COLUMNS.DESCRIPTION', headerCellFilter: 'translate'
+    }, {
+      field : 'amount', displayName : 'TABLE.COLUMNS.AMOUNT', headerCellFilter: 'translate',
       cellTemplate: 'partials/finance/reports/cash_payment/templates/amount.grid.html'
-    },
-    { field : 'cashbox_label', displayName : 'TABLE.COLUMNS.CASHBOX',
-      headerCellFilter: 'translate'
-    },
-    { field : 'display_name', displayName : 'TABLE.COLUMNS.USER',
-      headerCellFilter: 'translate'
-    },
-    { field : 'action', displayName : '...',
-      cellTemplate: 'partials/finance/reports/cash_payment/templates/action.grid.html',
-      enableFiltering: false
-    },
-    { field : 'action', displayName : '',
-      cellTemplate: 'partials/finance/reports/cash_payment/templates/cancelCash.action.tmpl.html',
-      enableFiltering: false
-    }  
+    }, {
+      field : 'cashbox_label', displayName : 'TABLE.COLUMNS.CASHBOX', headerCellFilter: 'translate'
+    }, {
+      field : 'display_name', displayName : 'TABLE.COLUMNS.USER', headerCellFilter: 'translate'
+    }, {
+      field : 'action', displayName : '', enableFiltering: false, enableSorting: false,
+      cellTemplate: 'partials/finance/reports/cash_payment/templates/action.grid.html'
+    }, {
+      field : 'action', displayName : '', enableFiltering: false, enableSorting: false,
+      cellTemplate: 'partials/finance/reports/cash_payment/templates/cancelCash.action.tmpl.html'
+    }
   ];
+
   vm.gridOptions.rowTemplate = '/partials/finance/reports/cash_payment/templates/grid.canceled.tmpl.html';
 
   // search
   function search() {
     Modal.openSearchCashPayment()
-    .then(function (filters) {
-      if (!filters) { return; }
-
-      reload(filters);
-    })
-    .catch(Notify.handleError);
+      .then(function (filters) {
+        if (!filters) { return; }
+        reload(filters);
+      })
+      .catch(Notify.handleError);
   }
 
   // on remove one filter
@@ -134,15 +129,15 @@ function CashPaymentRegistryController(Cash, bhConstants, Notify, Session, Modal
   // load cash
   function load(filters) {
     Cash.search(filters)
-    .then(function (rows) {
-      rows.forEach(function (row) {
-        row._backgroundColor =
-          (row.type_id === bhConstants.transactionType.CREDIT_NOTE) ?  reversedBackgroundColor : regularBackgroundColor;
-      });      
-
-      vm.gridOptions.data = rows;
-    })
-    .catch(Notify.handleError);
+      .then(function (rows) {
+        rows.forEach(function (row) {
+          row._backgroundColor =
+            (row.type_id === bhConstants.transactionType.CREDIT_NOTE) ?  reversedBackgroundColor : regularBackgroundColor;
+        });
+
+        vm.gridOptions.data = rows;
+      })
+      .catch(Notify.handleError);
   }
 
  // Function for Cancel Cash cancel all Invoice

diff --git a/client/src/partials/inventory/list/list.js b/client/src/partials/inventory/list/list.js
@@ -40,11 +40,9 @@ function InventoryListController ($translate, Inventory, Notify, uiGridConstants
   vm.buttonPrint = { pdfUrl: '/reports/inventory/items' };
 
   // grid default options
-  vm.gridOptions.appScopeProvider = vm;
-  vm.gridOptions.enableFiltering  = vm.filterEnabled;
-  vm.gridOptions.fastWatch = true;
-  vm.gridOptions.columnDefs  =
-    [{
+
+  var columnDefs  = [
+    {
       field : 'code', displayName : 'FORM.LABELS.CODE', headerCellFilter : 'translate'
     },{
       field : 'consumable', displayName : 'FORM.LABELS.CONSUMABLE', headerCellFilter : 'translate',
@@ -64,11 +62,16 @@ function InventoryListController ($translate, Inventory, Notify, uiGridConstants
       enableFiltering: false,
       enableSorting: false,
       enableColumnMenu: false,
-    }
-  ];
+  }];
 
-  // register API
-  vm.gridOptions.onRegisterApi = onRegisterApi;
+  vm.gridOptions = {
+    appScopeProvider : vm,
+    enableFiltering  : vm.filterEnabled,
+    fastWatch : true,
+    flatEntityAccess : true,
+    columnDefs: columnDefs,
+    onRegisterApi : onRegisterApi
+  };
 
   // API register function
   function onRegisterApi(gridApi) {

diff --git a/client/src/partials/patient_invoice/registry/registry.js b/client/src/partials/patient_invoice/registry/registry.js
@@ -1,5 +1,5 @@
 angular.module('bhima.controllers')
-.controller('InvoiceRegistryController', InvoiceRegistryController);
+  .controller('InvoiceRegistryController', InvoiceRegistryController);
 
 InvoiceRegistryController.$inject = [
   'PatientInvoiceService', 'bhConstants', 'NotifyService',
@@ -32,34 +32,40 @@ function InvoiceRegistryController(Invoices, bhConstants, Notify, Session, util,
   vm.loading = false;
   vm.enterprise = Session.enterprise;
 
+  var columnDefs = [
+    { field : 'reference',
+      displayName : 'TABLE.COLUMNS.REFERENCE',
+      headerCellFilter: 'translate',
+      aggregationType: uiGridConstants.aggregationTypes.count,
+      aggregationHideLabel : true,
+      footerCellClass : 'text-center'
+    },
+    { field : 'date', cellFilter:'date', displayName : 'TABLE.COLUMNS.BILLING_DATE', headerCellFilter : 'translate' },
+    { field : 'patientName', displayName : 'TABLE.COLUMNS.PATIENT', headerCellFilter : 'translate' },
+    { field : 'cost',
+      displayName : 'TABLE.COLUMNS.COST',
+      headerCellFilter : 'translate',
+      cellTemplate: '/partials/patient_invoice/registry/templates/cost.cell.tmpl.html',
+      aggregationType: uiGridConstants.aggregationTypes.sum,
+      aggregationHideLabel : true,
+      footerCellClass : 'text-right',
+      footerCellFilter: 'currency:' + Session.enterprise.currency_id
+    },
+    { field : 'serviceName', displayName : 'TABLE.COLUMNS.SERVICE', headerCellFilter : 'translate'  },
+    { field : 'display_name', displayName : 'TABLE.COLUMNS.BY', headerCellFilter : 'translate' },
+    { name : 'receipt_action', displayName : '', cellTemplate : '/partials/patient_invoice/registry/templates/invoiceReceipt.action.tmpl.html', enableSorting: false },
+    { name : 'credit_action', displayName : '', cellTemplate : '/partials/patient_invoice/registry/templates/creditNote.action.tmpl.html', enableSorting: false }
+  ];
+
   //setting columns names
   vm.uiGridOptions = {
     appScopeProvider : vm,
     showColumnFooter : true,
     enableColumnMenus : false,
-    columnDefs : [
-      { field : 'reference',
-        displayName : 'TABLE.COLUMNS.REFERENCE',
-        headerCellFilter: 'translate',
-        aggregationType: uiGridConstants.aggregationTypes.count
-      },
-      { field : 'date', cellFilter:'date', displayName : 'TABLE.COLUMNS.BILLING_DATE', headerCellFilter : 'translate' },
-      { field : 'patientName', displayName : 'TABLE.COLUMNS.PATIENT', headerCellFilter : 'translate' },
-      { field : 'cost',
-        displayName : 'TABLE.COLUMNS.COST',
-        headerCellFilter : 'translate',
-        cellTemplate: '/partials/patient_invoice/registry/templates/cost.cell.tmpl.html',
-        aggregationType: uiGridConstants.aggregationTypes.sum,
-        aggregationHideLabel : true,
-        footerCellClass : 'text-right',
-        footerCellFilter: 'currency:' + Session.enterprise.currency_id
-      },
-      { field : 'serviceName', displayName : 'TABLE.COLUMNS.SERVICE', headerCellFilter : 'translate'  },
-      { field : 'display_name', displayName : 'TABLE.COLUMNS.BY', headerCellFilter : 'translate' },
-      { name : 'receipt_action', displayName : '', cellTemplate : '/partials/patient_invoice/registry/templates/invoiceReceipt.action.tmpl.html', enableSorting: false },
-      { name : 'credit_action', displayName : '', cellTemplate : '/partials/patient_invoice/registry/templates/creditNote.action.tmpl.html', enableSorting: false }
-    ],
     enableSorting : true,
+    fastWatch: true,
+    flatEntityAccess : true,
+    columnDefs : columnDefs,
     rowTemplate : '/partials/patient_invoice/templates/grid.creditNote.tmpl.html'
   };
 

diff --git a/client/src/partials/patients/registry/registry.js b/client/src/partials/patients/registry/registry.js
@@ -2,37 +2,37 @@ angular.module('bhima.controllers')
   .controller('PatientRegistryController', PatientRegistryController);
 
 PatientRegistryController.$inject = [
-  '$state', 'PatientService', 'NotifyService', 'AppCache', 'util', 'ReceiptModal', 'uiGridConstants'
+  '$state', 'PatientService', 'NotifyService', 'AppCache', 'util', 'ReceiptModal', 'uiGridConstants', '$translate'
 ];
 
 /**
  * Patient Registry Controller
  *
  * This module is responsible for the management of Patient Registry.
  */
-function PatientRegistryController($state, Patients, Notify, AppCache, util, Receipts, uiGridConstants) {
+function PatientRegistryController($state, Patients, Notify, AppCache, util, Receipts, uiGridConstants, $translate) {
   var vm = this;
 
   var cache = AppCache('PatientRegistry');
 
   var patientDetailActionTemplate =
       '<div class="ui-grid-cell-contents"> ' +
         '<a ui-sref="patientRecord.details({patientID : row.entity.uuid})"> ' +
-          '<span class="fa fa-book"></span> {{ "PATIENT_REGISTRY.RECORD" | translate }} ' +
+          '<span class="fa fa-book"></span> {{ ::"PATIENT_REGISTRY.RECORD" | translate }} ' +
         '</a>' +
       '</div>';
 
   var patientEditActionTemplate =
       '<div class="ui-grid-cell-contents"> ' +
         '<a ui-sref="patientEdit({uuid : row.entity.uuid})"> ' +
-          '<span class="fa fa-edit"></span> {{ "TABLE.COLUMNS.EDIT" | translate }} ' +
+          '<span class="fa fa-edit"></span> {{ ::"TABLE.COLUMNS.EDIT" | translate }} ' +
         '</a> ' +
       '</div>';
 
   var patientCardActionTemplate =
       '<div class="ui-grid-cell-contents"> ' +
-        '<a href="" ng-click="grid.appScope.patientCard(row.entity.uuid)"> ' +
-          '<span class="fa fa-user"></span> {{ "PATIENT_REGISTRY.CARD" | translate }} ' +
+        '<a href ng-click="grid.appScope.patientCard(row.entity.uuid)"> ' +
+          '<span class="fa fa-user"></span> {{ ::"PATIENT_REGISTRY.CARD" | translate }} ' +
         '</a>' +
       '</div>';
 
@@ -44,29 +44,33 @@ function PatientRegistryController($state, Patients, Notify, AppCache, util, Rec
   // track if module is making a HTTP request for patients
   vm.loading = false;
 
+  var columnDefs = [
+    { field : 'reference',
+      displayName : 'TABLE.COLUMNS.REFERENCE',
+      aggregationType: uiGridConstants.aggregationTypes.count,
+      aggregationHideLabel : true
+    },
+    { field : 'display_name', displayName : 'TABLE.COLUMNS.NAME', headerCellFilter: 'translate' },
+    { field : 'patientAge', displayName : 'TABLE.COLUMNS.AGE', headerCellFilter: 'translate' },
+    { field : 'sex', displayName : 'TABLE.COLUMNS.GENDER', headerCellFilter: 'translate' },
+    { field : 'hospital_no', displayName : 'TABLE.COLUMNS.HOSPITAL_FILE_NR', headerCellFilter: 'translate'  },
+    { field : 'registration_date', cellFilter:'date', displayName : 'TABLE.COLUMNS.DATE_REGISTERED', headerCellFilter: 'translate' },
+    { field : 'last_visit', cellFilter:'date', displayName : 'TABLE.COLUMNS.LAST_VISIT', headerCellFilter: 'translate' },
+    { field : 'dob', cellFilter:'date', displayName : 'TABLE.COLUMNS.DOB', headerCellFilter: 'translate' },
+    { name : 'actionsCard', displayName : '', cellTemplate : patientCardActionTemplate, enableSorting: false },
+    { name : 'actionsDetail', displayName : '', cellTemplate : patientDetailActionTemplate, enableSorting: false },
+    { name : 'actionsEdit', displayName : '', cellTemplate : patientEditActionTemplate, enableSorting: false }
+  ];
+
   /** TODO manage column : last_transaction */
   vm.uiGridOptions = {
     appScopeProvider : vm,
     showColumnFooter : true,
+    enableSorting : true,
     enableColumnMenus : false,
-    columnDefs : [
-      { field : 'reference',
-        displayName : 'TABLE.COLUMNS.REFERENCE',
-        headerCellFilter: 'translate',
-        aggregationType: uiGridConstants.aggregationTypes.count
-      },
-      { field : 'display_name', displayName : 'TABLE.COLUMNS.NAME', headerCellFilter : 'translate' },
-      { field : 'patientAge', displayName : 'TABLE.COLUMNS.AGE', headerCellFilter : 'translate' },
-      { field : 'sex', displayName : 'TABLE.COLUMNS.GENDER', headerCellFilter : 'translate'  },
-      { field : 'hospital_no', displayName : 'TABLE.COLUMNS.HOSPITAL_FILE_NR', headerCellFilter : 'translate'  },
-      { field : 'registration_date', cellFilter:'date', displayName : 'TABLE.COLUMNS.DATE_REGISTERED', headerCellFilter : 'translate' },
-      { field : 'last_visit', cellFilter:'date', displayName : 'TABLE.COLUMNS.LAST_VISIT', headerCellFilter : 'translate' },
-      { field : 'dob', cellFilter:'date', displayName : 'TABLE.COLUMNS.DOB', headerCellFilter : 'translate' },
-      { name : 'actionsCard', displayName : '', cellTemplate : patientCardActionTemplate },
-      { name : 'actionsDetail', displayName : '', cellTemplate : patientDetailActionTemplate },
-      { name : 'actionsEdit', displayName : '', cellTemplate : patientEditActionTemplate }
-    ],
-    enableSorting : true
+    flatEntityAccess : true,
+    fastWatch: true,
+    columnDefs : columnDefs
   };
 
   // error handler
@@ -153,6 +157,7 @@ function PatientRegistryController($state, Patients, Notify, AppCache, util, Rec
 
   // startup function. Checks for cached filters and loads them.  This behavior could be changed.
   function startup() {
+
     // if filters are directly passed in through params, override cached filters
     if ($state.params.filters) {
       cacheFilters($state.params.filters);

diff --git a/client/src/partials/templates/grid/linkFilePDF.tmpl.html b/client/src/partials/templates/grid/linkFilePDF.tmpl.html
@@ -1,8 +1,8 @@
-<div style="padding: 5px;">
-  <a href=""
-  ng-if="row.entity.uuid"
-  ng-click="grid.appScope.showReceipt(row.entity.uuid)"
-  data-link-receipt="{{ row.entity.uuid }}">
-  <i class="fa fa-file-pdf-o"></i> {{ "TABLE.COLUMNS.RECEIPT" | translate }}
+<div class="ui-grid-cell-contents">
+  <a href
+    ng-if="row.entity.uuid"
+    ng-click="grid.appScope.showReceipt(row.entity.uuid)"
+    data-link-receipt="{{ ::row.entity.uuid }}">
+    <i class="fa fa-file-pdf-o"></i> {{ "TABLE.COLUMNS.RECEIPT" | translate }}
   </a>
 </div>