Move pagination functinality from extensible-table to ngx-datatable-list.directive

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html

@@ -3,8 +3,6 @@
   [rows]="data"
   [count]="recordsTotal"
   [list]="list"
-  [offset]="list?.page"
-  (page)="setPage($event)"
   (activate)="tableActivate.emit($event)"
 >
   @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -1,6 +1,6 @@
 import {
   ABP,
-  ConfigStateService, 
+  ConfigStateService,
   getShortDateFormat,
   getShortDateShortTimeFormat,
   getShortTimeFormat,
@@ -10,11 +10,11 @@ import {
   PermissionService,
 } from '@abp/ng.core';
 import {
-  AsyncPipe,
+  AbpVisibleDirective,
-  formatDate,
+  NgxDatatableDefaultDirective,
-  NgComponentOutlet, 
+  NgxDatatableListDirective,
-  NgTemplateOutlet,
+} from '@abp/ng.theme.shared';
-} from '@angular/common';
+import { AsyncPipe, formatDate, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -29,6 +29,8 @@ import {
   TemplateRef,
   TrackByFunction,
 } from '@angular/core';
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { ePropType } from '../../enums/props.enum';
@@ -41,14 +43,7 @@ import {
   EXTENSIONS_IDENTIFIER,
   PROP_DATA_STREAM,
 } from '../../tokens/extensions.token';
-import { NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { GridActionsComponent } from '../grid-actions/grid-actions.component';
-import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
-import {
-  AbpVisibleDirective,
-  NgxDatatableDefaultDirective,
-  NgxDatatableListDirective,
-} from '@abp/ng.theme.shared';
 
 const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
 
@@ -172,32 +167,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
     );
   }
 
-  setPage({ offset }) {
+  ngOnChanges({ data }: SimpleChanges) {
-    this.list.page = offset;
-  }
-
-  ngOnChanges({ data, recordsTotal }: SimpleChanges) {
-    if (data?.currentValue.length < 1 && recordsTotal?.currentValue > 0) {
-      let maxPage = Math.floor(Number(recordsTotal?.currentValue / this.list.maxResultCount));
-      
-      if(recordsTotal?.currentValue < this.list.maxResultCount) {
-        this.list.page = 0;
-        return;
-      }
-
-      if (recordsTotal?.currentValue % this.list.maxResultCount === 0) {
-        maxPage -= 1;
-      }
-
-      if (this.list.page < maxPage) {
-        this.list.page = this.list.page;
-        return;
-      }
-
-      this.list.page = maxPage;
-      return;
-    }
-
     if (!data?.currentValue) return;
 
     if (data.currentValue.length < 1) {

npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts

@@ -8,6 +8,7 @@ import {
   OnDestroy,
   OnInit,
   Optional,
+  DoCheck,
   SimpleChanges,
 } from '@angular/core';
 import { DatatableComponent } from '@swimlane/ngx-datatable';
@@ -24,7 +25,7 @@ import {
   standalone: true,
   exportAs: 'ngxDatatableList',
 })
-export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
+export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit, DoCheck {
   private subscription = new Subscription();
   private querySubscription = new Subscription();
 
@@ -39,6 +40,30 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
     this.setInitialValues();
   }
 
+  ngDoCheck(): void {
+    this.refreshPageIfDataExist();
+  }
+
+  ngOnInit() {
+    this.subscribeToPage();
+    this.subscribeToSort();
+  }
+
+  ngOnChanges({ list }: SimpleChanges) {
+    this.subscribeToQuery();
+
+    if (!list.firstChange) return;
+
+    const { maxResultCount, page } = list.currentValue;
+    this.table.limit = maxResultCount;
+    this.table.offset = page;
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+    this.querySubscription.unsubscribe();
+  }
+
   private setInitialValues() {
     this.table.externalPaging = true;
     this.table.externalSorting = true;
@@ -68,6 +93,13 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
     this.subscription.add(sub);
   }
 
+  private subscribeToPage() {
+    const sub = this.table.page.subscribe(({ offset }) => {
+      this.setTablePage(offset);
+    });
+    this.subscription.add(sub);
+  }
+
   private subscribeToQuery() {
     if (!this.querySubscription.closed) this.querySubscription.unsubscribe();
 
@@ -77,22 +109,30 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
     });
   }
 
-  ngOnChanges({ list }: SimpleChanges) {
+  private setTablePage(pageNum: number) {
-    this.subscribeToQuery();
+    this.list.page = pageNum;
+    this.table.offset = pageNum;
+  }
 
-    if (!list.firstChange) return;
+  private refreshPageIfDataExist() {
+    if (this.table.rows.length < 1 && this.list.totalCount > 0) {
+      let maxPage = Math.floor(Number(this.list.totalCount / this.list.maxResultCount));
 
-    const { maxResultCount, page } = list.currentValue;
+      if (this.list.totalCount < this.list.maxResultCount) {
-    this.table.limit = maxResultCount;
+        this.setTablePage(0);
-    this.table.offset = page;
+        return;
-  }
+      }
 
-  ngOnDestroy() {
+      if (this.list.totalCount % this.list.maxResultCount === 0) {
-    this.subscription.unsubscribe();
+        maxPage -= 1;
-    this.querySubscription.unsubscribe();
+      }
-  }
 
-  ngOnInit() {
+      if (this.list.page < maxPage) {
-    this.subscribeToSort();
+        this.setTablePage(this.list.page);
+        return;
+      }
+
+      this.setTablePage(maxPage);
+    }
   }
 }