feat(component): add a component to select a supplier

client/src/js/components/bhSupplierSelect.js

@@ -0,0 +1,44 @@
+angular.module('bhima.components')
+  .component('bhSupplierSelect', {
+    templateUrl : 'modules/templates/bhSupplierSelect.tmpl.html',
+    controller  : SupplierSelectController,
+    transclude  : true,
+    bindings    : {
+      supplierId       : '<',
+      onSelectCallback : '&',
+      label            : '@?',
+      required         : '<?',
+      validateTrigger  : '<?',      
+    },
+  });
+
+SupplierSelectController.$inject = [
+  'SupplierService'
+];
+
+/**
+ * Supplier selection component
+ *
+ */
+function SupplierSelectController(Suppliers) {
+  var $ctrl = this;
+
+  $ctrl.$onInit = function onInit() {    
+    // fired when an Supplier has been selected
+    $ctrl.onSelectCallback = $ctrl.onSelectCallback || angular.noop;
+
+    // default for label
+    $ctrl.label = $ctrl.label || 'FORM.LABELS.SUPPLIER';
+
+    // load all Suppliers
+    Suppliers.read()
+      .then(function (suppliers) {        
+        $ctrl.suppliers = suppliers;
+      });
+  };
+
+  // fires the onSelectCallback bound to the component boundary
+  $ctrl.onSelect = function ($item, $model) {
+    $ctrl.onSelectCallback({ supplier : $item });
+  };
+}

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

@@ -0,0 +1,25 @@
+<div ng-form="SupplierForm" bh-supplier-select ng-model-options="{ updateOn: 'default' }">
+  <div
+    class="form-group"
+    ng-class="{ 'has-error' : $ctrl.validateTrigger && SupplierForm.supplier_id.$invalid }">
+
+    <label class="control-label" translate>
+      {{$ctrl.label}}
+    </label>
+
+    <ng-transclude></ng-transclude>
+    <ui-select 
+        name="supplier_id" 
+        ng-model="$ctrl.supplierId"
+        on-select="$ctrl.onSelect($item, $model)">
+      <ui-select-match placeholder="{{ 'FORM.SELECT.SUPPLIER' | translate }}">{{$select.selected.display_name}}</span></ui-select-match>
+      <ui-select-choices ui-select-focus-patch repeat="supplier.id as supplier in $ctrl.suppliers | filter: { 'display_name': $select.search }">
+        <span ng-bind-html="supplier.display_name | highlight:$select.search"></span>
+      </ui-select-choices>
+    </ui-select>
+
+    <div class="help-block" ng-messages="SupplierForm.supplier_id.$error" ng-show="$ctrl.validateTrigger">
+      <div ng-messages-include="modules/templates/messages.tmpl.html"></div>
+    </div>
+  </div>
+</div>