fix(pagination): never display page 0, minimum should be page 1

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

@@ -140,10 +140,12 @@ describe('without ngx-translate', () => {
     setTimeout(() => {
       fixture.detectChanges();
       const elm = document.querySelector('.slick-pagination');
-      const pageInfo = fixture.debugElement.query(By.css('.slick-pagination-count')).nativeElement;
+      const pageInfoFromTo = fixture.debugElement.query(By.css('.page-info-from-to')).nativeElement;
+      const pageInfoTotalItems = fixture.debugElement.query(By.css('.page-info-total-items')).nativeElement;
 
       expect(elm.innerHTML).toContain('slick-pagination-nav');
-      expect(pageInfo.innerHTML).toBe('<span>5-10 of 100 items</span>');
+      expect(pageInfoFromTo.innerHTML).toBe('<span data-test="item-from">5</span>-<span data-test="item-to">10</span> of ');
+      expect(pageInfoTotalItems.innerHTML).toBe('<span data-test="total-items">100</span> items ');
       done();
     }, 10);
   });

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

@@ -147,10 +147,27 @@ describe('App Component', () => {
       fixture.detectChanges();
 
       const elm = document.querySelector('.slick-pagination');
-      const pageInfo = fixture.debugElement.query(By.css('.slick-pagination-count')).nativeElement;
+      const pageInfoFromTo = fixture.debugElement.query(By.css('.page-info-from-to')).nativeElement;
+      const pageInfoTotalItems = fixture.debugElement.query(By.css('.page-info-total-items')).nativeElement;
 
       expect(elm.innerHTML).toContain('slick-pagination-nav');
-      expect(pageInfo.innerHTML).toBe('<span>5-10 de 100 éléments</span>');
+      expect(pageInfoFromTo.innerHTML).toBe('<span data-test="item-from">5</span>-<span data-test="item-to">10</span> de ');
+      expect(pageInfoTotalItems.innerHTML).toBe('<span data-test="total-items">100</span> éléments ');
+      expect(component.totalItems).toBe(100);
+    });
+
+    it('should create a the Slick-Pagination component in the DOM and expect different locale when changed', () => {
+      translate.use('en');
+      fixture.detectChanges();
+
+      const elm = document.querySelector('.slick-pagination');
+      const pageInfoFromTo = fixture.debugElement.query(By.css('.page-info-from-to')).nativeElement;
+      const pageInfoTotalItems = fixture.debugElement.query(By.css('.page-info-total-items')).nativeElement;
+
+      expect(translate.currentLang).toBe('en');
+      expect(elm.innerHTML).toContain('slick-pagination-nav');
+      expect(pageInfoFromTo.innerHTML).toBe('<span data-test="item-from">5</span>-<span data-test="item-to">10</span> of ');
+      expect(pageInfoTotalItems.innerHTML).toBe('<span data-test="total-items">100</span> items ');
       expect(component.totalItems).toBe(100);
     });
 

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

@@ -4,36 +4,36 @@
       <ul class="pagination">
         <li class="page-item" [ngClass]="(pager?.pageNumber === 1 || pager?.totalItems === 0) ? 'disabled' : ''">
           <a class="page-link icon-seek-first fa fa-angle-double-left" aria-label="First"
-             (click)="changeToFirstPage($event)">
+            (click)="changeToFirstPage($event)">
           </a>
         </li>
         <li class="page-item" [ngClass]="(pager?.pageNumber === 1 || pager?.totalItems === 0) ? 'disabled' : ''">
           <a class="page-link icon-seek-prev fa fa-angle-left" aria-label="Previous"
-             (click)="changeToPreviousPage($event)">
+            (click)="changeToPreviousPage($event)">
           </a>
         </li>
       </ul>
     </nav>
 
     <div class="slick-page-number">
       <span>{{textPage}}</span>
-      <input type="text" class="form-control" [value]="pager?.pageNumber" size="1" [readOnly]="pager?.totalItems === 0"
-             (change)="changeToCurrentPage($event)">
-      <span>{{textOf}}</span><span> {{pager?.pageCount}}</span>
+      <input type="text" class="form-control" data-test="page-number-input" [value]="pager?.pageNumber" size="1"
+        [readOnly]="pager?.totalItems === 0" (change)="changeToCurrentPage($event)">
+      <span>{{textOf}}</span><span data-test="page-count"> {{pager?.pageCount}}</span>
     </div>
 
     <nav aria-label="Page navigation">
       <ul class="pagination">
         <li class="page-item"
