fix(#4330): Listen to UPDATE_EVENT and refresh labels for pagination (#6308)

* Issue #4330: Listen to UPDATE_EVENT and refresh labels for pagination

* Issue #4330: Forgot to put something back before pushing

Author: JSlain

misc/site/index.html

@@ -159,9 +159,7 @@ <h4 class="feature-heading">Basic Example</h4>
           <div class="grid" ui-grid="gridOptionsSimple"></div>
 
           <h4 class="feature-heading">Complex Example</h4>
-          <div class="grid" ui-grid="gridOptionsComplex" ui-grid-edit ui-grid-resize-columns></div>
-
-          
+          <div class="grid" ui-grid="gridOptionsComplex" ui-grid-edit ui-grid-resize-columns ui-grid-pagination></div>          
           <label>Language: </label>
           <select ng-options="language for language in languages" ng-model="currentLanguage" ng-change="changeLanguage()"></select>
         </div>
@@ -188,7 +186,7 @@ <h4 class="feature-heading">Complex Example</h4>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/<%= latestAngular %>/angular-animate.js"></script>
   <script src="//ui-grid.info/release/ui-grid-unstable.min.js"></script>
   <script>
-    angular.module('demo', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'ui.grid.resizeColumns'])
+    angular.module('demo', ['ngAnimate', 'ui.grid', 'ui.grid.edit', 'ui.grid.resizeColumns', 'ui.grid.pagination'])
     .run(function($rootScope, uiGridConstants, i18nService) {
       $rootScope.gridOptionsSimple = {
         data: [
@@ -299,6 +297,8 @@ <h4 class="feature-heading">Complex Example</h4>
         enableFiltering: true,
         showGridFooter: true,
         showColumnFooter: true,
+        paginationPageSizes: [10, 20, 30],
+        paginationPageSize: 10,
         columnDefs: [
           { name: 'name', aggregationType: uiGridConstants.aggregationTypes.count, width: 150 },
           { name: 'gender', filter: { term: 'male' }, width: 150, enableCellEdit: false,

src/features/pagination/js/pagination.js

@@ -378,8 +378,8 @@
    *
    *  @description Panel for handling pagination
    */
-  module.directive('uiGridPager', ['uiGridPaginationService', 'uiGridConstants', 'gridUtil', 'i18nService',
-    function (uiGridPaginationService, uiGridConstants, gridUtil, i18nService) {
+  module.directive('uiGridPager', ['uiGridPaginationService', 'uiGridConstants', 'gridUtil', 'i18nService', 'i18nConstants',
+    function (uiGridPaginationService, uiGridConstants, gridUtil, i18nService, i18nConstants) {
       return {
         priority: -200,
         scope: true,
@@ -388,11 +388,18 @@
           var defaultFocusElementSelector = '.ui-grid-pager-control-input';
           $scope.aria = i18nService.getSafeText('pagination.aria'); //Returns an object with all of the aria labels
 
-          $scope.paginationApi = uiGridCtrl.grid.api.pagination;
-          $scope.sizesLabel = i18nService.getSafeText('pagination.sizes');
-          $scope.totalItemsLabel = i18nService.getSafeText('pagination.totalItems');
-          $scope.paginationOf = i18nService.getSafeText('pagination.of');
-          $scope.paginationThrough = i18nService.getSafeText('pagination.through');
+          var updateLabels = function(){
+            $scope.paginationApi = uiGridCtrl.grid.api.pagination;
+            $scope.sizesLabel = i18nService.getSafeText('pagination.sizes');
+            $scope.totalItemsLabel = i18nService.getSafeText('pagination.totalItems');
+            $scope.paginationOf = i18nService.getSafeText('pagination.of');
+            $scope.paginationThrough = i18nService.getSafeText('pagination.through');
+          };
+
+
+          updateLabels();
+
+          $scope.$on(i18nConstants.UPDATE_EVENT, updateLabels);
 
           var options = uiGridCtrl.grid.options;
 

src/features/pagination/test/pagination.spec.js

@@ -5,13 +5,15 @@ describe('ui.grid.pagination uiGridPaginationService', function () {
   var gridElement;
   var $rootScope;
   var $timeout;
+  var i18nService;
 
   beforeEach(module('ui.grid'));
   beforeEach(module('ui.grid.pagination'));
 
-  beforeEach(inject(function (_$rootScope_, _$timeout_, $compile) {
+  beforeEach(inject(function (_$rootScope_, _$timeout_, $compile, _i18nService_) {
     $rootScope = _$rootScope_;
     $timeout = _$timeout_;
+    i18nService = _i18nService_;
 
     $rootScope.gridOptions = {
       columnDefs: [
@@ -175,6 +177,19 @@ describe('ui.grid.pagination uiGridPaginationService', function () {
         expect(gridRows.eq(0).find('div.ui-grid-cell').eq(1).text()).toBe('K');
       });
     });
+
+    it('changes labels according to i18nService', function(){
+      $rootScope.$digest();
+      $timeout.flush();
+
+      expect(gridElement.find('.ui-grid-pager-row-count-label').text()).toEqual(' items per page');
+
+      i18nService.setCurrentLang('fr');
+
+      $rootScope.$digest();
+
+      expect(gridElement.find('.ui-grid-pager-row-count-label').text()).toEqual(' éléments par page');
+    });
   });
 
   describe('custom pagination', function () {

src/js/i18n/ui-i18n.js

@@ -184,7 +184,7 @@
          * @name setCurrentLang
          * @methodOf ui.grid.i18n.service:i18nService
          * @description sets the current language to use in the application
-         * $broadcasts the Update_Event on the $rootScope
+         * $broadcasts the i18nConstants.UPDATE_EVENT on the $rootScope
          * @param {string} lang to set
          * @example
          * <pre>