Fixed bug where deleting search tags was not removing the equivalent state param for lists in modals. Also did some cleanup on pagination directive.

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

@@ -16,9 +16,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);
         };
@@ -52,22 +64,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 = [];
@@ -84,12 +96,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) {