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 5b28627085..cfa1b912f2 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 5670ca7343..a65a3925b1 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,7 +172,32 @@ export class ExtensibleTableComponent implements OnChanges { ); } - ngOnChanges({ data }: SimpleChanges) { + 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; + } + 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 48996bade1..ef835e9fcd 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); } 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 9ce5d1d860..3769a3aa3d 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(); } }