feat: add bh-account-typeahead-inline component

This commit adds the bhAccountTypeaheadInlineComponent for use in grids,
such as the Complex Voucher grid.  It is prototyped and demonstrated in
the Complex Vouchers module.

Closes #1289.

client/src/css/ui-grid.css

@@ -53,14 +53,14 @@
   width:  100%;
   height : calc(100vh - 106px);
 }
-          
+
 
 .grid-journal {
   width : 100%;
   height : calc(100vh - 108px);
 }
 
-.grid-journal-alert { 
+.grid-journal-alert {
   width : 100%;
   height : calc(100vh - 150px);
 }
@@ -94,3 +94,4 @@
   color: white;
   background-color: blue;
 }
+

client/src/js/components/bhAccountSelect.js

@@ -11,7 +11,7 @@ angular.module('bhima.components')
       label            : '@?',
       name             : '@?',
       excludeTitleAccounts : '@?',
-      validationTrigger:  '<?',
+      validationTrigger :  '<?',
     },
   });
 

client/src/js/components/bhAccountTypeaheadInline.js

@@ -0,0 +1,73 @@
+angular.module('bhima.components')
+  .component('bhAccountTypeaheadInline', {
+    templateUrl : 'modules/templates/bhAccountTypeaheadInline.html',
+    controller  : AccountTypeaheadInlineController,
+    bindings    : {
+      accountId        : '<',
+      onSelectCallback : '&',
+      name             : '@?',
+    },
+  });
+
+AccountTypeaheadInlineController.$inject = [
+  'AccountService', '$timeout', '$scope', 'Store',
+];
+
+/**
+ * Inline Account Typeahead
+ *
+ * This component is much more limited in options compared to the bhAccountSelect.
+ * It is intended to be used in ui-grids to facilitate entering accounts easily
+ * without having a heavy uiSelect component.
+ */
+function AccountTypeaheadInlineController(Accounts, $timeout, $scope, Store) {
+  var $ctrl = this;
+  var store = new Store();
+
+  // fired at the beginning of the account select
+  $ctrl.$onInit = function $onInit() {
+    // fired when an account has been selected
+    $ctrl.onSelectCallback = $ctrl.onSelectCallback || angular.noop;
+
+    // default for form name
+    $ctrl.name = $ctrl.name || 'AccountForm';
+
+    // load accounts
+    loadAccounts();
+
+    // alias the name as AccountForm
+    $timeout(aliasComponentForm);
+  };
+
+  // this makes the HTML much more readable by reference AccountForm instead of the name
+  function aliasComponentForm() {
+    $scope.AccountForm = $scope[$ctrl.name];
+  }
+
+  // loads accounts from the server
+  function loadAccounts() {
+    Accounts.read()
+      .then(function (elements) {
+        // bind the accounts to the controller
+        var accounts = Accounts.order(elements);
+        $ctrl.accounts = Accounts.filterTitleAccounts(accounts);
+
+        store.setData($ctrl.accounts);
+      });
+  }
+
+  $ctrl.$onChanges = function $onChanges(changes) {
+    var accountId = changes.accountId && changes.accountId.currentValue;
+    if (accountId) {
+      $ctrl.account = store.get(accountId);
+    }
+  };
+
+  // fires the onSelectCallback bound to the component boundary
+  $ctrl.onSelect = function onSelect($item) {
+    $ctrl.onSelectCallback({ accountId : $item.id });
+
+    // alias the AccountForm name so that we can find it via filterFormElements
+    $scope[$ctrl.name].$bhValue = $item.id;
+  };
+}

client/src/less/bhima-bootstrap.less

@@ -385,3 +385,12 @@ body > .ui-select-bootstrap.open {
   background: green;
   width: 100%;
 }
+
+/* hack to get ui-grid to stop coloring inputs */
+div.ui-grid-cell .form-group input.form-control.ng-invalid {
+  border : 1px solid #ccc;
+}
+
+div.ui-grid-cell .form-group.has-error input.ng-invalid {
+  border : 1px solid #fc8f8f;
+}

client/src/modules/templates/bhAccountTypeaheadInline.html

@@ -0,0 +1,26 @@
+<div ng-form="{{ $ctrl.name }}" bh-account-typeahead-inline ng-model-options="{ updateOn: 'default' }">
+  <div
+    class="form-group"
+    style="margin-bottom:0;"
+    ng-class="{ 'has-error' : AccountForm.account.$error && AccountForm.$$parentForm.$submitted }">
+    <input
+      name="account"
+      type="text"
+      class="form-control"
+      placeholder="{{ ::'FORM.PLACEHOLDERS.ACCOUNT' | translate }}"
+      ng-model="$ctrl.account"
+      uib-typeahead="account as account.hrlabel for account in $ctrl.accounts | filter:{ hrlabel: $viewValue } | limitTo:10"
+      typeahead-template-url="bhAccountTypeaheadItem.html"
+      typeahead-on-select="$ctrl.onSelect($item)"
+      typeahead-append-to-body="true"
+      required>
+  </div>
+
+  <script type="text/ng-template" id="bhAccountTypeaheadItem.html">
+    <a id="account-number-{{ match.model.number }}" href>
+      <span ng-bind-html="match.model.hrlabel | uibTypeaheadHighlight:query"></span>
+    </a>
+  </script>
+
+</div>
+

