diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js index bb372fbf3d6..45f928e38a9 100644 --- a/ui/scripts/ui/dialog.js +++ b/ui/scripts/ui/dialog.js @@ -14,7 +14,7 @@ // KIND, either express or implied. See the License for the // specific language governing permissions and limitations // under the License. -(function($, cloudStack) { +(function($, cloudStack, _l) { cloudStack.dialog = { /** * Error message form @@ -506,6 +506,94 @@ } }, + // Dialog with list view selector + listView: function(args) { + var listView = args.listView; + var after = args.after; + var context = args.context; + var $listView = $('
'); + + listView.actions = { + select: { + label: _l('label.select.instance'), + type: listView.type, + action: { + uiCustom: function(args) { + var $item = args.$item; + var $input = $item.find('td.actions input:visible'); + + if ($input.attr('type') == 'checkbox') { + if ($input.is(':checked')) + $item.addClass('multi-edit-selected'); + else + $item.removeClass('multi-edit-selected'); + } else { + $item.siblings().removeClass('multi-edit-selected'); + $item.addClass('multi-edit-selected'); + } + } + } + } + }; + + // Init list view + $listView = $('
').listView({ + context: context, + uiCustom: true, + listView: listView + }); + + // Change action label + $listView.find('th.actions').html(_l('label.select')); + + $listView.dialog({ + dialogClass: 'multi-edit-add-list panel', + width: 825, + title: _l('Select VM'), + buttons: [ + { + text: _l('label.apply'), + 'class': 'ok', + click: function() { + if (!$listView.find( + 'input[type=radio]:checked, input[type=checkbox]:checked' + ).size()) { + cloudStack.dialog.notice({ message: _l('message.select.instance')}); + + return false; + } + + after({ + context: $.extend(true, {}, context, { + instances: $listView.find('tr.multi-edit-selected').map(function(index, row) { + var $row = $(row); + + return $row.data('json-obj'); + }) + }) + }); + + $listView.remove(); + + $('div.overlay').remove(); + } + }, + { + text: _l('label.cancel'), + 'class': 'cancel', + click: function() { + $listView.fadeOut(function() { + $listView.remove(); + }); + $('div.overlay').fadeOut(function() { + $('div.overlay').remove(); + }); + } + } + ] + }).parent('.ui-dialog').overlay(); + }, + /** * to change a property(e.g. validation) of a createForm field after a createForm is rendered */ @@ -612,4 +700,4 @@ return false; } }; -})(window.jQuery, window.cloudStack); +})(window.jQuery, window.cloudStack, _l); diff --git a/ui/scripts/ui/widgets/detailView.js b/ui/scripts/ui/widgets/detailView.js index a721a44ec05..11e82b35f1c 100644 --- a/ui/scripts/ui/widgets/detailView.js +++ b/ui/scripts/ui/widgets/detailView.js @@ -70,7 +70,8 @@ action.notification : {}; var messages = action.messages; var id = args.id; - var context = args.context ? args.context : $detailView.data('view-args').context; + var context = $.extend(true, {}, + args.context ? args.context : $detailView.data('view-args').context); var _custom = $detailView.data('_custom'); var customAction = action.action.custom; var noAdd = action.noAdd; @@ -273,7 +274,7 @@ notification.desc = messages.notification(messageArgs); notification.section = 'instances'; - if (!action.createForm) { + if (!action.createForm && !action.listView) { if (messages && messages.confirm) { cloudStack.dialog.confirm({ message: messages.confirm(messageArgs), @@ -286,7 +287,7 @@ } else { performAction({ id: id }); } - } else { + } else if (action.createForm) { cloudStack.dialog.createForm({ form: action.createForm, after: function(args) { @@ -301,6 +302,15 @@ }, context: context }); + } else if (action.listView) { + cloudStack.dialog.listView({ + context: context, + listView: action.listView, + after: function(args) { + context = args.context; + performAction(); + } + }); } } },