etan39
/
cloudstack
mirror of https://github.com/apache/cloudstack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

List view UI: Implement sub-select in widget 

To support sub-select dropdown across all list views (PF,LB,NAT),
refactor 'subselect' option in listView widget, instead of just the
multiEdit.
This commit is contained in:
Brian Federle 2013-03-07 15:38:15 -08:00
parent a48bf0969e
commit be8e427efd
2 changed files with 52 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
ui/scripts/ui/widgets/listView.js
View File

@ -844,7 +844,10 @@
var rows = [];
var reorder = options.reorder;
var detailView = options.detailView;
var uiCustom = $tbody.closest('.list-view').data('view-args').uiCustom;
var $listView = $tbody.closest('.list-view');
var listViewArgs = $listView.data('view-args');
var uiCustom = listViewArgs.uiCustom;
var subselect = uiCustom ? listViewArgs.listView.subselect : null;
if (!data || ($.isArray(data) && !data.length)) {
if (!$tbody.find('tr').size()) {
@ -1041,6 +1044,54 @@
$listView.trigger('cloudStack.listView.addRow', { $tr: $tr });
}
// Add sub-select
if (subselect) {
var $td = $tr.find('td.first');
var $select = $('<div></div>').addClass('subselect').append(
$('<select>')
).hide();
var $selectionArea = $tr.find('td:last').find('input');
$td.append($select);
// Show and populate selection
$selectionArea.change(function() {
if ($(this).is(':checked')) {
// Populate data
subselect({
context: $.extend(true, {}, options.context, {
instances: [$tr.data('json-obj')]
}),
response: {
success: function(args) {
var data = args.data;
if (data.length) {
$(data).map(function(index, item) {
var $option = $('<option>');
$option.attr('value', item.id);
$option.append(item.description);
$option.appendTo($select.find('select'));
});
$select.show();
} else {
$select.hide();
}
}
}
});
if ($(this).is('input[type=radio]')) {
$(this).closest('tr').siblings().find('input[type=radio]').change();
}
} else {
$select.find('option').remove();
$select.hide();
}
});
}
// Add quick view
if (detailView &&
!$.isFunction(detailView) &&

51
ui/scripts/ui/widgets/multiEdit.js
View File

@ -468,57 +468,6 @@
// Change action label
$listView.find('th.actions').html(_l('Select'));
// Add sub-select
if (instances.listView.subselect) {
$listView.bind('cloudStack.listView.addRow', function(event, data) {
var $tr = data.$tr;
var $td = $tr.find('td.first');
var $select = $('<div></div>').addClass('subselect').append(
$('<select>')
).hide();
var $selectionArea = $tr.find('td:last').find('input');
$td.append($select);
// Show and populate selection
$selectionArea.change(function() {
if ($(this).is(':checked')) {
// Populate data
instances.listView.subselect({
context: $.extend(true, {}, context, {
instances: [$tr.data('json-obj')]
}),
response: {
success: function(args) {
var data = args.data;
if (data.length) {
$(data).map(function(index, item) {
var $option = $('<option>');
$option.attr('value', item.id);
$option.append(item.description);
$option.appendTo($select.find('select'));
});
$select.show();
} else {
$select.hide();
}
}
}
});
if ($(this).is('input[type=radio]')) {
$(this).closest('tr').siblings().find('input[type=radio]').change();
}
} else {
$select.find('option').remove();
$select.hide();
}
});
});
}
var $dataList = $listView.addClass('multi-edit-add-list').dialog({
dialogClass: 'multi-edit-add-list panel',
width: 825,