Merge pull request #31 from vitocmpl/paginator-refactor

Paginator refactor

docs/getting-started/ng-cli.md

@@ -16,7 +16,7 @@ ng serve
  - install `ng2-ya-table`, `ngx-bootstrap` and `bootstrap`
 
  ```bash
-   npm install ng2-ya-table ngx-bootstrap bootstrap --save
+   npm install ng2-ya-table bootstrap --save
  ```
 
 - open `src/app/app.module.ts` and add
@@ -39,4 +39,4 @@ import { Ng2YaTableModule } from 'ng2-ya-table';
          "bootstrap/dist/css/bootstrap.min.css",
         "styles.css",
       ],
-```
+```

package.json

@@ -26,7 +26,6 @@
     "@fortawesome/fontawesome-svg-core": "~1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "bootstrap": "^5.1.3",
-    "ngx-bootstrap": "^8.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.1",
     "zone.js": "~0.11.4"

projects/ng2-ya-table/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ng2-ya-table",
-  "version": "13.0.1",
+  "version": "13.1.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/vitocmpl/ng2-ya-table"
@@ -18,7 +18,6 @@
   "peerDependencies": {
     "@angular/common": "^13.0.0",
     "@angular/core": "^13.0.0",
-    "bootstrap": "^4.0.0 || ^5.0.0",
-    "ngx-bootstrap": "^8.0.0"
+    "bootstrap": "^4.0.0 || ^5.0.0"
   }
 }

projects/ng2-ya-table/src/lib/ng2-ya-table.component.html

@@ -77,28 +77,16 @@
     <span>{{ getPaginationResult() }}</span>
   </div>
 
-  <div
+  <ng2-ya-table-pagination
     class="ng2-ya-table-pagination"
     *ngIf="paging.showPaging && rows.length > 0"
-  >
-    <select class="form-control form-select" [formControl]="itemsPerPage">
-      <option *ngFor="let pn of paging.itemsPerPageOptions" [value]="pn">
-        {{ pn }}
-      </option>
-    </select>
-    <pagination
-      [totalItems]="recordsFiltered"
-      [page]="currentPage"
-      [itemsPerPage]="itemsPerPage.value"
-      (pageChanged)="onPageChanged($event)"
-      [maxSize]="paging.maxSize"
-      [boundaryLinks]="false"
-      [rotate]="false"
-      [firstText]="language.pagination.first"
-      [lastText]="language.pagination.last"
-      [nextText]="language.pagination.next"
-      [previousText]="language.pagination.previous"
-    >
-    </pagination>
-  </div>
+    [totalItems]="recordsFiltered"
+    [page]="currentPage"
+    [itemsPerPage]="itemsPerPage"
+    [itemsPerPageOptions]="paging.itemsPerPageOptions"
+    (paginationChanged)="onPageChanged($event)"
+    [maxSize]="paging.maxSize"
+    [nextText]="language.pagination.next"
+    [previousText]="language.pagination.previous"
+  ></ng2-ya-table-pagination>
 </div>

projects/ng2-ya-table/src/lib/ng2-ya-table.component.scss

@@ -56,20 +56,5 @@
 
   .ng2-ya-table-pagination {
     grid-area: pagination;
-    justify-self: center;
-    align-self: center;
-    :first-child {
-      margin-right: 1rem;
-    }
-    ul {
-      margin-bottom: 0;
-    }
-    display: flex;
-  }
-
-  .ng2-ya-table-pagination-size {
-    grid-area: pagination-size;
-    justify-self: end;
-    align-self: center;
   }
 }

projects/ng2-ya-table/src/lib/ng2-ya-table.component.spec.ts

@@ -6,7 +6,6 @@ import {
   tick
 } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { PaginationModule } from 'ngx-bootstrap/pagination';
 import { BehaviorSubject, of } from 'rxjs';
 import {
   DatasourceResult,
@@ -49,7 +48,7 @@ describe('Ng2YaTableComponent', () => {
     });
 
     await TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, PaginationModule],
