Merge pull request #19401 from abpframework/issue-19400

Move pagination functionality from `extensible-table.component.ts` to `ngx-datatable-list.directive.ts`

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,20 +1,3 @@
-import {
-  ABP,
-  ConfigStateService, 
-  getShortDateFormat,
-  getShortDateShortTimeFormat,
-  getShortTimeFormat,
-  ListService,
-  LocalizationModule,
-  PermissionDirective,
-  PermissionService,
-} from '@abp/ng.core';
-import {
-  AsyncPipe,
-  formatDate,
-  NgComponentOutlet, 
-  NgTemplateOutlet,
-} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -29,8 +12,31 @@ import {
   TemplateRef,
   TrackByFunction,
 } from '@angular/core';
+import { AsyncPipe, formatDate, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
+
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
+import { NgxDatatableModule } from '@swimlane/ngx-datatable';
+
+import {
+  ABP,
+  ConfigStateService,
+  getShortDateFormat,
+  getShortDateShortTimeFormat,
+  getShortTimeFormat,
+  ListService,
+  LocalizationModule,
+  PermissionDirective,
+  PermissionService,
+} from '@abp/ng.core';
+import {
+  AbpVisibleDirective,
+  NgxDatatableDefaultDirective,
+  NgxDatatableListDirective,
+} from '@abp/ng.theme.shared';
+
 import { ePropType } from '../../enums/props.enum';
 import { EntityActionList } from '../../models/entity-actions';
 import { EntityProp, EntityPropList } from '../../models/entity-props';
@@ -41,14 +47,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 +171,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges {
     );
   }
 
-  setPage({ offset }) {
-    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;
-    }
-
+  ngOnChanges({ data }: SimpleChanges) {
     if (!data?.currentValue) return;
 
     if (data.currentValue.length < 1) {

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

@@ -1,20 +1,19 @@
-import { ListService, LocalizationService } from '@abp/ng.core';
 import {
   ChangeDetectorRef,
   Directive,
-  Inject,
   Input,
   OnChanges,
-  OnDestroy,
   OnInit,
-  Optional,
+  DoCheck,
   SimpleChanges,
+  inject,
+  DestroyRef
 } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { DatatableComponent } from '@swimlane/ngx-datatable';
-import { Subscription } from 'rxjs';
+import { ListService, LocalizationService } from '@abp/ng.core';
 import {
   defaultNgxDatatableMessages,
-  NgxDatatableMessages,
   NGX_DATATABLE_MESSAGES,
 } from '../tokens/ngx-datatable-messages.token';
 
@@ -24,22 +23,39 @@ import {
   standalone: true,
   exportAs: 'ngxDatatableList',
 })
-export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
-  private subscription = new Subscription();
-  private querySubscription = new Subscription();
-
+export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck {
   @Input() list!: ListService;
 
-  constructor(
-    private table: DatatableComponent,
-    private cdRef: ChangeDetectorRef,
-    private localizationService: LocalizationService,
-    @Optional() @Inject(NGX_DATATABLE_MESSAGES) private ngxDatatableMessages: NgxDatatableMessages,
-  ) {
+  protected readonly table = inject(DatatableComponent);
+  protected readonly cdRef = inject(ChangeDetectorRef);
+  protected readonly destroyRef = inject(DestroyRef);
+  protected readonly localizationService = inject(LocalizationService);
+  protected readonly ngxDatatableMessages = inject(NGX_DATATABLE_MESSAGES, { optional: true });
+
+  constructor() {
     this.setInitialValues();
   }
 
-  private 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;
+  }
+
+  protected setInitialValues() {
     this.table.externalPaging = true;
     this.table.externalSorting = true;
 
@@ -53,8 +69,8 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
     };
   }
 
-  private subscribeToSort() {
-    const sub = this.table.sort.subscribe(({ sorts: [{ prop, dir }] }) => {
+  protected subscribeToSort() {
+    this.table.sort.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ sorts: [{ prop, dir }] }) => {
       if (prop === this.list.sortKey && this.list.sortOrder === 'desc') {
         this.list.sortKey = '';
         this.list.sortOrder = '';
@@ -65,34 +81,45 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit {
         this.list.sortOrder = dir;
       }
     });
-    this.subscription.add(sub);
   }
 
-  private subscribeToQuery() {
-    if (!this.querySubscription.closed) this.querySubscription.unsubscribe();
+  protected subscribeToPage() {
+    this.table.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ offset }) => {
+      this.setTablePage(offset);
+    });
+  }
 
-    this.querySubscription = this.list.query$.subscribe(() => {
+  protected subscribeToQuery() {
+    this.list.query$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
       const offset = this.list.page;
       if (this.table.offset !== offset) this.table.offset = offset;
     });
   }
 
-  ngOnChanges({ list }: SimpleChanges) {
-    this.subscribeToQuery();
+  protected setTablePage(pageNum: number) {
+    this.list.page = pageNum;
+    this.table.offset = pageNum;
+  }
 
-    if (!list.firstChange) return;
+  protected refreshPageIfDataExist() {
+    if (this.table.rows.length < 1 && this.table.count > 0) {
+      let maxPage = Math.floor(Number(this.table.count / this.list.maxResultCount));
 
-    const { maxResultCount, page } = list.currentValue;
-    this.table.limit = maxResultCount;
-    this.table.offset = page;
-  }
+      if (this.table.count < this.list.maxResultCount) {
+        this.setTablePage(0);
+        return;
+      }
 
-  ngOnDestroy() {
-    this.subscription.unsubscribe();
-    this.querySubscription.unsubscribe();
-  }
+      if (this.table.count % this.list.maxResultCount === 0) {
+        maxPage -= 1;
+      }
 
-  ngOnInit() {
-    this.subscribeToSort();
+      if (this.list.page < maxPage) {
+        this.setTablePage(this.list.page);
+        return;
+      }
+
+      this.setTablePage(maxPage);
+    }
   }
 }