feat(form): change inputs panel

bower.json

@@ -53,7 +53,8 @@
     "angular-animate": "~1.5.8",
     "textAngular": "~1.4.6",
     "angular-xeditable": "~0.5.0",
-    "ng-js-tree": "~0.0.7"
+    "ng-js-tree": "~0.0.7",
+    "angular-ui-select": "^0.19.6"
   },
   "resolutions": {
     "angular": "~1.5.9",

src/app/pages/form/form.module.js

@@ -5,7 +5,7 @@
 (function () {
   'use strict';
 
-  angular.module('BlurAdmin.pages.form', [])
+  angular.module('BlurAdmin.pages.form', ['ui.select', 'ngSanitize'])
       .config(routeConfig);
 
   /** @ngInject */

src/app/pages/form/inputs/inputs.html

@@ -26,6 +26,9 @@
           ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/inputs/widgets/checkboxesRadios.html'"></div>
       </div>
+      <div ba-panel ba-panel-title="On/Off Switches" ba-panel-class="with-scroll">
+        <div ng-include="'app/pages/form/inputs/widgets/switch/switch.html'"></div>
+      </div>
     </div>
     <div class="col-md-6">
       <div
@@ -40,9 +43,14 @@
           ba-panel-class="with-scroll">
         <div ng-include="'app/pages/form/inputs/widgets/select/select.html'"></div>
       </div>
-      <div ba-panel ba-panel-title="On/Off Switches" ba-panel-class="with-scroll">
+      <div
-        <div ng-include="'app/pages/form/inputs/widgets/switch/switch.html'"></div>
+          ba-panel
+          ba-panel-title="Old selects(deprecated)"
+          ba-panel-class="with-scroll">
+        <div ng-include="'app/pages/form/inputs/widgets/oldSelect/select.html'"></div>
       </div>
+
+
     </div>
   </div>
 

src/app/pages/form/inputs/widgets/oldSelect/OldSelectpickerPanelCtrl.js

@@ -0,0 +1,39 @@
+/**
+ * @author v.lugovsky
+ * created on 22.04.2016
+ * @deprecated
+ */
+(function () {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.form')
+      .controller('OldSelectpickerPanelCtrl', OldSelectpickerPanelCtrl);
+
+  /** @ngInject */
+  function OldSelectpickerPanelCtrl() {
+    var vm = this;
+
+    vm.standardSelectItems = [
+      { label: 'Option 1', value: 1 },
+      { label: 'Option 2', value: 2 },
+      { label: 'Option 3', value: 3 },
+      { label: 'Option 4', value: 4 },
+    ];
+
+    vm.selectWithSearchItems = [
+      { label: 'Hot Dog, Fries and a Soda', value: 1 },
+      { label: 'Burger, Shake and a Smile', value: 2 },
+      { label: 'Sugar, Spice and all things nice', value: 3 },
+      { label: 'Baby Back Ribs', value: 4 },
+    ];
+
+    vm.groupedSelectItems = [
+      { label: 'Group 1 - Option 1', value: 1, group: 'Group 1' },
+      { label: 'Group 2 - Option 2', value: 2, group: 'Group 2' },
+      { label: 'Group 1 - Option 3', value: 3, group: 'Group 1' },
+      { label: 'Group 2 - Option 4', value: 4, group: 'Group 2' },
+    ];
+
+  }
+
+})();

src/app/pages/form/inputs/widgets/oldSelect/select.html

@@ -0,0 +1,134 @@
+<div ng-controller="OldSelectpickerPanelCtrl as selectpickerVm">
+    <div class="form-group">
+        <select class="form-control selectpicker" selectpicker title="Standard Select"
+                ng-model="selectpickerVm.standardSelected"
+                ng-options="item as item.label for item in selectpickerVm.standardSelectItems">
+        </select>
+    </div>
+    <div class="form-group">
+        <select class="form-control selectpicker with-search" data-live-search="true" title="Select With Search"
+                selectpicker
+                ng-model="selectpickerVm.searchSelectedItem"
+                ng-options="item as item.label for item in selectpickerVm.selectWithSearchItems">
+        </select>
+    </div>
+    <div class="form-group">
+        <select class="form-control selectpicker" title="Option Types" selectpicker>
+            <option>Standard option</option>
+            <option data-subtext="option subtext">Option with subtext</option>
+            <option disabled>Disabled Option</option>
+            <option data-icon="glyphicon-heart">Option with cion</option>
+        </select>
+    </div>
+    <div class="form-group">
+        <select class="form-control selectpicker" disabled title="Disabled Select" selectpicker>
+            <option>Option 1</option>
+            <option>Option 2</option>
+            <option>Option 3</option>
+        </select>
+    </div>
+
+    <div class="row">
+        <div class="col-sm-6">
+            <div class="form-group">
+                <select class="form-control" title="Select with Option Groups" selectpicker
+                        ng-model="selectpickerVm.groupedSelectedItem"
+                        ng-options="item as item.label group by item.group for item in selectpickerVm.groupedSelectItems">
+                </select>
+            </div>
+        </div>
+        <div class="col-sm-6">
+            <div class="form-group">
+                <select class="form-control" title="Select with Divider" selectpicker>
+                    <option>Group 1 - Option 1</option>
+                    <option>Group 1 - Option 2</option>
+                    <option data-divider="true"></option>
+                    <option>Group 2 - Option 1</option>
+                    <option>Group 2 - Option 2</option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <div class="form-group">
+        <select class="form-control" title="Multiple Select" multiple selectpicker
+                ng-model="selectpickerVm.multipleSelectedItems"
+                ng-options="item as item.label for item in selectpickerVm.standardSelectItems">
+            <option>Option 1</option>
+            <option>Option 2</option>
+            <option>Option 3</option>
+        </select>
+    </div>
+    <div class="form-group">
+        <select class="form-control" title="Multiple Select with Limit" multiple data-max-options="2" selectpicker
+                ng-model="selectpickerVm.multipleSelectedItems2"
+                ng-options="item as item.label for item in selectpickerVm.standardSelectItems">
+            <option>Option 1</option>
+            <option>Option 2</option>
+            <option>Option 3</option>
+        </select>
+    </div>
+
+    <div class="row">
+        <div class="col-sm-6">
+            <div class="form-group">
+                <select class="form-control" title="Primary Select" data-style="btn-primary" data-container="body"
+                        selectpicker>
+                    <option>Option 1</option>
+                    <option>Option 2</option>
+                    <option>Option 3</option>
+                    <option>Option 4</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <select class="form-control" title="Success Select" data-style="btn-success" data-container="body"
+                        selectpicker>
+                    <option>Option 1</option>
+                    <option>Option 2</option>
+                    <option>Option 3</option>
+                    <option>Option 4</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <select class="form-control" title="Warning Select" data-style="btn-warning" data-container="body"
+                        selectpicker>
+                    <option>Option 1</option>
+                    <option>Option 2</option>
+                    <option>Option 3</option>
+                    <option>Option 4</option>
+                </select>
+            </div>
+        </div>
+        <div class="col-sm-6">
+            <div class="form-group">
+                <select class="form-control" title="Info Select" data-style="btn-info" data-container="body"
+                        selectpicker>
+                    <option>Option 1</option>
+                    <option>Option 2</option>
+                    <option>Option 3</option>
+                    <option>Option 4</option>
+                </select>
+            </div>
+
+            <div class="form-group">
+                <select class="form-control" title="Danger Select" data-style="btn-danger" data-container="body"
+                        selectpicker>
+                    <option>Option 1</option>
+                    <option>Option 2</option>
+                    <option>Option 3</option>
+                    <option>Option 4</option>
+                </select>
+            </div>
+
+            <div class="form-group">
+                <select class="form-control" title="Inverse Select" data-style="btn-inverse" data-container="body"
+                        selectpicker>
+                    <option>Option 1</option>
+                    <option>Option 2</option>
+                    <option>Option 3</option>
+                    <option>Option 4</option>
+                </select>
+            </div>
+        </div>
+    </div>
+</div>

src/app/pages/form/inputs/widgets/oldSelect/selectpicker.directive.js

@@ -1,6 +1,7 @@
 /**
  * @author v.lugovksy
  * created on 16.12.2015
+ * @deprecated
  */
 (function () {
   'use strict';

src/app/pages/form/inputs/widgets/select/GroupSelectpickerOptions.js

@@ -0,0 +1,44 @@
+/**
+ * @author p.maslava
+ * created on 28.11.2016
+ */
+
+(function() {
+  'use strict';
+
+  angular.module('BlurAdmin.pages.form')
+    .filter('groupSelectpickerOptions', GroupSelectpickerOptions);
+
+  /** @ngInject */
+  function GroupSelectpickerOptions() {
+    return function (items, props) {
+      var out = [];
+
+      if (angular.isArray(items)) {
+        var keys = Object.keys(props);
+
+        items.forEach(function (item) {
+          var itemMatches = false;
+
+          for (var i = 0; i < keys.length; i++) {
+            var prop = keys[i];
+            var text = props[prop].toLowerCase();
+            if (item[prop].toString().toLowerCase().indexOf(text) !== -1) {
+              itemMatches = true;
+              break;
+            }
+          }
+
+          if (itemMatches) {
+            out.push(item);
+          }
+        });
+      } else {
+        // Let the output be the input untouched
+        out = items;
+      }
+
+      return out;
+    };
+  }
+})();

src/app/pages/form/inputs/widgets/select/SelectpickerPanelCtrl.js

@@ -1,38 +1,92 @@
 /**
- * @author v.lugovsky
+ * @author p.maslava
- * created on 22.04.2016
+ * created on 28.11.2016
  */
 (function () {
   'use strict';
 
   angular.module('BlurAdmin.pages.form')
-      .controller('SelectpickerPanelCtrl', SelectpickerPanelCtrl);
+    .controller('SelectpickerPanelCtrl', SelectpickerPanelCtrl);
 
   /** @ngInject */
   function SelectpickerPanelCtrl() {
-    var vm = this;
 
+    var vm = this;
+    vm.disabled = undefined;
+
+
+    vm.standardItem = {};
     vm.standardSelectItems = [
-      { label: 'Option 1', value: 1 },
+      {label: 'Option 1', value: 1},
-      { label: 'Option 2', value: 2 },
+      {label: 'Option 2', value: 2},
-      { label: 'Option 3', value: 3 },
+      {label: 'Option 3', value: 3},
-      { label: 'Option 4', value: 4 },
+      {label: 'Option 4', value: 4}
     ];
 
+    vm.withSearchItem = {};
+
     vm.selectWithSearchItems = [
-      { label: 'Hot Dog, Fries and a Soda', value: 1 },
+      {label: 'Hot Dog, Fries and a Soda', value: 1},
-      { label: 'Burger, Shake and a Smile', value: 2 },
+      {label: 'Burger, Shake and a Smile', value: 2},
-      { label: 'Sugar, Spice and all things nice', value: 3 },
+      {label: 'Sugar, Spice and all things nice', value: 3},
-      { label: 'Baby Back Ribs', value: 4 },
+      {label: 'Baby Back Ribs', value: 4}
+    ];
+    vm.groupedItem = {};
+    vm.groupedSelectItems = [
+      {label: 'Group 1 - Option 1', value: 1, group: 'Group 1'},
+      {label: 'Group 2 - Option 2', value: 2, group: 'Group 2'},
+      {label: 'Group 1 - Option 3', value: 3, group: 'Group 1'},
+      {label: 'Group 2 - Option 4', value: 4, group: 'Group 2'}
     ];
 
-    vm.groupedSelectItems = [
+    vm.groupedByItem = {};
-      { label: 'Group 1 - Option 1', value: 1, group: 'Group 1' },
+    vm.groupedBySelectItems = [
-      { label: 'Group 2 - Option 2', value: 2, group: 'Group 2' },
+      {name: 'Adam', country: 'United States'},
-      { label: 'Group 1 - Option 3', value: 3, group: 'Group 1' },
+      {name: 'Amalie', country: 'Argentina'},
-      { label: 'Group 2 - Option 4', value: 4, group: 'Group 2' },
+      {name: 'Estefanía', country: 'Argentina'},
+      {name: 'Adrian', country: 'Ecuador'},
+      {name: 'Wladimir', country: 'Ecuador'},
+      {name: 'Samantha', country: 'United States'},
+      {name: 'Nicole', country: 'Colombia'},
+      {name: 'Natasha', country: 'Ecuador'},
+      {name: 'Michael', country: 'Colombia'},
+      {name: 'Nicolás', country: 'Colombia'}
+    ];
+    vm.someGroupFn = function (item) {
+
+      if (item.name[0] >= 'A' && item.name[0] <= 'M')
+        return 'From A - M';
+      if (item.name[0] >= 'N' && item.name[0] <= 'Z')
+        return 'From N - Z';
+    };
+
+    vm.disableItem = {};
+    vm.disableItems = [];
+
+    vm.multipleItem = {};
+    vm.multipleSelectItems = [
+      {label: 'Option 1', value: 1},
+      {label: 'Option 2', value: 2},
+      {label: 'Option 3', value: 3},
+      {label: 'Option 4', value: 4},
+      {label: 'Option 5', value: 5},
+      {label: 'Option 6', value: 6},
+      {label: 'Option 7', value: 7},
+      {label: 'Option 8', value: 8}
+    ];
+    vm.withDeleteItem = {};
+    vm.withDeleteSelectItems = [
+      {label: 'Option 1', value: 1},
+      {label: 'Option 2', value: 2},
+      {label: 'Option 3', value: 3},
+      {label: 'Option 4', value: 4},
+      {label: 'Option 5', value: 5},
+      {label: 'Option 6', value: 6},
+      {label: 'Option 7', value: 7},
+      {label: 'Option 8', value: 8}
     ];
 
   }
-
 })();
+
+

src/app/pages/form/inputs/widgets/select/select.html

@@ -1,127 +1,124 @@
-<div ng-controller="SelectpickerPanelCtrl as selectpickerVm">
+<div class="ng-cloak" ng-controller="SelectpickerPanelCtrl as selectpickerVm">
   <div class="form-group">
-    <select class="form-control selectpicker" selectpicker title="Standard Select"
+    <ui-select ng-model="selectpickerVm.selectedItem.selected"
-            ng-model="selectpickerVm.standardSelected"
+               class="btn-group bootstrap-select form-control"
-            ng-options="item as item.label for item in selectpickerVm.standardSelectItems">
+               ng-disabled="false"
-    </select>
+               append-to-body="true"
+               search-enabled="false">
+      <ui-select-match placeholder="Standard Select">
+        <span> {{$select.selected.label}}</span>
+      </ui-select-match>
+      <ui-select-choices repeat="standardItem in selectpickerVm.standardSelectItems | filter: $select.search">
+        <span ng-bind-html="standardItem.label"></span>
+      </ui-select-choices>
+    </ui-select>
   </div>
-  <div class="form-group">
+  <div class="form-group ">
-    <select class="form-control selectpicker with-search" data-live-search="true" title="Select With Search" selectpicker
+    <ui-select ng-model="selectpickerVm.withSearchItem.selected"
-            ng-model="selectpickerVm.searchSelectedItem"
+               class="btn-group bootstrap-select form-control"
-            ng-options="item as item.label for item in selectpickerVm.selectWithSearchItems">
+               ng-disabled="false"
-    </select>
+               append-to-body="true"
-  </div>
+               search-enabled="true">
-  <div class="form-group">
+      <ui-select-match placeholder="Select With Search">
-    <select class="form-control selectpicker" title="Option Types" selectpicker>
+        {{$select.selected.label}}
-      <option>Standard option</option>
+      </ui-select-match>
-      <option data-subtext="option subtext">Option with subtext</option>
+      <ui-select-choices
-      <option disabled>Disabled Option</option>
+          repeat="withSearchItem in selectpickerVm.selectWithSearchItems | filter: $select.search">
-      <option data-icon="glyphicon-heart">Option with cion</option>
+        <span ng-bind-html="withSearchItem.label"></span>
-    </select>
+      </ui-select-choices>
-  </div>
+    </ui-select>
-  <div class="form-group">
-    <select class="form-control selectpicker" disabled title="Disabled Select" selectpicker>
-      <option>Option 1</option>
-      <option>Option 2</option>
-      <option>Option 3</option>
-    </select>
-  </div>
-
-  <div class="row">
-    <div class="col-sm-6">
-      <div class="form-group">
-        <select class="form-control" title="Select with Option Groups" selectpicker
-                ng-model="selectpickerVm.groupedSelectedItem"
-                ng-options="item as item.label group by item.group for item in selectpickerVm.groupedSelectItems">
-        </select>
-      </div>
-    </div>
-    <div class="col-sm-6">
-      <div class="form-group">
-        <select class="form-control" title="Select with Divider" selectpicker>
-          <option>Group 1 - Option 1</option>
-          <option>Group 1 - Option 2</option>
-          <option data-divider="true"></option>
-          <option>Group 2 - Option 1</option>
-          <option>Group 2 - Option 2</option>
-        </select>
-      </div>
-    </div>
   </div>
 
   <div class="form-group">
-    <select class="form-control" title="Multiple Select" multiple selectpicker
+    <ui-select ng-model="selectpickerVm.disableItem.selected"
-            ng-model="selectpickerVm.multipleSelectedItems"
+               class="btn-group bootstrap-select form-control"
-            ng-options="item as item.label for item in selectpickerVm.standardSelectItems">
+               ng-disabled="true"
-      <option>Option 1</option>
+               append-to-body="true"
-      <option>Option 2</option>
+               search-enabled="false">
-      <option>Option 3</option>
+      <ui-select-match placeholder="Disabled Selection">
-    </select>
+        <span> {{$select.selected.label}}</span>
+      </ui-select-match>
+      <ui-select-choices repeat="disableItem in selectpickerVm.disableItems | filter: $select.search">
+        <span ng-bind-html="disableItem.label"></span>
+      </ui-select-choices>
+    </ui-select>
   </div>
+
+
   <div class="form-group">
-    <select class="form-control" title="Multiple Select with Limit" multiple data-max-options="2" selectpicker
+    <ui-select ng-model="selectpickerVm.groupedItems.selected"
-            ng-model="selectpickerVm.multipleSelectedItems2"
+               class="btn-group bootstrap-select form-control"
-            ng-options="item as item.label for item in selectpickerVm.standardSelectItems">
+               ng-disabled="false"
-      <option>Option 1</option>
+               append-to-body="true"
-      <option>Option 2</option>
+               search-enabled="true">
-      <option>Option 3</option>
+      <ui-select-match placeholder="Select With Option Groups">
-    </select>
+        {{$select.selected.label}}
+      </ui-select-match>
+      <ui-select-choices
+          repeat="groupedItems in selectpickerVm.groupedSelectItems | groupSelectpickerOptions: {label: $select.search}"
+          group-by="'group'">
+        <span ng-bind-html="groupedItems.label | highlight: $select.search"></span>
+      </ui-select-choices>
+    </ui-select>
   </div>
 
-  <div class="row">
+  <div class="form-group">
-    <div class="col-sm-6">
+    <ui-select ng-model="selectpickerVm.groupedByItems.selected"
-      <div class="form-group">
+               class="btn-group bootstrap-select form-control"
-        <select class="form-control" title="Primary Select" data-style="btn-primary" data-container="body" selectpicker>
+               ng-disabled="false"
-          <option>Option 1</option>
+               append-to-body="true"
-          <option>Option 2</option>
+               search-enabled="true">
-          <option>Option 3</option>
+      <ui-select-match placeholder="Select With Option Groups Function">
-          <option>Option 4</option>
+        {{$select.selected.name}}
-        </select>
+      </ui-select-match>
-      </div>
+      <ui-select-choices
-      <div class="form-group">
+          repeat="groupedByItems in selectpickerVm.groupedBySelectItems | filter: $select.search"
-        <select class="form-control" title="Success Select" data-style="btn-success" data-container="body" selectpicker>
+          group-by="selectpickerVm.someGroupFn">
-          <option>Option 1</option>
+        <span ng-bind-html="groupedByItems.name | highlight: $select.search"></span>
-          <option>Option 2</option>
+      </ui-select-choices>
-          <option>Option 3</option>
+    </ui-select>
-          <option>Option 4</option>
+  </div>
-        </select>
-      </div>
-      <div class="form-group">
-        <select class="form-control" title="Warning Select" data-style="btn-warning" data-container="body" selectpicker>
-          <option>Option 1</option>
-          <option>Option 2</option>
-          <option>Option 3</option>
-          <option>Option 4</option>
-        </select>
-      </div>
-    </div>
-    <div class="col-sm-6">
-      <div class="form-group">
-        <select class="form-control" title="Info Select" data-style="btn-info" data-container="body" selectpicker>
-          <option>Option 1</option>
-          <option>Option 2</option>
-          <option>Option 3</option>
-          <option>Option 4</option>
-        </select>
-      </div>
 
-      <div class="form-group">
-        <select class="form-control" title="Danger Select" data-style="btn-danger" data-container="body" selectpicker>
-          <option>Option 1</option>
-          <option>Option 2</option>
-          <option>Option 3</option>
-          <option>Option 4</option>
-        </select>
-      </div>
 
-      <div class="form-group">
+  <div class="form-group">
-        <select class="form-control" title="Inverse Select" data-style="btn-inverse" data-container="body" selectpicker>
+    <ui-select multiple ng-model="selectpickerVm.multipleItem.selected"
-          <option>Option 1</option>
+               ng-disabled="false"
-          <option>Option 2</option>
+               search-enabled="true"
-          <option>Option 3</option>
+               append-to-body="true"
-          <option>Option 4</option>
+               class="form-control ">
-        </select>
+      <ui-select-match placeholder="Multiple Select">
-      </div>
+        {{$item.label}}
+      </ui-select-match>
+      <ui-select-choices repeat="multipleItem in selectpickerVm.multipleSelectItems | filter: $select.search">
+        {{multipleItem.label}}
+      </ui-select-choices>
+    </ui-select>
+  </div>
+
+
+  <div class="form-group ">
+    <div class="input-group">
+
+      <ui-select multiple
+                 ng-model="selectpickerVm.withDeleteItem.selected"
+                 ng-disabled="false"
+                 search-enabled="true"
+                 append-to-body="true"
+                 class="form-control form-control">
+        <ui-select-match placeholder="Select With Clear Button">
+          {{$item.label}}
+        </ui-select-match>
+        <ui-select-choices
+            repeat="withDeleteItem in selectpickerVm.withDeleteSelectItems | filter: $select.search">
+          {{withDeleteItem.label}}
+        </ui-select-choices>
+      </ui-select>
+      <span class="input-group-btn">
+        <button type="button" ng-click="selectpickerVm.withDeleteItem.selected = undefined"
+               class="btn btn-danger">
+          <span class="glyphicon glyphicon-trash"></span>
+        </button>
+      </span>
     </div>
   </div>
 </div>

src/sass/app/_form.scss

@@ -446,7 +446,7 @@ label.custom-input-danger {
       box-shadow: none;
       border-color: $border;
     }
-    > .btn{
+    > .btn {
       border-radius: 5px 5px 0 0;
     }
     .dropdown-menu.open {
@@ -503,6 +503,12 @@ label.custom-input-danger {
   }
 }
 
+.ui-select-multiple.ui-select-bootstrap {
+
+  min-height: 34px;
+  padding: 4px 3px 0 12px;
+}
+
 .progress {
   background: $progress-background;
 }
@@ -537,19 +543,22 @@ label.custom-input-danger {
   border-bottom-right-radius: 5px;
 }
 
-.with-primary-addon:focus{
+.with-primary-addon:focus {
   border-color: $primary;
 }
-.with-warning-addon:focus{
+
+.with-warning-addon:focus {
   border-color: $warning;
 }
-.with-success-addon:focus{
+
+.with-success-addon:focus {
   border-color: $success;
 }
-.with-danger-addon:focus{
+
+.with-danger-addon:focus {
   border-color: $danger;
 }
 
-.sub-little-text{
+.sub-little-text {
   font-size: 12px;
 }