-            [ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''">
+          [ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''">
           <a class="page-link icon-seek-next text-center fa fa-lg fa-angle-right" aria-label="Next"
-             (click)="changeToNextPage($event)">
+            (click)="changeToNextPage($event)">
           </a>
         </li>
         <li class="page-item"
-            [ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''">
+          [ngClass]="(pager?.pageNumber === pager?.pageCount || pager?.totalItems === 0) ? 'disabled' : ''">
           <a class="page-link icon-seek-end fa fa-lg fa-angle-double-right" aria-label="Last"
-             (click)="changeToLastPage($event)">
+            (click)="changeToLastPage($event)">
           </a>
         </li>
       </ul>
@@ -45,7 +45,15 @@
     </select>
     <span>{{textItemsPerPage}}</span>,
     <span class="slick-pagination-count">
-      <span>{{pager?.from}}-{{pager?.to}} {{textOf}} {{pager?.totalItems}} {{textItems}}</span>
+      <span *ngIf="pager?.totalItems">
+        <span class="page-info-from-to">
+          <span data-test="item-from">{{pager?.from}}</span>-<span data-test="item-to">{{pager?.to}}</span>
+          {{textOf}}
+        </span>
+      </span>
+      <span class="page-info-total-items">
+        <span data-test="total-items">{{pager?.totalItems}}</span> {{textItems}}
+      </span>
     </span>
   </span>
 </div>

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

@@ -139,7 +139,7 @@ export class CompoundInputFilter implements Filter {
     if (this.columnFilter && this.columnFilter.placeholder) {
       placeholder = this.columnFilter.placeholder;
     }
-    return `<input type="${this._inputType || 'text'}" role="presentation"  autocomplete="off" class="form-control" placeholder="${placeholder}" /><span></span>`;
+    return `<input type="${this._inputType || 'text'}" role="presentation"  autocomplete="off" class="form-control compound-input" placeholder="${placeholder}" /><span></span>`;
   }
 
   private buildSelectOperatorHtmlString() {
@@ -205,7 +205,7 @@ export class CompoundInputFilter implements Filter {
         <div class="input-group-addon input-group-prepend operator">
           <select class="form-control"></select>
         </div>
-        <input class="form-control" type="text" />
+        <input class="form-control compount-input" type="text" />
       </div>
     */
     $operatorInputGroupAddon.append(this.$selectOperatorElm);

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

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

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

@@ -132,12 +132,12 @@ describe('PaginationService', () => {
   });
 
   describe('changeItemPerPage method', () => {
-    it('should be on page 0 when total items is 0', () => {
+    it('should be on page 1 when total items is 0', () => {
       mockGridOption.pagination.totalItems = 0;
       service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.changeItemPerPage(30);
 
-      expect(service.getCurrentPageNumber()).toBe(0);
+      expect(service.getCurrentPageNumber()).toBe(1);
       expect(service.getCurrentItemPerPageCount()).toBe(30);
     });
 
@@ -403,16 +403,16 @@ describe('PaginationService', () => {
   });
 
   describe('recalculateFromToIndexes method', () => {
-    it('should recalculate the From/To as 0 when total items is 0', () => {
+    it('should recalculate the From/To as 1 when total items is 0', () => {
       mockGridOption.pagination.pageSize = 25;
       mockGridOption.pagination.pageNumber = 2;
       mockGridOption.pagination.totalItems = 0;
 
       service.init(gridStub, dataviewStub, mockGridOption.pagination, mockGridOption.backendServiceApi);
       service.recalculateFromToIndexes();
 
-      expect(service.pager.from).toBe(0);
-      expect(service.pager.to).toBe(0);
+      expect(service.pager.from).toBe(1);
+      expect(service.pager.to).toBe(1);
     });
 
     it('should recalculate the From/To within range', () => {

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

@@ -34,7 +34,7 @@ export class PaginationService {
   private _dataFrom = 1;
   private _dataTo = 1;
   private _itemsPerPage: number;
-  private _pageCount = 0;
+  private _pageCount = 1;
   private _pageNumber = 1;
   private _totalItems = 0;
   private _availablePageSizes: number[];
@@ -54,10 +54,10 @@ export class PaginationService {
   get pager(): Pager {
     return {
       from: this._dataFrom,
-      to: this._dataTo,
+      to: this._dataTo || 1,
       itemsPerPage: this._itemsPerPage,
-      pageCount: this._pageCount,
-      pageNumber: this._pageNumber,
+      pageCount: this._pageCount || 1,
+      pageNumber: this._pageNumber || 1,
       availablePageSizes: this._availablePageSizes,
       totalItems: this._totalItems,
     };
@@ -109,8 +109,8 @@ export class PaginationService {
   }
 
   changeItemPerPage(itemsPerPage: number, event?: any): Promise<any> {
+    this._pageNumber = 1;
     this._pageCount = Math.ceil(this._totalItems / itemsPerPage);
-    this._pageNumber = (this._totalItems > 0) ? 1 : 0;
     this._itemsPerPage = itemsPerPage;
     return this.processOnPageChanged(this._pageNumber, event);
   }
@@ -249,9 +249,9 @@ export class PaginationService {
 
   recalculateFromToIndexes() {
     if (this._totalItems === 0) {
-      this._dataFrom = 0;
-      this._dataTo = 0;
-      this._pageNumber = 0;
+      this._dataFrom = 1;
+      this._dataTo = 1;
+      this._pageNumber = 1;
     } else {
       this._dataFrom = this._pageNumber > 1 ? ((this._pageNumber * this._itemsPerPage) - this._itemsPerPage + 1) : 1;
       this._dataTo = (this._totalItems < this._itemsPerPage) ? this._totalItems : (this._pageNumber * this._itemsPerPage);

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

@@ -351,7 +351,7 @@ $pagination-page-input-padding:           2px !default;
 $pagination-page-select-border-radius:    3px !default;
 $pagination-page-select-padding:          0 0 2px 2px !default;
 $pagination-page-select-height:           32px !default;
-$pagination-page-select-width:            54px !default;
+$pagination-page-select-width:            60px !default;
 $pagination-page-select-font-size:        ($font-size-base - 2px) !default;
 $pagination-text-color:                   #808080 !default;
 

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

@@ -376,6 +376,9 @@ input.search-filter {
 .search-filter {
     input {
         font-family: $filter-placeholder-font-family;
+        &.compound-input {
+          border-radius: $compound-filter-border-radius !important;
+        }
     }
 }