Merge pull request #1136 from opf/bug-6469-hide-pagination-during-load

Stopping the NaN/undefined crap from showing on pagination during load.

app/assets/javascripts/angular/directives/components/table_pagination.js

@@ -61,7 +61,9 @@ angular.module('openproject.uiComponents')
        * @description Defines a string containing page bound information inside the directive scope
        */
       function updateCurrentRangeLabel() {
-        scope.currentRange = "(" + PaginationService.getLowerPageBound() + " - " + PaginationService.getUpperPageBound(scope.totalEntries) + "/" + scope.totalEntries + ")";
+        if (scope.totalEntries){
+          scope.currentRange = "(" + PaginationService.getLowerPageBound() + " - " + PaginationService.getUpperPageBound(scope.totalEntries) + "/" + scope.totalEntries + ")";
+        }
       }
 
       /**

karma/tests/directives/components/table_pagination-test.js

@@ -26,39 +26,92 @@
 // See doc/COPYRIGHT.rdoc for more details.
 //++
 
-describe('tablePagination Directive', function() {
+describe('tablePagination Directive', function () {
-    var compile, element, rootScope, scope;
+  var compile, element, rootScope, scope;
 
-    beforeEach(angular.mock.module('openproject.uiComponents', 'openproject.services'));
+  beforeEach(angular.mock.module('openproject.uiComponents', 'openproject.services'));
-    beforeEach(module('templates'));
+  beforeEach(module('templates'));
 
-    beforeEach(inject(function($rootScope, $compile) {
+  beforeEach(inject(function ($rootScope, $compile) {
-      var html;
+    var html;
-      html = '<table-pagination  icon-name="totalResults" update-results="showUserSomething()"></table-pagination>';
+    html = '<table-pagination total-entries="tableEntries" icon-name="totalResults" update-results="showUserSomething()"></table-pagination>';
 
-      element = angular.element(html);
+    element = angular.element(html);
-      rootScope = $rootScope;
+    rootScope = $rootScope;
-      scope = $rootScope.$new();
+    scope = $rootScope.$new();
 
-      compile = function() {
+    compile = function () {
-        $compile(element)(scope);
+      $compile(element)(scope);
-        scope.$digest();
+      scope.$digest();
+    };
+  }));
+
+  describe('page ranges and links', function () {
+    beforeEach(function() {
+      compile();
+    });
+
+    it('should display the correct page range', function () {
+      var range = element.find('.range');
+
+      expect(range.text()).to.equal('');
+
+      scope.tableEntries = 11;
+      scope.$apply();
+      expect(range.text()).to.equal('(1 - 10/11)');
+
+      scope.tableEntries = 663;
+      scope.$apply();
+      expect(range.text()).to.equal('(1 - 10/663)');
+    });
+
+    it('should display correct number of page number links', function () {
+      var numberOfPageNumberLinks = function () {
+        return element.find('a.page-no').size();
       };
-    }));
+
-
+      expect(numberOfPageNumberLinks()).to.eq(0);
-    describe('element', function() {
+
-      beforeEach(function() {
+      scope.tableEntries = 11;
-        scope.totalResults  = 10;
+      scope.$apply();
-        scope.showUserSomething = function() {
+      expect(numberOfPageNumberLinks()).to.eq(1);
-          alert("FOO");
+
-        };
+      scope.tableEntries = 59;
-        compile();
+      scope.$apply();
-      });
+      expect(numberOfPageNumberLinks()).to.eq(5);
-
+
-      it('should render perPage options', function() {
+      scope.tableEntries = 101;
-        var perPageOptions = element.find('span.per_page_options');
+      scope.$apply();
-
+      expect(numberOfPageNumberLinks()).to.eq(10);
-        expect(perPageOptions.text()).to.include('Per page:');
+    });
-      });
+  });
+
+  describe('perPage options', function () {
+    it('should always render perPage options', function () {
+      compile();
+      var perPageOptions = element.find('span.per_page_options');
+
+      expect(perPageOptions.text()).to.include('Per page:');
+    });
+  });
+
+  describe('callback function', function() {
+    var updateResultsFn;
+
+    beforeEach(function () {
+      updateResultsFn = sinon.spy();
+
+      scope.showUserSomething = updateResultsFn;
+      compile();
+    });
+
+    it('should call the updateResults function on navigating page', function () {
+      var nextPage = element.find('.next_page');
+      var previousPage = element.find('.previous_page');
+      nextPage.click();
+      previousPage.click();
+
+      expect(updateResultsFn).to.have.been.calledTwice;
     });
+  });
 });

public/templates/components/table_pagination.html

@@ -8,6 +8,7 @@
 
   <span ng-if="prePageNumbers" ng-repeat="pageNumber in prePageNumbers">
     <a ng-click="showPage(pageNumber)"
+       class="page-no"
        rel="next"
        href="">{{ pageNumber }}</a>
   </span>
@@ -17,6 +18,7 @@
     <em ng-if="pageNumber == paginationOptions.page" class="current">{{ pageNumber }}</em>
     <a ng-if="pageNumber != paginationOptions.page"
        ng-click="showPage(pageNumber)"
+       class="page-no"
        rel="next"
        href="">{{ pageNumber }}</a>
   </span>
@@ -24,6 +26,7 @@
   <span ng-if="postPageNumbers" class="gap">...</span>
   <span ng-if="postPageNumbers" ng-repeat="pageNumber in postPageNumbers">
     <a ng-click="showPage(pageNumber)"
+       class="page-no"
        rel="next"
        href="">{{ pageNumber }}</a>
   </span>