Detail view actions: Add support listView selection
Adds a new dialog 'cloudStack.dialog.listView'
-- Supports displaying a list view in a popup dialog, for selecting
items for an action (i.e., selecting VMs for an LB rule). Arguments
are a list view object and the 'type' of selection: either
'checkbox' or 'radio'
Example:
detailView: {
name: 'Internal Lb details',
actions: {
assignVm: {
label: 'Assign VMs to LB',
messages: {
notification: function(args) { return 'Assign VM to internal LB rule'; }
},
listView: $.extend(true, {}, cloudStack.sections.instances.listView, {
type: 'checkbox',
filters: false
}),
action: function(args) {
args.response.success();
},
notification: {
poll: function(args) {
args.complete();
}
}
}
},
...
}
Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo
Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/dfa93b52
Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/dfa93b52
Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/dfa93b52
Branch: refs/heads/master
Commit: dfa93b52a894930d847b4f39b69be990f2aacd4b
Parents: 41f9a12
Author: Brian Federle <bfede...@gmail.com>
Authored: Tue May 21 15:07:21 2013 -0700
Committer: Brian Federle <bfede...@gmail.com>
Committed: Tue May 21 15:07:21 2013 -0700
----------------------------------------------------------------------
ui/scripts/ui/dialog.js | 92 +++++++++++++++++++++++++++++-
ui/scripts/ui/widgets/detailView.js | 16 ++++-
2 files changed, 103 insertions(+), 5 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/dfa93b52/ui/scripts/ui/dialog.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js
index bb372fb..45f928e 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 = $('<div>');
+
+ 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 = $('<div>').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);
http://git-wip-us.apache.org/repos/asf/cloudstack/blob/dfa93b52/ui/scripts/ui/widgets/detailView.js
----------------------------------------------------------------------
diff --git a/ui/scripts/ui/widgets/detailView.js
b/ui/scripts/ui/widgets/detailView.js
index a721a44..11e82b3 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();
+ }
+ });
}
}
},
