feat(component): Add a transaction type selection component

client/src/js/components/bhTransactionTypeSelect.js

@@ -0,0 +1,53 @@
+angular.module('bhima.components')
+  .component('bhTransactionTypeSelect', {
+    templateUrl : 'modules/templates/bhTransactionTypeSelect.tmpl.html',
+    controller  : transactionTypeSelectController,
+    bindings    : { 
+      label            : '@?',
+      onSelectCallback : '&',
+      onRemoveCallback : '&',
+      formName         : '@?',
+    },
+  });
+
+transactionTypeSelectController.$inject = [
+  'TransactionTypeService', 'NotifyService', '$translate'
+];
+
+/**
+ * transaction type Selection Component
+ *
+ */
+function transactionTypeSelectController(TransactionTypes, Notify, $translate) {
+  var $ctrl = this;
+
+  $ctrl.$onInit = function onInit() {
+    //label to display
+    $ctrl.label = $ctrl.label || 'FORM.LABELS.TRANSACTION_TYPE';
+
+    // fired when a transaction type has been selected
+    $ctrl.onSelectCallback = $ctrl.onSelectCallback || angular.noop;
+
+    // default for form name
+    $ctrl.formName = $ctrl.formName || 'TransactionTypeForm';
+
+    // load all Transaction types
+    TransactionTypes.read()
+      .then(function (tts) {
+        tts.forEach(function(item){
+          item.plainText = $translate.instant(item.text);
+        });
+        $ctrl.transactionTypes = tts;
+      })
+      .catch(Notify.handleError);
+  };
+
+  // fires the onSelectCallback bound to the component
+  $ctrl.onSelect = function (models) {
+    $ctrl.onSelectCallback({ transactionTypes : models });
+  };
+
+  $ctrl.onRemove = function (models) {
+    $ctrl.onRemoveCallback({ transactionTypes : models });
+  };
+}

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

@@ -0,0 +1,19 @@
+<div ng-form="TransactionTypeForm" bh-transaction-type-select ng-model-options="{ updateOn: 'default' }">
+  <div class="form-group">
+    <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">
+      <ui-select-match placeholder="{{ 'FORM.SELECT.TRANSACTION_TYPE' | translate }}">{{$select.selected.name}}</span></ui-select-match>
+      <ui-select-choices ui-select-focus-patch repeat="type.id as type in ($ctrl.transactionTypes | filter:$select.search)">
+        <span ng-bind-html="type.plainText | highlight:$select.search"></span>
+      </ui-select-choices>
+    </ui-select>
+  </div>
+</div>