Browse Source

Fix pagination issue in extensible table component

pull/19203/head
Sinan Öztürk 2 years ago
parent
commit
36633299f3
  1. 2
      npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
  2. 20
      npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
  3. 9
      npm/ng-packs/packages/theme-shared/src/lib/directives/ngx-datatable-list.directive.ts

2
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)) {

20
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<R = any> 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;
}

9
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();
}
}

Loading…
Cancel
Save