[Kimchi-devel] [PATCH v2 4/4] Implement UI Part to Properly Handle Report Name Existence

[Wen Wang]

On 06/13/2014 02:15 PM, Hongliang Wang wrote:
> If user provides an existing report name, then tell the error and show
> generate report window to allow the user to enter a new name.
>
> Signed-off-by: Hongliang Wang <hlwang at linux.vnet.ibm.com>
> ---
>   ui/js/src/kimchi.report_add_main.js | 80 ++++++++++++++++++++-----------------
>   1 file changed, 44 insertions(+), 36 deletions(-)
>
> diff --git a/ui/js/src/kimchi.report_add_main.js b/ui/js/src/kimchi.report_add_main.js
> index 28c3e66..269e9d5 100644
> --- a/ui/js/src/kimchi.report_add_main.js
> +++ b/ui/js/src/kimchi.report_add_main.js
> @@ -17,9 +17,30 @@
>    */
>   kimchi.report_add_main = function() {
>       var reportGridID = 'available-reports-grid';
> +    var generateButton = $('#' + reportGridID + '-generate-button');
>       var addReportForm = $('#form-report-add');
>       var submitButton = $('#button-report-add');
>       var nameTextbox = $('input[name="name"]', addReportForm);
> +    if(kimchi._reportName) {
> +        nameTextbox.val(kimchi._reportName);
> +        kimchi._reportName = null;
> +        delete kimchi._reportName;
> +    }
> +    nameTextbox.select();
> +
> +    /*
> +     * FIXME:
> +     *   Currently, all buttons will be disabled when a report is being
> +     * generated. Though operations on existing debug reports shouldn't
> +     * be affected when a new one is being generated, and it's expected
> +     * to enable Rename/Remove/Download Buttons whenever users click an
> +     * existing report row in the grid.
> +     */
> +    var disableToolbarButtons = function(event, toEnable) {
> +        $('#' + reportGridID + ' .grid-toolbar button')
> +            .prop('disabled', !toEnable);
> +    };
> +
>       var submitForm = function(event) {
>           if(submitButton.prop('disabled')) {
>               return false;
> @@ -32,43 +53,25 @@ kimchi.report_add_main = function() {
>           }
>           var formData = addReportForm.serializeObject();
>           kimchi.window.close();
> -        $('#' + reportGridID + '-generate-button').prop('disabled',true);
> -        $('#' + reportGridID + '-remove-button').prop('disabled',true);
> -        $('#' + reportGridID + '-download-button').prop('disabled',true);
> -        $('#' + reportGridID + '-rename-button').prop('disabled',true);
> -        $('.grid-body table tr', '#' + reportGridID).click(function() {
> -            $('#' + reportGridID + '-remove-button').prop('disabled',true);
> -            $('#' + reportGridID + '-download-button').prop('disabled',true);
> -            $('#' + reportGridID + '-rename-button').prop('disabled',true);
> -        });
> -        var textboxValue = $('#report-name-textbox').val();
> -        if (textboxValue != "") {
> -            $('.grid-body-view table', '#' + reportGridID).prepend(
> -                '<tr>' +
> -                    '<td>' +
> -                        '<div class="cell-text-wrapper">' + textboxValue + '</div>' +
> -                    '</td>' +
> -                    '<td id ="id-debug-img">' +
> -                        '<div class="cell-text-wrapper">' + i18n['KCHDR6007M'] + '</div>' +
> -                    '</td>' +
> -                '</tr>'
> -            );
> -        }
> -        else {
> -            $('.grid-body-view table', '#' + reportGridID).prepend(
> -                '<tr>' +
> -                    '<td>' +
> -                        '<div class="cell-text-wrapper">' + i18n['KCHDR6012M'] + '</div>' +
> -                    '</td>' +
> -                    '<td id ="id-debug-img">' +
> -                        '<div class="cell-text-wrapper">' + i18n['KCHDR6007M'] + '</div>' +
> -                    '</td>' +
> -                '</tr>'
> -            );
> -        }
> +        disableToolbarButtons();
> +        $('.grid-body table tr', '#' + reportGridID)
> +            .on('click', disableToolbarButtons);
> +        var reportName = nameTextbox.val() || i18n['KCHDR6012M'];
> +        $('.grid-body-view table tbody', '#' + reportGridID).prepend(
> +            '<tr>' +
> +                '<td>' +
> +                    '<div class="cell-text-wrapper">' + reportName + '</div>' +
> +                '</td>' +
> +                '<td id ="id-debug-img">' +
> +                    '<div class="cell-text-wrapper">' + i18n['KCHDR6007M'] + '</div>' +
> +                '</td>' +
> +            '</tr>'
> +        );
>           kimchi.createReport(formData, function(result) {
>               $('.grid-body-view table tr:first-child', '#' + reportGridID).remove();
> -            $('#' + reportGridID + '-generate-button').prop('disabled',false);
> +            $('.grid-body table tr', '#' + reportGridID)
> +                .off('click', disableToolbarButtons);
> +            generateButton.prop('disabled', false);
>               kimchi.topic('kimchi/debugReportAdded').publish({
>                   result: result
>               });
> @@ -81,8 +84,13 @@ kimchi.report_add_main = function() {
>               else {
>                   var errText = result['responseJSON']['reason'];
>               }
> -            result && kimchi.message.error(errText)
> +            result && kimchi.message.error(errText);
>               $('.grid-body-view table tr:first-child', '#' + reportGridID).remove();
> +            $('.grid-body table tr', '#' + reportGridID)
> +                .off('click', disableToolbarButtons);
> +            generateButton.prop('disabled', false);
> +            kimchi._reportName = reportName;
> +            $('#' + reportGridID + '-generate-button').click();
This line can be substituted with "generateButton.click" since there is 
such a variable defined to keep the consistence of the code
>           });
>
>           event.preventDefault();