[Kimchi-devel] [PATCH v2] [Kimchi] Fixed minor UI issues when saving edited template

[Lucio Correia]

Reviewed-by: Lucio Correia <luciojhc at linux.vnet.ibm.com>
Tested-by: Lucio Correia <luciojhc at linux.vnet.ibm.com>

On 04-01-2016 12:38, sguimaraes943 at gmail.com wrote:
> From: samhenri <samuel.guimaraes at eldorado.org.br>
>
> Added .wok-loading-icon to "Save" button and disabled all fields when the request is sent to server. If the request is successful the modal window closes and if it throws any error message the input fiels are enabled again.
>
> Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
> ---
>   ui/js/src/kimchi.template_edit_main.js | 11 +++++++++++
>   ui/pages/i18n.json.tmpl                |  1 +
>   ui/pages/template-edit.html.tmpl       |  4 ++--
>   3 files changed, 14 insertions(+), 2 deletions(-)
>
> diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
> index ce60af6..f120e91 100644
> --- a/ui/js/src/kimchi.template_edit_main.js
> +++ b/ui/js/src/kimchi.template_edit_main.js
> @@ -282,6 +282,12 @@ kimchi.template_edit_main = function() {
>       kimchi.retrieveTemplate(kimchi.selectedTemplate, initTemplate);
>
>       $('#tmpl-edit-button-save').on('click', function() {
> +        $button = $(this);
> +        $button.html('<span class="wok-loading-icon" /> '+i18n['KCHAPI6010M']);
> +        $('.modal input[type="text"]').prop('disabled', true);
> +        $('.modal input[type="checkbox"]').prop('disabled', true);
> +        $('.modal select').prop('disabled', true);
> +        $('.modal .selectpicker').addClass('disabled');
>           var editableFields = [ 'name', 'memory', 'graphics'];
>           var data = {};
>           var disks = $('.template-tab-body .item', '#form-template-storage');
> @@ -344,6 +350,11 @@ kimchi.template_edit_main = function() {
>               kimchi.doListTemplates();
>               wok.window.close();
>           }, function(err) {
> +            $button.html(i18n['KCHAPI6007M']);
> +            $('.modal input[type="text"]').prop('disabled', false);
> +            $('.modal input[type="checkbox"]').prop('disabled', false);
> +            $('.modal select').prop('disabled', false);
> +            $('.modal .selectpicker').removeClass('disabled');
>               wok.message.error(err.responseJSON.reason,'#alert-modal-container');
>           });
>       });
> diff --git a/ui/pages/i18n.json.tmpl b/ui/pages/i18n.json.tmpl
> index 11e6a1c..c1979c6 100644
> --- a/ui/pages/i18n.json.tmpl
> +++ b/ui/pages/i18n.json.tmpl
> @@ -43,6 +43,7 @@
>       "KCHAPI6007M": "$_("Save")",
>       "KCHAPI6008M": "$_("Creating...")",
>       "KCHAPI6009M": "$_("Cloning...")",
> +    "KCHAPI6010M": "$_("Saving...")",
>
>       "KCHTMPL6001W": "$_("No ISO found")",
>
> diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl
> index 2941b30..478ccd5 100644
> --- a/ui/pages/template-edit.html.tmpl
> +++ b/ui/pages/template-edit.html.tmpl
> @@ -28,7 +28,7 @@
>                   <h4 class="modal-title">$_("Edit Template")</h4>
>               </div>
>               <div class="modal-body">
> -            <span id="alert-modal-container"></span>
> +                <span id="alert-modal-container"></span>
>                   <div id="edit-template-tabs">
>                       <input type="hidden" id="template-name" name="templateName" />
>                       <ul class="nav nav-tabs" role="tablist">
> @@ -149,7 +149,7 @@
>                   </div>
>       </div>
>       <div class="modal-footer">
> -            <a id="tmpl-edit-button-save" class="btn btn-default" href="javascript:void(0);">$_("Save")</a>
> +            <button id="tmpl-edit-button-save" class="btn btn-default">$_("Save")</button>
>               <button class="btn btn-default" type="button" data-dismiss="modal">$_("Cancel")</button>
>       </div>
>   </div>
>


-- 
Lucio Correia
Software Engineer
IBM LTC Brazil