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

Commit 3f0cef6

Browse files
ghiscodingghiscoding
authored
Merge pull request #334 from ghiscoding/bugfix/pagination-never-display-0-page
fix(pagination): never display page 0, minimum should be page 1
2 parents 44899e2 + bbe6e8e commit 3f0cef6

File tree

10 files changed

+191
-33
lines changed

10 files changed

+191
-33
lines changed

‎src/app/modules/angular-slickgrid/components/__tests__/slick-pagination-without-translate.component.spec.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -140,10 +140,12 @@ describe('without ngx-translate', () => {
140140
setTimeout(() => {
141141
fixture.detectChanges();
142142
const elm = document.querySelector('.slick-pagination');
143-
const pageInfo = fixture.debugElement.query(By.css('.slick-pagination-count')).nativeElement;
143+
const pageInfoFromTo = fixture.debugElement.query(By.css('.page-info-from-to')).nativeElement;
144+
const pageInfoTotalItems = fixture.debugElement.query(By.css('.page-info-total-items')).nativeElement;
144145

145146
expect(elm.innerHTML).toContain('slick-pagination-nav');
146-
expect(pageInfo.innerHTML).toBe('<span>5-10 of 100 items</span>');
147+
expect(pageInfoFromTo.innerHTML).toBe('<span data-test="item-from">5</span>-<span data-test="item-to">10</span> of ');
148+
expect(pageInfoTotalItems.innerHTML).toBe('<span data-test="total-items">100</span> items ');
147149
done();
148150
}, 10);
149151
});

‎src/app/modules/angular-slickgrid/components/__tests__/slick-pagination.component.spec.ts‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -147,10 +147,27 @@ describe('App Component', () => {
147147
fixture.detectChanges();
148148

149149
const elm = document.querySelector('.slick-pagination');
150-
const pageInfo = fixture.debugElement.query(By.css('.slick-pagination-count')).nativeElement;
150+
const pageInfoFromTo = fixture.debugElement.query(By.css('.page-info-from-to')).nativeElement;
151+
const pageInfoTotalItems = fixture.debugElement.query(By.css('.page-info-total-items')).nativeElement;
151152

152153
expect(elm.innerHTML).toContain('slick-pagination-nav');
153-
expect(pageInfo.innerHTML).toBe('<span>5-10 de 100 éléments</span>');
154+
expect(pageInfoFromTo.innerHTML).toBe('<span data-test="item-from">5</span>-<span data-test="item-to">10</span> de ');
155+
expect(pageInfoTotalItems.innerHTML).toBe('<span data-test="total-items">100</span> éléments ');
156+
expect(component.totalItems).toBe(100);
157+
});
158+
159+
it('should create a the Slick-Pagination component in the DOM and expect different locale when changed', () => {
160+
translate.use('en');
161+
fixture.detectChanges();
162+
163+
const elm = document.querySelector('.slick-pagination');
164+
const pageInfoFromTo = fixture.debugElement.query(By.css('.page-info-from-to')).nativeElement;
165+
const pageInfoTotalItems = fixture.debugElement.query(By.css('.page-info-total-items')).nativeElement;
166+
167+
expect(translate.currentLang).toBe('en');
168+
expect(elm.innerHTML).toContain('slick-pagination-nav');
169+
expect(pageInfoFromTo.innerHTML).toBe('<span data-test="item-from">5</span>-<span data-test="item-to">10</span> of ');
170+
expect(pageInfoTotalItems.innerHTML).toBe('<span data-test="total-items">100</span> items ');
154171
expect(component.totalItems).toBe(100);
155172
});
156173

‎src/app/modules/angular-slickgrid/components/slick-pagination.component.html‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,36 +4,36 @@
44
<ul class="pagination">
55
<li class="page-item" [ngClass]="(pager?.pageNumber === 1 || pager?.totalItems === 0) ? 'disabled' : ''">
66
<a class="page-link icon-seek-first fa fa-angle-double-left" aria-label="First"
7-
(click)="changeToFirstPage($event)">
7+
(click)="changeToFirstPage($event)">
88
</a>
99
</li>
1010
<li class="page-item" [ngClass]="(pager?.pageNumber === 1 || pager?.totalItems === 0) ? 'disabled' : ''">
1111
<a class="page-link icon-seek-prev fa fa-angle-left" aria-label="Previous"
12-
(click)="changeToPreviousPage($event)">
12+
(click)="changeToPreviousPage($event)">
1313
</a>
1414
</li>
1515
</ul>
1616
</nav>
1717

