feat(component): update the e2e test

Implement the transcation type component, update the e2e test and insert the component on the ver
registryouh

client/src/js/components/bhTransactionTypeSelect.js

@@ -3,10 +3,12 @@ angular.module('bhima.components')
     templateUrl : 'modules/templates/bhTransactionTypeSelect.tmpl.html',
     controller  : transactionTypeSelectController,
     bindings    : { 
+      transactionTypes : '<?',
       label            : '@?',
       onSelectCallback : '&',
       onRemoveCallback : '&',
       formName         : '@?',
+      required         : '<?',
     },
   });
 
@@ -31,6 +33,9 @@ function transactionTypeSelectController(TransactionTypes, Notify, $translate) {
     // default for form name
     $ctrl.formName = $ctrl.formName || 'TransactionTypeForm';
 
+    // init the model
+    $ctrl.selectedTransactionTypes = $ctrl.transactionTypes;
+
     // load all Transaction types
     TransactionTypes.read()
       .then(function (tts) {

client/src/modules/templates/bhTransactionTypeSelect.tmpl.html

@@ -1,21 +1,29 @@
-<div ng-form="TransactionTypeForm" bh-transaction-type-select ng-model-options="{ updateOn: 'default' }">
-  <div class="form-group">
+<div ng-form="$ctrl.formName" bh-transaction-type-select ng-model-options="{ updateOn: 'default' }">
+  <div 
+    class="form-group"
+    ng-class="{ 'has-error' : $ctrl.validationTrigger && $ctrl.formName.transactionType.$invalid }">
     <label class="control-label" translate>
       {{ $ctrl.label }}
     </label>
+
     <ui-select 
         multiple
         name="transactionType" 
         ng-model="$ctrl.selectedTransactionTypes"
         on-select="$ctrl.onSelect($ctrl.selectedTransactionTypes)"
         on-remove="$ctrl.onRemove($ctrl.selectedTransactionTypes)"
-        close-on-select="false">
+        close-on-select="false"
+        ng-required="$ctrl.required">
       <ui-select-match placeholder="{{ 'FORM.SELECT.TRANSACTION_TYPE' | translate }}">
           <span>{{$item.plainText}}</span>
       </ui-select-match>
       <ui-select-choices ui-select-focus-patch repeat="type.id as type in ($ctrl.transactionTypes | filter:{plainText : $select.search} | orderBy:'plainText')">
         <span ng-bind-html="type.plainText | highlight:$select.search"></span>
       </ui-select-choices>
     </ui-select>
+
+    <div class="help-block" ng-messages="$ctrl.formName.$error" ng-show="$ctrl.validationTrigger">
+      <div ng-messages-include="modules/templates/messages.tmpl.html"></div>
+    </div>
   </div>
 </div>

client/src/modules/vouchers/modals/search.modal.html

@@ -39,21 +39,10 @@
 
           <bh-transaction-type-select
             on-select-callback="$ctrl.onSelectTransactionType(transactionTypes)"
-            on-remove-callback="$ctrl.onRemoveTransactionType(transactionTypes)">
-            <bh-clear on-clear="$ctrl.clear('type_id')"></bh-clear>
+            on-remove-callback="$ctrl.onRemoveTransactionType(transactionTypes)"
+            transaction-types="$ctrl.type_ids"
+            required="false">
           </bh-transaction-type-select>
-
-          <!--<div class="form-group" ng-class="{ 'has-error' : ModalForm.$submitted && ModalForm.transactionType.$invalid }">
-            <label class="control-label" translate>FORM.LABELS.TRANSACTION_TYPE</label>
-            <bh-clear on-clear="$ctrl.clear('type_id')"></bh-clear>
-            <select
-              class="form-control"
-              name="transactionType"
-              ng-model="$ctrl.searchQueries.type_id"
-              ng-options="t.id as t.plainText for t in $ctrl.transactionTypes | orderBy:'plainText'">
-              <option value="" disabled translate>FORM.SELECT.TRANSACTION_TYPE</option>
-            </select>
-          </div>-->
         </div>
       </uib-tab>
       <uib-tab index="1" heading="{{ 'FORM.LABELS.DEFAULTS' | translate }}" data-default-filter-tab>

client/src/modules/vouchers/modals/search.modal.js

@@ -26,30 +26,23 @@ bhConstants, Periods, Store, util, TransactionTypes, $translate) {
     'reference', 'description', 'user_id', 'type_id',
   ];
 
-  TransactionTypes.read()
-      .then(function (transactionTypes) {
-        transactionTypes.forEach(function(item){
-          item.plainText = $translate.instant(item.text);
-        });
-        vm.transactionTypes = transactionTypes;
-      })
-      .catch(Notify.handleError);
-
   // assign already defined custom filters to searchQueries object
   vm.searchQueries = util.maskObjectFromKeys(filters, searchQueryOptions);
+
+  if(vm.searchQueries.type_id){
+    vm.type_ids = [vm.searchQueries.type_id];
+  }
 
   if(filters.limit){
     vm.defaultQueries.limit = filters.limit;
   }
 
   vm.onSelectTransactionType = function onSelectTransactionType (transactionTypes){
-    console.log('selecting, here is the : ', transactionTypes);
-    vm.searchQueries.type_id = 1;
+    vm.searchQueries.type_id = transactionTypes[transactionTypes.length - 1];
   }
 
   vm.onRemoveTransactionType = function onRemoveTransactionType (transactionTypes){
-    console.log('removing, here is the : ', transactionTypes);
-    vm.searchQueries.type_id = 1;
+    vm.searchQueries.type_id = null;
   }
 
   // custom filter user_id - assign the value to the params object

test/end-to-end/shared/components/bhTransactionTypeSelect.js

@@ -0,0 +1,17 @@
+/* global browser, element, by */
+
+const FU = require('../FormUtils');
+
+module.exports = {
+  selector : '[bh-transaction-type-select]',
+  set      : function set(transactionTypes, id) {
+    const locator = (id) ? by.id(id) : by.css(this.selector);
+    const target = element(locator);
+
+    target.click();
+
+    transactionTypes.forEach(function (tt){
+        FU.uiSelect('$ctrl.selectedTransactionTypes', tt);
+    });
+  },
+};

test/end-to-end/shared/components/index.js

@@ -30,4 +30,5 @@ module.exports = {
   multipleDebtorGroupSelect : require('./bhMultipleDebtorGroupSelect'),
   depotSelect    : require('./bhDepotSelect'),
   inventorySelect : require('./bhInventorySelect'),
+  transactionTypeSelect : require('./bhTransactionTypeSelect'),
 };

test/end-to-end/shared/search.page.js

@@ -4,6 +4,7 @@ const bhPeriodSelect = require('../shared/components/bhPeriodSelect');
 const bhDepotSelect = require('../shared/components/bhDepotSelect');
 const bhInventorySelect = require('../shared/components/bhInventorySelect');
 const bhDateInterval = require('../shared/components/bhDateInterval');
+const bhTransactionTypeSelect = require('../shared/components/bhTransactionTypeSelect');
 
 const CUSTOM_FILTER_TAB = '[data-custom-filter-tab]';
 const DEFAULT_FILTER_TAB = '[data-default-filter-tab]';
@@ -124,6 +125,10 @@ class SearchModal {
     bhDateInterval.range(dateFrom, dateTo, id);
   }
 
+  setTransactionType(transactionTypes) {
+    bhTransactionTypeSelect.set(transactionTypes);
+  }
+
   setPeriod(period) {
     bhPeriodSelect.select(period);
   }

test/end-to-end/vouchers/vouchers.search.js

@@ -22,6 +22,8 @@ function VoucherRegistrySearch() {
   const NUM_VOUCHERS = 13;
   const NUM_USER_RECORDS = 13;
   const NUM_DESCRIPTION_RECORDS = 2;
+  const NUM_TRANSACTION_TYPE_RECORD = 1;
+  const transactionTypes = ['Autres Depenses']
 
   let modal;
   let filters;
@@ -61,6 +63,12 @@ function VoucherRegistrySearch() {
     expectNumberOfGridRows(NUM_VOUCHERS);
   });
 
+  it(`filters by <select> transaction type should return ${NUM_TRANSACTION_TYPE_RECORD} results`, () => {
+    modal.setTransactionType(transactionTypes);
+    modal.submit();
+    expectNumberOfGridRows(NUM_TRANSACTION_TYPE_RECORD);
+  });
+
   it(`filtering by description should return ${NUM_DESCRIPTION_RECORDS} results`, () => {
     modal.setDescription('REVERSAL');
     modal.submit();