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",
@@ -101,4 +102,4 @@
       ]
     }
   }
-}
+}

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 ng-include="'app/pages/form/inputs/widgets/switch/switch.html'"></div>
+      <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/select/selectpicker.directive.js → 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
- * created on 22.04.2016
+ * @author p.maslava
+ * 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;
+    vm.disabled = undefined;
+
 
+    vm.standardItem = {};
     vm.standardSelectItems = [
-      { label: 'Option 1', value: 1 },
-      { label: 'Option 2', value: 2 },
-      { label: 'Option 3', value: 3 },
-      { label: 'Option 4', value: 4 },
+      {label: 'Option 1', value: 1},
+      {label: 'Option 2', value: 2},
+      {label: 'Option 3', value: 3},
+      {label: 'Option 4', value: 4}
     ];
 
+    vm.withSearchItem = {};
+
     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 },
+      {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.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' },
+      {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.groupedByItem = {};
+    vm.groupedBySelectItems = [
+      {name: 'Adam', country: 'United States'},
+      {name: 'Amalie', country: 'Argentina'},
+      {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}
+    ];
+
+  }
 })();
+
+