feat(journal): allow grid editing on journal

This commit implements editing on a transaction level.  The workflow is
like this:

 1. The user clicks the _edit_ button in the action column of the grid.
 This puts the transaction (and all internal rows) in _editing mode.
 2. The user is then able to navigate using the cellNav plugin to edit
 consecutive cells.
 3. When the user is finished, they are able to turn editing off via
 the 'Save' button in the top right corner of the transaction header.

There are still the following TODOs:
 1. Disallow cellNav on certain columns (action column).
 2. Automatically focus the first editable column in the transaction
 when the "Edit" button is clicked.
 3. Make transaction constants for the following states:
  1. Edit
  2. Highlight
  3. Invalid

client/src/js/app.js

@@ -3,7 +3,7 @@ var bhima = angular.module('bhima', [
   'bhima.components', 'bhima.routes', 'ui.bootstrap', 'pascalprecht.translate',
   'ngStorage', 'chart.js', 'tmh.dynamicLocale', 'ngFileUpload', 'ui.grid',
   'ui.grid.selection', 'ui.grid.autoResize', 'ui.grid.resizeColumns',
-  'ui.grid.edit', 'ui.grid.grouping', 'ui.grid.treeView',
+  'ui.grid.edit', 'ui.grid.grouping', 'ui.grid.treeView', 'ui.grid.cellNav',
   'ui.grid.pagination', 'ui.grid.moveColumns', 'angularMoment', 'ngMessages',
   'growlNotifications', 'ngAnimate', 'ngSanitize'
 ]);

client/src/js/services/grid/GridEditors.js

@@ -17,17 +17,16 @@ function GridEditorService(util) {
       this.api = api;
 
       this.api.edit.on.beginCellEdit(null, function beginCellEdit(row, column) {
-        console.log('[external] beginCellEdit');
-        this.requestUserAuthentication();
+        // noop()
       }.bind(this));
 
       // notify that edits have been canceled
       this.api.edit.on.cancelCellEdit(null, function cancelCellEdit(row, column) {
-        console.log('[external] cancelCellEdit');
+        // noop()
       });
 
       this.api.edit.on.afterCellEdit(null, function afterCellEdit(row, column) {
-        console.log('[external] afterCellEdit');
+        // noop()
       });
 
     }.bind(this));
