fix organization card pagination & display count, resolves #1576 & #1466 (#2150)

awx/ui/client/src/organizations/list/organizations-list.controller.js

@@ -5,46 +5,22 @@
  *************************************************/
 
 export default ['$stateParams', '$scope', '$rootScope', '$location',
-    '$log', '$compile', 'Rest', 'PaginateWidget', 'PaginateInit',
+    '$log', '$compile', 'Rest', 'PaginateInit',
     'SearchInit', 'OrganizationList', 'Alert', 'Prompt', 'ClearScope',
     'ProcessErrors', 'GetBasePath', 'Wait',
-    '$state',
+    '$state', 'generateList',
     function($stateParams, $scope, $rootScope, $location,
-        $log, $compile, Rest, PaginateWidget, PaginateInit,
+        $log, $compile, Rest, PaginateInit,
         SearchInit, OrganizationList, Alert, Prompt, ClearScope,
         ProcessErrors, GetBasePath, Wait,
-        $state) {
+        $state, generateList) {
 
         ClearScope();
 
         var defaultUrl = GetBasePath('organizations'),
             list = OrganizationList,
-            pageSize = $scope.orgCount;
+            pageSize = 24,
-
+            view = generateList;
-        PaginateInit({
-            scope: $scope,
-            list: list,
-            url: defaultUrl,
-            pageSize: pageSize,
-        });
-        SearchInit({
-            scope: $scope,
-            list: list,
-            url: defaultUrl,
-        });
-
-        $scope.list = list;
-
-        $scope.search(list.iterator);
-
-        $scope.PaginateWidget = PaginateWidget({
-            iterator: list.iterator,
-            set: 'organizations'
-        });
-
-        var paginationContainer = $('#pagination-container');
-        paginationContainer.html($scope.PaginateWidget);
-        $compile(paginationContainer.contents())($scope);
 
         var parseCardData = function(cards) {
             return cards.map(function(card) {
@@ -96,23 +72,6 @@ export default ['$stateParams', '$scope', '$rootScope', '$location',
             });
         };
 
-        var getOrganization = function(id) {
-            Rest.setUrl(defaultUrl);
-            Rest.get()
-                .success(function(data) {
-                    data.results.activeCard = id;
-                    $scope.orgCount = data.count;
-                    $scope.orgCards = parseCardData(data.results);
-                    Wait("stop");
-                })
-                .error(function(data, status) {
-                    ProcessErrors($scope, data, status, null, {
-                        hdr: 'Error!',
-                        msg: 'Call to ' + defaultUrl + ' failed. DELETE returned status: ' + status
-                    });
-                });
-        };
-
         $scope.$on("ReloadOrgListView", function() {
             if ($state.$current.self.name === "organizations") {
                 delete $scope.activeCard;
@@ -125,15 +84,11 @@ export default ['$stateParams', '$scope', '$rootScope', '$location',
             }
         });
 
-        $scope.$on("ReloadOrganzationCards", function(e, id) {
+
-            $scope.activeCard = id;
+        $scope.$watchCollection('organizations', function(value){
-            getOrganization(id);
+            $scope.orgCards = parseCardData(value);
         });
 
-        getOrganization();
-
-        $rootScope.flashMessage = null;
-
         if ($scope.removePostRefresh) {
             $scope.removePostRefresh();
         }
@@ -183,5 +138,50 @@ export default ['$stateParams', '$scope', '$rootScope', '$location',
                 actionText: 'DELETE'
             });
         };
+        var init = function(){
+            // Pagination depends on html appended by list generator
+            view.inject(list, {
+                id: 'organizations-list',
+                scope: $scope,
+                mode: 'edit'
+            });
+            // grab the pagination elements, move, destroy list generator elements
+            $('#organization-pagination').appendTo('#OrgCards');
+            $('tag-search').appendTo('.OrgCards-search');
+            $('#organizations-list').remove();
+
+            PaginateInit({
+                scope: $scope,
+                list: list,
+                url: defaultUrl,
+                pageSize: pageSize,
+            });
+            SearchInit({
+                scope: $scope,
+                list: list,
+                url: defaultUrl,
+                set: 'organizations'
+            });
+
+            $scope.list = list;
+            $rootScope.flashMessage = null;
+
+            $scope.search(list.iterator);
+            var getOrgCount = function() {
+                Rest.setUrl(defaultUrl);
+                Rest.get()
+                    .success(function(data) {
+                        $scope.orgCount = data.count;
+                    })
+                    .error(function(data, status) {
+                        ProcessErrors($scope, data, status, null, {
+                            hdr: 'Error!',
+                            msg: 'Call to ' + defaultUrl + ' failed. DELETE returned status: ' + status
+                        });
+                    });
+            };
+            getOrgCount();
+        };
+        init();
     }
 ];

awx/ui/client/src/organizations/list/organizations-list.partial.html

@@ -18,7 +18,9 @@
                 </button>
             </div>
         </div>
-        <div class="OrgCards">
+        <div class="OrgCards-search">
+        </div>
+        <div class="OrgCards" id="OrgCards">
             <div class="OrgCards-card"
                 ng-class="{'OrgCards-card--selected': activeCard === card.id || card.isActiveCard }"
                 ng-repeat="card in orgCards track by card.id">
@@ -57,7 +59,6 @@
                 </div>
             </div>
         </div>
-        <div id="pagination-container" ng-hide="organization_num_pages < 2">
+        <div id='organizations-list'></div>
-        </div>
     </div>
 </div>

awx/ui/client/src/organizations/orgcards.block.less

@@ -4,6 +4,22 @@
 .OrgCards {
     display: flex;
     flex-wrap: wrap;
+    width: 100%;
+}
+
+.OrgCards-search tag-search{
+    margin-top: 10px;
+    width: 100%;
+    height: 35px;
+}
+.OrgCards-search .TagSearch{
+    min-height: 35px;
+    height: 35px;
+    margin-top: 10px;
+    margin-bottom: 0px;
+}
+.OrgCards .List-pagination{
+    width: 100%;
 }
 
 .OrgCards-card {