From d295dec1e2ba8f5222b12486adec8647e12263d4 Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Mon, 1 Aug 2016 15:39:42 -0400
Subject: [PATCH 1/2] Multi-select-list rollback and cleanup to fix checkboxes
 across multiple pages

---
 .../addPermissionsList.directive.js           | 17 -------------
 awx/ui/client/src/lists/InventoryGroups.js    |  1 +
 awx/ui/client/src/lists/InventoryHosts.js     |  1 +
 .../multi-select-list.controller.js           | 24 ++++++++++++-------
 .../select-list-item.directive.js             | 20 ++--------------
 .../multi-select-list.directive-test.js       | 15 ++++++------
 6 files changed, 27 insertions(+), 51 deletions(-)

diff --git a/awx/ui/client/src/access/addPermissions/addPermissionsList/addPermissionsList.directive.js b/awx/ui/client/src/access/addPermissions/addPermissionsList/addPermissionsList.directive.js
index 6722fac853..392fe50522 100644
--- a/awx/ui/client/src/access/addPermissions/addPermissionsList/addPermissionsList.directive.js
+++ b/awx/ui/client/src/access/addPermissions/addPermissionsList/addPermissionsList.directive.js
@@ -51,23 +51,6 @@ export default
                         PaginateInit({ scope: scope,
                             list: list, url: url, pageSize: 5 });
 
-                        if (scope.removePostRefresh) {
-                            scope.removePostRefresh();
-                        }
-                        scope.removePostRefresh = scope.$on('PostRefresh', function () {
-                            if(scope.allSelected && scope.allSelected.length > 0) {
-                                // We need to check to see if any of the selected items are now in our list!
-                                for(var i=0; i<scope.allSelected.length; i++) {
-                                    for(var j=0; j<scope[set].length; j++) {
-                                        if(scope.allSelected[i].id === scope[set][j].id && scope.allSelected[i].type === scope[set][j].type) {
-                                            // If so, let's go ahead and mark it as selected so that select-list-item knows to check the box
-                                            scope[set][j].isSelected = true;
-                                        }
-                                    }
-                                }
-                            }
-                        });
-
                         scope.search(list.iterator);
                     });
                 }
diff --git a/awx/ui/client/src/lists/InventoryGroups.js b/awx/ui/client/src/lists/InventoryGroups.js
index 4628388e90..c7f1a661e5 100644
--- a/awx/ui/client/src/lists/InventoryGroups.js
+++ b/awx/ui/client/src/lists/InventoryGroups.js
@@ -19,6 +19,7 @@ export default
         hover: true,
         'class': 'table-no-border',
         multiSelect: true,
+        trackBy: 'group.id',
 
         fields: {
             sync_status: {
diff --git a/awx/ui/client/src/lists/InventoryHosts.js b/awx/ui/client/src/lists/InventoryHosts.js
index f0cc803fe5..1c01a77021 100644
--- a/awx/ui/client/src/lists/InventoryHosts.js
+++ b/awx/ui/client/src/lists/InventoryHosts.js
@@ -20,6 +20,7 @@ export default
         hasChildren: true,
         'class': 'table-no-border',
         multiSelect: true,
+        trackBy: 'host.id',
 
         fields: {
             active_failures: {
diff --git a/awx/ui/client/src/shared/multi-select-list/multi-select-list.controller.js b/awx/ui/client/src/shared/multi-select-list/multi-select-list.controller.js
index 1957afa992..1d7044af28 100644
--- a/awx/ui/client/src/shared/multi-select-list/multi-select-list.controller.js
+++ b/awx/ui/client/src/shared/multi-select-list/multi-select-list.controller.js
@@ -63,9 +63,16 @@ export default ['$scope',
          * {@link multiSelectList.controller:multiSelectList#decorateItem `decorateItem`}
          */
         this.registerItem = function(item) {
-            var decoratedItem = this.decorateItem(item);
-            $scope.items = $scope.items.concat(decoratedItem);
-            return decoratedItem;
+            var foundItem = _.find($scope.items, function(existingItem) { return existingItem.id === item.id; });
+
+            if(foundItem) {
+                return foundItem;
+            }
+            else {
+                var decoratedItem = this.decorateItem(item);
+                $scope.items = $scope.items.concat(decoratedItem);
+                return decoratedItem;
+            }
         };
 
         /**
@@ -99,6 +106,7 @@ export default ['$scope',
         this.decorateItem = function(item) {
             return {
                 isSelected: false,
+                id: item.id,
                 value: item
             };
         };
@@ -129,11 +137,11 @@ export default ['$scope',
          * Triggers {@link multiSelectList.selectionChanged `multiSelectList.selectionChanged`}
          */
         this.deselectAll = function() {
-          $scope.items.forEach(function(item) {
-            item.isSelected = false;
-          });
-          $scope.selection.isExtended = false;
-          rebuildSelections();
+            $scope.items.forEach(function(item) {
+              item.isSelected = false;
+            });
+            $scope.selection.isExtended = false;
+            rebuildSelections();
         };
 
 
diff --git a/awx/ui/client/src/shared/multi-select-list/select-list-item.directive.js b/awx/ui/client/src/shared/multi-select-list/select-list-item.directive.js
index 09ede3e244..4867c5e07c 100644
--- a/awx/ui/client/src/shared/multi-select-list/select-list-item.directive.js
+++ b/awx/ui/client/src/shared/multi-select-list/select-list-item.directive.js
@@ -33,11 +33,8 @@ export default
             template: '<input type="checkbox" data-multi-select-list-item ng-model="isSelected" ng-change="userInteractionSelect()">',
             link: function(scope, element, attrs, multiSelectList) {
 
-                var initializeItem = function() {
-                    scope.decoratedItem = multiSelectList.registerItem(scope.item);
-                    scope.isSelected = scope.item.isSelected ? true : false;
-                    scope.decoratedItem.isSelected = scope.item.isSelected ? true : false;
-                };
+                scope.decoratedItem = multiSelectList.registerItem(scope.item);
+                scope.isSelected = scope.decoratedItem.isSelected ? true : false;
 
                 scope.$watch('isSelected', function(value) {
                     if (value === true) {
@@ -47,23 +44,10 @@ export default
                     }
                 });
 
-                scope.$watch('item', function() {
-                    // This is necessary for page changes where $scope.item gets updated via ng-repeat
-                    // but this link function never gets triggered (and scope.decoratedItem) never
-                    // gets updated.
-                    initializeItem();
-                });
-
-                scope.$on('$destroy', function() {
-                    multiSelectList.deregisterItem(scope.decoratedItem);
-                });
-
                 scope.userInteractionSelect = function() {
                     scope.$emit("selectedOrDeselected", scope.decoratedItem);
                 };
 
-                initializeItem();
-
             }
         };
     }];
diff --git a/awx/ui/client/tests/multi-select-list/multi-select-list.directive-test.js b/awx/ui/client/tests/multi-select-list/multi-select-list.directive-test.js
index ad0cf8c7c9..376d334349 100644
--- a/awx/ui/client/tests/multi-select-list/multi-select-list.directive-test.js
+++ b/awx/ui/client/tests/multi-select-list/multi-select-list.directive-test.js
@@ -135,9 +135,9 @@ describeModule(mod.name)
             context('selectionChanged event', function() {
 
                 it('triggers with selections set to all the items', function() {
-                    var item1 = controller.registerItem({ name: 'blah' });
-                    var item2 = controller.registerItem({ name: 'diddy' });
-                    var item3 = controller.registerItem({ name: 'doo' });
+                    var item1 = controller.registerItem({ isSelected: false, id: 1, name: 'blah' });
+                    var item2 = controller.registerItem({ isSelected: false, id: 2, name: 'diddy' });
+                    var item3 = controller.registerItem({ isSelected: false, id: 3, name: 'doo' });
                     var spy = sinon.spy();
 
                     $scope.$on('multiSelectList.selectionChanged', spy);
@@ -167,10 +167,10 @@ describeModule(mod.name)
 
             it('tracks extended selection state', function() {
                 var spy = sinon.spy();
-                var item1 = controller.registerItem({ name: 'blah' });
-                var item2 = controller.registerItem({ name: 'diddy' });
-                var item3 = controller.registerItem({ name: 'doo' });
-                var allItems = _.pluck([item1, item2, item3], 'value');
+                var item1 = controller.registerItem({ isSelected: false, id: 1, name: 'blah' });console.log(item1);
+                var item2 = controller.registerItem({ isSelected: false, id: 2, name: 'diddy' });console.log(item2);
+                var item3 = controller.registerItem({ isSelected: false, id: 3, name: 'doo' });console.log(item3);
+                var allItems = _.pluck([item1, item2, item3], 'value');console.log(allItems);
 
                 controller.selectAll();
                 controller.selectAllExtended();
@@ -196,4 +196,3 @@ describeModule(mod.name)
             });
         });
     });
-

From af983a02e0f1c92bbb6cf2b0a5e403c4c559e468 Mon Sep 17 00:00:00 2001
From: Michael Abashian <mabashian@ansible.com>
Date: Mon, 1 Aug 2016 15:53:37 -0400
Subject: [PATCH 2/2] Removed leftover consoles

---
 .../multi-select-list/multi-select-list.directive-test.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/awx/ui/client/tests/multi-select-list/multi-select-list.directive-test.js b/awx/ui/client/tests/multi-select-list/multi-select-list.directive-test.js
index 376d334349..e9077a274b 100644
--- a/awx/ui/client/tests/multi-select-list/multi-select-list.directive-test.js
+++ b/awx/ui/client/tests/multi-select-list/multi-select-list.directive-test.js
@@ -167,10 +167,10 @@ describeModule(mod.name)
 
             it('tracks extended selection state', function() {
                 var spy = sinon.spy();
-                var item1 = controller.registerItem({ isSelected: false, id: 1, name: 'blah' });console.log(item1);
-                var item2 = controller.registerItem({ isSelected: false, id: 2, name: 'diddy' });console.log(item2);
-                var item3 = controller.registerItem({ isSelected: false, id: 3, name: 'doo' });console.log(item3);
-                var allItems = _.pluck([item1, item2, item3], 'value');console.log(allItems);
+                var item1 = controller.registerItem({ isSelected: false, id: 1, name: 'blah' });
+                var item2 = controller.registerItem({ isSelected: false, id: 2, name: 'diddy' });
+                var item3 = controller.registerItem({ isSelected: false, id: 3, name: 'doo' });
+                var allItems = _.pluck([item1, item2, item3], 'value');
 
                 controller.selectAll();
                 controller.selectAllExtended();