Add pfSelect component

Gruntfile.js

@@ -193,6 +193,11 @@ module.exports = function (grunt) {
           src: ['modals/**/*.html'],
           dest: 'templates/modals.js'
         },
+        'patternfly.select': {
+          cwd: 'src/',
+          src: ['select/**/*.html'],
+          dest: 'templates/select.js'
+        },
         'patternfly.sort': {
           cwd: 'src/',
           src: ['sort/**/*.html'],

src/patternfly.module.js

@@ -12,6 +12,7 @@ angular.module('patternfly', [
   'patternfly.modals',
   'patternfly.navigation',
   'patternfly.notification',
+  'patternfly.select',
   'patternfly.sort',
   'patternfly.toolbars',
   'patternfly.utils',

src/select/examples/select.js

@@ -0,0 +1,65 @@
+/**
+ * @ngdoc directive
+ * @name patternfly.select.component:pfSelect
+ * @restrict E
+ *
+ * @param {string} ngModel Model binding using the {@link https://docs.angularjs.org/api/ng/type/ngModel.NgModelController/ NgModelController} is mandatory.
+ * @param {string=} ngOptions The `{@link https://docs.angularjs.org/api/ng/directive/select/ ngOptions}` attribute can be used to dynamically generate a list of `<option>` elements
+ *
+ * @description
+ * The pfSelect component provides a wrapper for the angular ui bootstrap dropdown container allowing for use of ng-model and ng-options
+ *
+ * @example
+ <example module="patternfly.select">
+ <file name="index.html">
+   <div ng-controller="SelectDemoCtrl">
+     <form class="form-horizontal">
+       <div class="form-group">
+         <label class="col-sm-2 control-label">Preferred pet:</label>
+         <div class="col-sm-10">
+           <pf-select selected="pet" empty-value="{{noPet}}" options="pets"></pf-select>
+         </div>
+       </div>
+       <div class="form-group">
+         <label class="col-sm-2 control-label">Preferred fruit:</label>
+         <div class="col-sm-10">
+           <pf-select selected="fruit" options="fruits" display-field="title"></pf-select>
+         </div>
+       </div>
+       <div class="form-group">
+         <label class="col-sm-2 control-label">Preferred drink:</label>
+         <div class="col-sm-10">
+           <pf-select selected="drink" empty-value="{{noDrink}}" options="drinks" display-field="name"></pf-select>
+         </div>
+       </div>
+     </form>
+     <p>Your preferred pet is {{pet || noPet}}.</p>
+     <p>Your preferred drink is {{fruit.name}}.</p>
+     <p>Your preferred drink is {{drink ? drink.name : noDrink}}.</p>
+   </div>
+   </file>
+ <file name="script.js">
+   angular.module( 'patternfly.select' ).controller( 'SelectDemoCtrl', function( $scope ) {
+         $scope.pets = ['Dog', 'Cat', 'Chicken'];
+         $scope.noPet = "No pet selected";
+
+         $scope.fruits = [
+           { id: 1, name:'orange', title: 'Oranges - fresh from Florida'},
+           { id: 2, name:'apple', title: 'Apples - Macintosh, great for pies.'},
+           { id: 3, name:'banana', title: 'Bananas - you will go ape for them!' }
+         ];
+         $scope.fruit = $scope.fruits[0];
+
+         $scope.drinks = [
+           { id: 1, name:'tea'},
+           { id: 2, name:'coffee'},
+           { id: 3, name:'water'},
+           { id: 4, name:'wine'},
+           { id: 5, name:'beer'}
+         ];
+         $scope.drink = $scope.drinks[0];
+         $scope.noDrink = "No drink selected";
+       });
+   </file>
+ </example>
+ */

src/select/select.component.js

@@ -0,0 +1,43 @@
+angular.module('patternfly.select').component('pfSelect', {
+
+  bindings: {
+    selected: '=',
+    options: '<',
+    displayField: '@',
+    emptyValue: '@',
+    onSelect: '<'
+  },
+  templateUrl: 'select/select.html',
+  controller: function () {
+    'use strict';
+
+    var ctrl = this;
+
+    ctrl.$onInit = function () {
+      angular.extend(ctrl, {
+        showEmpty: angular.isDefined(ctrl.emptyValue),
+        getDisplayValue: getDisplayValue,
+        selectItem: selectItem
+      });
+    };
+
+    function getDisplayValue (item) {
+      var value;
+
+      if (item !== ctrl.emptyValue && angular.isString(ctrl.displayField)) {
+        value = item[ctrl.displayField];
+      } else {
+        value = item;
+      }
+
+      return value;
+    }
+
+    function selectItem (item) {
+      ctrl.selected = item;
+      if (angular.isFunction(ctrl.onSelect)) {
+        ctrl.onSelect(item);
+      }
+    }
+  }
+});

src/select/select.html

@@ -0,0 +1,18 @@
+<div uib-dropdown class="btn-group">
+  <button uib-dropdown-toggle type="button" class="btn btn-default">
+    {{$ctrl.getDisplayValue($ctrl.selected || $ctrl.emptyValue)}}
+    <span class="caret"></span>
+  </button>
+  <ul uib-dropdown-menu>
+    <li ng-if="$ctrl.emptyValue" ng-class="{'selected': !$ctrl.selected}">
+      <a href="javascript:void(0);" role="menuitem" tabindex="-1" ng-click="$ctrl.selectItem()">
+        {{$ctrl.emptyValue}}
+      </a>
+    </li>
+    <li ng-repeat="item in $ctrl.options" ng-class="{'selected': item === $ctrl.selected}">
+      <a href="javascript:void(0);" role="menuitem" tabindex="-1" ng-click="$ctrl.selectItem(item)">
+        {{$ctrl.getDisplayValue(item)}}
+      </a>
+    </li>
+  </ul>
+</div>

src/select/select.module.js

@@ -0,0 +1,8 @@
+/**
+ * @name  patternfly card
+ *
+ * @description
+ *   Select module for patternfly.
+ *
+ */
+angular.module('patternfly.select', ['ui.bootstrap']);

test/select/select.spec.js

@@ -0,0 +1,125 @@
+describe('Component:  pfSelect', function () {
+  var $scope;
+  var $compile;
+  var element;
+
+  // load the controller's module
+  beforeEach(function () {
+    module('patternfly.select', 'select/select.html');
+  });
+
+  beforeEach(inject(function (_$compile_, _$rootScope_) {
+    $compile = _$compile_;
+    $scope = _$rootScope_;
+  }));
+
+  var compileHTML = function (markup, scope) {
+    element = angular.element(markup);
+    $compile(element)(scope);
+
+    scope.$digest();
+  };
+
+  beforeEach(function () {
+    $scope.items = [
+      {
+        id: 1,
+        title:  'A'
+      },
+      {
+        id: 2,
+        title:  'B'
+      },
+      {
+        id: 3,
+        title:  'C'
+      },
+      {
+        id: 4,
+        title:  'D'
+      }
+    ];
+
+    $scope.selected = $scope.items[1];
+
+    var htmlTmp = '<pf-select selected="selected" options="items" display-field="title"></pf-select>';
+
+    compileHTML(htmlTmp, $scope);
+  });
+
+  it('should have correct number of options', function () {
+    var menuItems = element.find('.dropdown-menu li');
+    expect(menuItems.length).toBe(4);
+  });
+
+  it('should have the correct item selected', function () {
+    var results = element.find('.dropdown-toggle');
+    expect(results.length).toBe(1);
+    expect(results.html().trim().slice(0, $scope.items[1].title.length)).toBe($scope.items[1].title);
+  });
+
+  it('should update the selected item when one is clicked', function () {
+    var menuItems = element.find('.dropdown-menu li > a');
+    expect(menuItems.length).toBe(4);
+
+    eventFire(menuItems[2], 'click');
+    $scope.$digest();
+
+    expect($scope.selected.id).toBe(3);
+    var results = element.find('.dropdown-toggle');
+    expect(results.length).toBe(1);
+    expect(results.html().trim().slice(0, $scope.items[1].title.length)).toBe($scope.items[2].title);
+  });
+
+  it('should add a default item when empty value is given', function () {
+    var htmlTmp = '<pf-select selected="selected" options="items" display-field="title" empty-value="nothing"></pf-select>';
+
+    compileHTML(htmlTmp, $scope);
+
+    var menuItems = element.find('.dropdown-menu li');
+    expect(menuItems.length).toBe(5);
+  });
+
+  it('should show the default when no selection is given', function () {
+
+    $scope.selected = null;
+    var htmlTmp = '<pf-select selected="selected" options="items" display-field="title" empty-value="nothing"></pf-select>';
+
+    compileHTML(htmlTmp, $scope);
+
+    var menuItems = element.find('.dropdown-menu li');
+    expect(menuItems.length).toBe(5);
+
+    var results = element.find('.dropdown-toggle');
+    expect(results.length).toBe(1);
+    expect(results.html().trim().slice(0, "nothing".length)).toBe("nothing");
+  });
+
+  it('should call the onSelect function on selection', function () {
+
+    var onSelectCalled = false;
+    var selectedItem = null;
+    $scope.onSelect = function(item) {
+      onSelectCalled = true;
+      selectedItem = item;
+    };
+
+    $scope.selected = null;
+    var htmlTmp = '<pf-select selected="selected" options="items" display-field="title" empty-value="nothing" on-select="onSelect"></pf-select>';
+
+    compileHTML(htmlTmp, $scope);
+
+    var menuItems = element.find('.dropdown-menu li > a');
+    expect(menuItems.length).toBe(5);
+
+    expect(onSelectCalled).toBe(false);
+    expect(selectedItem).toBe(null);
+
+    eventFire(menuItems[2], 'click');
+    $scope.$digest();
+
+    expect(onSelectCalled).toBe(true);
+    expect(selectedItem.id).toBe(2);
+  });
+
+});