-
Notifications
You must be signed in to change notification settings - Fork 356
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add assign button section to Custom Button Group in GOD
- created assign_button component - added that component to main-custom-button-group-form component - make it work together Fixes https://bugzilla.redhat.com/show_bug.cgi?id=1534529
- Loading branch information
1 parent
d10a6ad
commit 4b8a26a
Showing
6 changed files
with
281 additions
and
16 deletions.
There are no files selected for viewing
153 changes: 153 additions & 0 deletions
153
app/assets/javascripts/components/generic_object/assign-buttons.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,153 @@ | ||
| ManageIQ.angular.app.component('assignButtons', { | ||
| bindings: { | ||
| assignedButtons: '<', | ||
| unassignedButtons: '<', | ||
| updateButtons: '<' | ||
| }, | ||
| require: { | ||
| parent: '^^mainCustomButtonGroupForm' | ||
| }, | ||
| controllerAs: 'vm', | ||
| controller: assignButtonsController, | ||
| templateUrl: '/static/generic_object/assign-buttons.html.haml', | ||
| }); | ||
|
|
||
| function assignButtonsController() { | ||
| var vm = this; | ||
|
|
||
| vm.model = { | ||
| selectedAssignedButtons: [], | ||
| selectedUnassignedButtons: [], | ||
| }; | ||
|
|
||
| function getIndexes(arr, ids) { | ||
| var indexes= []; | ||
| ids.forEach(function (id) { | ||
| var i = arr.findIndex(function(el){ | ||
| return el.id == id; | ||
| }); | ||
| if (i >= 0){ | ||
| indexes.push(i); | ||
| } | ||
| }); | ||
| return indexes; | ||
| }; | ||
|
|
||
| vm.$onInit = function() { | ||
| vm.model.assignedButtons = [].concat(vm.assignedButtons); | ||
| vm.model.unassignedButtons = [].concat(vm.unassignedButtons); | ||
| }; | ||
|
|
||
| function filterIndexes(indexes) { | ||
| if (indexes[0] !== 0) { | ||
| return indexes; | ||
| } | ||
| var previous = 0; | ||
| var filteredIndexes = []; | ||
| indexes.forEach(function(index) { | ||
| if (index !== 0 && index - 1 !== previous) { | ||
| filteredIndexes.push(index); | ||
| } else { | ||
| previous = index; | ||
| } | ||
| }); | ||
| return filteredIndexes; | ||
| }; | ||
|
|
||
| function filterReverseIndexes(indexes, endIndex) { | ||
| if (indexes[0] !== endIndex) { | ||
| return indexes; | ||
| } | ||
| var previous = endIndex; | ||
| var filteredIndexes = []; | ||
| indexes.forEach(function(index) { | ||
| if (index !== endIndex && index + 1 !== previous) { | ||
| filteredIndexes.push(index); | ||
| } else { | ||
| previous = index; | ||
| } | ||
| }); | ||
| return filteredIndexes; | ||
| }; | ||
|
|
||
| function copyData() { | ||
| vm.model.assignedButtons = [].concat(vm.assignedButtons); | ||
| vm.model.unassignedButtons = [].concat(vm.unassignedButtons); | ||
| }; | ||
|
|
||
| vm.leftButtonClicked = function() { | ||
| copyData(); | ||
| var indexes = getIndexes(vm.model.assignedButtons, vm.model.selectedAssignedButtons); | ||
| var movedElements = []; | ||
| indexes.forEach(function(index) { | ||
| movedElements.push(vm.model.assignedButtons[index]); | ||
| }); | ||
| _.remove(vm.model.assignedButtons, function(n) { return movedElements.includes(n) }); | ||
| vm.model.unassignedButtons = vm.model.unassignedButtons.concat( movedElements); | ||
| vm.updateButtons(vm.model.assignedButtons, vm.model.unassignedButtons); | ||
| }; | ||
|
|
||
| vm.rightButtonClicked = function() { | ||
| copyData(); | ||
| var indexes = getIndexes(vm.model.unassignedButtons, vm.model.selectedUnassignedButtons); | ||
| var movedElements = []; | ||
| indexes.forEach(function(index) { | ||
| movedElements.push(vm.model.unassignedButtons[index]); | ||
| }); | ||
| _.remove(vm.model.unassignedButtons, function(n) { return movedElements.includes(n) }); | ||
| vm.model.assignedButtons = vm.model.assignedButtons.concat( movedElements); | ||
| vm.updateButtons(vm.model.assignedButtons, vm.model.unassignedButtons); | ||
| }; | ||
|
|
||
| vm.upButtonClicked = function() { | ||
| copyData(); | ||
| var indexes = getIndexes(vm.model.assignedButtons, vm.model.selectedAssignedButtons); | ||
| indexes = filterIndexes(indexes); | ||
| indexes.forEach(function(index) { | ||
| if (index > 0) { | ||
| var temp = vm.model.assignedButtons[index]; | ||
| vm.model.assignedButtons[index] = vm.model.assignedButtons[index - 1]; | ||
| vm.model.assignedButtons[index - 1] = temp; | ||
| } | ||
| }); | ||
| vm.updateButtons(vm.model.assignedButtons, vm.model.unassignedButtons); | ||
| }; | ||
|
|
||
| vm.downButtonClicked = function() { | ||
| copyData(); | ||
| var indexes = getIndexes(vm.model.assignedButtons, vm.model.selectedAssignedButtons).reverse(); | ||
| indexes = filterReverseIndexes(indexes, vm.model.assignedButtons.length - 1); | ||
| indexes.forEach(function(index) { | ||
| if (index < vm.model.assignedButtons.length - 1) { | ||
| var temp = vm.model.assignedButtons[index]; | ||
| vm.model.assignedButtons[index] = vm.model.assignedButtons[index + 1]; | ||
| vm.model.assignedButtons[index + 1] = temp; | ||
| } | ||
| }); | ||
| vm.updateButtons(vm.model.assignedButtons, vm.model.unassignedButtons); | ||
| }; | ||
|
|
||
| vm.topButtonClicked = function() { | ||
| copyData(); | ||
| var indexes = getIndexes(vm.model.assignedButtons, vm.model.selectedAssignedButtons); | ||
| var movedElements = []; | ||
| indexes.forEach(function(index) { | ||
| movedElements.push(vm.model.assignedButtons[index]); | ||
| }); | ||
| _.remove(vm.model.assignedButtons, function(n) { return movedElements.includes(n) }); | ||
| vm.model.assignedButtons = movedElements.concat( vm.model.assignedButtons); | ||
| vm.updateButtons(vm.model.assignedButtons, vm.model.unassignedButtons); | ||
| }; | ||
|
|
||
| vm.bottomButtonClicked = function() { | ||
| copyData(); | ||
| var indexes = getIndexes(vm.model.assignedButtons, vm.model.selectedAssignedButtons); | ||
| var movedElements = []; | ||
| indexes.forEach(function(index) { | ||
| movedElements.push(vm.model.assignedButtons[index]); | ||
| }); | ||
| _.remove(vm.model.assignedButtons, function(n) { return movedElements.includes(n) }); | ||
| vm.model.assignedButtons = vm.model.assignedButtons.concat(movedElements); | ||
| vm.updateButtons(vm.model.assignedButtons, vm.model.unassignedButtons); | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| .form-horizontal | ||
| %hr | ||
| %h3 | ||
| = _('Assign Buttons') | ||
| #column_lists | ||
| .col-md-5 | ||
| = _('Unassigned:') | ||
| %select{:name => 'unassigned_buttons', | ||
| "ng-model" => "vm.model.selectedUnassignedButtons", | ||
| "ng-options" => "item.id as item.name for item in vm.unassignedButtons", | ||
| :multiple => true, | ||
| :class => "form-control", | ||
| :style => "overflow-x: scroll;", | ||
| :size => 8, | ||
| :id => "available_fields"} | ||
| .col-md-1{:style => "padding: 10px"} | ||
| .spacer | ||
| .spacer | ||
| %button.btn.btn-default.btn-block{:title => _("Move selected fields right"), | ||
| "ng-click" => "vm.rightButtonClicked()" } | ||
| %i.fa.fa-angle-right.fa-lg.hidden-xs.hidden-sm | ||
| %i.fa.fa-lg.fa-angle-right.fa-rotate-90.hidden-md.hidden-lg | ||
| %button.btn.btn-default.btn-block{:title => _("Move selected fields left"), | ||
| "ng-click" => "vm.leftButtonClicked()"} | ||
| %i.fa.fa-angle-left.fa-lg.hidden-xs.hidden-sm | ||
| %i.fa.fa-lg.fa-angle-left.fa-rotate-90.hidden-md.hidden-lg | ||
| .spacer | ||
| .col-md-5 | ||
| = _('Selected:') | ||
| %select{:name => 'assigned_buttons', | ||
| "ng-model" => "vm.model.selectedAssignedButtons", | ||
| "ng-options" => "item.id as item.name for item in vm.assignedButtons", | ||
| :multiple => true, | ||
| :class => "form-control", | ||
| :style => "overflow-x: scroll;", | ||
| :size => 8, | ||
| :id => "selected_fields"} | ||
| .col-md-1{:style => "padding: 10px"} | ||
| .spacer | ||
| .spacer | ||
| %button.btn.btn-default.btn-block{:title => _("Move selected fields to top"), | ||
| "ng-enabled" => "vm.moveButtonsEnabled()", | ||
| "ng-click" => "vm.topButtonClicked()"} | ||
| %i.fa.fa-angle-double-up.fa-lg | ||
| %button.btn.btn-default.btn-block{:title => _("Move selected fields up"), | ||
| :enabled => "vm.moveButtonsEnabled()", | ||
| "ng-click" => "vm.upButtonClicked()"} | ||
| %i.fa.fa-angle-up.fa-lg | ||
| %button.btn.btn-default.btn-block{:title => _("Move selected fields down"), | ||
| "ng-enabled" => "vm.moveButtonsEnabled()", | ||
| "ng-click" => "vm.downButtonClicked()"} | ||
| %i.fa.fa-angle-down.fa-lg | ||
| %button.btn.btn-default.btn-block{:title => _("Move selected fields to bottom"), | ||
| "ng-enabled" => "vm.moveButtonsEnabled()", | ||
| "ng-click" => "vm.bottomButtonClicked()"} | ||
| %i.fa.fa-angle-double-down | ||
| .spacer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters