Merge pull request #5123 from mabashian/4546-multiselect

Fixed permissions multi-select issues

awx/ui/client/src/access/add-rbac-resource/rbac-resource.controller.js

@@ -62,13 +62,13 @@ export default ['$rootScope', '$scope', 'GetBasePath', 'Rest', '$q', 'Wait', 'Pr
                 user.username;
         }
 
-        if (item.isSelected) {
+        if (value.isSelected) {
             if (item.type === 'user') {
                 item.name = buildName(item);
             }
             scope.allSelected.push(item);
         } else {
-            scope.allSelected = _.remove(scope.allSelected, { id: item.id });
+            _.remove(scope.allSelected, { id: item.id });
         }
     });
 

awx/ui/client/src/access/add-rbac-resource/rbac-resource.partial.html

@@ -44,10 +44,10 @@
                     </div>
                 </div>
 
-                <div id="AddPermissions-users" class="AddPermissions-list" ng-if="usersSelected">
+                <div id="AddPermissions-users" class="AddPermissions-list" ng-show="usersSelected">
                     <rbac-multiselect-list view="Users" all-selected="allSelected" dataset="usersDataset"></rbac-multiselect-list>
                 </div>
-                <div id="AddPermissions-teams" class="AddPermissions-list" ng-if="teamsSelected">
+                <div id="AddPermissions-teams" class="AddPermissions-list" ng-show="teamsSelected">
                     <rbac-multiselect-list view="Teams" all-selected="allSelected" dataset="teamsDataset"></rbac-multiselect-list>
                 </div>
 

awx/ui/client/src/access/add-rbac-user-team/rbac-user-team.controller.js

@@ -127,7 +127,7 @@ function(rootScope, scope, $state, i18n, CreateSelect2, GetBasePath, Rest, $q, W
         let resourceType = scope.currentTab(),
             item = value.value;
 
-        if (item.isSelected) {
+        if (value.isSelected) {
             scope.selected[resourceType][item.id] = item;
             scope.selected[resourceType][item.id].roles = [];
             aggregateKey(item, resourceType);

awx/ui/client/src/access/rbac-multiselect/permissionsUsers.list.js

@@ -9,12 +9,6 @@
     return {
         name: 'users',
         iterator: 'user',
-        defaultSearchParams: function(term){
-            return {or__username__icontains: term,
-                    or__first_name__icontains: term,
-                    or__last_name__icontains: term
-                };
-        },
         title: false,
         listTitleBadge: false,
         multiSelect: true,

awx/ui/client/src/access/rbac-multiselect/rbac-multiselect-list.directive.js

@@ -122,7 +122,7 @@ export default ['addPermissionsTeamsList', 'addPermissionsUsersList', 'TemplateL
             });
 
             function isSelected(item){
-                if(_.find(scope.allSelected, {id: item.id})){
+                if(_.find(scope.allSelected, {id: item.id, type: item.type})){
                     item.isSelected = true;
                 }
                 return item;

awx/ui/client/src/lists/Users.js

@@ -15,12 +15,6 @@ export default
         search: {
             order_by: 'username'
         },
-        defaultSearchParams: function(term){
-            return {or__username__icontains: term,
-                    or__first_name__icontains: term,
-                    or__last_name__icontains: term
-                };
-        },
         iterator: 'user',
         selectTitle: i18n._('Add Users'),
         editTitle: i18n._('Users'),

awx/ui/client/src/organizations/linkout/addUsers/addUsers.controller.js

@@ -11,10 +11,10 @@
  * Controller for handling permissions adding
  */
 
-export default ['$scope', '$rootScope', 'ProcessErrors', 'GetBasePath',
+export default ['$scope', '$rootScope', 'ProcessErrors', 'GetBasePath', 'generateList',
-'SelectionInit', 'templateUrl', '$state', 'Rest', '$q', 'Wait', '$window',
+'SelectionInit', 'templateUrl', '$state', 'Rest', '$q', 'Wait', '$window', 'QuerySet', 'UserList',
-function($scope, $rootScope, ProcessErrors, GetBasePath,
+function($scope, $rootScope, ProcessErrors, GetBasePath, generateList,
-    SelectionInit, templateUrl, $state, Rest, $q, Wait, $window) {
+    SelectionInit, templateUrl, $state, Rest, $q, Wait, $window, qs, UserList) {
     $scope.$on("linkLists", function() {
 
         if ($state.current.name.split(".")[1] === "users") {
@@ -26,16 +26,59 @@ function($scope, $rootScope, ProcessErrors, GetBasePath,
         init();
 
         function init(){
-            // search init
+            $scope.add_user_default_params = {
-            $scope.list = $scope.$parent.add_user_list;
+                order_by: 'username',
-            $scope.add_user_dataset =  $scope.$parent.add_user_dataset;
+                page_size: 5
-            $scope.add_users = $scope.$parent.add_user_dataset.results;
+            };
+
+            $scope.add_user_queryset = {
+                order_by: 'username',
+                page_size: 5
+            };
+
+            let list = _.cloneDeep(UserList);
+            list.basePath = 'users';
+            list.iterator = 'add_user';
+            list.name = 'add_users';
+            list.multiSelect = true;
+            list.fields.username.ngClick = 'linkoutUser(add_user.id)';
+            delete list.actions;
+            delete list.fieldActions;
+
+            // Fire off the initial search
+            qs.search(GetBasePath('users'), $scope.add_user_default_params)
+                .then(function(res) {
+                    $scope.add_user_dataset = res.data;
+                    $scope.add_users = $scope.add_user_dataset.results;
+
+                    let html = generateList.build({
+                        list: list,
+                        mode: 'edit',
+                        title: false
+                    });
+
+                    $scope.list = list;
+
+                    $scope.compileList(html);
+
+                    $scope.$watchCollection('add_users', function () {
+                        if($scope.selectedItems) {
+                            // Loop across the users and see if any of them should be "checked"
+                            $scope.add_users.forEach(function(row, i) {
+                                if (_.includes($scope.selectedItems, row.id)) {
+                                    $scope.add_users[i].isSelected = true;
+                                }
+                            });
+                        }
+                    });
+
+                });
 
             $scope.selectedItems = [];
             $scope.$on('selectedOrDeselected', function(e, value) {
                 let item = value.value;
 
-                if (item.isSelected) {
+                if (value.isSelected) {
                     $scope.selectedItems.push(item.id);
                 }
                 else {

awx/ui/client/src/organizations/linkout/addUsers/addUsers.directive.js

@@ -7,7 +7,7 @@
 /* jshint unused: vars */
 import addUsers from './addUsers.controller';
 export default
-    ['Wait', 'templateUrl', '$state', '$view', function(Wait, templateUrl, $state, $view) {
+    ['Wait', 'templateUrl', '$state', '$view', '$compile', function(Wait, templateUrl, $state, $view, $compile) {
             return {
                 restrict: 'E',
                 scope: {
@@ -48,6 +48,10 @@ export default
                         scope.closeModal();
                     });
 
+                    scope.compileList = function(html) {
+                        $('#add-users-list').append($compile(html)(scope));
+                    };
+
                     Wait('stop');
 
                     window.scrollTo(0,0);

awx/ui/client/src/organizations/linkout/addUsers/addUsers.partial.html

@@ -15,8 +15,7 @@
                     </div>
                 </div>
             </div>
-            <div ui-view="modalBody" class="AddUsers-body">
+            <div id="add-users-list" class="AddUsers-body"></div>
-            </div>
             <div class="AddUsers-footer">
                 <div class="buttons Form-buttons AddUsers-buttons">
                     <button type="button"

awx/ui/client/src/organizations/linkout/controllers/organizations-admins.controller.js

@@ -5,11 +5,11 @@
  *************************************************/
 
 export default ['$stateParams', '$scope', 'UserList', 'Rest', '$state',
-    'generateList', '$compile', 'Wait', 'OrgAdminList', 'AddAdminList',
+    'generateList', '$compile', 'Wait', 'OrgAdminList',
-    'OrgAdminsDataset', 'AddAdminsDataset',
+    'OrgAdminsDataset',
     'Prompt', 'ProcessErrors', 'GetBasePath', '$filter',
     function($stateParams, $scope, UserList, Rest, $state, GenerateList,
-        $compile, Wait, OrgAdminList, AddAdminList, OrgAdminsDataset, AddAdminsDataset, Prompt, ProcessErrors,
+        $compile, Wait, OrgAdminList, OrgAdminsDataset, Prompt, ProcessErrors,
         GetBasePath, $filter) {
 
         var orgBase = GetBasePath('organizations');
@@ -19,11 +19,8 @@ export default ['$stateParams', '$scope', 'UserList', 'Rest', '$state',
         function init() {
             // search init
             $scope.list = OrgAdminList;
-            $scope.add_user_list = AddAdminList;
             $scope.user_dataset = OrgAdminsDataset.data;
             $scope.users = $scope.user_dataset.results;
-            $scope.add_user_dataset = AddAdminsDataset.data;
-            $scope.add_users = $scope.add_user_dataset.results;
 
             Rest.setUrl(orgBase + $stateParams.organization_id);
             Rest.get()

awx/ui/client/src/organizations/linkout/controllers/organizations-users.controller.js

@@ -4,11 +4,11 @@
  * All Rights Reserved
  *************************************************/
 
-export default ['$stateParams', '$scope', 'OrgUserList', 'AddUserList','Rest', '$state',
+export default ['$stateParams', '$scope', 'OrgUserList','Rest', '$state',
-    'generateList', '$compile', 'Wait', 'OrgUsersDataset', 'AddUsersDataset',
+    'generateList', '$compile', 'Wait', 'OrgUsersDataset',
     'Prompt', 'ProcessErrors', 'GetBasePath', '$filter',
-    function($stateParams, $scope, OrgUserList, AddUserList, Rest, $state, GenerateList,
+    function($stateParams, $scope, OrgUserList, Rest, $state, GenerateList,
-        $compile, Wait, OrgUsersDataset, AddUsersDataset, Prompt, ProcessErrors,
+        $compile, Wait, OrgUsersDataset, Prompt, ProcessErrors,
         GetBasePath, $filter) {
 
         var orgBase = GetBasePath('organizations');
@@ -18,12 +18,8 @@ export default ['$stateParams', '$scope', 'OrgUserList', 'AddUserList','Rest', '
         function init() {
             // search init
             $scope.list = OrgUserList;
-            $scope.add_user_list = AddUserList;
             $scope.user_dataset = OrgUsersDataset.data;
             $scope.users = $scope.user_dataset.results;
-            $scope.add_user_dataset = AddUsersDataset.data;
-            $scope.add_users = $scope.add_user_dataset.results;
-
 
             Rest.setUrl(orgBase + $stateParams.organization_id);
             Rest.get()

awx/ui/client/src/organizations/linkout/organizations-linkout.route.js

@@ -27,16 +27,6 @@ export default [{
                 });
                 return generateList.wrapPanel(html);
             },
-        },
-        'modalBody@': {
-            templateProvider: function(AddUserList, generateList) {
-                let html = generateList.build({
-                    list: AddUserList,
-                    mode: 'edit',
-                    listTitle: false
-                });
-                return html;
-            },
         }
     },
     params: {
@@ -44,14 +34,6 @@ export default [{
             value: {
                 order_by: 'username'
             }
-        },
-        add_user_search: {
-            value: {
-                order_by: 'username',
-                page_size: '5',
-            },
-            dynamic: true,
-            squash: true
         }
     },
     ncyBreadcrumb: {
@@ -73,12 +55,6 @@ export default [{
                 return qs.search(path, $stateParams.user_search);
             }
         ],
-        AddUsersDataset: ['AddUserList', 'QuerySet', '$stateParams', 'GetBasePath',
-            function(list, qs, $stateParams, GetBasePath) {
-                let path = GetBasePath(list.basePath) || list.basePath;
-                return qs.search(path, $stateParams.add_user_search);
-            }
-        ],
         OrgUserList: ['UserList', 'GetBasePath', '$stateParams', function(UserList, GetBasePath, $stateParams) {
             let list = _.cloneDeep(UserList);
             delete list.actions.add;
@@ -93,17 +69,6 @@ export default [{
             };
             list.searchSize = "col-lg-12 col-md-12 col-sm-12 col-xs-12";
             return list;
-        }],
-        AddUserList: ['UserList', function(UserList) {
-            let list = _.cloneDeep(UserList);
-            list.basePath = 'users';
-            list.iterator = 'add_user';
-            list.name = 'add_users';
-            list.multiSelect = true;
-            list.fields.username.ngClick = 'linkoutUser(add_user.id)';
-            delete list.actions;
-            delete list.fieldActions;
-            return list;
         }]
     }
 }, {
@@ -349,16 +314,6 @@ export default [{
                 });
                 return generateList.wrapPanel(html);
             },
-        },
-        'modalBody@': {
-            templateProvider: function(AddAdminList, generateList) {
-                let html = generateList.build({
-                    list: AddAdminList,
-                    mode: 'edit',
-                    listTitle: false
-                });
-                return html;
-            },
         }
     },
     data: {
@@ -379,12 +334,6 @@ export default [{
                 return qs.search(path, $stateParams[`user_search`]);
             }
         ],
-        AddAdminsDataset: ['AddAdminList', 'QuerySet', '$stateParams', 'GetBasePath',
-            function(list, qs, $stateParams, GetBasePath) {
-                let path = GetBasePath(list.basePath) || list.basePath;
-                return qs.search(path, $stateParams[`add_user_search`]);
-            }
-        ],
         OrgAdminList: ['UserList', 'GetBasePath', '$stateParams', function(UserList, GetBasePath, $stateParams) {
             let list = _.cloneDeep(UserList);
             delete list.actions.add;
@@ -400,17 +349,6 @@ export default [{
             list.searchSize = "col-lg-12 col-md-12 col-sm-12 col-xs-12";
             list.listTitle = 'Admins';
             return list;
-        }],
-        AddAdminList: ['UserList', function(UserList) {
-            let list = _.cloneDeep(UserList);
-            list.basePath = 'users';
-            list.iterator = 'add_user';
-            list.name = 'add_users';
-            list.multiSelect = true;
-            list.fields.username.ngClick = 'linkoutUser(add_user.id)';
-            delete list.actions;
-            delete list.fieldActions;
-            return list;
         }]
     }
 }];

awx/ui/client/src/shared/multi-select-list/select-list-item.directive.js

@@ -30,7 +30,7 @@ export default
                 item: '=item'
             },
             require: '^multiSelectList',
-            template: '<input type="checkbox" data-multi-select-list-item ng-model="item.isSelected" ng-change="userInteractionSelect()">',
+            template: '<input type="checkbox" data-multi-select-list-item ng-model="item.isSelected" ng-click="userInteractionSelect()">',
             link: function(scope, element, attrs, multiSelectList) {
 
                 scope.decoratedItem = multiSelectList.registerItem(scope.item);

awx/ui/client/src/shared/paginate/paginate.controller.js

@@ -7,9 +7,21 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
         $scope.pageSize = pageSize;
 
         function init() {
-            $scope.pageRange = calcPageRange($scope.current(), $scope.last());
+
-            $scope.dataRange = calcDataRange();
+            let updatePaginationVariables = function() {
+                $scope.current = calcCurrent();
+                $scope.last = calcLast();
+                $scope.pageRange = calcPageRange($scope.current, $scope.last);
+                $scope.dataRange = calcDataRange();
+            };
+
+            updatePaginationVariables();
+
+            $scope.$watch('collection', function(){
+                updatePaginationVariables();
+            });
         }
+
         $scope.dataCount = function() {
             return $filter('number')($scope.dataset.count);
         };
@@ -48,22 +60,22 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
                 $scope.dataset = res.data;
                 $scope.collection = res.data.results;
             });
-            $scope.pageRange = calcPageRange($scope.current(), $scope.last());
+            $scope.pageRange = calcPageRange($scope.current, $scope.last);
             $scope.dataRange = calcDataRange();
         };
 
-        $scope.current = function() {
+        function calcLast() {
+            return Math.ceil($scope.dataset.count / pageSize);
+        }
+
+        function calcCurrent() {
             if($scope.querySet) {
                 return parseInt($scope.querySet.page || '1');
             }
             else {
                 return parseInt($stateParams[`${$scope.iterator}_search`].page || '1');
             }
-        };
+        }
-
-        $scope.last = function() {
-            return Math.ceil($scope.dataset.count / pageSize);
-        };
 
         function calcPageRange(current, last) {
             let result = [],
@@ -95,12 +107,12 @@ export default ['$scope', '$stateParams', '$state', '$filter', 'GetBasePath', 'Q
         }
 
         function calcDataRange() {
-            if ($scope.current() === 1 && $scope.dataset.count < parseInt(pageSize)) {
+            if ($scope.current === 1 && $scope.dataset.count < parseInt(pageSize)) {
                 return `1 - ${$scope.dataset.count}`;
-            } else if ($scope.current() === 1) {
+            } else if ($scope.current === 1) {
                 return `1 - ${pageSize}`;
             } else {
-                let floor = (($scope.current() - 1) * parseInt(pageSize)) + 1;
+                let floor = (($scope.current - 1) * parseInt(pageSize)) + 1;
                 let ceil = floor + parseInt(pageSize) < $scope.dataset.count ? floor + parseInt(pageSize) : $scope.dataset.count;
                 return `${floor} - ${ceil}`;
             }

awx/ui/client/src/shared/paginate/paginate.partial.html

@@ -2,37 +2,37 @@
     <div class="Paginate-wrapper" ng-hide="dataset.count < pageSize">
         <ul class="Paginate-controls pagination">
             <!-- first -->
-            <li class="Paginate-controls--first Paginate-controls--item" ng-hide="pageRange.length < 10 || {{current()}} === 1">
+            <li class="Paginate-controls--first Paginate-controls--item" ng-hide="pageRange.length < 10 || {{current}} === 1">
                 <a href ng-click="toPage(1)">
                     <i class="fa fa-angle-double-left"></i>
                 </a>
             </li>
             <!-- previous -->
-            <li class="Paginate-controls--previous Paginate-controls--item" ng-class="{disabled: current() === 1}">
+            <li class="Paginate-controls--previous Paginate-controls--item" ng-class="{disabled: current === 1}">
-                <a href ng-click="toPage(current() - 1)">
+                <a href ng-click="toPage(current - 1)">
                     <i class="fa fa-angle-left"></i>
                 </a>
             </li>
             <!-- range -->
             <li class="Paginate-controls--item" ng-repeat="page in pageRange">
-                <a href ng-class="{'Paginate-controls--active': page === current()}" ng-click="toPage(page)">{{ page }}</a>
+                <a href ng-class="{'Paginate-controls--active': page === current}" ng-click="toPage(page)">{{ page }}</a>
             </li>
             <!-- next -->
-            <li class="Paginate-controls--next Paginate-controls--item" ng-hide="current() === last()">
+            <li class="Paginate-controls--next Paginate-controls--item" ng-hide="current === last">
-                <a href ng-click="toPage(current() + 1)">
+                <a href ng-click="toPage(current + 1)">
                     <i class="fa fa-angle-right"></i>
                 </a>
             </li>
             <!-- last -->
-            <li class="Paginate-controls--item Paginate-controls--last" ng-hide="(pageRange.length < 10 || current() === last())">
+            <li class="Paginate-controls--item Paginate-controls--last" ng-hide="(pageRange.length < 10 || current === last)">
-                <a href id="last-page-set" ng-click="toPage(last())">
+                <a href id="last-page-set" ng-click="toPage(last)">
                     <i class="fa fa-angle-double-right"></i>
                 </a>
             </li>
         </ul>
         <span class="Paginate-pager--pageof" translate>Page
-                <span id="current-page">{{current()}}</span> of
+                <span id="current-page">{{current}}</span> of
-        <span id="total-pages">{{last()}}</span>
+        <span id="total-pages">{{last}}</span>
         </span>
     </div>
     <div class="Paginate-total page-label" ng-hide="dataCount === 0">

awx/ui/client/src/shared/smart-search/smart-search.controller.js

@@ -148,9 +148,25 @@ export default ['$stateParams', '$scope', '$state', 'QuerySet', 'GetBasePath', '
 
         // remove tag, merge new queryset, $state.go
         $scope.remove = function(index) {
-            let tagToRemove = $scope.searchTags.splice(index, 1)[0];
+            let tagToRemove = $scope.searchTags.splice(index, 1)[0],
-            let termParts = SmartSearchService.splitTermIntoParts(tagToRemove);
+                termParts = SmartSearchService.splitTermIntoParts(tagToRemove),
-            let removed;
+                removed;
+
+            let removeFromQuerySet = function(set) {
+                _.each(removed, (value, key) => {
+                    if (Array.isArray(set[key])){
+                        _.remove(set[key], (item) => item === value);
+                        // If the array is now empty, remove that key
+                        if(set[key].length === 0) {
+                            delete set[key];
+                        }
+                    }
+                    else {
+                        delete set[key];
+                    }
+                });
+            };
+
             if (termParts.length === 1) {
                 removed = setDefaults(tagToRemove);
             }
@@ -169,21 +185,16 @@ export default ['$stateParams', '$scope', '$state', 'QuerySet', 'GetBasePath', '
                 }
                 removed = qs.encodeParam(encodeParams);
             }
-            _.each(removed, (value, key) => {
+            removeFromQuerySet(queryset);
-                if (Array.isArray(queryset[key])){
-                    _.remove(queryset[key], (item) => item === value);
-                    // If the array is now empty, remove that key
-                    if(queryset[key].length === 0) {
-                        delete queryset[key];
-                    }
-                }
-                else {
-                    delete queryset[key];
-                }
-            });
             if(!$scope.querySet) {
                 $state.go('.', {
-                    [$scope.iterator + '_search']: queryset }, {notify: false});
+                    [$scope.iterator + '_search']: queryset }, {notify: false}).then(function(){
+                        // ISSUE: for some reason deleting a tag from a list in a modal does not
+                        // remove the param from $stateParams.  Here we'll manually check to make sure
+                        // that that happened and remove it if it didn't.
+
+                        removeFromQuerySet($stateParams[`${$scope.iterator}_search`]);
+                    });
             }
             qs.search(path, queryset).then((res) => {
                 if($scope.querySet) {
@@ -243,7 +254,6 @@ export default ['$stateParams', '$scope', '$state', 'QuerySet', 'GetBasePath', '
                     }
                 });
 
-                params.page = '1';
                 queryset = _.merge(queryset, params, (objectValue, sourceValue, key, object) => {
                     if (object[key] && object[key] !== sourceValue){
                         if(_.isArray(object[key])) {
@@ -262,12 +272,20 @@ export default ['$stateParams', '$scope', '$state', 'QuerySet', 'GetBasePath', '
                         return undefined;
                     }
                 });
+
+                // Go back to the first page after a new search
+                delete queryset.page;
+
                 // https://ui-router.github.io/docs/latest/interfaces/params.paramdeclaration.html#dynamic
                 // This transition will not reload controllers/resolves/views
                 // but will register new $stateParams[$scope.iterator + '_search'] terms
                 if(!$scope.querySet) {
                     $state.go('.', {
-                        [$scope.iterator + '_search']: queryset }, {notify: false});
+                        [$scope.iterator + '_search']: queryset }, {notify: false}).then(function(){
+                            // ISSUE: same as above in $scope.remove.  For some reason deleting the page
+                            // from the queryset works for all lists except lists in modals.
+                            delete $stateParams[$scope.iterator + '_search'].page;
+                        });
                 }
                 qs.search(path, queryset).then((res) => {
                     if($scope.querySet) {