1818
<div class="slick-page-number">
1919
<span>{{textPage}}</span>
20-
<input type="text" class="form-control" [value]="pager?.pageNumber" size="1" [readOnly]="pager?.totalItems === 0"
21-
(change)="changeToCurrentPage($event)">
22-
<span>{{textOf}}</span><span> {{pager?.pageCount}}</span>
20+
<input type="text" class="form-control" data-test="page-number-input" [value]="pager?.pageNumber" size="1"
21+
[readOnly]="pager?.totalItems === 0" (change)="changeToCurrentPage($event)">
22+
<span>{{textOf}}</span><span data-test="page-count"> {{pager?.pageCount}}</span>
2323
</div>
2424

2525
<nav aria-label="Page navigation">
2626
<ul class="pagination">
2727
<li class="page-item"
28-
[ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''">
28+
[ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''">
2929
<a class="page-link icon-seek-next text-center fa fa-lg fa-angle-right" aria-label="Next"
30-
(click)="changeToNextPage($event)">
30+
(click)="changeToNextPage($event)">
3131
</a>
3232
</li>
3333
<li class="page-item"
34-
[ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''">
34+
[ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''">
3535
<a class="page-link icon-seek-end fa fa-lg fa-angle-double-right" aria-label="Last"
36-
(click)="changeToLastPage($event)">
36+
(click)="changeToLastPage($event)">
3737
</a>
3838
</li>
3939
</ul>
@@ -45,7 +45,15 @@
4545
</select>
4646
<span>{{textItemsPerPage}}</span>,
4747
<span class="slick-pagination-count">
48-
<span>{{pager?.from}}-{{pager?.to}} {{textOf}} {{pager?.totalItems}} {{textItems}}</span>
48+
<span *ngIf="pager?.totalItems">
49+
<span class="page-info-from-to">
50+
<span data-test="item-from">{{pager?.from}}</span>-<span data-test="item-to">{{pager?.to}}</span>
51+
{{textOf}}
52+
</span>
53+
</span>
54+
<span class="page-info-total-items">
55+
<span data-test="total-items">{{pager?.totalItems}}</span> {{textItems}}
56+
</span>
4957
</span>
5058
</span>
5159
</div>

‎src/app/modules/angular-slickgrid/filters/compoundInputFilter.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -139,7 +139,7 @@ export class CompoundInputFilter implements Filter {
139139
if (this.columnFilter && this.columnFilter.placeholder) {
140140
placeholder = this.columnFilter.placeholder;
141141
}
142-
return `<input type="${this._inputType || 'text'}" role="presentation" autocomplete="off" class="form-control" placeholder="${placeholder}" /><span></span>`;
142+
return `<input type="${this._inputType || 'text'}" role="presentation" autocomplete="off" class="form-control compound-input" placeholder="${placeholder}" /><span></span>`;
143143
}
144144

145145
private buildSelectOperatorHtmlString() {
@@ -205,7 +205,7 @@ export class CompoundInputFilter implements Filter {
205205
<div class="input-group-addon input-group-prepend operator">
206206
<select class="form-control"></select>
207207
</div>
208-
<input class="form-control" type="text" />
208+
<input class="form-control compount-input" type="text" />
209209
</div>
210210
*/
211211
$operatorInputGroupAddon.append(this.$selectOperatorElm);

‎src/app/modules/angular-slickgrid/formatters/checkmarkFormatter.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ import { parseBoolean } from '../services/utilities';
44

55
export const checkmarkFormatter: Formatter = (row: number, cell: number, value: any, columnDef: Column, dataContext: any) => {
66
return parseBoolean(value) ? `<i class="fa fa-check checkmark-icon" aria-hidden="true"></i>` : '';
7-
}
7+
};

‎src/app/modules/angular-slickgrid/services/__tests__/pagination.service.spec.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -132,12 +132,12 @@ describe('PaginationService', () => {
132132
});
133133

134134
describe('changeItemPerPage method', () => {
135-
it('should be on page 0 when total items is 0', () => {
135+
it('should be on page 1 when total items is 0', () => {
136136
mockGridOption.pagination.totalItems = 0;
137137
service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
138138
service.changeItemPerPage(30);
139139

140-
expect(service.getCurrentPageNumber()).toBe(0);
140+
expect(service.getCurrentPageNumber()).toBe(1);
141141
expect(service.getCurrentItemPerPageCount()).toBe(30);
142142
});
143143

@@ -403,16 +403,16 @@ describe('PaginationService', () => {
403403
});
404404

405405
describe('recalculateFromToIndexes method', () => {
406-
it('should recalculate the From/To as 0 when total items is 0', () => {
406+
it('should recalculate the From/To as 1 when total items is 0', () => {
407407
mockGridOption.pagination.pageSize = 25;
408408
mockGridOption.pagination.pageNumber = 2;
409409
mockGridOption.pagination.totalItems = 0;
410410

411411
service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
412412
service.recalculateFromToIndexes();
413413

414-
expect(service.pager.from).toBe(0);
415-
expect(service.pager.to).toBe(0);
414+
expect(service.pager.from).toBe(1);
415+
expect(service.pager.to).toBe(1);
416416
});
417417

418418
it('should recalculate the From/To within range', () => {

‎src/app/modules/angular-slickgrid/services/pagination.service.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export class PaginationService {
3434
private _dataFrom = 1;
3535
private _dataTo = 1;
3636
private _itemsPerPage: number;
37-
private _pageCount = 0;
37+
private _pageCount = 1;
3838
private _pageNumber = 1;
3939
private _totalItems = 0;
4040
private _availablePageSizes: number[];
@@ -54,10 +54,10 @@ export class PaginationService {
5454
get pager(): Pager {
5555
return {
5656
from: this._dataFrom,
57-
to: this._dataTo,
57+
to: this._dataTo || 1,
5858
itemsPerPage: this._itemsPerPage,
59-
pageCount: this._pageCount,
60-
pageNumber: this._pageNumber,
59+
pageCount: this._pageCount || 1,
60+
pageNumber: this._pageNumber || 1,
6161
availablePageSizes: this._availablePageSizes,
6262
totalItems: this._totalItems,
6363
};
@@ -109,8 +109,8 @@ export class PaginationService {
109109
}
110110

111111
changeItemPerPage(itemsPerPage: number, event?: any): Promise<any> {
112+
this._pageNumber = 1;
112113
this._pageCount = Math.ceil(this._totalItems / itemsPerPage);
113-
this._pageNumber = (this._totalItems > 0) ? 1 : 0;
114114
this._itemsPerPage = itemsPerPage;
115115
return this.processOnPageChanged(this._pageNumber, event);
116116
}
@@ -249,9 +249,9 @@ export class PaginationService {
249249

250250
recalculateFromToIndexes() {
251251
if (this._totalItems === 0) {
252-
this._dataFrom = 0;
253-
this._dataTo = 0;
254-
this._pageNumber = 0;
252+
this._dataFrom = 1;
253+
this._dataTo = 1;
254+
this._pageNumber = 1;
255255
} else {
256256
this._dataFrom = this._pageNumber > 1 ? ((this._pageNumber * this._itemsPerPage) - this._itemsPerPage + 1) : 1;
257257
this._dataTo = (this._totalItems < this._itemsPerPage) ? this._totalItems : (this._pageNumber * this._itemsPerPage);

‎src/app/modules/angular-slickgrid/styles/_variables.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -351,7 +351,7 @@ $pagination-page-input-padding: 2px !default;
351351
$pagination-page-select-border-radius: 3px !default;
352352
$pagination-page-select-padding: 0 0 2px 2px !default;
353353
$pagination-page-select-height: 32px !default;
354-
$pagination-page-select-width: 54px !default;
354+
$pagination-page-select-width: 60px !default;
355355
$pagination-page-select-font-size: ($font-size-base - 2px) !default;
356356
$pagination-text-color: #808080 !default;
357357

‎src/app/modules/angular-slickgrid/styles/slick-plugins.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -376,6 +376,9 @@ input.search-filter {
376376
.search-filter {
377377
input {
378378
font-family: $filter-placeholder-font-family;
379+
&.compound-input {
380+
border-radius: $compound-filter-border-radius !important;
381+
}
379382
}
380383
}
381384

0 commit comments

Comments
 (0)