alternative management service sort

app/config/apiMapping.js

@@ -251,6 +251,11 @@ var apiMapping = {
         submitRequest: {
             'endpoint': '/private/queue',
             'controller': 'services'
+        },
+        page: {
+            'endpoint': '/private/queue',
+            'controller': 'services',
+            'method': 'page'
         }
     },
     Notification: {

app/controllers/serviceController.js

@@ -10,13 +10,45 @@ app.controller('ServiceController', function ($controller, $route, $scope, Proje
         options: ['UP', 'DOWN', 'MAINTENANCE']
     };
 
-    $scope.serviceRepo = ServiceRepo;
-
-    $scope.services = ServiceRepo.getAll();
+    $scope.repo = ServiceRepo;
 
     $scope.forms = {};
 
     $scope.serviceToDelete = {};
+
+    $scope.filters = [
+        {
+            gloss: 'Service',
+            property: 'name'
+        },
+        {
+            gloss: 'Status',
+            property: 'status'
+        },
+        {
+            gloss: 'Auto Updating',
+            property: 'isAuto'
+        },
+        {
+            gloss: 'Public',
+            property: 'isPublic'
+        },
+        {
+            gloss: 'Short List',
+            property: 'onShortList'
+        },
+        {
+            gloss: 'URL',
+            property: 'serviceUrl'
+        }
+    ];
+
+    $scope.defaultSort = [
+        {
+            property: 'name',
+            direction: 'ASC'
+        }
+    ];
 
     ProjectService.getAll().then(function (projects) {
         $scope.projects = projects;
@@ -94,20 +126,8 @@ app.controller('ServiceController', function ($controller, $route, $scope, Proje
         $scope.resetServices();
     };
 
-    var buildTable = function () {
-        var allServices = ServiceRepo.getAll();
-        $scope.tableParams = new NgTableParams({
-            count: allServices.length
-        }, {
-            counts: [],
-            filterDelay: 0,
-            dataset: allServices
-        });
-    };
-
-    ServiceRepo.ready().then(function () {
-        buildTable();
-        $scope.tableParams.reload();
+    ServiceRepo.ready().then(function () {    	
+    	$scope.tableParams = ServiceRepo.getTableParams();
     });
 
     $scope.confirmDelete = function (service) {

app/directives/weaverTableDirective.js

@@ -50,7 +50,7 @@ app.directive('weaverTable', function ($controller) {
 
         }
 
-        var activeSort = $scope.repo.getPageSettings().sort = [{
+        var activeSort = $scope.repo.getPageSettings().sort = $scope.defaultSort ? $scope.defaultSort : [{
             property: 'service.name',
             direction: 'ASC'
         }, {

app/repo/serviceRepo.js

@@ -1,6 +1,53 @@
-app.repo("ServiceRepo", function ServiceRepo($q, $timeout, WsApi) {
+app.repo("ServiceRepo", function ServiceRepo($q, $timeout, WsApi, Service, TableFactory) {
 
     var serviceRepo = this;
+
+    serviceRepo.getPageSettings = function () {
+        return table.getPageSettings();
+    };
+
+    serviceRepo.getTableParams = function () {
+        return table.getTableParams();
+    };
+
+    serviceRepo.fetchPage = function (pageSettings) {
+        angular.extend(serviceRepo.mapping.page, {
+            'data': pageSettings ? pageSettings : table.getPageSettings()
+        });
+        return WsApi.fetch(serviceRepo.mapping.page);
+    };
+
+    var safePage = function(resolve) {
+        serviceRepo.fetchPage().then(function (response) {
+            var page = angular.fromJson(response.body).payload.PageImpl;
+            serviceRepo.empty();
+            serviceRepo.addAll(page.content);
+            if (table.getPageSettings().pageNumber > 1 && table.getPageSettings().pageNumber > page.totalPages) {
+                table.setPage(page.totalPages);
+                safePage(resolve);
+            } else {
+                resolve(page);
+            }
+        });
+    };
+
+    serviceRepo.page = function () {
+        return $q(function (resolve) {
+            safePage(resolve);
+        });
+    };
+
+    var table = TableFactory.buildTable({
+        pageNumber: sessionStorage.getItem('services-page') ? sessionStorage.getItem('services-page') : 1,
+        pageSize: sessionStorage.getItem('services-size') ? sessionStorage.getItem('services-size') : 10,
+        direction: 'DESC',
+        properties: ['name'],
+        filters: {},
+        counts: [5, 10, 25, 50, 100],
+        page: serviceRepo.page,
+        data: serviceRepo.getContents(),
+        name: 'services'
+    });
 
     var checkCreateNotes = function (service) {
         if (service.notes === undefined) {

app/views/management/services.html

@@ -1,32 +1,50 @@
 <div class="management-table" ng-controller="ServiceController">
 
-  <div class="management-control clearfix">
-    <div class="row">
-      <div class="col-md-12">
-        <button class="btn btn-default view-action-button pull-right" ng-click="openModal('#addServiceModal')">Add Service</button>
-      </div>
-    </div>
-  </div>
+  <weaver-table>
 
-  <table ng-table="tableParams" show-filter="false" class="table table-bordered table-striped service-table">
-    <tr ng-repeat="service in services track by service.id">
-      <td title="'Service'"><a href="{{'service/' + service.id + '/detail/'}}">{{service.name}}</a> <span ng-if="service.schedules.length > 0">(scheduled)</span></td>
-      <td title="'Status'">{{service.status}}</td>
-      <td title="'Auto Updating'">{{service.isAuto}}</td>
-      <td title="'Public'">{{service.isPublic}}</td>
-      <td title="'Short List'">{{service.onShortList}}</td>
-      <td title="'URL'">{{service.serviceUrl}}</td>
-      <td title="'Project'">{{getProject(service).name}}</td>
-      <td class="actions-column text-center" title="'Actions'">
-        <span class="glyphicon glyphicon-pencil" title="edit" ng-click="editService(service)"></span>
-        <span class="glyphicon glyphicon-time" title="schedule" ng-click="editSchedule(service)"></span>
-        <span class="glyphicon glyphicon-trash" title="delete" ng-click="confirmDelete(service)"></span>
-      </td>
-    </tr>
-  </table>
+    <weaver-table-controls>
+      <button class="btn btn-default view-action-button pull-right" ng-click="openModal('#addServiceModal')">Add Service</button>
+    </weaver-table-controls>
 
-  <modal modal-id="addServiceModal" modal-view="views/modals/addServiceModal.html" modal-header-class="modal-header-primary" wvr-modal-backdrop="static"></modal>
-  <modal modal-id="deleteServiceModal" modal-view="views/modals/deleteServiceModal.html" modal-header-class="modal-header-danger" wvr-modal-backdrop="static"></modal>
-  <modal modal-id="editServiceModal" modal-view="views/modals/editServiceModal.html" modal-header-class="modal-header-primary" wvr-modal-backdrop="static"></modal>
-  <modal modal-id="editScheduleModal" modal-view="views/modals/editScheduleModal.html" modal-header-class="modal-header-primary" wvr-modal-backdrop="static"></modal>
-</div>
+    <weaver-table-element>
+      <table ng-table="tableParams" template-pagination="views/customPaginationControls.html" show-filter="false" class="table table-bordered table-striped service-table">
+        <thead>
+          <tr>
+            <th><span>Service<span ng-click="toggleSort('name')" class="sort-control glyphicon" ng-class="{'unsorted': unsorted('name'), 'asc': asc('name'), 'desc': desc('name')}"></span></span></th>
+            <th><span>Status<span ng-click="toggleSort('status')" class="sort-control glyphicon" ng-class="{'unsorted': unsorted('status'), 'asc': asc('status'), 'desc': desc('status')}"></span></span></th>
+            <th><span>Auto Updating<span ng-click="toggleSort('isAuto')" class="sort-control glyphicon" ng-class="{'unsorted': unsorted('isAuto'), 'asc': asc('isAuto'), 'desc': desc('isAuto')}"></span></span></th>
+            <th><span>Public<span ng-click="toggleSort('isPublic')" class="sort-control glyphicon" ng-class="{'unsorted': unsorted('isPublic'), 'asc': asc('isPublic'), 'desc': desc('isPublic')}"></span></span></th>
+            <th><span>Short List<span ng-click="toggleSort('onShortList')" class="sort-control glyphicon" ng-class="{'unsorted': unsorted('onShortList'), 'asc': asc('onShortList'), 'desc': desc('onShortList')}"></span></span></th>
+            <th><span>URL<span ng-click="toggleSort('serviceUrl')" class="sort-control glyphicon" ng-class="{'unsorted': unsorted('serviceUrl'), 'asc': asc('serviceUrl'), 'desc': desc('serviceUrl')}"></span></span></th>
+            <th><span>Project</span></th>
+            <th><span>Actions</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="service in $data">
+            <td title="'Service'"><a href="{{'service/' + service.id + '/detail/'}}">{{service.name}}</a> <span ng-if="service.schedules.length > 0">(scheduled)</span></td>
+            <td title="'Status'">{{service.status}}</td>
+            <td title="'Auto Updating'">{{service.isAuto}}</td>
+            <td title="'Public'">{{service.isPublic}}</td>
+            <td title="'Short List'">{{service.onShortList}}</td>
+            <td title="'URL'">{{service.serviceUrl}}</td>
+            <td title="'Project'">{{getProject(service).name}}</td>
+            <td class="actions-column text-center" title="'Actions'">
+              <span class="glyphicon glyphicon-pencil" title="edit" ng-click="editService(service)"></span>
+              <span class="glyphicon glyphicon-time" title="schedule" ng-click="editSchedule(service)"></span>
+              <span class="glyphicon glyphicon-trash" title="delete" ng-click="confirmDelete(service)"></span>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </weaver-table-element>
+
+    <weaver-table-modals>
+      <modal modal-id="addServiceModal" modal-view="views/modals/addServiceModal.html" modal-header-class="modal-header-primary" wvr-modal-backdrop="static"></modal>
+      <modal modal-id="deleteServiceModal" modal-view="views/modals/deleteServiceModal.html" modal-header-class="modal-header-danger" wvr-modal-backdrop="static"></modal>
+      <modal modal-id="editServiceModal" modal-view="views/modals/editServiceModal.html" modal-header-class="modal-header-primary" wvr-modal-backdrop="static"></modal>
+      <modal modal-id="editScheduleModal" modal-view="views/modals/editScheduleModal.html" modal-header-class="modal-header-primary" wvr-modal-backdrop="static"></modal>
+    </weaver-table-modals>
+  </weaver-table>
+
+</div>

tests/mocks/repo/mockServiceRepo.js

@@ -119,4 +119,15 @@ angular.module('mock.serviceRepo', []).service('ServiceRepo', function ($q) {
         return defer.promise;
     };
 
+    ServiceRepo.getPageSettings = function () {
+        return {
+            sort: [
+                {
+                    property: 'name',
+                    direction: 'ASC'
+                }
+            ]
+        };
+    };
+
 });