From e932f397f278319708875c8d9b4fb068a7273afe Mon Sep 17 00:00:00 2001 From: markuczy Date: Thu, 22 Feb 2024 16:15:30 +0100 Subject: [PATCH] fix: current page should persist between layout changes --- .../data-list-grid.component.html | 2 + .../data-list-grid.component.ts | 16 +++- .../data-table/data-table.component.html | 2 + .../data-table/data-table.component.spec.ts | 58 +++++++------ .../data-table/data-table.component.ts | 43 ++++++++-- .../data-view/data-view.component.html | 4 + .../data-view/data-view.component.spec.ts | 84 ++++++++++++++++--- .../data-view/data-view.component.ts | 28 +++++-- .../interactive-data-view.component.html | 2 + .../interactive-data-view.component.ts | 20 ++++- .../testing/button.harness.ts | 5 ++ .../testing/primeng/p-paginator.harness.ts | 25 +++--- 12 files changed, 219 insertions(+), 70 deletions(-) diff --git a/libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.html b/libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.html index a4d42d21..8a0fe6f7 100644 --- a/libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.html +++ b/libs/portal-integration-angular/src/lib/core/components/data-list-grid/data-list-grid.component.html @@ -1,6 +1,8 @@ ([]) @Input() get data(): RowListGridData[] { @@ -155,6 +156,7 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe @Output() viewItem = new EventEmitter() @Output() editItem = new EventEmitter() @Output() deleteItem = new EventEmitter() + @Output() pageChanged = new EventEmitter() get viewItemObserved(): boolean { const dv = this.injector.get('DataViewComponent', null) @@ -297,4 +299,12 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe resolveFieldData(object: any, key: any) { return ObjectUtils.resolveFieldData(object, key) } + + onPageChange(event: any) { + console.log('DataListGrid') + console.log(event) + const page = event.first / event.rows + this.page = page + this.pageChanged.emit(page) + } } diff --git a/libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.html b/libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.html index 78df44bd..0fcd134f 100644 --- a/libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.html +++ b/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 }}" diff --git a/libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.spec.ts b/libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.spec.ts index e4a4c71d..e2732a4b 100644 --- a/libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.spec.ts +++ b/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 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') diff --git a/libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.ts b/libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.ts index 2759ab09..2a301da7 100644 --- a/libs/portal-integration-angular/src/lib/core/components/data-table/data-table.component.ts +++ b/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 | undefined @@ -133,13 +145,13 @@ export class DataTableComponent extends DataSortBase implements OnInit { @Input() frozenActionColumn = false @Input() actionColumnPosition: 'left' | 'right' = 'right' - @Output() filtered = new EventEmitter() @Output() sorted = new EventEmitter() @Output() viewTableRow = new EventEmitter() @Output() editTableRow = new EventEmitter() @Output() deleteTableRow = new EventEmitter() @Output() selectionChanged = new EventEmitter() + @Output() pageChanged = new EventEmitter() displayedRows$: Observable | undefined selectedRows$: Observable | 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,12 @@ export class DataTableComponent extends DataSortBase implements OnInit { onSelectionChange(event: Row[]) { this.selectionChanged.emit(event) } + + onPageChange(event: any) { + console.log('DataTable') + console.log(event) + const page = event.first / event.rows + this.page = page + this.pageChanged.emit(page) + } } diff --git a/libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.html b/libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.html index 5bbe8f0c..496948c0 100644 --- a/libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.html +++ b/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" diff --git a/libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.spec.ts b/libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.spec.ts index 4974db6f..e43600de 100644 --- a/libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.spec.ts +++ b/libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.spec.ts @@ -8,7 +8,7 @@ import { TranslateTestingModule } from 'ngx-translate-testing' import { HttpClientTestingModule } from '@angular/common/http/testing' import { DataTableComponent } from '../data-table/data-table.component' import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed' -import { DataTableHarness, DataViewHarness } from '../../../../../testing' +import { DataListGridHarness, DataTableHarness, DataViewHarness } from '../../../../../testing' import { ColumnType } from '../../../model/column-type.model' import { PortalCoreModule } from '../../portal-core.module' @@ -17,6 +17,19 @@ describe('DataViewComponent', () => { let fixture: ComponentFixture let dataViewHarness: DataViewHarness + 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', + }, + } + + const TRANSLATIONS = { + [ENGLISH_LANGUAGE]: ENGLISH_TRANSLATIONS, + } + const mockData = [ { version: 0, @@ -177,7 +190,13 @@ describe('DataViewComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [DataViewComponent, DataListGridComponent, DataTableComponent], - imports: [DataViewModule, MockAuthModule, TranslateTestingModule.withTranslations({}), HttpClientTestingModule, PortalCoreModule], + imports: [ + DataViewModule, + MockAuthModule, + TranslateTestingModule.withTranslations(TRANSLATIONS), + HttpClientTestingModule, + PortalCoreModule, + ], }).compileComponents() fixture = TestBed.createComponent(DataViewComponent) @@ -205,21 +224,21 @@ describe('DataViewComponent', () => { 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(dataTable).toBeTruthy() expect(await dataTable.rowSelectionIsEnabled()).toEqual(false) component.selectionChanged.subscribe() - expect(await dataTable.rowSelectionIsEnabled()).toEqual(true); + expect(await dataTable.rowSelectionIsEnabled()).toEqual(true) }) it('should render an unpinnend action column on the right side of the table by default', async () => { component.viewItem.subscribe((event) => console.log(event)) - + expect(component.frozenActionColumn).toBe(false) expect(component.actionColumnPosition).toBe('right') expect(await dataTable.getActionColumnHeader('left')).toBe(null) expect(await dataTable.getActionColumn('left')).toBe(null) - + const rightActionColumnHeader = await dataTable.getActionColumnHeader('right') const rightActionColumn = await dataTable.getActionColumn('right') expect(rightActionColumnHeader).toBeTruthy() @@ -227,16 +246,16 @@ describe('DataViewComponent', () => { expect(await dataTable.columnIsFrozen(rightActionColumnHeader)).toBe(false) expect(await dataTable.columnIsFrozen(rightActionColumn)).toBe(false) }) - + it('should render an pinned action column on the specified side of the table', async () => { component.viewItem.subscribe((event) => console.log(event)) - + component.frozenActionColumn = true component.actionColumnPosition = 'left' - + expect(await dataTable.getActionColumnHeader('right')).toBe(null) expect(await dataTable.getActionColumn('right')).toBe(null) - + const leftActionColumnHeader = await dataTable.getActionColumnHeader('left') const leftActionColumn = await dataTable.getActionColumn('left') expect(leftActionColumnHeader).toBeTruthy() @@ -245,4 +264,49 @@ describe('DataViewComponent', () => { expect(await dataTable.columnIsFrozen(leftActionColumn)).toBe(true) }) }) + + it('should stay on the same page after layout change', async () => { + component.data = [ + ...component.data, + { + id: 'mock1', + imagePath: '/path/to/image', + }, + { + id: 'mock2', + imagePath: '/path/to/image', + }, + { + id: 'mock3', + imagePath: '/path/to/image', + }, + { + id: 'mock4', + imagePath: '/path/to/image', + }, + { + id: 'mock5', + imagePath: '/path/to/image', + }, + { + id: 'mock6', + imagePath: '/path/to/image', + }, + ] + + dataViewHarness = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataViewHarness) + const dataList = await dataViewHarness.getHarness(DataListGridHarness) + const dataListPaginator = await dataList.getPaginator() + let dataListRaport = await dataListPaginator.getCurrentPageReportText() + expect(dataListRaport).toEqual('1 - 10 of 11') + await dataListPaginator.clickNextPage() + dataListRaport = await dataListPaginator.getCurrentPageReportText() + expect(dataListRaport).toEqual('11 - 11 of 11') + + component.layout = 'table' + const dataTable = await dataViewHarness.getHarness(DataTableHarness) + const dataTablePaginator = await dataTable.getPaginator() + const dataTableRaport = await dataTablePaginator.getCurrentPageReportText() + expect(dataTableRaport).toEqual('11 - 11 of 11') + }) }) diff --git a/libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.ts b/libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.ts index de12b73c..7305ce94 100644 --- a/libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/data-view/data-view.component.ts @@ -58,11 +58,12 @@ export class DataViewComponent implements DoCheck, OnInit { @Input() sortDirection: DataSortDirection = DataSortDirection.NONE @Input() listGridPaginator = true @Input() tablePaginator = true - @Input() totalRecordsOnServer: number | undefined + @Input() page = 0 + @Input() totalRecordsOnServer: number | undefined @Input() currentPageShowingKey = 'OCX_DATA_TABLE.SHOWING' @Input() currentPageShowingWithTotalOnServerKey = 'OCX_DATA_TABLE.SHOWING_WITH_TOTAL_ON_SERVER' @Input() selectedRows: Row[] = [] - @Input() frozenActionColumn = false; + @Input() frozenActionColumn = false @Input() actionColumnPosition: 'left' | 'right' = 'right' @Input() @@ -145,6 +146,7 @@ export class DataViewComponent implements DoCheck, OnInit { @Output() viewItem = new EventEmitter() @Output() editItem = new EventEmitter() @Output() selectionChanged = new EventEmitter() + @Output() pageChanged = new EventEmitter() isDeleteItemObserved: boolean | undefined isViewItemObserved: boolean | undefined IsEditItemObserved: boolean | undefined @@ -160,11 +162,14 @@ export class DataViewComponent implements DoCheck, OnInit { return this.injector.get('InteractiveDataViewComponent', null)?.deleteItem.observed || this.deleteItem.observed } get selectionChangedObserved(): boolean { - return this.injector.get('InteractiveDataViewComponent', null)?.selectionChanged.observed || this.selectionChanged.observed + return ( + this.injector.get('InteractiveDataViewComponent', null)?.selectionChanged.observed || + this.selectionChanged.observed + ) } constructor(private injector: Injector) {} - + ngOnInit(): void { this.firstColumnId = this.columns[0]?.id } @@ -226,8 +231,8 @@ export class DataViewComponent implements DoCheck, OnInit { }) } } - if(this.selectionChangedObserved) { - if(!this._dataTableComponent?.selectionChanged.observed) { + if (this.selectionChangedObserved) { + if (!this._dataTableComponent?.selectionChanged.observed) { this._dataTableComponent?.selectionChanged.subscribe((event) => { this.onRowSelectionChange(event) }) @@ -235,7 +240,7 @@ export class DataViewComponent implements DoCheck, OnInit { } } } - + filtering(event: any) { this.filters = event this.filtered.emit(event) @@ -265,8 +270,15 @@ export class DataViewComponent implements DoCheck, OnInit { } onRowSelectionChange(event: Row[]) { - if(this.selectionChangedObserved){ + if (this.selectionChangedObserved) { this.selectionChanged.emit(event) } } + + onPageChange(event: number) { + console.log('DataView') + console.log(event) + this.page = event + this.pageChanged.emit(event) + } } diff --git a/libs/portal-integration-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.html b/libs/portal-integration-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.html index 94018445..7fc37039 100644 --- a/libs/portal-integration-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.html +++ b/libs/portal-integration-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.html @@ -61,6 +61,8 @@ [additionalActions]="additionalActions" [listGridPaginator]="listGridPaginator" [tablePaginator]="tablePaginator" + [page]="page" + (pageChanged)="onPageChange($event)" [selectedRows]="selectedRows" [frozenActionColumn]="frozenActionColumn" [actionColumnPosition]="actionColumnPosition" diff --git a/libs/portal-integration-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.ts b/libs/portal-integration-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.ts index 3f50426a..654e9c4a 100644 --- a/libs/portal-integration-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.ts +++ b/libs/portal-integration-angular/src/lib/core/components/interactive-data-view/interactive-data-view.component.ts @@ -4,7 +4,10 @@ import { DataSortDirection } from '../../../model/data-sort-direction' import { Filter, Row, Sort } from '../data-table/data-table.component' import { DataViewComponent, RowListGridData } from '../data-view/data-view.component' import { GroupSelectionChangedEvent } from '../column-group-selection/column-group-selection.component' -import { ActionColumnChangedEvent, ColumnSelectionChangedEvent } from '../custom-group-column-selector/custom-group-column-selector.component' +import { + ActionColumnChangedEvent, + ColumnSelectionChangedEvent, +} from '../custom-group-column-selector/custom-group-column-selector.component' import { DataAction } from '../../../model/data-action' @Component({ @@ -54,6 +57,7 @@ export class InteractiveDataViewComponent implements OnInit { @Input() additionalActions: DataAction[] = [] @Input() listGridPaginator = true @Input() tablePaginator = true + @Input() page = 0 @Input() selectedRows: Row[] = [] @ContentChild('tableCell') tableCell: TemplateRef | undefined @ContentChild('tableDateCell') tableDateCell: TemplateRef | undefined @@ -74,6 +78,7 @@ export class InteractiveDataViewComponent implements OnInit { @Output() dataViewLayoutChange = new EventEmitter<'grid' | 'list' | 'table'>() @Output() displayedColumnsChange = new EventEmitter() @Output() selectionChanged: EventEmitter = new EventEmitter() + @Output() pageChanged: EventEmitter = new EventEmitter() displayedColumns: DataTableColumn[] = [] selectedGroupKey = '' isDeleteItemObserved: boolean | undefined @@ -222,8 +227,8 @@ export class InteractiveDataViewComponent implements OnInit { }) } } - if(this.selectionChanged.observed) { - if(!this._dataViewComponent?.selectionChanged.observed) { + if (this.selectionChanged.observed) { + if (!this._dataViewComponent?.selectionChanged.observed) { this._dataViewComponent?.selectionChanged.subscribe((event) => { this.onRowSelectionChange(event) }) @@ -243,8 +248,15 @@ export class InteractiveDataViewComponent implements OnInit { } onRowSelectionChange(event: Row[]) { - if(this.selectionChanged.observed){ + if (this.selectionChanged.observed) { this.selectionChanged.emit(event) } } + + onPageChange(event: number) { + console.log('Interactive') + console.log(event) + this.page = event + this.pageChanged.emit(event) + } } diff --git a/libs/portal-integration-angular/testing/button.harness.ts b/libs/portal-integration-angular/testing/button.harness.ts index 69537bb6..016dabf4 100644 --- a/libs/portal-integration-angular/testing/button.harness.ts +++ b/libs/portal-integration-angular/testing/button.harness.ts @@ -3,6 +3,7 @@ import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular export interface ButtonHarnessFilters extends BaseHarnessFilters { id?: string icon?: string + class?: string } export class ButtonHarness extends ComponentHarness { @@ -12,6 +13,7 @@ export class ButtonHarness extends ComponentHarness { return new HarnessPredicate(ButtonHarness, options) .addOption('id', options.id, (harness, id) => HarnessPredicate.stringMatches(harness.getId(), id)) .addOption('icon', options.icon, (harness, icon) => HarnessPredicate.stringMatches(harness.getIcon(), icon)) + .addOption('class', options.class, (harness, c) => HarnessPredicate.stringMatches(harness.getByClass(c), c)) } async getId(): Promise { @@ -20,6 +22,9 @@ export class ButtonHarness extends ComponentHarness { async getIcon(): Promise { return await (await this.host()).getAttribute('icon') } + async getByClass(c: string): Promise { + return (await (await this.host()).hasClass(c)) ? c : '' + } async click() { if (!(await this.isDisabled())) { diff --git a/libs/portal-integration-angular/testing/primeng/p-paginator.harness.ts b/libs/portal-integration-angular/testing/primeng/p-paginator.harness.ts index 090ffb09..c24d9912 100644 --- a/libs/portal-integration-angular/testing/primeng/p-paginator.harness.ts +++ b/libs/portal-integration-angular/testing/primeng/p-paginator.harness.ts @@ -1,14 +1,19 @@ -import { ContentContainerComponentHarness } from "@angular/cdk/testing"; -import { SpanHarness } from "../span.harness"; -import { PDropdownHarness } from "./p-dropdown.harness"; +import { ContentContainerComponentHarness } from '@angular/cdk/testing' +import { SpanHarness } from '../span.harness' +import { PDropdownHarness } from './p-dropdown.harness' +import { ButtonHarness } from '../button.harness' export class PPaginatorHarness extends ContentContainerComponentHarness { - static hostSelector = 'p-paginator' - getCurrentPageReport = this.locatorFor(SpanHarness.with({ class: 'p-paginator-current' })) - getRowsPerPageOptions = this.locatorFor(PDropdownHarness) + static hostSelector = 'p-paginator' + getCurrentPageReport = this.locatorFor(SpanHarness.with({ class: 'p-paginator-current' })) + getRowsPerPageOptions = this.locatorFor(PDropdownHarness) + getNextPageButton = this.locatorFor(ButtonHarness.with({ class: 'p-paginator-next' })) - async getCurrentPageReportText(): Promise { - return await (await this.getCurrentPageReport()).getText() - } + async getCurrentPageReportText(): Promise { + return await (await this.getCurrentPageReport()).getText() + } -} \ No newline at end of file + async clickNextPage() { + ;(await this.getNextPageButton()).click() + } +}