fix: current page should persist between layout changes

libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.html

@@ -1,6 +1,8 @@
 <p-dataView
   [value]="(displayedItems$ | async) || []"
   [paginator]="paginator"
+  [first]="page * pageSize"
+  (onPage)="onPageChange($event)"
   [rows]="pageSize"
   [layout]="layout"
   [showCurrentPageReport]="true"

libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.ts

@@ -9,7 +9,7 @@ import {
   LOCALE_ID,
   OnInit,
   Output,
-  TemplateRef
+  TemplateRef,
 } from '@angular/core'
 import { Router } from '@angular/router'
 import { TranslateService } from '@ngx-translate/core'
@@ -60,6 +60,7 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe
   @Input() editMenuItemKey: string | undefined
   @Input() deleteMenuItemKey: string | undefined
   @Input() paginator = true
+  @Input() page = 0
   @Input() columns: DataTableColumn[] = []
   @Input() name = ''
   @Input()
@@ -77,9 +78,9 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe
     rows: '{rows}',
     first: '{first}',
     last: '{last}',
-    totalRecords: '{totalRecords}'
+    totalRecords: '{totalRecords}',
   }
-  
+
   _data$ = new BehaviorSubject<RowListGridData[]>([])
   @Input()
   get data(): RowListGridData[] {
@@ -155,6 +156,7 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe
   @Output() viewItem = new EventEmitter<ListGridData>()
   @Output() editItem = new EventEmitter<ListGridData>()
   @Output() deleteItem = new EventEmitter<ListGridData>()
+  @Output() pageChanged = new EventEmitter<number>()
 
   get viewItemObserved(): boolean {
     const dv = this.injector.get('DataViewComponent', null)
@@ -297,4 +299,10 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe
   resolveFieldData(object: any, key: any) {
     return ObjectUtils.resolveFieldData(object, key)
   }
+
+  onPageChange(event: any) {
+    const page = event.first / event.rows
+    this.page = page
+    this.pageChanged.emit(page)
+  }
 }

libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.html

@@ -81,6 +81,8 @@
   [value]="(displayedRows$ | async) || []"
   responsiveLayout="scroll"
   [paginator]="paginator"
+  [first]="page * pageSize"
+  (onPage)="onPageChange($event)"
   [rows]="pageSize"
   [showCurrentPageReport]="true"
   currentPageReportTemplate="{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}"

libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.spec.ts

@@ -2,43 +2,43 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { DataTableComponent, Row } from './data-table.component'
-import { PrimeNgModule } from '../../primeng.module';
-import { TranslateTestingModule } from 'ngx-translate-testing';
-import { ColumnType } from '../../../model/column-type.model';
-import { PortalCoreModule } from '../../portal-core.module';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { DataTableHarness, PTableCheckboxHarness } from '../../../../../testing';
+import { PrimeNgModule } from '../../primeng.module'
+import { TranslateTestingModule } from 'ngx-translate-testing'
+import { ColumnType } from '../../../model/column-type.model'
+import { PortalCoreModule } from '../../portal-core.module'
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed'
+import { DataTableHarness, PTableCheckboxHarness } from '../../../../../testing'
 
 describe('DataTableComponent', () => {
   let fixture: ComponentFixture<DataTableComponent>
   let component: DataTableComponent
   let translateService: TranslateService
   let dataTable: DataTableHarness
-  let unselectedCheckBoxes: PTableCheckboxHarness[];
-  let selectedCheckBoxes: PTableCheckboxHarness[];
+  let unselectedCheckBoxes: PTableCheckboxHarness[]
+  let selectedCheckBoxes: PTableCheckboxHarness[]
 
-  const ENGLISH_LANGUAGE = 'en';
+  const ENGLISH_LANGUAGE = 'en'
   const ENGLISH_TRANSLATIONS = {
     OCX_DATA_TABLE: {
-      SHOWING: "{{first}} - {{last}} of {{totalRecords}}",
-      SHOWING_WITH_TOTAL_ON_SERVER: "{{first}} - {{last}} of {{totalRecords}} ({{totalRecordsOnServer}})",
-      ALL: "All"
-    }
-  };
+      SHOWING: '{{first}} - {{last}} of {{totalRecords}}',
+      SHOWING_WITH_TOTAL_ON_SERVER: '{{first}} - {{last}} of {{totalRecords}} ({{totalRecordsOnServer}})',
+      ALL: 'All',
+    },
+  }
 
-  const GERMAN_LANGUAGE = 'de';
+  const GERMAN_LANGUAGE = 'de'
   const GERMAN_TRANSLATIONS = {
     OCX_DATA_TABLE: {
-      SHOWING: "{{first}} - {{last}} von {{totalRecords}}",
-      SHOWING_WITH_TOTAL_ON_SERVER: "{{first}} - {{last}} von {{totalRecords}} ({{totalRecordsOnServer}})",
-      ALL: "Alle"
-    }
-  };
+      SHOWING: '{{first}} - {{last}} von {{totalRecords}}',
+      SHOWING_WITH_TOTAL_ON_SERVER: '{{first}} - {{last}} von {{totalRecords}} ({{totalRecordsOnServer}})',
+      ALL: 'Alle',
+    },
+  }
 
   const TRANSLATIONS = {
     [ENGLISH_LANGUAGE]: ENGLISH_TRANSLATIONS,
-    [GERMAN_LANGUAGE]: GERMAN_TRANSLATIONS
-  };
+    [GERMAN_LANGUAGE]: GERMAN_TRANSLATIONS,
+  }
 
   const mockData = [
     {
@@ -199,7 +199,13 @@ describe('DataTableComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       declarations: [DataTableComponent],
-      imports: [PrimeNgModule, BrowserAnimationsModule, TranslateModule.forRoot(), TranslateTestingModule.withTranslations(TRANSLATIONS), PortalCoreModule],
+      imports: [
+        PrimeNgModule,
+        BrowserAnimationsModule,
+        TranslateModule.forRoot(),
+        TranslateTestingModule.withTranslations(TRANSLATIONS),
+        PortalCoreModule,
+      ],
     }).compileComponents()
 
     fixture = TestBed.createComponent(DataTableComponent)
@@ -288,7 +294,7 @@ describe('DataTableComponent', () => {
       expect(await dataTable.rowSelectionIsEnabled()).toEqual(false)
     })
 
-    it('should show a table with selection checkboxes if the parent binds to the event emitter',async () => {      
+    it('should show a table with selection checkboxes if the parent binds to the event emitter', async () => {
       expect(await dataTable.rowSelectionIsEnabled()).toEqual(false)
       component.selectionChanged.subscribe()
       expect(await dataTable.rowSelectionIsEnabled()).toEqual(true)
@@ -301,7 +307,7 @@ describe('DataTableComponent', () => {
       selectedCheckBoxes = await dataTable.getHarnessesForCheckboxes('checked')
       expect(unselectedCheckBoxes.length).toBe(5)
       expect(selectedCheckBoxes.length).toBe(0)
-      component.selectedRows = mockData.slice(0,2)
+      component.selectedRows = mockData.slice(0, 2)
 
       unselectedCheckBoxes = await dataTable.getHarnessesForCheckboxes('unchecked')
       selectedCheckBoxes = await dataTable.getHarnessesForCheckboxes('checked')
@@ -311,7 +317,7 @@ describe('DataTableComponent', () => {
   })
 
   it('should emit all selected elements when checkbox is clicked', async () => {
-    let selectionChangedEvent: Row[] | undefined;
+    let selectionChangedEvent: Row[] | undefined
 
     component.selectionChanged.subscribe((event) => (selectionChangedEvent = event))
     unselectedCheckBoxes = await dataTable.getHarnessesForCheckboxes('unchecked')

libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.ts

@@ -1,4 +1,15 @@
-import { Component, ContentChild, EventEmitter, Inject, Injector, Input, LOCALE_ID, OnInit, Output, TemplateRef } from '@angular/core'
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  Inject,
+  Injector,
+  Input,
+  LOCALE_ID,
+  OnInit,
+  Output,
+  TemplateRef,
+} from '@angular/core'
 import { Router } from '@angular/router'
 import { TranslateService } from '@ngx-translate/core'
 import { SelectItem } from 'primeng/api'
@@ -76,6 +87,7 @@ export class DataTableComponent extends DataSortBase implements OnInit {
   @Input() viewPermission: string | undefined
   @Input() editPermission: string | undefined
   @Input() paginator = true
+  @Input() page = 0
   @Input()
   get totalRecordsOnServer(): number | undefined {
     return this.params['totalRecordsOnServer'] ? Number(this.params['totalRecordsOnServer']) : undefined
@@ -91,7 +103,7 @@ export class DataTableComponent extends DataSortBase implements OnInit {
     rows: '{rows}',
     first: '{first}',
     last: '{last}',
-    totalRecords: '{totalRecords}'
+    totalRecords: '{totalRecords}',
   }
 
   @Input() stringCellTemplate: TemplateRef<any> | undefined
@@ -133,13 +145,13 @@ export class DataTableComponent extends DataSortBase implements OnInit {
   @Input() frozenActionColumn = false
   @Input() actionColumnPosition: 'left' | 'right' = 'right'
 
-
   @Output() filtered = new EventEmitter<Filter[]>()
   @Output() sorted = new EventEmitter<Sort>()
   @Output() viewTableRow = new EventEmitter<Row>()
   @Output() editTableRow = new EventEmitter<Row>()
   @Output() deleteTableRow = new EventEmitter<Row>()
   @Output() selectionChanged = new EventEmitter<Row[]>()
+  @Output() pageChanged = new EventEmitter<number>()
 
   displayedRows$: Observable<unknown[]> | undefined
   selectedRows$: Observable<unknown[]> | undefined
@@ -166,7 +178,12 @@ export class DataTableComponent extends DataSortBase implements OnInit {
     return dv?.selectionChangedObserved || dv?.selectionChanged.observed || this.selectionChanged.observed
   }
 
-  constructor(@Inject(LOCALE_ID) locale: string, translateService: TranslateService, private router: Router, private injector: Injector) {
+  constructor(
+    @Inject(LOCALE_ID) locale: string,
+    translateService: TranslateService,
+    private router: Router,
+    private injector: Injector
+  ) {
     super(locale, translateService)
     this.name = this.name || this.router.url.replace(/[^A-Za-z0-9]/, '_')
   }
@@ -176,7 +193,7 @@ export class DataTableComponent extends DataSortBase implements OnInit {
       mergeMap((params) => this.translateItems(params, this.columns, this.clientSideFiltering, this.clientSideSorting)),
       map((params) => this.filterItems(params, this.clientSideFiltering)),
       map((params) => this.sortItems(params, this.columns, this.clientSideSorting)),
-      map(([rows]) => this.flattenItems(rows,))
+      map(([rows]) => this.flattenItems(rows))
     )
     this.currentSelectedFilters$ = combineLatest([this._filters$, this.currentFilterColumn$]).pipe(
       map(([filters, currentFilterColumn]) => {
@@ -204,10 +221,10 @@ export class DataTableComponent extends DataSortBase implements OnInit {
               .filter((value, index, self) => self.indexOf(value) === index && value != null)
               .map(
                 (filterOption) =>
-                ({
-                  label: filterOption,
-                  value: filterOption,
-                } as SelectItem)
+                  ({
+                    label: filterOption,
+                    value: filterOption,
+                  } as SelectItem)
               )
           })
         )
@@ -295,4 +312,10 @@ export class DataTableComponent extends DataSortBase implements OnInit {
   onSelectionChange(event: Row[]) {
     this.selectionChanged.emit(event)
   }
+
+  onPageChange(event: any) {
+    const page = event.first / event.rows
+    this.page = page
+    this.pageChanged.emit(page)
+  }
 }

libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.html

@@ -14,6 +14,8 @@
     [pageSizes]="pageSizes"
     [pageSize]="pageSize"
     [paginator]="listGridPaginator"
+    [page]="page"
+    (pageChanged)="onPageChange($event)"
     [emptyResultsMessage]="emptyResultsMessage"
     [layout]="layout"
     [deletePermission]="deletePermission"
@@ -67,6 +69,8 @@
     [pageSizes]="pageSizes"
     [pageSize]="pageSize"
     [paginator]="tablePaginator"
+    [page]="page"
+    (pageChanged)="onPageChange($event)"
     [selectedRows]="selectedRows"
     [frozenActionColumn]="frozenActionColumn"
     [actionColumnPosition]="actionColumnPosition"