@@ -42,15 +41,6 @@ function GridEditorService(util) {
    * user's edit session.  It is currently unimplemented.
    */
   GridEditors.prototype.requestUserAuthentication = function requestUserAuthentication() {
-
-    // pretend we got authentication
-    //this.authenticated = true;
-
-    // if we are not authenticated, cancel the edit
-    if (!this.authenticated) {
-      this.api.edit.raise.cancelCellEdit();
-    }
-
     // noop()
   };
 

client/src/js/services/grid/TransactionService.js

@@ -9,6 +9,12 @@ TransactionService.$inject = ['util', 'uiGridConstants'];
  * This service is responsible for fetching transactions from a datasource
  * and providing a number of utility methods for manipulating and framing this
  * information.
+ *
+ * NOTE: this requires that both cellNav and edit features are enabled on the
+ * ui-grid.
+ *
+ * @requires util
+ * @requires uiGridConstants
  */
 function TransactionService(util, uiGridConstants) {
 
@@ -21,7 +27,13 @@ function TransactionService(util, uiGridConstants) {
    * @function indexBy
    *
    * @description
-   * This function maps transaction row indexes to transaction record_uuids.
+   * Maps an array of objects to an object keyed by the particular property
+   * provided, mapping to indices in the array.  It's somewhat tied to ui-grid's
+   * implementation of rows entities.
+   *
+   * @param {Array} array - the array to index
+   * @param {String} property - the key to index the array's contents by.
+   * @returns {Object} - an object of value -> array indices
    *
    * @private
    */
@@ -39,6 +51,19 @@ function TransactionService(util, uiGridConstants) {
     }, {});
   }
 
+  /**
+   * @function cellEditableCondition
+   *
+   * @description
+   * Only allows rows to be edited if they have been marked by the _editing flag.
+   * This should be bound to the cellEditableCondition of gridOptions.
+   *
+   * @private
+   */
+  function cellEditableCondition($scope) {
+    return $scope.row._editing;
+  }
+
   /**
    * @constructor
    */
@@ -53,6 +78,9 @@ function TransactionService(util, uiGridConstants) {
     this._highlights = [];
     this._edits = [];
 
+    gridOptions.cellEditableCondition = cellEditableCondition;
+    gridOptions.enableCellEditOnFocus = true;
+
     util.after(gridOptions, 'onRegisterApi', function onRegisterApi(api) {
       this.gridApi = api;
 
@@ -114,7 +142,6 @@ function TransactionService(util, uiGridConstants) {
     var rows = this.getTransactionRows(uuid);
 
     // @TODO - custom logic to validate that debits/credits balance, etc
-
     return true;
   };
 
@@ -185,8 +212,15 @@ function TransactionService(util, uiGridConstants) {
 
     // set highlight on the provided transaction
     setPropertyOnTransaction.call(this, uuid, '_hasHighlight', true);
+    this._highlights.push(uuid);
   };
 
+  /**
+   * @method scrollIntoView
+   *
+   * @description
+   * Scrolls a transaction group into view by ensuring the last row is visible.
+   */
   Transactions.prototype.scrollIntoView = function scrollIntoView(uuid) {
     var rows = this.getTransactionRows(uuid);
     var lastRowInView = rows[rows.length - 1];
@@ -215,6 +249,8 @@ function TransactionService(util, uiGridConstants) {
    */
   Transactions.prototype.edit = function edit(uuid) {
 
+    var api = this.gridApi;
+
     // if a row is passed in, resolve the row to the child record_uuid
     if (angular.isObject(uuid)) {
       uuid = getChildRecordUuid(uuid);

client/src/js/services/util.js

@@ -1,15 +1,17 @@
 angular.module('bhima.services')
 .service('util', UtilService);
 
-UtilService.$inject = ['$filter', 'moment' ];
+UtilService.$inject = ['moment' ];
 
 /**
  * @class util
  *
  * @description
  * Common utilities for the application
+ *
+ * @requires moment
  */
-function UtilService($filter, moment) {
+function UtilService(moment) {
   var service = this;
 
   service.unwrapHttpResponse = function unwrapHttpResponse(response) {

client/src/less/bhima-bootstrap.less

@@ -170,6 +170,12 @@ input[type=number] {-moz-appearance: textfield;}
   color: @btn-primary-color;
 }
 
+.transaction-edit-header  a {
+  color: @btn-primary-color;
+}
+
+/* highlight */
+
 .ui-grid-row .ui-grid-cell.transaction-highlight {
   border-color: @state-warning-border;
 }
@@ -179,3 +185,19 @@ input[type=number] {-moz-appearance: textfield;}
   border-color: @state-warning-border;
   color: @state-warning-text;
 }
+
+.ui-grid-row .ui-grid-cell.transaction-invalid {
+  background-color: @state-danger-bg;
+  border-color: @btn-danger-border;
+  color: @state-danger-text;
+}
+
+.ui-grid-row .ui-grid-cell.transaction-invalid.transaction-invalid-header  {
+  background-color: @btn-danger-bg;
+  border-color: @btn-danger-border;
+  color: @btn-danger-color;
+}
+
+.transaction-invalid-header  a {
+  color: @btn-danger-color;
+}

client/src/partials/journal/journal.html

@@ -6,9 +6,16 @@
         {{ "POSTING_JOURNAL.TITLE" | translate }}
 
         <span class="badge badge-primary text-uppercase" ng-show="JournalCtrl.transactions.isEditing()">
-          <i class="fa fa-moon-o"></i>
+          <i class="fa fa-street-view"></i>
           Edit Mode
         </span>
+
+        <span class="badge badge-warning text-uppercase" ng-show="JournalCtrl.transactions._highlights.length > 0">
+          {{ JournalCtrl.transactions._highlights.length }}
+          <span ng-if="JournalCtrl.transactions._highlights.length == 1">Highlight</span>
+          <span ng-if="JournalCtrl.transactions._highlights.length > 1">Highlights</span>
+        </span>
+
       </li>
     </ol>
 
@@ -38,6 +45,7 @@
           ui-grid-resize-columns
           ui-grid-move-columns
           ui-grid-selection
+          ui-grid-cellNav
           ui-grid-edit
           ui-grid-grouping>
 

client/src/partials/journal/journal.js

@@ -44,12 +44,8 @@ function JournalController(Journal, Sorting, Grouping, Filtering, Columns, Confi
   // options, it is also used by the grid to expose the API
   vm.gridOptions = {
     enableColumnMenus : false,
-    authenticateEdits : true,
     appScopeProvider : vm,
     rowTemplate: '/partials/journal/templates/transaction.row.html',
-    cellEditableCondition: function ($scope) {
-      return $scope.row._editing;
-    }
   };
 
   // Initialise each of the journal utilities, providing them access to the journal
@@ -61,7 +57,6 @@ function JournalController(Journal, Sorting, Grouping, Filtering, Columns, Confi
   transactions = new Transactions(vm.gridOptions);
   editors = new Editors(vm.gridOptions);
 
-  window.transactions = transactions;
   vm.transactions = transactions;
 
   vm.loading = true;

client/src/partials/journal/templates/actions.cell.html

@@ -5,7 +5,7 @@
       <i class="fa fa-edit"></i> {{ "FORM.BUTTONS.EDIT" | translate }}
     </a>
 
-    <a href ng-if="row._editing" style="color:#fff" ng-click="grid.appScope.transactions.save()">
+    <a href ng-if="row._editing" ng-click="grid.appScope.transactions.save()">
       <i class="fa fa-save"></i> {{ "FORM.BUTTONS.SAVE" | translate }}
     </a>
   </span>

client/src/partials/journal/templates/transaction.row.html

@@ -6,7 +6,9 @@
     'transaction-highlight': row._hasHighlight,
     'transaction-highlight-header': row._hasHighlight && row.groupHeader,
     'transaction-edit': row._editing,
-    'transaction-edit-header': row._editing && row.groupHeader
+    'transaction-edit-header': row._editing && row.groupHeader,
+    'transaction-invalid' : row._invalid,
+    'transaction-invalid-header': row._invalid && row.groupHeader
   }"
   ui-grid-cell>
 </div>

client/test/e2e/journal/journal.config.js

@@ -12,8 +12,8 @@ const FU = require('../shared/FormUtils');
 function JournalConfigurationModal() {
   'use strict';
 
-  const defaultVisibleColumnCount = 6;
-  const modifiedVisibleColumnCount = 2;
+  const defaultVisibleColumnCount = 7;
+  const modifiedVisibleColumnCount = 3;
   const page = new JournalCorePage();
 
   it('displays six visible columns by default', () => {
@@ -27,7 +27,7 @@ function JournalConfigurationModal() {
 
     FU.modal.submit();
 
-    page.expectHeaderColumns(['Debit', 'Credit']);
+    page.expectHeaderColumns(['Debit', 'Credit', '']);
   });
 
   it('remembers cached columns on browser refresh', () => {