Fix listing size and added pagination to consumer groups. Ref issue #302

assets/js/app/consumers/acl-model.js

@@ -0,0 +1,38 @@
+(function() {
+    'use strict';
+
+    /**
+     * Model for Author API, this is used to wrap all Author objects specified actions and data change actions.
+     */
+    angular.module('frontend.consumers')
+        .service('ACLModel', [
+            'DataModel','DataService','$q','$log',
+            function(DataModel,DataService,$q,$log) {
+
+                var model = new DataModel('kong/acls',true);
+
+
+                model.handleError = function($scope,err) {
+                    $scope.errors = {}
+                    if(err.data){
+
+                        for(var key in err.data.invalidAttributes){
+                            $scope.errors[key] = err.data.invalidAttributes[key][0].message
+                        }
+
+                        // Passport errors
+                        if(err.data.raw && err.data.raw.length) {
+                            err.data.raw.forEach(function(raw){
+                                for(var key in raw.err.invalidAttributes){
+                                    $scope.errors[key] = raw.err.invalidAttributes[key][0].message
+                                }
+                            })
+                        }
+                    }
+                }
+
+                return model;
+            }
+        ])
+    ;
+}());

assets/js/app/consumers/apis/consumer-apis-controller.js

@@ -138,7 +138,6 @@
               });
           }
 
-
           function deletePlugin(api,plugin) {
               DialogService.prompt(
                   "Delete Plugin","Really want to delete the plugin?",

assets/js/app/consumers/groups/consumer-groups-controller.js

@@ -8,22 +8,16 @@
 
   angular.module('frontend.consumers')
     .controller('ConsumerGroupsController', [
-      '_', '$scope', '$log', '$state', 'ConsumerService','$stateParams',
+      '_', '$scope', '$log', '$state', 'ConsumerService','$stateParams', 'ACLModel', 'ListConfig',
       'MessageService', 'DialogService', '$uibModal',
-      function controller(_, $scope, $log, $state, ConsumerService,$stateParams,
+      function controller(_, $scope, $log, $state, ConsumerService,$stateParams, ACLModel, ListConfig,
                           MessageService, DialogService, $uibModal) {
 
+        ACLModel.setScope($scope, false, 'items', 'itemCount');
+        $scope = angular.extend($scope, angular.copy(ListConfig.getConfig('consumerACLs',ACLModel)));
         $scope.addGroup = addGroup
         $scope.deleteGroup = deleteConsumerGroup
-
-
-        ConsumerService.fetchAcls($stateParams.id)
-          .then(function(response){
-            $scope.acls = response.data.data;
-          }).catch(function (err) {
-
-        })
-
+
         function addGroup(consumer) {
           $uibModal.open({
             animation: true,
@@ -41,7 +35,7 @@
 
                 function createGroup() {
                   ConsumerService.addAcl(_consumer.id, $scope.acl).then(function (data) {
-                    fetcAcls()
+                    fetchData()
                     close()
                   }).catch(function (err) {
                     $log.error(err)
@@ -71,20 +65,23 @@
             function accept() {
               ConsumerService.deleteAcl($scope.consumer.id, group.id)
                 .then(function (data) {
-                  fetcAcls()
+                  fetchData()
                 })
 
             }, function decline() {
             })
 
         }
 
-        function fetcAcls() {
+        function fetchData() {
           ConsumerService.fetchAcls($scope.consumer.id)
             .then(function (res) {
-              $scope.acls = res.data.data;
+              $scope.items = res.data;
+              console.log('ACLS =>', $scope.items);
             })
         }
+
+        fetchData();
       }
     ])
 }());

assets/js/app/consumers/groups/consumer-groups.html

@@ -1,33 +1,48 @@
-
-<div class="row">
-    <div class="col-md-3" data-ng-repeat="acl in acls">
-        <div
-                class="panel panel-default panel-flat elipsize" style="background: #fff">
-            <i
-                    data-ng-click="deleteGroup(acl)"
-                    class="mdi mdi-close clickable pull-right margin-top margin-right"></i>
-            <div class="panel-body elipsize">
+<div ng-if="items && items.data">
+    <div class="col-md-12 bg-light-grey padding margin-bottom">
+        <list-search
+                class="pull-right"
+                data-filters="filters"
+                data-options="itemsPerPageOptions"
+                data-items="itemsPerPage"
+        ></list-search>
+    </div>
+    <div class="row">
+        <div class="col-md-3" dir-paginate="acl in items.data | orderBy:sort.column:sort.direction | filter : filters.searchWord | itemsPerPage: itemsPerPage as filteredItems">
+            <div
+                    class="panel panel-default panel-flat elipsize" style="background: #fff">
+                <i
+                        data-ng-click="deleteGroup(acl)"
+                        class="mdi mdi-close clickable pull-right margin-top margin-right"></i>
+                <div class="panel-body elipsize">
                         <span class=" no-wrap ">
                             <i class="mdi mdi-account-multiple-outline"></i>
                             <strong>{{acl.group}}</strong>
 
                         </span>
+                </div>
+
             </div>
 
         </div>
-
-    </div>
-    <div class="col-md-3">
-        <div
-                data-ng-click="addGroup(consumer)"
-                class="panel panel-dashed panel-flat clickable">
-            <div class="panel-body elipsize">
+        <div class="col-md-3">
+            <div
+                    data-ng-click="addGroup(consumer)"
+                    class="panel panel-dashed panel-flat clickable">
+                <div class="panel-body elipsize">
                         <span class=" no-wrap">
                             <i class="mdi mdi-plus"></i>
                             Add a group
                         </span>
 
+                </div>
             </div>
         </div>
     </div>
+    <div class="row">
+        <div class="col-md-12">
+            <dir-pagination-controls class="pull-right"></dir-pagination-controls>
+        </div>
+    </div>
 </div>
+

assets/js/app/core/services/ListConfigService.js

@@ -121,15 +121,17 @@
               sortable: true,
               inSearch: true,
               inTitle: true
-            },
-            // {
-            //     title: 'upstream url',
-            //     column: 'upstream_url',
-            //     searchable: true,
-            //     sortable: true,
-            //     inSearch: true,
-            //     inTitle: true
-            // }
+            }
+          ],
+          consumerACLs: [
+            {
+              title: 'group',
+              column: 'group',
+              searchable: true,
+              sortable: true,
+              inSearch: true,
+              inTitle: true
+            }
           ],
           consumerService: [
             {

bower.json

@@ -39,7 +39,7 @@
     "angular-chips": "~1.0.8",
     "ng-file-upload": "~12.2.12",
     "angular-messages": "1.5.*",
-    "angular-utils-pagination": "~0.11.1",
+    "angular-utils-pagination": "0.11.1",
     "angular-chart.js": "~1.0.3",
     "angular-resource": "1.5.*",
     "mdi": "2.4.85",