From 4c4124d25c43abcabe58ef90dd652800e1c5dbd4 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Fri, 22 Mar 2024 17:14:28 +0300 Subject: [PATCH 1/7] Move pagination functinality from extensible-table to ngx-datatable-list.directive --- .../extensible-table.component.html | 2 - .../extensible-table.component.ts | 48 +++---------- .../ngx-datatable-list.directive.ts | 68 +++++++++++++++---- 3 files changed, 63 insertions(+), 55 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html index cfa1b912f2..5b28627085 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html +++ b/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)) { diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts index a65a3925b1..00c57545c4 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts +++ b/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, - formatDate, - NgComponentOutlet, - NgTemplateOutlet, -} from '@angular/common'; + AbpVisibleDirective, + NgxDatatableDefaultDirective, + NgxDatatableListDirective, +} from '@abp/ng.theme.shared'; +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 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) { diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts index 3769a3aa3d..2b6d50d5ab 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts +++ b/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) { - this.subscribeToQuery(); + private setTablePage(pageNum: number) { + 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; - this.table.limit = maxResultCount; - this.table.offset = page; - } + if (this.list.totalCount < this.list.maxResultCount) { + this.setTablePage(0); + return; + } - ngOnDestroy() { - this.subscription.unsubscribe(); - this.querySubscription.unsubscribe(); - } + if (this.list.totalCount % this.list.maxResultCount === 0) { + maxPage -= 1; + } - ngOnInit() { - this.subscribeToSort(); + if (this.list.page < maxPage) { + this.setTablePage(this.list.page); + return; + } + + this.setTablePage(maxPage); + } } } From 3156c1a7d2b956b59b0db296a16dfd7a1827a787 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Fri, 22 Mar 2024 17:45:08 +0300 Subject: [PATCH 2/7] remove subscription and use angular new features --- .../ngx-datatable-list.directive.ts | 41 +++++++------------ 1 file changed, 14 insertions(+), 27 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts index 2b6d50d5ab..2f3ed4d50b 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts @@ -2,22 +2,20 @@ import { ListService, LocalizationService } from '@abp/ng.core'; import { ChangeDetectorRef, Directive, - Inject, Input, OnChanges, - OnDestroy, OnInit, - Optional, DoCheck, SimpleChanges, + inject, + DestroyRef } from '@angular/core'; import { DatatableComponent } from '@swimlane/ngx-datatable'; -import { Subscription } from 'rxjs'; import { defaultNgxDatatableMessages, - NgxDatatableMessages, NGX_DATATABLE_MESSAGES, } from '../tokens/ngx-datatable-messages.token'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector @@ -25,18 +23,16 @@ import { standalone: true, exportAs: 'ngxDatatableList', }) -export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit, DoCheck { - 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, - ) { + private readonly table = inject(DatatableComponent); + private readonly cdRef = inject(ChangeDetectorRef); + private readonly destroyRef = inject(DestroyRef); + private readonly localizationService = inject(LocalizationService); + private readonly ngxDatatableMessages = inject(NGX_DATATABLE_MESSAGES, { optional: true }); + + constructor() { this.setInitialValues(); } @@ -59,11 +55,6 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit, this.table.offset = page; } - ngOnDestroy() { - this.subscription.unsubscribe(); - this.querySubscription.unsubscribe(); - } - private setInitialValues() { this.table.externalPaging = true; this.table.externalSorting = true; @@ -79,7 +70,7 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit, } private subscribeToSort() { - const sub = this.table.sort.subscribe(({ sorts: [{ prop, dir }] }) => { + 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 = ''; @@ -90,20 +81,16 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit, this.list.sortOrder = dir; } }); - this.subscription.add(sub); } private subscribeToPage() { - const sub = this.table.page.subscribe(({ offset }) => { + this.table.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ offset }) => { this.setTablePage(offset); }); - this.subscription.add(sub); } private subscribeToQuery() { - if (!this.querySubscription.closed) this.querySubscription.unsubscribe(); - - this.querySubscription = this.list.query$.subscribe(() => { + this.list.query$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => { const offset = this.list.page; if (this.table.offset !== offset) this.table.offset = offset; }); From c9cb11d0cea02ee48a8faf58b44c3527af9fa3f4 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Mon, 25 Mar 2024 18:26:11 +0300 Subject: [PATCH 3/7] mark protected helper methods instead of private --- .../src/lib/directives/ngx-datatable-list.directive.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts index 2f3ed4d50b..e5e2a6290d 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts @@ -83,25 +83,25 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { }); } - private subscribeToPage() { + protected subscribeToPage() { this.table.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ offset }) => { this.setTablePage(offset); }); } - private subscribeToQuery() { + protected subscribeToQuery() { this.list.query$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => { const offset = this.list.page; if (this.table.offset !== offset) this.table.offset = offset; }); } - private setTablePage(pageNum: number) { + protected setTablePage(pageNum: number) { this.list.page = pageNum; this.table.offset = pageNum; } - private refreshPageIfDataExist() { + protected refreshPageIfDataExist() { if (this.table.rows.length < 1 && this.list.totalCount > 0) { let maxPage = Math.floor(Number(this.list.totalCount / this.list.maxResultCount)); From dd2769a978468de7f859a9c711450aa84c75cfc5 Mon Sep 17 00:00:00 2001 From: Masum ULU <49063256+masumulu28@users.noreply.github.com> Date: Mon, 25 Mar 2024 21:09:24 +0300 Subject: [PATCH 4/7] Update imports order --- .../extensible-table.component.ts | 42 ++++++++++--------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts index 00c57545c4..0018f90985 100644 --- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts +++ b/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 { - AbpVisibleDirective, - NgxDatatableDefaultDirective, - NgxDatatableListDirective, -} from '@abp/ng.theme.shared'; -import { AsyncPipe, formatDate, NgComponentOutlet, NgTemplateOutlet } from '@angular/common'; import { ChangeDetectionStrategy, Component, @@ -29,10 +12,31 @@ import { TemplateRef, TrackByFunction, } from '@angular/core'; -import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'; -import { NgxDatatableModule } from '@swimlane/ngx-datatable'; +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'; From 48e5f562faaeacbdc8b59852b2977255aef4749c Mon Sep 17 00:00:00 2001 From: Masum ULU <49063256+masumulu28@users.noreply.github.com> Date: Mon, 25 Mar 2024 21:11:26 +0300 Subject: [PATCH 5/7] Update ngx-datatable-list.directive.ts --- .../directives/ngx-datatable-list.directive.ts | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts index e5e2a6290d..79e751cd51 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts @@ -1,4 +1,3 @@ -import { ListService, LocalizationService } from '@abp/ng.core'; import { ChangeDetectorRef, Directive, @@ -10,12 +9,13 @@ import { inject, DestroyRef } from '@angular/core'; +import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { DatatableComponent } from '@swimlane/ngx-datatable'; +import { ListService, LocalizationService } from '@abp/ng.core'; import { defaultNgxDatatableMessages, NGX_DATATABLE_MESSAGES, } from '../tokens/ngx-datatable-messages.token'; -import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; @Directive({ // eslint-disable-next-line @angular-eslint/directive-selector @@ -26,11 +26,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { @Input() list!: ListService; - private readonly table = inject(DatatableComponent); - private readonly cdRef = inject(ChangeDetectorRef); - private readonly destroyRef = inject(DestroyRef); - private readonly localizationService = inject(LocalizationService); - private readonly ngxDatatableMessages = inject(NGX_DATATABLE_MESSAGES, { optional: true }); + 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(); @@ -55,7 +55,7 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { this.table.offset = page; } - private setInitialValues() { + protected setInitialValues() { this.table.externalPaging = true; this.table.externalSorting = true; @@ -69,7 +69,7 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { }; } - private subscribeToSort() { + 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 = ''; From 2e60403162af14ce6d42650fa3caa46cc34ca707 Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Tue, 26 Mar 2024 15:46:17 +0300 Subject: [PATCH 6/7] use table count instead of list count --- .../src/lib/directives/ngx-datatable-list.directive.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts index 79e751cd51..7c2711f060 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts @@ -102,7 +102,7 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { } protected refreshPageIfDataExist() { - if (this.table.rows.length < 1 && this.list.totalCount > 0) { + if (this.table.rows.length < 1 && this.table.count > 0) { let maxPage = Math.floor(Number(this.list.totalCount / this.list.maxResultCount)); if (this.list.totalCount < this.list.maxResultCount) { From fffe4fc36fa52dcadf9d9a895df1ea966bee95ad Mon Sep 17 00:00:00 2001 From: Sinan997 Date: Tue, 26 Mar 2024 16:23:51 +0300 Subject: [PATCH 7/7] use table count instead of list count --- .../src/lib/directives/ngx-datatable-list.directive.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts index 7c2711f060..577af2bd9c 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts @@ -103,14 +103,14 @@ export class NgxDatatableListDirective implements OnChanges, OnInit, DoCheck { protected refreshPageIfDataExist() { if (this.table.rows.length < 1 && this.table.count > 0) { - let maxPage = Math.floor(Number(this.list.totalCount / this.list.maxResultCount)); + let maxPage = Math.floor(Number(this.table.count / this.list.maxResultCount)); - if (this.list.totalCount < this.list.maxResultCount) { + if (this.table.count < this.list.maxResultCount) { this.setTablePage(0); return; } - if (this.list.totalCount % this.list.maxResultCount === 0) { + if (this.table.count % this.list.maxResultCount === 0) { maxPage -= 1; }