client/src/modules/vouchers/templates/account.grid.tmpl.html

@@ -1,20 +1,7 @@
-<div>
- <ui-select
-   ng-model="row.entity.account_id"
-   ng-change="grid.appScope.Voucher.configureRow(row.entity)"
-   name="account"
-   append-to-body="true"
-   required>
-   <ui-select-match placeholder="{{ 'FORM.PLACEHOLDERS.ACCOUNT' | translate }}">
-      <span><strong>{{$select.selected.number}}</strong> {{$select.selected.label}}</span>
-   </ui-select-match>
-   <ui-select-choices
-     class="ui-grid-ui-select"
-     ui-select-focus-patch
-     ui-disable-choice="account.type_id === grid.appScope.bhConstants.accounts.TITLE"
-     repeat="account.id as account in grid.appScope.Voucher.accounts | filter: { 'hrlabel' : $select.search } track by account.id">
-     <strong ng-bind-html="account.number | highlight:$select.search"></strong>
-     <span ng-bind-html="account.label | highlight:$select.search"></span>
-   </ui-select-choices>
- </ui-select>
+<div class="ui-grid-cell-contents">
+  <bh-account-typeahead-inline
+    account-id="row.entity.account_id"
+    name="account"
+    on-select-callback="grid.appScope.Voucher.setAccountOnRow(row.entity, accountId)">
+  </bh-account-typeahead-inline>
 </div>

client/src/modules/vouchers/voucher-form.service.js

@@ -113,11 +113,11 @@ function VoucherFormService(Vouchers, Constants, Session, VoucherItem, Cashboxes
   VoucherForm.prototype.validate = function validate() {
     var items = this.store.data;
 
+    var err;
+
     // calculate the totals for the data
     this.totals = calculateItemTotals(items);
 
-    var err;
-
     // this array will store unique accounts
     var uniqueAccountsArray = [];
 
@@ -221,13 +221,17 @@ function VoucherFormService(Vouchers, Constants, Session, VoucherItem, Cashboxes
 
   VoucherForm.prototype.configureRow = function configureRow(row) {
     row.configure(row);
-    this.validate();
   };
 
   VoucherForm.prototype.description = function description(key, options) {
     this.details.description = $translate.instant(key, options);
   };
 
+  // set account on row
+  VoucherForm.prototype.setAccountOnRow = function setAccountOnRow(row, accountId) {
+    row.configure({ account_id : accountId });
+  };
+
   /**
    * @method addItems
    *
@@ -283,7 +287,6 @@ function VoucherFormService(Vouchers, Constants, Session, VoucherItem, Cashboxes
     this.clear();
 
     var form = this;
-    var n = rows.length;
 
     rows.forEach(function (row) {
       form.addItems(1);

test/data.sql

@@ -14,7 +14,7 @@ INSERT INTO `project` VALUES (1,'Test Project A','TPA',1,1,0),(2,'Test Project B
 
 -- Accounts
 INSERT INTO `account` VALUES
-  (3626,6,1,1000,'Test Capital Account',0,0,NULL,NULL,'2015-11-04 13:25:12',1,NULL,NULL,NULL,1,1),
+  (3626,3,1,1000,'Test Capital Account',0,0,NULL,NULL,'2015-11-04 13:25:12',1,NULL,NULL,NULL,1,1),
   (3627,3,1,1100,'Test Capital One',3626,0,NULL,NULL,'2015-11-04 13:26:13',1,1,NULL,0,NULL,0),
   (3628,3,1,1200,'Test Capital Two',3626,0,NULL,NULL,'2015-11-04 13:27:13',1,1,NULL,0,NULL,0),
   (3629,6,1,40000,'Test Balance Accounts',0,0,NULL,NULL,'2015-11-04 13:29:11',4,NULL,NULL,NULL,1,1),

test/end-to-end/shared/FormUtils.js

@@ -143,6 +143,29 @@ module.exports = {
     option.click();
   },
 
+  /**
+   * @method typeaheadAppended
+   *
+   * @description
+   * Selects an option from the ui-select dropdown
+   * which have the `append-to-body` option set to true
+   *
+   * @param {String} model - the ng-model target to select
+   * @param {String} label - the text of the option element to choose
+   * @param {Element} anchor - a protractor element to search within
+   * @returns {Element} - a protractor option element
+   */
+  typeaheadAppended: function typeaheadAppended(model, label, anchor) {
+    const externalAnchor = $('body > ul.dropdown-menu.ng-isolate-scope:not(.ng-hide)');
+
+    // type into the <input> element the searchable value
+    this.input('$ctrl.account', label, anchor || $('body'));
+
+    // select the item of the dropdown menu matching the label
+    const option = externalAnchor.element(by.cssContainingText('[role="option"]', label));
+    option.click();
+  },
+
   /**
    * @method uiSelect
    *