+      imports: [ReactiveFormsModule],
       declarations: [Ng2YaTableComponent],
       schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
@@ -184,53 +183,6 @@ describe('Ng2YaTableComponent', () => {
       '.ng2-ya-table-pagination'
     );
     expect(paginationDiv).toBeTruthy();
-    const select: HTMLSelectElement =
-      paginationDiv.querySelector('.form-select');
-    expect(select).toBeTruthy();
-    expect(select.options.length).toEqual(3);
-    expect(select.options[0].value).toEqual('10');
-    expect(select.options[1].value).toEqual('25');
-    expect(select.options[2].value).toEqual('50');
-  });
-
-  it('should create with custom paging', () => {
-    const setPagingSpy = jest.spyOn(serviceStub, 'setPaging');
-
-    const setDatasourceSpy = jest
-      .spyOn(serviceStub, 'setDataSource')
-      .mockImplementation(
-        (v: unknown[]) =>
-          (serviceStub.result$ = of({
-            data: v,
-            recordsFiltered: 2,
-            recordsTotal: 2
-          }))
-      );
-
-    component.datasource = users;
-    component.paging = {
-      itemsPerPage: 100,
-      itemsPerPageOptions: [100, 200],
-      showPaging: true,
-      maxSize: 5
-    };
-
-    fixture.detectChanges();
-
-    expect(setPagingSpy).toHaveBeenCalled();
-    expect(setDatasourceSpy).toHaveBeenCalled();
-
-    //pagination
-    const paginationDiv = fixture.nativeElement.querySelector(
-      '.ng2-ya-table-pagination'
-    );
-    expect(paginationDiv).toBeTruthy();
-    const select: HTMLSelectElement =
-      paginationDiv.querySelector('.form-select');
-    expect(select).toBeTruthy();
-    expect(select.options.length).toEqual(2);
-    expect(select.options[0].value).toEqual('100');
-    expect(select.options[1].value).toEqual('200');
   });
 
   it('should create with no paging', () => {
@@ -343,59 +295,6 @@ describe('Ng2YaTableComponent', () => {
     expect(paginationResultDiv.innerHTML).toEqual('<span>2 - 2 - 2</span>');
   });
 
-  it('itemsPerPage valueChanges should change rows', () => {
-    const resultSubjec$ = new BehaviorSubject<DatasourceResult>({
-      data: users,
-      recordsFiltered: 2,
-      recordsTotal: 2
-    });
-    const setDatasourceSpy = jest
-      .spyOn(serviceStub, 'setDataSource')
-      .mockImplementation(
-        () => (serviceStub.result$ = resultSubjec$.asObservable())
-      );
-
-    const interpolateLocalizationSpy = jest
-      .spyOn(serviceStub, 'interpolateLocalization')
-      .mockImplementation(
-        (s, params: { start: number; end: number; total: number }) =>
-          `${params.start} - ${params.end} - ${params.total}`
-      );
-
-    component.datasource = users;
-
-    fixture.detectChanges();
-
-    expect(setDatasourceSpy).toHaveBeenCalled();
-    expect(interpolateLocalizationSpy).toHaveBeenCalled();
-    expect(component.rows.length).toEqual(2);
-
-    //table
-    const table: HTMLTableElement = fixture.nativeElement.querySelector(
-      '.ng2-ya-table-table'
-    );
-    expect(table).toBeTruthy();
-    expect(table.rows.length).toEqual(3);
-
-    //pagination result
-    const paginationResultDiv: HTMLElement =
-      fixture.nativeElement.querySelector('.ng2-ya-table-pagination-result');
-    expect(paginationResultDiv).toBeTruthy();
-    expect(paginationResultDiv.innerHTML).toEqual('<span>1 - 2 - 2</span>');
-
-    component.itemsPerPage.setValue(1);
-    resultSubjec$.next({
-      data: [users[0]],
-      recordsFiltered: 2,
-      recordsTotal: 2
-    });
-    fixture.detectChanges();
-
-    expect(component.currentPage).toEqual(1);
-    expect(table.rows.length).toEqual(2);
-    expect(paginationResultDiv.innerHTML).toEqual('<span>1 - 1 - 2</span>');
-  });
-
   it('fullTextFilter valueChanges should change rows', fakeAsync(() => {
     const resultSubjec$ = new BehaviorSubject<DatasourceResult>({
       data: users,

projects/ng2-ya-table/src/lib/ng2-ya-table.component.ts

@@ -8,18 +8,12 @@ import {
   OnInit,
   QueryList,
   TemplateRef,
-  ViewChild,
   ViewEncapsulation
 } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Subscription } from 'rxjs';
 import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 
-import {
-  PageChangedEvent,
-  PaginationComponent
-} from 'ngx-bootstrap/pagination';
-
 import {
   LanguageMap,
   TableColumn,
@@ -30,6 +24,7 @@ import {
 import { Languages } from './ng2-ya-table-languages';
 import { Ng2YaTableService } from './services/ng2-ya-table.service';
 import { Ng2YaTableCellTemplateDirective } from './directives/ng2-ya-table-cell-template.directive';
+import { PageChangedEvent } from './pagination/ng2-ya-table-pagination.component';
 
 @Component({
   selector: 'ng2-ya-table',
@@ -48,14 +43,14 @@ export class Ng2YaTableComponent implements OnDestroy, OnInit {
     showPaging: true
   };
 
-  itemsPerPage = new FormControl(0);
   fullTextFilter = new FormControl('');
 
   language: LanguageMap = null;
   showFilterRow = false;
   processing = false;
   rows = [];
   currentPage = 1;
+  itemsPerPage = 10;
   recordsFiltered = 0;
   recordsTotal = 0;
 
@@ -66,6 +61,7 @@ export class Ng2YaTableComponent implements OnDestroy, OnInit {
 
   @Input() set paging(value: TablePaging) {
     this._paging = value;
+    this.itemsPerPage = value.itemsPerPage;
     this.service.setPaging(value.itemsPerPage);
   }
   get paging(): TablePaging {
@@ -84,7 +80,6 @@ export class Ng2YaTableComponent implements OnDestroy, OnInit {
     return this.service.columns;
   }
 
-  @ViewChild(PaginationComponent) pagination: PaginationComponent;
   @ContentChildren(Ng2YaTableCellTemplateDirective)
   cellTemplates: QueryList<Ng2YaTableCellTemplateDirective>;
 
@@ -114,20 +109,6 @@ export class Ng2YaTableComponent implements OnDestroy, OnInit {
         })
     );
 
-    this.itemsPerPage.setValue(this.paging.itemsPerPage, { emitEvent: false });
-    this.subscription.add(
-      this.itemsPerPage.valueChanges.subscribe((itemsPerPage) => {
-        const page = this.pagination.page;
-        this.pagination.itemsPerPage = itemsPerPage;
-        if (page === this.pagination.page) {
-          this.service.request({
-            start: (page - 1) * itemsPerPage,
-            length: itemsPerPage
-          });
-        }
-      })
-    );
-
     this.subscription.add(
       this.service.result$.subscribe((result) => {
         this.cdRef.markForCheck();
@@ -153,6 +134,7 @@ export class Ng2YaTableComponent implements OnDestroy, OnInit {
 
   onPageChanged(event: PageChangedEvent) {
     this.currentPage = event.page;
+    this.itemsPerPage = event.itemsPerPage;
     this.service.request({
       start: (event.page - 1) * event.itemsPerPage,
       length: event.itemsPerPage
@@ -193,8 +175,8 @@ export class Ng2YaTableComponent implements OnDestroy, OnInit {
 
   getPaginationResult() {
     return this.service.interpolateLocalization(this.language.info as string, {
-      start: (this.currentPage - 1) * this.itemsPerPage.value + 1,
-      end: (this.currentPage - 1) * this.itemsPerPage.value + this.rows.length,
+      start: (this.currentPage - 1) * this.itemsPerPage + 1,
+      end: (this.currentPage - 1) * this.itemsPerPage + this.rows.length,
       total: this.recordsFiltered
     });
   }