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();
+ }
+ });
}
}
},