Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

Commit 0803bb8

Browse files
Ghislain BeaulacGhislain Beaulac
Ghislain Beaulac
authored and
Ghislain Beaulac
committed
add missing translation to Pagination Component
1 parent 4c4bf4c commit 0803bb8

24 files changed

+136
-73
lines changed

‎dist/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,12 @@ This is a work in progress, but so far here are some of the features that `angul
4040
- Optimized DataView which brings a lot of functionalities (sort, grouping, and more)
4141
- even server side data is saved into the SlickGrid DataView
4242
- All the [SlickGrid Events](https://github.com/6pac/SlickGrid/wiki/Grid-Events) are supported, see the [Wiki](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Grid-&-DataView-Events)
43+
- Localization support with `ngx-translate`, please read the [Wiki - Localization](https://github.com/ghiscoding/Angular-Slickgrid/wiki/Localization)
4344
- ... more to come
4445

4546
## Missing features (planned items, not necessarily in order of execution)
4647
The following are SlickGrid features which are not yet included in this library but will be in the eventual future.
4748
- Export to CSV
48-
- Support of Locale with `ngx-translate`
4949
- Filters to support multi-select dropdown and eventually custom filters
5050

5151
### License

‎dist/angular-slickgrid.es5.js‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { Observable as Observable$1 } from 'rxjs/Observable';
2929
import 'rxjs/add/operator/first';
3030
import 'rxjs/add/operator/take';
3131
import 'rxjs/add/operator/toPromise';
32-
import { TranslateService } from '@ngx-translate/core';
32+
import { TranslateModule, TranslateService } from '@ngx-translate/core';
3333
import { Component, EventEmitter, Injectable, Input, NgModule, Output } from '@angular/core';
3434
import { CommonModule } from '@angular/common';
3535
var CaseType = {};
@@ -11941,17 +11941,20 @@ var SlickPaginationComponent = /** @class */ (function () {
1194111941
/**
1194211942
* @param {?} filterService
1194311943
* @param {?} sortService
11944+
* @param {?} translate
1194411945
*/
11945-
function SlickPaginationComponent(filterService, sortService) {
11946+
function SlickPaginationComponent(filterService, sortService, translate) {
1194611947
this.filterService = filterService;
1194711948
this.sortService = sortService;
11949+
this.translate = translate;
1194811950
this.dataFrom = 1;
1194911951
this.dataTo = 1;
1195011952
this.itemsPerPage = 25;
1195111953
this.pageCount = 0;
1195211954
this.pageNumber = 1;
1195311955
this.totalItems = 0;
1195411956
this.paginationPageSizes = [25, 75, 100];
11957+
this.fromToParams = { from: this.dataFrom, to: this.dataTo, totalItems: this.totalItems };
1195511958
}
1195611959
Object.defineProperty(SlickPaginationComponent.prototype, "gridPaginationOptions", {
1195711960
/**
@@ -12119,7 +12122,7 @@ var SlickPaginationComponent = /** @class */ (function () {
1211912122
SlickPaginationComponent.decorators = [
1212012123
{ type: Component, args: [{
1212112124
selector: 'slick-pagination',
12122-
template: "\n <div class=\"slick-pagination\">\n <div class=\"slick-pagination-nav\">\n <nav aria-label=\"Page navigation\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [ngClass]=\"pageNumber === 1 ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-first fa fa-angle-double-left\" aria-label=\"First\" (click)=\"changeToFirstPage($event)\">\n </a>\n </li>\n <li class=\"page-item\" [ngClass]=\"pageNumber === 1 ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-prev fa fa-angle-left\" aria-label=\"Previous\" (click)=\"changeToPreviousPage($event)\">\n </a>\n </li>\n </ul>\n </nav>\n\n <div class=\"slick-page-number\">\n page {{pageNumber}} of {{pageCount}}\n </div>\n\n <nav aria-label=\"Page navigation\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [ngClass]=\"pageNumber === pageCount ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-next text-center fa fa-lg fa-angle-right\" aria-label=\"Next\" (click)=\"changeToNextPage($event)\">\n </a>\n </li>\n <li class=\"page-item\" [ngClass]=\"pageNumber === pageCount ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-end fa fa-lg fa-angle-double-right\" aria-label=\"Last\" (click)=\"changeToLastPage($event)\">\n </a>\n </li>\n </ul>\n </nav>\n </div>\n <span class=\"slick-pagination-settings\">\n <select id=\"items-per-page-label\" [value]=\"itemsPerPage\" (change)=\"onChangeItemPerPage($event)\">\n <option value=\"{{pageSize}}\" *ngFor=\"let pageSize of paginationPageSizes;\">{{pageSize}}</option>\n </select>\n items per page,\n <span class=\"slick-pagination-count\">\n {{dataFrom}}-{{dataTo}} of {{totalItems}} items\n </span>\n </span>\n </div>\n "
12125+
template: "\n <div class=\"slick-pagination\">\n <div class=\"slick-pagination-nav\">\n <nav aria-label=\"Page navigation\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [ngClass]=\"pageNumber === 1 ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-first fa fa-angle-double-left\" aria-label=\"First\" (click)=\"changeToFirstPage($event)\">\n </a>\n </li>\n <li class=\"page-item\" [ngClass]=\"pageNumber === 1 ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-prev fa fa-angle-left\" aria-label=\"Previous\" (click)=\"changeToPreviousPage($event)\">\n </a>\n </li>\n </ul>\n </nav>\n\n <div class=\"slick-page-number\">\n <span [translate]=\"'PAGE_X_OF_Y'\" [translateParams]=\"{ x: pageNumber, y: pageCount }\"></span>\n </div>\n\n <nav aria-label=\"Page navigation\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [ngClass]=\"pageNumber === pageCount ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-next text-center fa fa-lg fa-angle-right\" aria-label=\"Next\" (click)=\"changeToNextPage($event)\">\n </a>\n </li>\n <li class=\"page-item\" [ngClass]=\"pageNumber === pageCount ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-end fa fa-lg fa-angle-double-right\" aria-label=\"Last\" (click)=\"changeToLastPage($event)\">\n </a>\n </li>\n </ul>\n </nav>\n </div>\n <span class=\"slick-pagination-settings\">\n <select id=\"items-per-page-label\" [value]=\"itemsPerPage\" (change)=\"onChangeItemPerPage($event)\">\n <option value=\"{{pageSize}}\" *ngFor=\"let pageSize of paginationPageSizes;\">{{pageSize}}</option>\n </select>\n <span [translate]=\"'ITEMS_PER_PAGE'\"></span>,\n <span class=\"slick-pagination-count\">\n <span [translate]=\"'FROM_TO_OF_TOTAL_ITEMS'\" [translateParams]=\"{ from: dataFrom, to: dataTo, totalItems: totalItems }\"></span>\n </span>\n </span>\n </div>\n "
1212312126
},] },
1212412127
{ type: Injectable },
1212512128
];
@@ -12129,6 +12132,7 @@ SlickPaginationComponent.decorators = [
1212912132
SlickPaginationComponent.ctorParameters = function () { return [
1213012133
{ type: FilterService, },
1213112134
{ type: SortService, },
12135+
{ type: TranslateService, },
1213212136
]; };
1213312137
SlickPaginationComponent.propDecorators = {
1213412138
'gridPaginationOptions': [{ type: Input },],
@@ -33602,7 +33606,8 @@ var AngularSlickgridModule = /** @class */ (function () {
3360233606
AngularSlickgridModule.decorators = [
3360333607
{ type: NgModule, args: [{
3360433608
imports: [
33605-
CommonModule
33609+
CommonModule,
33610+
TranslateModule
3360633611
],
3360733612
declarations: [
3360833613
AngularSlickgridComponent,

‎dist/angular-slickgrid.es5.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/angular-slickgrid.js‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Observable as Observable$1 } from 'rxjs/Observable';
22
import 'rxjs/add/operator/first';
33
import 'rxjs/add/operator/take';
44
import 'rxjs/add/operator/toPromise';
5-
import { TranslateService } from '@ngx-translate/core';
5+
import { TranslateModule, TranslateService } from '@ngx-translate/core';
66
import { Component, EventEmitter, Injectable, Input, NgModule, Output } from '@angular/core';
77
import { CommonModule } from '@angular/common';
88

@@ -13666,17 +13666,20 @@ class SlickPaginationComponent {
1366613666
/**
1366713667
* @param {?} filterService
1366813668
* @param {?} sortService
13669+
* @param {?} translate
1366913670
*/
13670-
constructor(filterService, sortService) {
13671+
constructor(filterService, sortService, translate) {
1367113672
this.filterService = filterService;
1367213673
this.sortService = sortService;
13674+
this.translate = translate;
1367313675
this.dataFrom = 1;
1367413676
this.dataTo = 1;
1367513677
this.itemsPerPage = 25;
1367613678
this.pageCount = 0;
1367713679
this.pageNumber = 1;
1367813680
this.totalItems = 0;
1367913681
this.paginationPageSizes = [25, 75, 100];
13682+
this.fromToParams = { from: this.dataFrom, to: this.dataTo, totalItems: this.totalItems };
1368013683
}
1368113684
/**
1368213685
* @param {?} gridPaginationOptions
@@ -13850,7 +13853,7 @@ SlickPaginationComponent.decorators = [
1385013853
</nav>
1385113854

1385213855
<div class="slick-page-number">
13853-
page {{pageNumber}} of {{pageCount}}
13856+
<span [translate]="'PAGE_X_OF_Y'" [translateParams]="{ x: pageNumber, y: pageCount }"></span>
1385413857
</div>
1385513858

1385613859
<nav aria-label="Page navigation">
@@ -13870,9 +13873,9 @@ SlickPaginationComponent.decorators = [
1387013873
<select id="items-per-page-label" [value]="itemsPerPage" (change)="onChangeItemPerPage($event)">
1387113874
<option value="{{pageSize}}" *ngFor="let pageSize of paginationPageSizes;">{{pageSize}}</option>
1387213875
</select>
13873-
items per page,
13876+
<span [translate]="'ITEMS_PER_PAGE'"></span>,
1387413877
<span class="slick-pagination-count">
13875-
{{dataFrom}}-{{dataTo}} of {{totalItems}} items
13878+
<span [translate]="'FROM_TO_OF_TOTAL_ITEMS'" [translateParams]="{ from: dataFrom, to: dataTo, totalItems: totalItems }"></span>
1387613879
</span>
1387713880
</span>
1387813881
</div>
@@ -13886,6 +13889,7 @@ SlickPaginationComponent.decorators = [
1388613889
SlickPaginationComponent.ctorParameters = () => [
1388713890
{ type: FilterService, },
1388813891
{ type: SortService, },
13892+
{ type: TranslateService, },
1388913893
];
1389013894
SlickPaginationComponent.propDecorators = {
1389113895
'gridPaginationOptions': [{ type: Input },],
@@ -39396,7 +39400,8 @@ class AngularSlickgridModule {
3939639400
AngularSlickgridModule.decorators = [
3939739401
{ type: NgModule, args: [{
3939839402
imports: [
39399-
CommonModule
39403+
CommonModule,
39404+
TranslateModule
3940039405
],
3940139406
declarations: [
3940239407
AngularSlickgridComponent,

‎dist/angular-slickgrid.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/angular-slickgrid.metadata.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎dist/bundles/angular-slickgrid.umd.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11940,17 +11940,20 @@ var SlickPaginationComponent = /** @class */ (function () {
1194011940
/**
1194111941
* @param {?} filterService
1194211942
* @param {?} sortService
11943+
* @param {?} translate
1194311944
*/
11944-
function SlickPaginationComponent(filterService, sortService) {
11945+
function SlickPaginationComponent(filterService, sortService, translate) {
1194511946
this.filterService = filterService;
1194611947
this.sortService = sortService;
11948+
this.translate = translate;
1194711949
this.dataFrom = 1;
1194811950
this.dataTo = 1;
1194911951
this.itemsPerPage = 25;
1195011952
this.pageCount = 0;
1195111953
this.pageNumber = 1;
1195211954
this.totalItems = 0;
1195311955
this.paginationPageSizes = [25, 75, 100];
11956+
this.fromToParams = { from: this.dataFrom, to: this.dataTo, totalItems: this.totalItems };
1195411957
}
1195511958
Object.defineProperty(SlickPaginationComponent.prototype, "gridPaginationOptions", {
1195611959
/**
@@ -12118,7 +12121,7 @@ var SlickPaginationComponent = /** @class */ (function () {
1211812121
SlickPaginationComponent.decorators = [
1211912122
{ type: core$1.Component, args: [{
1212012123
selector: 'slick-pagination',
12121-
template: "\n <div class=\"slick-pagination\">\n <div class=\"slick-pagination-nav\">\n <nav aria-label=\"Page navigation\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [ngClass]=\"pageNumber === 1 ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-first fa fa-angle-double-left\" aria-label=\"First\" (click)=\"changeToFirstPage($event)\">\n </a>\n </li>\n <li class=\"page-item\" [ngClass]=\"pageNumber === 1 ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-prev fa fa-angle-left\" aria-label=\"Previous\" (click)=\"changeToPreviousPage($event)\">\n </a>\n </li>\n </ul>\n </nav>\n\n <div class=\"slick-page-number\">\n page {{pageNumber}} of {{pageCount}}\n </div>\n\n <nav aria-label=\"Page navigation\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [ngClass]=\"pageNumber === pageCount ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-next text-center fa fa-lg fa-angle-right\" aria-label=\"Next\" (click)=\"changeToNextPage($event)\">\n </a>\n </li>\n <li class=\"page-item\" [ngClass]=\"pageNumber === pageCount ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-end fa fa-lg fa-angle-double-right\" aria-label=\"Last\" (click)=\"changeToLastPage($event)\">\n </a>\n </li>\n </ul>\n </nav>\n </div>\n <span class=\"slick-pagination-settings\">\n <select id=\"items-per-page-label\" [value]=\"itemsPerPage\" (change)=\"onChangeItemPerPage($event)\">\n <option value=\"{{pageSize}}\" *ngFor=\"let pageSize of paginationPageSizes;\">{{pageSize}}</option>\n </select>\n items per page,\n <span class=\"slick-pagination-count\">\n {{dataFrom}}-{{dataTo}} of {{totalItems}} items\n </span>\n </span>\n </div>\n "
12124+
template: "\n <div class=\"slick-pagination\">\n <div class=\"slick-pagination-nav\">\n <nav aria-label=\"Page navigation\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [ngClass]=\"pageNumber === 1 ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-first fa fa-angle-double-left\" aria-label=\"First\" (click)=\"changeToFirstPage($event)\">\n </a>\n </li>\n <li class=\"page-item\" [ngClass]=\"pageNumber === 1 ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-prev fa fa-angle-left\" aria-label=\"Previous\" (click)=\"changeToPreviousPage($event)\">\n </a>\n </li>\n </ul>\n </nav>\n\n <div class=\"slick-page-number\">\n <span [translate]=\"'PAGE_X_OF_Y'\" [translateParams]=\"{ x: pageNumber, y: pageCount }\"></span>\n </div>\n\n <nav aria-label=\"Page navigation\">\n <ul class=\"pagination\">\n <li class=\"page-item\" [ngClass]=\"pageNumber === pageCount ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-next text-center fa fa-lg fa-angle-right\" aria-label=\"Next\" (click)=\"changeToNextPage($event)\">\n </a>\n </li>\n <li class=\"page-item\" [ngClass]=\"pageNumber === pageCount ? 'disabled' : ''\">\n <a class=\"page-link icon-seek-end fa fa-lg fa-angle-double-right\" aria-label=\"Last\" (click)=\"changeToLastPage($event)\">\n </a>\n </li>\n </ul>\n </nav>\n </div>\n <span class=\"slick-pagination-settings\">\n <select id=\"items-per-page-label\" [value]=\"itemsPerPage\" (change)=\"onChangeItemPerPage($event)\">\n <option value=\"{{pageSize}}\" *ngFor=\"let pageSize of paginationPageSizes;\">{{pageSize}}</option>\n </select>\n <span [translate]=\"'ITEMS_PER_PAGE'\"></span>,\n <span class=\"slick-pagination-count\">\n <span [translate]=\"'FROM_TO_OF_TOTAL_ITEMS'\" [translateParams]=\"{ from: dataFrom, to: dataTo, totalItems: totalItems }\"></span>\n </span>\n </span>\n </div>\n "
1212212125
},] },
1212312126
{ type: core$1.Injectable },
1212412127
];
@@ -12128,6 +12131,7 @@ SlickPaginationComponent.decorators = [
1212812131
SlickPaginationComponent.ctorParameters = function () { return [
1212912132
{ type: FilterService, },
1213012133
{ type: SortService, },
12134+
{ type: core.TranslateService, },
1213112135
]; };
1213212136
SlickPaginationComponent.propDecorators = {
1213312137
'gridPaginationOptions': [{ type: core$1.Input },],
@@ -33601,7 +33605,8 @@ var AngularSlickgridModule = /** @class */ (function () {
3360133605
AngularSlickgridModule.decorators = [
3360233606
{ type: core$1.NgModule, args: [{
3360333607
imports: [
33604-
common.CommonModule
33608+
common.CommonModule,
33609+
core.TranslateModule
3360533610
],
3360633611
declarations: [
3360733612
AngularSlickgridComponent,

‎dist/bundles/angular-slickgrid.umd.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/bundles/angular-slickgrid.umd.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/bundles/angular-slickgrid.umd.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)