feat(billingServices): highlight targetted row

This commit implements highlighting on ui-grid rows to draw attention to them. The color and duration can be edited in the bhima-bootstrap.less files. For the moment, it flashes informational blue for 1.5 seconds.
Third-Culture-Software · Sep 28, 2016 · c788c20 · c788c20
1 parent dd543f0
commit c788c20
Show file tree

Hide file tree

Showing 8 changed files with 74 additions and 30 deletions.
diff --git a/client/src/i18n/en.json b/client/src/i18n/en.json
@@ -298,12 +298,12 @@
       "CLOSE_FISCAL_YEAR"    : "Close fiscal year",
       "CLOSED"               : "Closed",
       "CREATED"              : "Created",
-      "CREATE_SUCCESS"       : "Create Successfully",
+      "CREATE_SUCCESS"       : "Successfully created a new record",
       "CURRENT"              : "Current",
       "CLEAR_FILTERS"        : "Clear Filters",
       "CREDIT_NOTE"          : "Credit Note",
       "DANGER_ZONE"          : "Danger Zone",
-      "DELETE_SUCCESS"       : "Delete success",
+      "DELETE_SUCCESS"       : "Successfully deleted a record",
       "DISABLED_CURRENCY"    : "This currency is unusable since there is no account set for it.  Use the Cashbox Management module to set an account for this currency and cashbox.",
       "FINANCIAL_DETAIL"     : "Financial details",
       "FOUND"                : "Found",

