CloudStack-965: When a detailview action is prohibited, the operation dialog box should not show up in the mean time
Project: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/repo Commit: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/commit/76b28805 Tree: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/tree/76b28805 Diff: http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/diff/76b28805 Branch: refs/heads/ui-plugins Commit: 76b28805e6386b22efa7dcb710317d55996e79c1 Parents: 0ab39fd Author: Isaac Chiang <[email protected]> Authored: Sat Jan 26 23:46:44 2013 +0530 Committer: Pranav Saxena <[email protected]> Committed: Sat Jan 26 23:46:44 2013 +0530 ---------------------------------------------------------------------- ui/scripts/ui/dialog.js | 335 +++++++++++++++++++++++------------------- 1 files changed, 181 insertions(+), 154 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/incubator-cloudstack/blob/76b28805/ui/scripts/ui/dialog.js ---------------------------------------------------------------------- diff --git a/ui/scripts/ui/dialog.js b/ui/scripts/ui/dialog.js index 5236bb6..88dba3f 100644 --- a/ui/scripts/ui/dialog.js +++ b/ui/scripts/ui/dialog.js @@ -57,22 +57,80 @@ var fields = $.map(args.form.fields, function(value, key) { return key; }) - - $(fields).each(function() { + + var ret = function() { + return $formContainer.dialog({ + dialogClass: 'create-form', + closeOnEscape: false, + draggable: false, + width: 400, + title: _l(args.form.title), + open: function() { + if (args.form.preFilter) { + args.form.preFilter({ $form: $form, context: args.context }); + } + }, + buttons: [ + { + text: createLabel ? createLabel : _l('label.ok'), + 'class': 'ok', + click: function() { + if (!complete($formContainer)) { return false; } + + $('div.overlay').remove(); + $('.tooltip-box').remove(); + $formContainer.remove(); + $(this).dialog('destroy'); + + $('.hovered-elem').hide(); + + return true; + } + }, + { + text: _l('label.cancel'), + 'class': 'cancel', + click: function() { + $('div.overlay').remove(); + $('.tooltip-box').remove(); + $formContainer.remove(); + $(this).dialog('destroy'); + + $('.hovered-elem').hide(); + } + } + ] + }).closest('.ui-dialog').overlay(); + }; + + var isLastAsync = function(idx) { + for(var i = idx+1; i < $(fields).length ; i++) { + var f = args.form.fields[$(fields).get(i)]; + if(f.select || f.dynamic){ + return false; + } + } + return true; + }; + + var isAsync = false; + var isNoDialog = args.noDialog ? args.noDialog : false; + + $(fields).each(function(idx, element) { var key = this; var field = args.form.fields[key]; var $formItem = $('<div>') .addClass('form-item') .attr({ rel: key }); - + if(field.isHidden != null) { - if (typeof(field.isHidden) == 'boolean' && field.isHidden == true) - $formItem.hide(); - else if (typeof(field.isHidden) == 'function' && field.isHidden() == true) - $formItem.hide(); + if (typeof(field.isHidden) == 'boolean' && field.isHidden == true) + $formItem.hide(); + else if (typeof(field.isHidden) == 'function' && field.isHidden() == true) + $formItem.hide(); } - + $formItem.appendTo($form); //Handling Escape KeyPress events @@ -96,7 +154,7 @@ closeOnEscape: false }); */ // Label field - + var $name = $('<div>').addClass('name') .appendTo($formItem) .append( @@ -104,9 +162,10 @@ ); // red asterisk - var $astersikSpan = $('<span>').addClass('field-required').html('*'); - $name.find('label').prepend($astersikSpan); - if (field.validation == null || field.validation.required == false) { + var $astersikSpan = $('<span>').addClass('field-required').html('*'); + $name.find('label').prepend($astersikSpan); + + if (field.validation == null || field.validation.required == false) { $astersikSpan.hide(); } @@ -169,6 +228,7 @@ // Determine field type of input if (field.select) { + isAsync = true; selectArgs = { context: args.context, response: { @@ -193,6 +253,10 @@ } $input.trigger('change'); + + if((!isNoDialog) && isLastAsync(idx)) { + ret(); + } } } }; @@ -200,7 +264,7 @@ selectFn = field.select; $input = $('<select>') .attr({ name: key }) - .data('dialog-select-fn', function(args) { + .data('dialog-select-fn', function(args) { selectFn(args ? $.extend(true, {}, selectArgs, args) : selectArgs); }) .appendTo($value); @@ -221,21 +285,21 @@ var dependsOnArgs = {}; $input.find('option').remove(); - + if (!$target.children().size()) return true; dependsOnArgs[dependsOn] = $target.val(); - - selectFn($.extend(selectArgs, dependsOnArgs)); + + selectFn($.extend(selectArgs, dependsOnArgs)); return true; }); if (!$dependsOn.is('select')) { - selectFn(selectArgs); + selectFn(selectArgs); } } else { - selectFn(selectArgs); + selectFn(selectArgs); } } else if (field.isBoolean) { if (field.multiArray) { @@ -263,7 +327,7 @@ } else { // This is mainly for IE compatibility setTimeout(function() { - $input.attr('checked', false); + $input.attr('checked', false); }, 100); } } @@ -277,6 +341,7 @@ }); } } else if (field.dynamic) { + isAsync = true; // Generate a 'sub-create-form' -- append resulting fields $input = $('<div>').addClass('dynamic-input').appendTo($value); $form.hide(); @@ -297,6 +362,9 @@ // Form should be slightly wider $form.closest(':ui-dialog').dialog('option', { position: 'center',closeOnEscape: false }); + if((!isNoDialog) && isLastAsync(idx)) { + ret(); + } } } }); @@ -308,63 +376,64 @@ if (field.defaultValue) { $input.val(field.defaultValue); } - } else if (field.isDatepicker) { //jQuery datepicker - $input = $('<input>').attr({ - name: key, - type: 'text' - }).appendTo($value); - - if (field.defaultValue) { - $input.val(field.defaultValue); - } - if (field.id) { - $input.attr('id', field.id); - } - $input.addClass("disallowSpecialCharacters"); - $input.datepicker({dateFormat: 'yy-mm-dd'}); - - } else if(field.range) { //2 text fields on the same line (e.g. port range: startPort - endPort) - $input = $.merge( - // Range start - $('<input>').attr({ - type: 'text', - name: field.range[0] - }), - - // Range end - $('<input>').attr({ - type: 'text', - name: field.range[1] - }) - ).appendTo( - $('<div>').addClass('range-edit').appendTo($value) - ); - $input.wrap($('<div>').addClass('range-item')); - $input.addClass("disallowSpecialCharacters"); - - } else { //text field - $input = $('<input>').attr({ - name: key, - type: field.password || field.isPassword ? 'password' : 'text' - }).appendTo($value); - - if (field.defaultValue) { - $input.val(field.defaultValue); - } - if (field.id) { - $input.attr('id', field.id); - } + } else if (field.isDatepicker) { //jQuery datepicker + $input = $('<input>').attr({ + name: key, + type: 'text' + }).appendTo($value); + + if (field.defaultValue) { + $input.val(field.defaultValue); + } + if (field.id) { + $input.attr('id', field.id); + } + $input.addClass("disallowSpecialCharacters"); + $input.datepicker({dateFormat: 'yy-mm-dd'}); + + } else if(field.range) {//2 text fields on the same line (e.g. port range: startPort - endPort) + $input = $.merge( + // Range start + $('<input>').attr({ + type: 'text', + name: field.range[0] + }), + + // Range end + $('<input>').attr({ + type: 'text', + name: field.range[1] + }) + ).appendTo( + $('<div>').addClass('range-edit').appendTo($value) + ); + $input.wrap($('<div>').addClass('range-item')); + $input.addClass("disallowSpecialCharacters"); + + } else { //text field + $input = $('<input>').attr({ + name: key, + type: field.password || field.isPassword ? 'password' : 'text' + }).appendTo($value); + + if (field.defaultValue) { + $input.val(field.defaultValue); + } + if (field.id) { + $input.attr('id', field.id); + } $input.addClass("disallowSpecialCharacters"); } - if(field.validation != null) + if(field.validation != null) $input.data('validation-rules', field.validation); - else + else $input.data('validation-rules', {}); var fieldLabel = field.label; + var inputId = $input.attr('id') ? $input.attr('id') : fieldLabel.replace(/\./g,'_'); - + $input.attr('id', inputId); $name.find('label').attr('for', inputId); @@ -380,29 +449,32 @@ attachTo: '.form-item' }); } + + /* $input.blur(function() { console.log('tooltip remove->' + $input.attr('name')); });*/ }); - + + var getFormValues = function() { var formValues = {}; $.each(args.form.fields, function(key) {}); }; - // Setup form validation + // Setup form validation $formContainer.find('form').validate(); - $formContainer.find('input, select').each(function() { + $formContainer.find('input, select').each(function() { if ($(this).data('validation-rules')) { $(this).rules('add', $(this).data('validation-rules')); } - else { - $(this).rules('add', {}); - } - }); - $form.find('select').trigger('change'); - - + else { + $(this).rules('add', {}); + } + }); + $form.find('select').trigger('change'); + + var complete = function($formContainer) { var $form = $formContainer.find('form'); var data = cloudStack.serializeForm($form); @@ -429,93 +501,48 @@ $formContainer: $formContainer, completeAction: complete }; + } else if (!isAsync) { + return ret(); } + }, - return $formContainer.dialog({ - dialogClass: 'create-form', - closeOnEscape: false, - draggable: false, - width: 400, - title: _l(args.form.title), - open: function() { - if (args.form.preFilter) { - args.form.preFilter({ $form: $form, context: args.context }); - } - }, - buttons: [ - { - text: createLabel ? createLabel : _l('label.ok'), - 'class': 'ok', - click: function() { - if (!complete($formContainer)) { return false; } - - $('div.overlay').remove(); - $('.tooltip-box').remove(); - $formContainer.remove(); - $(this).dialog('destroy'); + /** + * to change a property(e.g. validation) of a createForm field after a createForm is rendered + */ + createFormField: { + validation: { + required: { + add: function($formField) { + var $input = $formField.find('input, select'); + var validationRules = $input.data('validation-rules'); - $('.hovered-elem').hide(); + if(validationRules == null || validationRules.required == null || validationRules.required == false) { + $formField.find('.name').find('label').find('span.field-required').css('display', 'inline'); //show red asterisk - return true; + if(validationRules == null) + validationRules = {}; + validationRules.required = true; + $input.data('validation-rules', validationRules); + $input.rules('add', { required: true }); } }, - { - text: _l('label.cancel'), - 'class': 'cancel', - click: function() { - $('div.overlay').remove(); - $('.tooltip-box').remove(); - $formContainer.remove(); - $(this).dialog('destroy'); + remove: function($formField) { + var $input = $formField.find('input, select'); + var validationRules = $input.data('validation-rules'); - $('.hovered-elem').hide(); + if(validationRules != null && validationRules.required != null && validationRules.required == true) { + $formField.find('.name').find('label').find('span.field-required').hide(); //hide red asterisk + delete validationRules.required; + $input.data('validation-rules', validationRules); + + $input.rules('remove', 'required'); + $formField.find('.value').find('label.error').hide(); } } - ] - }).closest('.ui-dialog').overlay(); + } + } }, - /** - * to change a property(e.g. validation) of a createForm field after a createForm is rendered - */ - createFormField: { - validation: { - required: { - add: function($formField) { - var $input = $formField.find('input, select'); - var validationRules = $input.data('validation-rules'); - - if(validationRules == null || validationRules.required == null || validationRules.required == false) { - $formField.find('.name').find('label').find('span.field-required').css('display', 'inline'); //show red asterisk - - if(validationRules == null) - validationRules = {}; - validationRules.required = true; - $input.data('validation-rules', validationRules); - - $input.rules('add', { required: true }); - } - - }, - remove: function($formField) { - var $input = $formField.find('input, select'); - var validationRules = $input.data('validation-rules'); - - if(validationRules != null && validationRules.required != null && validationRules.required == true) { - $formField.find('.name').find('label').find('span.field-required').hide(); //hide red asterisk - - delete validationRules.required; - $input.data('validation-rules', validationRules); - - $input.rules('remove', 'required'); - - $formField.find('.value').find('label.error').hide(); - } - } - } - } - }, - /** * Confirmation dialog */
