[Kimchi-devel] [PATCH] Add template clone support

[Hongliang Wang]

On 04/03/2014 01:56 AM, Adam King wrote:
> Add support for cloning templates to the clone tab.
>
> Signed-off-by: Adam King <rak at linux.vnet.ibm.com>
> ---
>   ui/js/src/kimchi.api.js           | 11 +++++++++++
>   ui/js/src/kimchi.template_main.js | 16 ++++++++++++++--
>   ui/pages/tabs/templates.html.tmpl |  1 +
>   3 files changed, 26 insertions(+), 2 deletions(-)
>
> diff --git a/ui/js/src/kimchi.api.js b/ui/js/src/kimchi.api.js
> index 0c5c790..376bc86 100644
> --- a/ui/js/src/kimchi.api.js
> +++ b/ui/js/src/kimchi.api.js
> @@ -143,6 +143,17 @@ var kimchi = {
>           });
>       },
>
> +    cloneTemplate : function(tem, suc, err) {
> +        kimchi.requestJSON({
> +            url : kimchi.url + 'templates/' + encodeURIComponent(tem) + "/clone",
> +            type : 'POST',
> +            contentType : 'application/json',
> +            dataType : 'json',
> +            success : suc,
> +            error : err
> +        });
> +    },
> +
>       listTemplates : function(suc, err) {
>           kimchi.requestJSON({
>               url : kimchi.url + 'templates',
> diff --git a/ui/js/src/kimchi.template_main.js b/ui/js/src/kimchi.template_main.js
> index 5de6e8c..9f19a5c 100644
> --- a/ui/js/src/kimchi.template_main.js
> +++ b/ui/js/src/kimchi.template_main.js
> @@ -25,22 +25,34 @@ kimchi.doListTemplates = function() {
>                   listHtml += kimchi.template(templateHtml, value);
>               });
>               $('#templateList').html(listHtml);
> -            kimchi.bindClick();
> +            kimchi.templateBindClick();
>           } else {
>               $('#templateList').html('');
>               $('#noTemplates').show();
>           }

> +        $('html').css('cursor', 'auto');
Best practices suggest avoid set CSS values in JS code so we can 
separate view styles from behavior. For example, a CSS class 
"processing" or "loading" or anything else can be introduced with:

.processing {
   cursor: wait;
}

and use:

$('html').addClass('processing'); when loading and 
$('html').removeClass('processing'); when it's finished.

   With this, we can be closer to:
   HTML => content / data
   CSS => view / style / themes
   JS => behavior / interaction
>       }, function(err) {
>           kimchi.message.error(err.responseJSON.reason);
> +        $('html').css('cursor', 'auto');
>       });
>   };
>
> -kimchi.bindClick = function() {
> +kimchi.templateBindClick = function() {
>       $('.template-edit').on('click', function(event) {
>           var templateName = $(this).data('template');
>           kimchi.selectedTemplate = templateName;
>           kimchi.window.open("template-edit.html");
>       });
> +    $('.template-clone').on('click', function(event) {
> +        kimchi.selectedTemplate = $(this).data('template');
> +        $('html').css('cursor', 'wait');

> +        kimchi.cloneTemplate(kimchi.selectedTemplate , function() {
white space between kimchi.selectedTemlate and ",".
> +                kimchi.doListTemplates();
Indent.
> +            }, function(err) {
> +                kimchi.message.error(err.responseJSON.reason);
> +                kimchi.doListTemplates();
> +            });
> +    });
>       $('.template-delete').on('click', function(event) {
>           var $template = $(this);
>           var settings = {
> diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl
> index b6edbaf..6ae6640 100644
> --- a/ui/pages/tabs/templates.html.tmpl
> +++ b/ui/pages/tabs/templates.html.tmpl
> @@ -43,6 +43,7 @@
>                   <span class="text">$_("Actions")</span><span class="arrow"></span>
>                   <div class="popover actionsheet right-side" style="width: 250px">
>                       <a class="button-big template-edit" data-template='{name}'>$_("Edit")</a>
> +                    <a class="button-big template-clone" data-template='{name}'>$_("Clone")</a>
>                       <a class="button-big red template-delete" data-template='{name}'>$_("Delete")</a>
>                   </div>
>               </div>