diff --git a/client/src/js/app.js b/client/src/js/app.js
@@ -416,6 +416,9 @@ function constantConfig() {
     lengths : {
       maxTextLength : 1000
     },
+    grid : {
+      ROW_HIGHLIGHT_FLAG : '_highlight'
+    },
     transactions : {
       ROW_EDIT_FLAG : '_edit',
       ROW_HIGHLIGHT_FLAG : '_highlight',

diff --git a/client/src/less/bhima-bootstrap.less b/client/src/less/bhima-bootstrap.less
@@ -241,3 +241,14 @@ input[type=number] {-moz-appearance: textfield;}
 .pills span:first {
   margin-left: 0;
 }
+
+/*  flash for newly edited or created rows */
+@keyframes highlight-flash {
+  from { background: @btn-info-bg; }
+  to { background: transparent; }
+}
+
+.ui-grid-row .ui-grid-cell.row-highlight {
+  animation-name: highlight-flash;
+  animation-duration: 1.5s;
+}
diff --git a/client/src/partials/billing_services/billing_services.routes.js b/client/src/partials/billing_services/billing_services.routes.js
@@ -18,10 +18,10 @@ angular.module('bhima.routes')
       })
       .state('billingServices.create', {
         url: '/create',
-        onEnter : ['$state', '$uibModal', onEnterFactory('create')]
+        onEnter : ['$state', '$uibModal', 'NotifyService', onEnterFactory('create')]
       })
       .state('billingServices.list', {
-        url : '/:id',
+        url : '/{id:int}',
         params : {
           id : { squash : true, value : null },
           created : false,  // default for transitioning from child states
@@ -30,7 +30,7 @@ angular.module('bhima.routes')
       })
       .state('billingServices.update', {
         url: '/{id:int}/update',
-        onEnter : ['$state', '$uibModal', onEnterFactory('update')]
+        onEnter : ['$state', '$uibModal', 'NotifyService', onEnterFactory('update')]
       })
       .state('billingServices.delete', {
         url: '/{id:int}/delete',
@@ -42,6 +42,7 @@ angular.module('bhima.routes')
             templateUrl : '/partials/templates/modals/confirm.modal.html'
           }).result
             .then(function () {
+              Notify.success('FORM.INFO.DELETE_SUCCES');
 
               // go to the parent state (with refresh)
               $state.go('^.list', { id: null }, { reload : true });
@@ -71,12 +72,18 @@ function onEnterFactory(stateType) {
     'BillingServicesCreateController as BillingServicesFormCtrl' :
     'BillingServicesUpdateController as BillingServicesFormCtrl';
 
-  return function onEnter($state, Modal) {
+  var message = isCreateState ?
+    'FORM.INFO.CREATE_SUCCESS' :
+    'FORM.INFO.UPDATE_SUCCESS';
+
+
+  return function onEnter($state, Modal, Notify) {
       Modal.open({
         templateUrl : 'partials/billing_services/modal.html',
         controller : ctrl,
       }).result
         .then(function (id) {
+          Notify.success(message);
 
           var params = isCreateState ?
             { id : id, created : true } :
@@ -85,7 +92,12 @@ function onEnterFactory(stateType) {
           // go to the parent state (with refresh)
           $state.go('^.list', params, { reload : true });
         })
-        .catch(function () {
+        .catch(function (error) {
+
+          if (error) {
+            Notify.handleError(error);
+          }
+
           $state.go('^.list', { id : $state.params.id }, { notify: false });
         });
   };

diff --git a/client/src/partials/billing_services/index.js b/client/src/partials/billing_services/index.js
@@ -2,7 +2,7 @@ angular.module('bhima.controllers')
 .controller('BillingServicesController', BillingServicesController);
 
 BillingServicesController.$inject = [
-  '$state', 'BillingServicesService', 'AccountService', 'NotifyService'
+  '$state', 'BillingServicesService', 'AccountService', 'NotifyService', 'bhConstants', '$timeout'
 ];
 
 /**
@@ -11,18 +11,21 @@ BillingServicesController.$inject = [
  * This is the default controller for the billing services URL endpoint.  It
  * downloads and displays all billing services in the application via a ui-grid.
  */
-function BillingServicesController($state, BillingServices, Accounts, Notify) {
+function BillingServicesController($state, BillingServices, Accounts, Notify, bhConstants, $timeout) {
   var vm = this;
 
   var actionsTemplate =
     'partials/billing_services/templates/actions.link.html';
 
+  vm.ROW_HIGHLIGHT_FLAG = bhConstants.grid.ROW_HIGHLIGHT_FLAG;
+
   // these options are for the ui-grid
   vm.options = {
     appScopeProvider: vm,
     enableSorting : true,
     enableColumnMenus: false,
     onRegisterApi: registerGridApi,
+    rowTemplate: '/partials/templates/grid/highlight.row.html',
     columnDefs : [{
       field : 'id',
       displayName : 'TABLE.COLUMNS.ID',
@@ -72,15 +75,19 @@ function BillingServicesController($state, BillingServices, Accounts, Notify) {
 
   /**
    * scrolls to a particular row in the view
+   * Also highlights the row to draw attention to itself
    */
   function scrollToId(id) {
+    var rows = vm.api.grid.rows;
 
     // find the matching row in the data
     var target;
-    vm.options.data.forEach(function (row) {
-      if (row.id === id) { target = row; }
+    rows.forEach(function (row) {
+      if (row.entity.id === id) { target = row; }
     });
 
+    target[vm.ROW_HIGHLIGHT_FLAG] = true;
+
     // scroll to the given row into view
     vm.api.core.scrollTo(target, vm.options.columnDefs[0]);
   }
@@ -105,7 +112,7 @@ function BillingServicesController($state, BillingServices, Accounts, Notify) {
 
         // scroll to the indicated id in the grid an id was passed in
         if ($state.params.id) {
-          scrollToId($state.params.id);
+          $timeout(function () { scrollToId($state.params.id); });
         }
       })
       .catch(Notify.handleError)

diff --git a/client/src/partials/templates/grid/highlight.row.html b/client/src/partials/templates/grid/highlight.row.html
@@ -0,0 +1,9 @@
+<div
+  ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name"
+  class="ui-grid-cell"
+  ng-class="{
+    'ui-grid-row-header-cell': col.isRowHeader,
+    'row-highlight': row[grid.appScope.ROW_HIGHLIGHT_FLAG]
+  }"
+  ui-grid-cell>
+</div>
diff --git a/test/end-to-end/billingServices/billingServices.spec.js b/test/end-to-end/billingServices/billingServices.spec.js
@@ -6,14 +6,14 @@ const expect = chai.expect;
 const helpers = require('../shared/helpers');
 helpers.configure(chai);
 
-const GU = require('../shared/gridTestUtils.spec.js');
+const GU = require('../shared/GridUtils');
 const FU = require('../shared/FormUtils');
 const components = require('../shared/components');
 
 describe('Billing Services', function () {
   'use strict';
 
-  const path = '#/admin/billing_services';
+  const path = '#/billing_services';
   const gridId = 'BillingServicesGrid';
 
   before(() => helpers.navigate(path));
@@ -33,18 +33,14 @@ describe('Billing Services', function () {
 
     FU.buttons.submit();
 
-    // check that the grid as exactly one record
-    var grid = GU.getGrid(gridId);
-
-    var rows = grid.element(by.css('.ui-grid-render-container-body'))
-      .all(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index'));
-
-    expect(rows.count()).to.eventually.equal(3);
+    components.notification.hasSuccess();
+    GU.expectRowCount(gridId, 3);
   });
 
   it('can update a billing service', function () {
+
     // get the cell with the update button and click it
-    var cell = GU.dataCell(gridId, 0, 6);
+    var cell = GU.getCell(gridId, 0, 6);
     cell.element(by.css('[data-method="update"]')).click();
 
     // expect to find the update form has loaded
@@ -55,11 +51,13 @@ describe('Billing Services', function () {
 
     // submit the form
     FU.buttons.submit();
+    components.notification.hasSuccess();
   });
 
   it('can delete a billing service', function () {
+
     // get the cell with the delete button and click it
-    var cell = GU.dataCell(gridId, 0, 7);
+    var cell = GU.getCell(gridId, 0, 6);
     cell.element(by.css('[data-method="delete"]')).click();
 
     // expect the modal to appear
@@ -68,12 +66,7 @@ describe('Billing Services', function () {
     //Confirm the action by a click on the buttom confirm
     components.modalAction.confirm();
 
-    // check that the grid does not have any rows in it anymore
-    var grid = GU.getGrid(gridId);
-
-    var rows = grid.element(by.css('.ui-grid-render-container-body'))
-      .all(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index'));
-
-    expect(rows.count()).to.eventually.equal(2);
+    components.notification.hasSuccess();
+    GU.expectRowCount(gridId, 2);
   });
 });
diff --git a/test/end-to-end/shared/GridUtils.js b/test/end-to-end/shared/GridUtils.js
@@ -25,6 +25,14 @@ function getRows(gridId) {
     .all(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index'));
 }
 
+function getCell(gridId, row, col) {
+  return getGrid(gridId)
+    .element(by.css('.ui-grid-render-container-body'))
+    .element(by.repeater('(rowRenderIndex, row) in rowContainer.renderedRows track by $index').row(row))
+    .element(by.repeater('(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name').row(col));
+
+}
+
 function expectRowCount(gridId, number) {
   const rows = getRows(gridId);
   expect(rows.count()).to.eventually.equal(number);
@@ -102,6 +110,7 @@ function selectRow( gridId, rowNum ) {
 exports.getGrid = getGrid;
 exports.getRows = getRows;
 exports.getColumns = getColumns;
+exports.getCell = getCell;
 exports.expectRowCount = expectRowCount;
 exports.expectRowCountAbove = expectRowCountAbove;
 exports.expectColumnCount = expectColumnCount;