From 5e68a58b5f78657f0196aebc0157b1264e01b2c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= Date: Mon, 4 Mar 2024 19:09:49 +0300 Subject: [PATCH 1/5] Fix pagination issue in ExtensibleTableComponent --- .../extensible-table/extensible-table.component.ts | 14 +++++++++++++- .../packages/core/src/lib/services/list.service.ts | 2 +- 2 files changed, 14 insertions(+), 2 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 5670ca73430..3e1ddedb495 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 @@ -175,7 +175,19 @@ export class ExtensibleTableComponent implements OnChanges { ); } - ngOnChanges({ data }: SimpleChanges) { + ngOnChanges({ data, recordsTotal }: SimpleChanges) { + if (data?.currentValue.length === 0 && recordsTotal?.currentValue) { + console.log(recordsTotal?.currentValue); + let maxPage = Number(Number(recordsTotal?.currentValue / this.list.maxResultCount).toFixed()); + + if(recordsTotal?.currentValue % this.list.maxResultCount === 0){ + maxPage -= 1; + } + + this.list.page = maxPage; + return; + } + if (!data?.currentValue) return; if (data.currentValue.length < 1) { diff --git a/npm/ng-packs/packages/core/src/lib/services/list.service.ts b/npm/ng-packs/packages/core/src/lib/services/list.service.ts index 48996bade15..ef835e9fcde 100644 --- a/npm/ng-packs/packages/core/src/lib/services/list.service.ts +++ b/npm/ng-packs/packages/core/src/lib/services/list.service.ts @@ -150,7 +150,7 @@ export class ListService implements this._query$.next({ filter: this._filter || undefined, maxResultCount: this._maxResultCount, - skipCount: this._filter ? 0 : this._page * this._maxResultCount, + skipCount: this._page * this._maxResultCount, sorting: this._sortOrder ? `${this._sortKey} ${this._sortOrder}` : undefined, } as any as QueryParamsType); } From 81265271e05152f17b2b6c7cfb769fd8e8bf9f14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= Date: Mon, 4 Mar 2024 19:11:19 +0300 Subject: [PATCH 2/5] Remove console.log statement in ngOnChanges method --- .../components/extensible-table/extensible-table.component.ts | 1 - 1 file changed, 1 deletion(-) 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 3e1ddedb495..b400b096287 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 @@ -177,7 +177,6 @@ export class ExtensibleTableComponent implements OnChanges { ngOnChanges({ data, recordsTotal }: SimpleChanges) { if (data?.currentValue.length === 0 && recordsTotal?.currentValue) { - console.log(recordsTotal?.currentValue); let maxPage = Number(Number(recordsTotal?.currentValue / this.list.maxResultCount).toFixed()); if(recordsTotal?.currentValue % this.list.maxResultCount === 0){ From 36633299f3d18e72f67f59fcceec5e2ef6343fde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= Date: Tue, 5 Mar 2024 11:18:22 +0300 Subject: [PATCH 3/5] Fix pagination issue in extensible table component --- .../extensible-table.component.html | 2 ++ .../extensible-table.component.ts | 20 ++++++++++++------- .../ngx-datatable-list.directive.ts | 9 --------- 3 files changed, 15 insertions(+), 16 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 0ba4b22d457..ff44690076d 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,6 +3,8 @@ [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 b400b096287..ef9af1631da 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,7 +1,6 @@ import { ABP, - ConfigStateService, - CoreModule, + ConfigStateService, getShortDateFormat, getShortDateShortTimeFormat, getShortTimeFormat, @@ -13,9 +12,7 @@ import { import { AsyncPipe, formatDate, - NgComponentOutlet, - NgFor, - NgIf, + NgComponentOutlet, NgTemplateOutlet, } from '@angular/common'; import { @@ -175,14 +172,23 @@ export class ExtensibleTableComponent implements OnChanges { ); } + setPage({ offset }) { + this.list.page = offset; + } + ngOnChanges({ data, recordsTotal }: SimpleChanges) { - if (data?.currentValue.length === 0 && recordsTotal?.currentValue) { + if (data?.currentValue.length < 1 && recordsTotal?.currentValue > 0) { let maxPage = Number(Number(recordsTotal?.currentValue / this.list.maxResultCount).toFixed()); - if(recordsTotal?.currentValue % this.list.maxResultCount === 0){ + 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; } 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 9ce5d1d860b..3769a3aa3db 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 @@ -53,14 +53,6 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit { }; } - private subscribeToPage() { - const sub = this.table.page.subscribe(({ offset }) => { - this.list.page = offset; - this.table.offset = offset; - }); - this.subscription.add(sub); - } - private subscribeToSort() { const sub = this.table.sort.subscribe(({ sorts: [{ prop, dir }] }) => { if (prop === this.list.sortKey && this.list.sortOrder === 'desc') { @@ -101,7 +93,6 @@ export class NgxDatatableListDirective implements OnChanges, OnDestroy, OnInit { } ngOnInit() { - this.subscribeToPage(); this.subscribeToSort(); } } From d7fa0f5c364c05b925b2c0a72cbff6ecf4b71ceb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= Date: Tue, 5 Mar 2024 11:51:09 +0300 Subject: [PATCH 4/5] use math.floor method instead of toFixed() --- .../extensible-table/extensible-table.component.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 ef9af1631da..c8283792fcc 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 @@ -178,7 +178,12 @@ export class ExtensibleTableComponent implements OnChanges { ngOnChanges({ data, recordsTotal }: SimpleChanges) { if (data?.currentValue.length < 1 && recordsTotal?.currentValue > 0) { - let maxPage = Number(Number(recordsTotal?.currentValue / this.list.maxResultCount).toFixed()); + let maxPage = Math.floor(Number(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; From fac19dbdac117691cee5096cc2b93f80f4d4b691 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sinan=20=C3=96zt=C3=BCrk?= Date: Tue, 5 Mar 2024 11:55:13 +0300 Subject: [PATCH 5/5] Remove duplicated Number() convertion --- .../components/extensible-table/extensible-table.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 c8283792fcc..a65a3925b1a 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 @@ -178,7 +178,7 @@ export class ExtensibleTableComponent implements OnChanges { ngOnChanges({ data, recordsTotal }: SimpleChanges) { if (data?.currentValue.length < 1 && recordsTotal?.currentValue > 0) { - let maxPage = Math.floor(Number(Number(recordsTotal?.currentValue / this.list.maxResultCount))); + let maxPage = Math.floor(Number(recordsTotal?.currentValue / this.list.maxResultCount)); if(recordsTotal?.currentValue < this.list.maxResultCount) { this.list.page = 0;