[cloudstack] branch master updated: ui: Fix behavior of multiselect in list view (#3161)

[ro...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack.git


The following commit(s) were added to refs/heads/master by this push:
     new 2e2b670  ui: Fix behavior of multiselect in list view (#3161)
2e2b670 is described below

commit 2e2b6700a5a17aed2a97577c8bcec9941c30112d
Author: Philipp Bankonier <ph...@gmail.com>
AuthorDate: Tue Mar 26 08:41:41 2019 +0100

    ui: Fix behavior of multiselect in list view (#3161)
    
    Hide multiselectaction buttons when selection is resetted after a action is performed
    Use checked prop instead of attr to show/hide triggered selection when box was clicked by a user before.
    
    How to reproduce:
    
    Select one entry in a multiSelect listView (e.g. instance list) and then deselect it again. Now click on the "select all" checkbox. The entries which were clicked previously are not displayed as selected.
    
    Select at least one entry. Use the multiSelectAction buttons to trigger an action. Wait for completion. The list refreshes and no entry is selected but the multiSelectAction buttons are displayed.
    
    Fix:
    
    Use "checked" property instead of the attribute to select all entries. This is necessary because when you checked an entry by clicking on it the property gets set and the browser is preferably using this. So setting the attribute by clicking on the "select all" checkbox had no impact anymore on the checkBox of the previously clicked entries.
    
    Hide the multiSelectAction buttons when the list is refreshed after an action is performed and no element is selected anymore.
---
 ui/scripts/ui/widgets/listView.js | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/ui/scripts/ui/widgets/listView.js b/ui/scripts/ui/widgets/listView.js
index 99f6831..4a5d201 100644
--- a/ui/scripts/ui/widgets/listView.js
+++ b/ui/scripts/ui/widgets/listView.js
@@ -88,7 +88,9 @@
 
                 // Make sure the master checkbox is unselected
                 if (multiSelect) {
-                    $instanceRow.closest('.list-view').find('input.multiSelectMasterCheckbox').attr('checked', false);
+                    var $listView = $instanceRow.closest('.list-view');
+                    $listView.find('input.multiSelectMasterCheckbox').prop('checked', false);
+                    toggleMultiSelectActions($listView, false);
                 }
 
                 var externalLinkAction = action.externalLink;
@@ -882,15 +884,15 @@
 
         if (multiSelect) {
             var $th = $('<th>').addClass('multiselect').appendTo($tr);
-            var content = $('<input>')
+            var $multiSelectMaster = $('<input>')
                 .attr('type', 'checkbox')
-                .addClass('multiSelectMasterCheckbox')
-                .appendTo($th);
+                .addClass('multiSelectMasterCheckbox');
+            $multiSelectMaster.appendTo($th);
 
-            content.click(function() {
-                var checked = $(this).is(':checked');
-                $('.multiSelectCheckbox').attr('checked', checked);
-                toggleMultiSelectActions($table.closest('.list-view'), checked);
+            $multiSelectMaster.click(function() {
+                var isMasterChecked = $(this).prop('checked');
+                $('.multiSelectCheckbox').prop('checked', isMasterChecked);
+                toggleMultiSelectActions($table.closest('.list-view'), isMasterChecked);
             });
         }