Use items per page setting on Angular tables

Make NG table get page size from the items per page setting
instead of a fixed number which is 20.

The styling of the pagination control is the same as the
django table with the prev and next links.

Co-Authored-By: Liuqing Jing <jing.liuqing@99cloud.net>
Co-Authored-By: Vladislav Kuzmin <vkuzmin@mirantis.com>

Change-Id: Ie5307e335ca3251a342d370e7277fe16067f7949
Closes-Bug: #1647677

horizon/static/framework/conf/conf.js

@@ -20,5 +20,8 @@
     .value('horizon.framework.conf.toastOptions', {
       'delay': 3000,
       'dimissible': ['alert-success', 'alert-info']
+    })
+    .value('horizon.framework.conf.tableOptions', {
+      'pageSize': 20
     });
 })();

horizon/static/framework/widgets/table/hz-dynamic-table.directive.spec.js

@@ -29,6 +29,17 @@
     beforeEach(module('horizon.framework.widgets.magic-search'));
     beforeEach(module('horizon.framework.widgets.table'));
 
+    beforeEach(function() {
+      horizon.cookies = {
+        get: function() {
+          return;
+        }
+      };
+
+      spyOn(horizon.cookies, 'get').and.callThrough();
+
+    });
+
     beforeEach(inject(function(_$compile_, _$rootScope_) {
       $compile = _$compile_;
       $rootScope = _$rootScope_;

horizon/static/framework/widgets/table/hz-dynamic-table.spec.js

@@ -31,6 +31,17 @@
     beforeEach(module('smart-table'));
     beforeEach(module('horizon.framework'));
 
+    beforeEach(function() {
+      horizon.cookies = {
+        get: function() {
+          return;
+        }
+      };
+
+      spyOn(horizon.cookies, 'get').and.callThrough();
+
+    });
+
     beforeEach(inject(function ($injector) {
       $compile = $injector.get('$compile');
       $scope = $injector.get('$rootScope').$new();

horizon/static/framework/widgets/table/hz-table-footer.controller.js

@@ -0,0 +1,33 @@
+/*
+ * Copyright 2016 IBM Corp.
+ * Copyright 2016 99Cloud.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+(function () {
+  'use strict';
+
+  angular
+    .module('horizon.framework.widgets.table')
+    .controller('HzTableFooterController', HzTableFooterController);
+
+  HzTableFooterController.$inject = [
+    'horizon.framework.conf.tableOptions'
+  ];
+
+  function HzTableFooterController(tableOptions) {
+    var ctrl = this;
+    ctrl.pageSize = horizon.cookies.get('API_RESULT_PAGE_SIZE') || tableOptions.pageSize;
+  }
+
+})();

horizon/static/framework/widgets/table/hz-table-footer.directive.js

@@ -57,6 +57,7 @@
     */
   function hzTableFooter(basePath, $compile) {
     var directive = {
+      controller: 'HzTableFooterController as ctrl',
       restrict: 'A',
       scope: {
         items: '='

horizon/static/framework/widgets/table/hz-table-footer.html

@@ -1,12 +1,11 @@
 <!--
   Table-footer:
   Ensure colspan is greater or equal to number of column-headers.
-  TODO: get items per page from the user settings
 -->
 <tr>
   <td colspan="100">
-    <span class="display">{$ items.length|itemCount $}</span>
-    <div st-pagination="" st-items-by-page="20" st-displayed-pages="20"></div>
+    <span>{$ items.length|itemCount $}</span>
+    <st-pagination st-items-by-page="ctrl.pageSize"></st-pagination>
     <ng-transclude></ng-transclude>
   </td>
-</tr>
+</tr>

horizon/static/framework/widgets/table/pagination.html

@@ -0,0 +1,13 @@
+<span ng-if="pages.length > 1">
+  <span class="spacer">|</span>
+  <span ng-hide="currentPage === 1">
+    <a ng-click="selectPage(currentPage - 1)">
+      &laquo;&nbsp;<translate>Prev</translate>
+    </a>
+  </span>
+  <span ng-hide="currentPage === numPages">
+    <a ng-click="selectPage(currentPage + 1)">
+      <translate>Next</translate>&nbsp;&raquo;
+    </a>
+  </span>
+</span>

horizon/static/framework/widgets/table/table.module.js

@@ -29,7 +29,7 @@
    * module and jQuery (for table drawer slide animation in IE9) to be installed.
    */
   angular
-    .module('horizon.framework.widgets.table', [])
+    .module('horizon.framework.widgets.table', ['smart-table'])
 
     /**
      * @ngdoc parameters
@@ -53,5 +53,9 @@
       CLEAR_SELECTIONS: 'hzTable:clearSelections',
       ROW_SELECTED: 'hzTable:rowSelected',
       ROW_EXPANDED: 'hzTable:rowExpanded'
-    });
+    })
+    .config(['stConfig','$windowProvider', function (stConfig, $windowProvider) {
+      var path = $windowProvider.$get().STATIC_URL + 'framework/widgets/table/';
+      stConfig.pagination.template = path + 'pagination.html';
+    }]);
 })();

horizon/static/framework/widgets/table/table.spec.js

@@ -260,12 +260,27 @@
   });
 
   describe('hzTableFooter directive', function () {
-    var $scope, $compile, $element;
+    var $scope, $compile, $element, controllerProvider, horizonCookiesSpy;
 
     beforeEach(module('templates'));
     beforeEach(module('smart-table'));
     beforeEach(module('horizon.framework'));
 
+    beforeEach(inject(function ($controller) {
+      controllerProvider = $controller;
+    }));
+
+    beforeEach(function() {
+      horizon.cookies = {
+        get: function() {
+          return;
+        }
+      };
+
+      horizonCookiesSpy = spyOn(horizon.cookies, 'get');
+
+    });
+
     beforeEach(inject(function ($injector) {
       $compile = $injector.get('$compile');
       $scope = $injector.get('$rootScope').$new();
@@ -310,11 +325,25 @@
 
       expect($element).toBeDefined();
       expect($element.find('span').length).toBe(1);
-      expect($element.find('span').text()).toBe('3 items');
+      expect($element.find('span').text()).toBe('Displaying 3 items');
     });
 
     it('includes pagination', function() {
-      expect($element.find('div').attr('st-items-by-page')).toEqual('20');
+      expect($element.find('st-pagination').attr('st-items-by-page')).toEqual('ctrl.pageSize');
+    });
+
+    it('gets pagination from cookies', function() {
+      horizonCookiesSpy.and.returnValue(10);
+
+      var ctrl = controllerProvider('HzTableFooterController');
+      expect(ctrl.pageSize).toBe(10);
+    });
+
+    it('gets pagination from config service', function() {
+      horizonCookiesSpy.and.callThrough();
+
+      var ctrl = controllerProvider('HzTableFooterController');
+      expect(ctrl.pageSize).toBe(20);
     });
 
   });

openstack_dashboard/static/dashboard/scss/_util.scss

@@ -64,3 +64,7 @@ input::-ms-clear, input::-ms-reveal {
   width: 0;
   height: auto;
 }
+
+[ng-click] {
+  cursor: pointer;
+}