feat(super-user): paginate orgs

static/js/pages/superuser.js

@@ -10,7 +10,7 @@
       })
   }]);
 
-  function SuperuserCtrl($scope, ApiService, Features, UserService, ContainerService, AngularPollChannel, CoreDialog) {
+  function SuperuserCtrl($scope, ApiService, Features, UserService, ContainerService, AngularPollChannel, CoreDialog, TableService) {
     if (!Features.SUPER_USERS) {
       return;
     }
@@ -31,6 +31,14 @@
     $scope.serviceKeysActive = false;
     $scope.globalMessagesActive = false;
     $scope.manageUsersActive = false;
+    $scope.orderedOrgs = [];
+    $scope.orgsPerPage = 10;
+    $scope.options = {
+      'predicate': 'name',
+      'reverse': false,
+      'filter': null,
+      'page': 0,
+    }
 
     $scope.loadMessageOfTheDay = function () {
       $scope.globalMessagesActive = true;
@@ -106,9 +114,16 @@
       $scope.loadOrganizationsInternal();
     };
 
+    var sortOrgs = function() {
+      if (!$scope.organizations) {return;}
+      $scope.orderedOrgs = TableService.buildOrderedItems($scope.organizations, $scope.options,
+                                                           ['name', 'email'], []);
+      };
+
     $scope.loadOrganizationsInternal = function() {
       $scope.organizationsResource = ApiService.listAllOrganizationsAsResource().get(function(resp) {
         $scope.organizations = resp['organizations'];
+        sortOrgs();
         return $scope.organizations;
       });
     };
@@ -117,6 +132,21 @@
       $scope.manageUsersActive = true;
     };
 
+    $scope.tablePredicateClass = function(name, predicate, reverse) {
+      if (name != predicate) {
+        return '';
+      }
+      return 'current ' + (reverse ? 'reversed' : '');
+    };
+
+    $scope.orderBy = function(predicate) {
+      if (predicate == $scope.options.predicate) {
+        $scope.options.reverse = !$scope.options.reverse;
+        return;
+      }
+      $scope.options.reverse = false;
+      $scope.options.predicate = predicate;
+    };
     $scope.askDeleteOrganization = function(org) {
       bootbox.confirm('Are you sure you want to delete this organization? Its data will be deleted with it.',
         function(result) {
@@ -185,5 +215,9 @@
 
     // Load the initial status.
     $scope.checkStatus();
+    $scope.$watch('options.predicate', sortOrgs);
+    $scope.$watch('options.reverse', sortOrgs);
+    $scope.$watch('options.filter', sortOrgs);
+
   }
 }());

static/partials/super-user.html

@@ -111,17 +111,29 @@
             <div class="manager-header" header-title="Organizations">
             </div>
 
-            <div class="filter-box" collection="organization" filter-model="search" filter-name="Organizations"></div>
+            <div class="co-top-bar">
+              <span class="co-filter-box">
+                <span class="page-controls" total-count="orderedOrgs.entries.length" current-page="options.page" page-size="orgsPerPage"></span>
+                <input class="form-control" type="text" ng-model="options.filter" placeholder="Filter Organizations..." style="margin-right: 10px;">
+              </span>
+            </div>
 
-            <table class="cor-table">
+            <table class="cor-table" ng-if="orderedOrgs.entries.length && !isLoading">
               <thead>
               <td style="width: 24px;"></td>
-              <td>Name</td>
+
-              <td>Admin E-mail</td>
+              <td ng-class="tablePredicateClass('name', options.predicate, options.reverse)">
+                <a ng-click="orderBy('name')">Name</a>
+              </td>
+              <td ng-class="tablePredicateClass('email', options.predicate, options.reverse)">
+                <a ng-click="orderBy('email')">Admin Email</a>
+              </td>
               <td style="width: 24px;"></td>
               </thead>
 
-              <tr ng-repeat="current_org in (organizations | filter:search | orderBy:'name')"
+              <tr ng-repeat="current_org in orderedOrgs.entries | slice
+                     :(orgsPerPage * options.page)
+                     :(orgsPerPage * (options.page + 1))"
                   class="org-row">
                 <td>
                   <span class="avatar" data="current_org.avatar" size="24"></span>