diff --git a/bower.json b/bower.json index ac9879e..917b91e 100644 --- a/bower.json +++ b/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 @@ ] } } -} \ No newline at end of file +} diff --git a/src/app/pages/form/form.module.js b/src/app/pages/form/form.module.js index a2fa969..f8ea5d7 100644 --- a/src/app/pages/form/form.module.js +++ b/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 */ diff --git a/src/app/pages/form/inputs/inputs.html b/src/app/pages/form/inputs/inputs.html index 7d881ac..c7fb0be 100644 --- a/src/app/pages/form/inputs/inputs.html +++ b/src/app/pages/form/inputs/inputs.html @@ -26,6 +26,9 @@ ba-panel-class="with-scroll">
+
+
+
-
-
+
+
+ +
diff --git a/src/app/pages/form/inputs/widgets/oldSelect/OldSelectpickerPanelCtrl.js b/src/app/pages/form/inputs/widgets/oldSelect/OldSelectpickerPanelCtrl.js new file mode 100644 index 0000000..85eb22d --- /dev/null +++ b/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' }, + ]; + + } + +})(); diff --git a/src/app/pages/form/inputs/widgets/oldSelect/select.html b/src/app/pages/form/inputs/widgets/oldSelect/select.html new file mode 100644 index 0000000..1ae43b5 --- /dev/null +++ b/src/app/pages/form/inputs/widgets/oldSelect/select.html @@ -0,0 +1,134 @@ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+ +
+
+
+
+ +
+
+
+ +
+ +
+
+ +
+ +
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ +
+ +
+ +
+ +
+
+
+
diff --git a/src/app/pages/form/inputs/widgets/select/selectpicker.directive.js b/src/app/pages/form/inputs/widgets/oldSelect/selectpicker.directive.js similarity index 98% rename from src/app/pages/form/inputs/widgets/select/selectpicker.directive.js rename to src/app/pages/form/inputs/widgets/oldSelect/selectpicker.directive.js index 22e89b4..a56247f 100644 --- a/src/app/pages/form/inputs/widgets/select/selectpicker.directive.js +++ b/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'; diff --git a/src/app/pages/form/inputs/widgets/select/GroupSelectpickerOptions.js b/src/app/pages/form/inputs/widgets/select/GroupSelectpickerOptions.js new file mode 100644 index 0000000..8ff3acb --- /dev/null +++ b/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; + }; + } +})(); \ No newline at end of file diff --git a/src/app/pages/form/inputs/widgets/select/SelectpickerPanelCtrl.js b/src/app/pages/form/inputs/widgets/select/SelectpickerPanelCtrl.js index 331a8d7..0b83739 100644 --- a/src/app/pages/form/inputs/widgets/select/SelectpickerPanelCtrl.js +++ b/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; + 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'} ]; - 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.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} ]; } - })(); + + diff --git a/src/app/pages/form/inputs/widgets/select/select.html b/src/app/pages/form/inputs/widgets/select/select.html index cafd710..97fc2e3 100644 --- a/src/app/pages/form/inputs/widgets/select/select.html +++ b/src/app/pages/form/inputs/widgets/select/select.html @@ -1,127 +1,124 @@ -
+
- + + + {{$select.selected.label}} + + + + +
-
- -
-
- -
-
- -
- -
-
-
- -
-
-
-
- -
-
+
+ + + {{$select.selected.label}} + + + + +
- + + + {{$select.selected.label}} + + + + +
+ +
- + + + {{$select.selected.label}} + + + + +
-
-
-
- -
-
- -
-
- -
-
-
-
- -
+
+ + + {{$select.selected.name}} + + + + + +
-
- -
-
- -
+
+ + + {{$item.label}} + + + {{multipleItem.label}} + + +
+ + +
+
+ + + + {{$item.label}} + + + {{withDeleteItem.label}} + + + + +
diff --git a/src/sass/app/_form.scss b/src/sass/app/_form.scss index 0ff4447..d08e78f 100644 --- a/src/sass/app/_form.scss +++ b/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; }