Repository: cloudstack Updated Branches: refs/heads/saml2 d8aee7196 -> 54986d58a (forced update)
GUI changes to leverage a new control for storage tags Project: http://git-wip-us.apache.org/repos/asf/cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/cloudstack/commit/fd6d083a Tree: http://git-wip-us.apache.org/repos/asf/cloudstack/tree/fd6d083a Diff: http://git-wip-us.apache.org/repos/asf/cloudstack/diff/fd6d083a Branch: refs/heads/saml2 Commit: fd6d083ad649af0fee64d0c70be0227b5504fb00 Parents: 34b698d Author: seif <s...@gmail.com> Authored: Thu Aug 14 15:43:06 2014 -0600 Committer: Mike Tutkowski <mike.tutkow...@solidfire.com> Committed: Sun Aug 17 17:18:51 2014 -0600 ---------------------------------------------------------------------- ui/lib/jquery.tokeninput.js | 3 +- ui/scripts/sharedFunctions.js | 50 +++++++++++++++++++ ui/scripts/system.js | 34 ++++++++++++- ui/scripts/ui/dialog.js | 32 ------------ ui/scripts/ui/widgets/detailView.js | 83 +++++++++++++++++++++++++++++++- 5 files changed, 166 insertions(+), 36 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/cloudstack/blob/fd6d083a/ui/lib/jquery.tokeninput.js ---------------------------------------------------------------------- diff --git a/ui/lib/jquery.tokeninput.js b/ui/lib/jquery.tokeninput.js index 1a684d2..638ce68 100644 --- a/ui/lib/jquery.tokeninput.js +++ b/ui/lib/jquery.tokeninput.js @@ -206,6 +206,7 @@ $.TokenList = function (input, url_or_data, settings) { outline: "none" }) .attr("id", settings.idPrefix + input.id) + .attr("name", settings.idPrefix + input.id) .focus(function () { if (settings.tokenLimit === null || settings.tokenLimit !== token_count) { show_dropdown_hint(); @@ -218,7 +219,7 @@ $.TokenList = function (input, url_or_data, settings) { if ((lastChar === ',' || lastChar === ' ') && ($.trim($(this).val()).length >= 1)) { - var custom_token = { id : $.trim($(this).val().substring(0, longueur - 1)), name : $(this).val().substring(0, longueur - 1) }; + var custom_token = { id : $.trim($(this).val().substring(0, longueur - 1)), name : $.trim($(this).val().substring(0, longueur - 1)) }; add_token(custom_token); $(this).val(""); http://git-wip-us.apache.org/repos/asf/cloudstack/blob/fd6d083a/ui/scripts/sharedFunctions.js ---------------------------------------------------------------------- diff --git a/ui/scripts/sharedFunctions.js b/ui/scripts/sharedFunctions.js index e8c4fcb..bb2d596 100644 --- a/ui/scripts/sharedFunctions.js +++ b/ui/scripts/sharedFunctions.js @@ -49,6 +49,56 @@ var md5HashedLogin = false; var pageSize = 20; //var pageSize = 1; //for testing only +function to_json_array(str) { + var simple_array = str.split(","); + var json_array = []; + + $.each(simple_array, function(index, value) { + if ($.trim(value).length > 0) { + var obj = { + id: value, + name: value + }; + + json_array.push(obj); + } + }); + + return json_array; +} + +function _tag_equals(tag1, tag2) { + return (tag1.name == tag2.name) && (tag1.id == tag2.id); +} + +function _tag_array_contains(tag, tags) +{ + for (var i = 0; i < tags.length; i++) + { + if (_tag_equals(tags[i], tag)) return true; + } + + return false; +} + +function unique_tags(tags) +{ + var unique = []; + + if (tags != null) + { + for (var i = 0; i < tags.length; i++) + { + if (!_tag_array_contains(tags[i], unique)) + { + unique.push(tags[i]); + } + } + } + + return unique; +} + //async action var pollAsyncJobResult = function(args) { $.ajax({ http://git-wip-us.apache.org/repos/asf/cloudstack/blob/fd6d083a/ui/scripts/system.js ---------------------------------------------------------------------- diff --git a/ui/scripts/system.js b/ui/scripts/system.js index 5c49a1a..db1629f 100644 --- a/ui/scripts/system.js +++ b/ui/scripts/system.js @@ -16901,7 +16901,7 @@ if (item != null) { - tags = $.map(item, function (tag) { + tags = $.map(item, function(tag) { return { id: tag.name, name: tag.name @@ -17248,7 +17248,37 @@ }, tags: { label: 'label.storage.tags', - isEditable: true + isTokenInput : true, + isEditable: true, + dataProvider: function(args) { + $.ajax({ + url: createURL("listStorageTags"), + dataType: "json", + success: function(json) { + var item = json.liststoragetagsresponse.storagetag; + var tags = []; + + if (item != null) + { + tags = $.map(item, function(tag) { + return { + id: tag.name, + name: tag.name + }; + }); + } + + args.response.success({ + data: tags + }); + }, + error: function (XMLHttpResponse) { + var errorMsg = parseXMLHttpResponse(XMLHttpResponse); + + args.response.error(errorMsg); + } + }); + } }, zonename: { label: 'label.zone' http://git-wip-us.apache.org/repos/asf/cloudstack/blob/fd6d083a/ui/scripts/ui/dialog.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js index f2ba5c1..87866d5 100644 --- a/ui/scripts/ui/dialog.js +++ b/ui/scripts/ui/dialog.js @@ -470,38 +470,6 @@ context: args.context, response: { success: function(args) { - function equals(tag1, tag2) { - return (tag1.name == tag2.name) && (tag1.id == tag2.id); - } - - function contains(tag, tags) - { - for (var i = 0; i < tags.length; i++) - { - if (equals(tags[i], tag)) return true; - } - - return false; - } - - function unique_tags(tags) - { - var unique = []; - - if (tags != null) - { - for (var i = 0; i < tags.length; i++) - { - if (!contains(tags[i], unique)) - { - unique.push(tags[i]); - } - } - } - - return unique; - } - $input.tokenInput(unique_tags(args.data), { theme: "facebook", preventDuplicates: true }); } } http://git-wip-us.apache.org/repos/asf/cloudstack/blob/fd6d083a/ui/scripts/ui/widgets/detailView.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/widgets/detailView.js b/ui/scripts/ui/widgets/detailView.js index ed51fad..33d0d14 100644 --- a/ui/scripts/ui/widgets/detailView.js +++ b/ui/scripts/ui/widgets/detailView.js @@ -437,6 +437,7 @@ */ edit: function($detailView, args) { $detailView.addClass('edit-mode'); + var token_value = ""; if ($detailView.find('.button.done').size()) return false; @@ -472,6 +473,8 @@ var convertInputs = function($inputs) { // Save and turn back into labels + var $token; + var tags_value = ""; $inputs.each(function() { if ($(this).closest('.tagger').size()) return true; @@ -479,9 +482,19 @@ var $value = $input.closest('td.value span'); if ($input.is('input[type=text]')) + { + if ($input.attr('name') === "token-input-") + { + $token = $value; + } + else if ($input.attr('name') === "tags") + { + tags_value = $input.attr('value'); + } $value.html(_s( $input.attr('value') )); + } else if ($input.is('input[type=password]')) { $value.html(''); } else if ($input.is('input[type=checkbox]')) { @@ -496,6 +509,8 @@ $value.data('detail-view-selected-option', _s($input.find('option:selected').val())); } }); + + $token.html(_s(tags_value)); }; var removeEditForm = function() { @@ -523,6 +538,11 @@ var $value = $input.closest('td.value span'); var originalValue = $input.data('original-value'); + if ($input.attr('id') === 'token-input-') + { + originalValue = token_value; + } + $value.html(_s(originalValue)); }); @@ -550,6 +570,7 @@ } }); + data['token-input-'] = data['tags']; $editButton.fadeOut('fast', function() { $editButton.remove(); }); @@ -652,6 +673,7 @@ // Turn into form field var selectData = $value.data('detail-view-editable-select'); var isBoolean = $value.data('detail-view-editable-boolean'); + var isTokenInput = $value.data('detail-view-is-TokenInput'); var data = !isBoolean ? cloudStack.sanitizeReverse($value.html()) : $value.data('detail-view-boolean-value'); var rules = $value.data('validation-rules') ? $value.data('validation-rules') : {}; var isPassword = $value.data('detail-view-is-password'); @@ -689,6 +711,54 @@ checked: data }) ); + } else if (isTokenInput) { // jquery.tokeninput.js + function to_json_array(str) { + var simple_array = str.split(","); + var json_array = []; + + $.each(simple_array, function(index, value) { + if ($.trim(value).length > 0) + { + var obj = { + id : value, + name : value + }; + + json_array.push(obj); + } + }); + + return json_array; + } + + var existing_tags = to_json_array(data); + + isAsync = true; + + selectArgs = { + context: $detailView.data('view-args').context, + response: { + success: function(args) { + $input.tokenInput(unique_tags(args.data), + { + theme: "facebook", + preventDuplicates: true, + prePopulate: existing_tags, + processPrePopulate: true + }); + } + } + }; + + $input = $('<input>').attr({ + name: name, + type: 'text', + value: data + }).data('original-value', data); + + $value.append($input); + token_value = data; + $value.data('value_token').dataProvider(selectArgs); } else { // Text input $value.append( @@ -1035,9 +1105,20 @@ // Set up editable metadata if (typeof(value.isEditable) == 'function') + { $value.data('detail-view-is-editable', value.isEditable(context)); - else //typeof(value.isEditable) == 'boolean' or 'undefined' + } + else // typeof(value.isEditable) == 'boolean' or 'undefined' + { $value.data('detail-view-is-editable', value.isEditable); + + if (value.isTokenInput) + { + $value.data('detail-view-is-TokenInput', true); + $value.data('value_token', value); + } + } + if (value.select) { value.selected = $value.html();
