Merge pull request #1708 from ghiscoding/chore/refactor-pagination

chore: refactor Pagination Component in preparation of Custom Comp

Author: ghiscoding

packages/common/src/interfaces/pagination.interface.ts

@@ -1,3 +1,9 @@
+import type { BasePubSubService } from '@slickgrid-universal/event-pub-sub';
+
+import type { PaginationService } from '../services/pagination.service';
+import type { TranslaterService } from '../services/translater.service';
+import type { SlickGrid } from '../core/slickGrid';
+
 export interface Pagination {
   /** Current page number that we are we currently displaying. */
   pageNumber?: number;
@@ -11,3 +17,16 @@ export interface Pagination {
   /** The full total count of items for the entire dataset */
   totalItems?: number;
 }
+
+export abstract class BasePaginationComponent {
+  constructor(
+    _grid: SlickGrid,
+    _paginationService: PaginationService,
+    _pubSubService: BasePubSubService,
+    _translaterService?: TranslaterService | undefined
+  ) { }
+
+  dispose(): void { }
+
+  render(_containerElm: HTMLElement): void { }
+}

packages/pagination-component/src/__tests__/slick-pagination-without-i18n.spec.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { type GridOption, type Locale, type PaginationService, SharedService, type SlickGrid } from '@slickgrid-universal/common';
+import { type GridOption, type Locale, type PaginationService, type SlickGrid } from '@slickgrid-universal/common';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 
 import { TranslateServiceStub } from '../../../../test/translateServiceStub';
@@ -62,17 +62,14 @@ describe('Slick-Pagination Component', () => {
   let component: SlickPaginationComponent;
   let div: HTMLDivElement;
   let eventPubSubService: EventPubSubService;
-  let sharedService: SharedService;
   let translateService: TranslateServiceStub;
 
   beforeEach(() => {
     vi.spyOn(paginationServiceStub, 'getFullPagination').mockReturnValue(mockFullPagination);
     div = document.createElement('div');
     document.body.appendChild(div);
-    sharedService = new SharedService();
     eventPubSubService = new EventPubSubService();
     translateService = new TranslateServiceStub();
-    sharedService.slickGrid = gridStub;
   });
 
   describe('Integration Tests', () => {
@@ -83,24 +80,22 @@ describe('Slick-Pagination Component', () => {
 
     it('should throw an error when "enableTranslate" is set and I18N Service is not provided', () => new Promise((done: any) => {
       try {
-        mockGridOptions.enableTranslate = true;
         translateService = undefined as any;
-        vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(mockGridOptions);
+        vi.spyOn(gridStub, 'getOptions').mockReturnValueOnce({ ...mockGridOptions, enableTranslate: true });
 
-        component = new SlickPaginationComponent(paginationServiceStub, eventPubSubService, sharedService, translateService);
-        component.renderPagination(div);
+        component = new SlickPaginationComponent(gridStub, paginationServiceStub, eventPubSubService, translateService);
+        component.render(div);
       } catch (e) {
         expect(e.toString()).toContain('[Slickgrid-Universal] requires a Translate Service to be installed and configured when the grid option "enableTranslate" is enabled.');
         done();
       }
     }));
 
     it('should have defined locale and expect new text in the UI', () => {
-      mockGridOptions.locales = mockLocales;
-      vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(mockGridOptions);
+      vi.spyOn(gridStub, 'getOptions').mockReturnValueOnce({ ...mockGridOptions, locales: mockLocales });
 
-      component = new SlickPaginationComponent(paginationServiceStub, eventPubSubService, sharedService, translateService);
-      component.renderPagination(div);
+      component = new SlickPaginationComponent(gridStub, paginationServiceStub, eventPubSubService, translateService);
+      component.render(div);
 
       const pageInfoFromTo = document.querySelector('.page-info-from-to') as HTMLSpanElement;
       const pageInfoTotalItems = document.querySelector('.page-info-total-items') as HTMLSpanElement;

packages/pagination-component/src/__tests__/slick-pagination.spec.ts

@@ -1,5 +1,5 @@
 import { afterEach, beforeAll, beforeEach, describe, expect, it, test, vi } from 'vitest';
-import { type GridOption, type PaginationService, SharedService, type SlickGrid, } from '@slickgrid-universal/common';
+import { type GridOption, type PaginationService, type SlickGrid, } from '@slickgrid-universal/common';
 import { EventPubSubService } from '@slickgrid-universal/event-pub-sub';
 
 import { TranslateServiceStub } from '../../../../test/translateServiceStub';
@@ -70,7 +70,6 @@ describe('Slick-Pagination Component', () => {
   let component: SlickPaginationComponent;
   let div: HTMLDivElement;
   let eventPubSubService: EventPubSubService;
-  let sharedService: SharedService;
   let translateService: TranslateServiceStub;
 
   describe("Integration Tests", () => {
@@ -94,16 +93,14 @@ describe('Slick-Pagination Component', () => {
 
       beforeEach(() => {
         vi.spyOn(paginationServiceStub as PaginationService, 'getFullPagination').mockReturnValue(mockFullPagination);
-        vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(mockGridOptions);
+        vi.spyOn(gridStub, 'getOptions').mockReturnValueOnce(mockGridOptions);
         div = document.createElement('div');
         document.body.appendChild(div);
-        sharedService = new SharedService();
         eventPubSubService = new EventPubSubService();
         translateService = new TranslateServiceStub();
-        sharedService.slickGrid = gridStub;
 
-        component = new SlickPaginationComponent(paginationServiceStub as PaginationService, eventPubSubService, sharedService, translateService);
-        component.renderPagination(div);
+        component = new SlickPaginationComponent(gridStub, paginationServiceStub as PaginationService, eventPubSubService, translateService);
+        component.render(div);
       });
 
       afterEach(() => {
@@ -272,7 +269,7 @@ describe('Slick-Pagination Component', () => {
 
       test(`when "onPaginationSetCursorBased" event is triggered then expect pagination to be recreated`, () => {
         const disposeSpy = vi.spyOn(component, 'dispose');
-        const renderPagSpy = vi.spyOn(component, 'renderPagination');
+        const renderPagSpy = vi.spyOn(component, 'render');
 
         mockFullPagination.pageNumber = 1;
         mockFullPagination.pageCount = 10;
@@ -299,7 +296,6 @@ describe('with different i18n locale', () => {
   let component: SlickPaginationComponent;
   let div: HTMLDivElement;
   let eventPubSubService: EventPubSubService;
-  let sharedService: SharedService;
   let translateService: TranslateServiceStub;
   const mockFullPagination2 = {
     pageCount: 19,
@@ -317,22 +313,20 @@ describe('with different i18n locale', () => {
 
   beforeEach(() => {
     mockGridOptions.enableTranslate = true;
-    vi.spyOn(SharedService.prototype, 'gridOptions', 'get').mockReturnValue(mockGridOptions);
+    vi.spyOn(gridStub, 'getOptions').mockReturnValueOnce(mockGridOptions);
     vi.spyOn(paginationServiceStub as PaginationService, 'getFullPagination').mockReturnValue(mockFullPagination2);
     div = document.createElement('div');
     document.body.appendChild(div);
-    sharedService = new SharedService();
     eventPubSubService = new EventPubSubService();
     translateService = new TranslateServiceStub();
-    sharedService.slickGrid = gridStub;
 
-    component = new SlickPaginationComponent(paginationServiceStub, eventPubSubService, sharedService, translateService);
-    component.renderPagination(div);
+    component = new SlickPaginationComponent(gridStub, paginationServiceStub, eventPubSubService, translateService);
+    component.render(div);
   });
 
   it('should throw an error when enabling translate without a Translate Service', () => {
-    mockGridOptions.enableTranslate = true;
-    expect(() => new SlickPaginationComponent(paginationServiceStub, eventPubSubService, sharedService, null as any))
+    vi.spyOn(gridStub, 'getOptions').mockReturnValueOnce({ ...mockGridOptions, enableTranslate: true });
+    expect(() => new SlickPaginationComponent(gridStub, paginationServiceStub, eventPubSubService, null as any))
       .toThrow('[Slickgrid-Universal] requires a Translate Service to be installed and configured when the grid option "enableTranslate" is enabled.');
   });
 

packages/pagination-component/src/slick-pagination.component.ts

@@ -1,23 +1,23 @@
 import type {
   GridOption,
   Locale,
+  BasePaginationComponent,
   PaginationService,
   PubSubService,
   ServicePagination,
-  SharedService,
   SlickGrid,
   Subscription,
   TranslaterService,
 } from '@slickgrid-universal/common';
 import { Constants, createDomElement, getTranslationPrefix } from '@slickgrid-universal/common';
 import { BindingEventService, BindingHelper } from '@slickgrid-universal/binding';
 
-export class SlickPaginationComponent {
+export class SlickPaginationComponent implements BasePaginationComponent {
   protected _bindingHelper: BindingHelper;
   protected _bindingEventService: BindingEventService;
   protected _paginationElement!: HTMLDivElement;
   protected _enableTranslate = false;
-  protected _gridParentContainerElm?: HTMLElement;
+  protected _gridContainerElm?: HTMLElement;
   protected _itemPerPageElm!: HTMLSelectElement;
   protected _spanInfoFromToElm!: HTMLSpanElement;
   protected _seekFirstElm!: HTMLLIElement;
@@ -37,7 +37,7 @@ export class SlickPaginationComponent {
   textOf = 'of';
   textPage = 'Page';
 
-  constructor(protected readonly paginationService: PaginationService, protected readonly pubSubService: PubSubService, protected readonly sharedService: SharedService, protected readonly translaterService?: TranslaterService | undefined) {
+  constructor(protected readonly grid: SlickGrid, protected readonly paginationService: PaginationService, protected readonly pubSubService: PubSubService, protected readonly translaterService?: TranslaterService | undefined) {
     this._bindingHelper = new BindingHelper();
     this._bindingEventService = new BindingEventService();
     this._bindingHelper.querySelectorPrefix = `.${this.gridUid} `;
@@ -70,7 +70,7 @@ export class SlickPaginationComponent {
       }),
       this.pubSubService.subscribe('onPaginationSetCursorBased', () => {
         this.dispose(); // recreate pagination component, probably only used for GraphQL E2E tests
-        this.renderPagination(this._gridParentContainerElm!);
+        this.render(this._gridContainerElm!);
       })
     );
   }
@@ -102,12 +102,9 @@ export class SlickPaginationComponent {
     return this.paginationService.pageNumber;
   }
 
-  get grid(): SlickGrid {
-    return this.sharedService.slickGrid;
-  }
-
+  /** Getter for the Grid Options pulled through the Grid Object */
   get gridOptions(): GridOption {
-    return this.sharedService.gridOptions;
+    return this.grid?.getOptions() ?? {};
   }
 
   get gridUid(): string {
@@ -140,8 +137,8 @@ export class SlickPaginationComponent {
     this._paginationElement.remove();
   }
 
-  renderPagination(gridParentContainerElm: HTMLElement): void {
-    this._gridParentContainerElm = gridParentContainerElm;
+  render(containerElm: HTMLElement): void {
+    this._gridContainerElm = containerElm;
     const paginationElm = this.createPaginationContainer();
     const divNavContainerElm = createDomElement('div', { className: 'slick-pagination-nav' });
 
@@ -175,8 +172,8 @@ export class SlickPaginationComponent {
     paginationElm.appendChild(divNavContainerElm);
     paginationElm.appendChild(paginationSettingsElm);
     this._paginationElement.appendChild(paginationElm);
-    if (gridParentContainerElm?.appendChild && this._paginationElement) {
-      gridParentContainerElm.appendChild(this._paginationElement);
+    if (containerElm?.appendChild && this._paginationElement) {
+      containerElm.appendChild(this._paginationElement);
     }
 
     this.renderPageSizes();

packages/vanilla-bundle/src/components/slick-vanilla-grid-bundle.ts

@@ -1262,9 +1262,9 @@ export class SlickVanillaGridBundle<TData = any> {
    * @param {Boolean} shouldDisposePaginationService - when disposing the Pagination, do we also want to dispose of the Pagination Service? (defaults to True)
    */
   protected renderPagination(showPagination = true): void {
-    if (this._gridOptions?.enablePagination && !this._isPaginationInitialized && showPagination) {
-      this.slickPagination = new SlickPaginationComponent(this.paginationService, this._eventPubSubService, this.sharedService, this.translaterService);
-      this.slickPagination.renderPagination(this._gridParentContainerElm);
+    if (this.slickGrid && this._gridOptions?.enablePagination && !this._isPaginationInitialized && showPagination) {
+      this.slickPagination = new SlickPaginationComponent(this.slickGrid, this.paginationService, this._eventPubSubService, this.translaterService);
+      this.slickPagination.render(this._gridParentContainerElm);
       this._isPaginationInitialized = true;
     } else if (!showPagination) {
       this.slickPagination?.dispose();