From ff0041762f75a94ed81e05584350e2587d5e81f8 Mon Sep 17 00:00:00 2001 From: markuczy <129275100+markuczy@users.noreply.github.com> Date: Tue, 19 Nov 2024 09:19:42 +0100 Subject: [PATCH] feat: show all option controlled in all data views (#613) * feat: show all option is optional in all data view * fix: lint fixes --- .../data-list-grid.component.spec.ts | 18 +++++++++++---- .../data-list-grid.component.stories.ts | 2 ++ .../data-list-grid.component.ts | 15 ++++++++++-- .../data-table/data-table.component.spec.ts | 23 ++++++++----------- .../data-table.component.stories.ts | 1 + .../data-table/data-table.component.ts | 15 ++++++++++-- .../data-view/data-view.component.html | 2 ++ .../data-view/data-view.component.ts | 22 +++++++++++------- .../interactive-data-view.component.html | 1 + ...interactive-data-view.component.stories.ts | 1 + .../interactive-data-view.component.ts | 1 + 11 files changed, 71 insertions(+), 30 deletions(-) diff --git a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.spec.ts b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.spec.ts index b64c38fc..ed0aeedc 100644 --- a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.spec.ts +++ b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.spec.ts @@ -23,7 +23,7 @@ describe('DataListGridComponent', () => { return this }) global.MutationObserver = mutationObserverMock - + let fixture: ComponentFixture let component: DataListGridComponent let translateService: TranslateService @@ -306,7 +306,11 @@ describe('DataListGridComponent', () => { const dataListGrid = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness) const paginator = await dataListGrid.getPaginator() const rowsPerPageOptions = await paginator.getRowsPerPageOptions() - const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0) + let rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0) + expect(rowsPerPageOptionsText).toEqual('10') + + component.showAllOption = true + rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0) expect(rowsPerPageOptionsText).toEqual('Alle') }) @@ -316,7 +320,11 @@ describe('DataListGridComponent', () => { const dataListGrid = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness) const paginator = await dataListGrid.getPaginator() const rowsPerPageOptions = await paginator.getRowsPerPageOptions() - const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0) + let rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0) + expect(rowsPerPageOptionsText).toEqual('10') + + component.showAllOption = true + rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0) expect(rowsPerPageOptionsText).toEqual('All') }) }) @@ -356,7 +364,7 @@ describe('DataListGridComponent', () => { component.viewPermission = 'VIEW' component.editPermission = 'EDIT' component.deletePermission = 'DELETE' - + fixture.detectChanges() await fixture.whenStable() } @@ -502,7 +510,7 @@ describe('DataListGridComponent', () => { component.viewPermission = 'VIEW' component.editPermission = 'EDIT' component.deletePermission = 'DELETE' - + fixture.detectChanges() await fixture.whenStable() } diff --git a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts index 8c577f69..0bbce3ce 100644 --- a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts +++ b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts @@ -304,6 +304,7 @@ export const ListWithPageSizes = { ...defaultComponentArgs, pageSizes: [2, 15, 25], data: extendedMockData, + showAllOption: false, }, } @@ -409,6 +410,7 @@ export const GridWithPageSizes = { layout: 'grid', pageSizes: [2, 15, 25], data: extendedMockData, + showAllOption: false, }, } diff --git a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts index 32b21bcc..2f46f64a 100644 --- a/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts +++ b/libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts @@ -79,6 +79,11 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe set pageSize(value: number | undefined) { this._pageSize$.next(value) } + _showAllOption$ = new BehaviorSubject(false) + @Input() + set showAllOption(value: boolean) { + this._showAllOption$.next(value) + } @Input() emptyResultsMessage: string | undefined @Input() fallbackImage = 'placeholder.png' @@ -333,8 +338,14 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe this.fallbackImagePath$ = this.appStateService.currentMfe$.pipe( map((currentMfe) => this.getFallbackImagePath(currentMfe)) ) - this.displayedPageSizes$ = combineLatest([this._pageSizes$, this.translateService.get('OCX_DATA_TABLE.ALL')]).pipe( - map(([pageSizes, translation]) => pageSizes.concat({ showAll: translation })) + this.displayedPageSizes$ = combineLatest([ + this._pageSizes$, + this.translateService.get('OCX_DATA_TABLE.ALL'), + this._showAllOption$, + ]).pipe( + map(([pageSizes, translation, showAllOption]) => + showAllOption ? pageSizes.concat({ showAll: translation }) : pageSizes + ) ) this.displayedPageSize$ = combineLatest([this._pageSize$, this._pageSizes$]).pipe( map(([pageSize, pageSizes]) => pageSize ?? pageSizes.find((val): val is number => typeof val === 'number') ?? 50) diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.spec.ts b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.spec.ts index 7fc25fc8..1b5ceeac 100644 --- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.spec.ts +++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.spec.ts @@ -285,7 +285,11 @@ describe('DataTableComponent', () => { const dataTable = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness) const paginator = await dataTable.getPaginator() const rowsPerPageOptions = await paginator.getRowsPerPageOptions() - const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0) + let rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0) + expect(rowsPerPageOptionsText).toEqual('10') + + component.showAllOption = true + rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0) expect(rowsPerPageOptionsText).toEqual('Alle') }) @@ -295,7 +299,11 @@ describe('DataTableComponent', () => { const dataTable = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness) const paginator = await dataTable.getPaginator() const rowsPerPageOptions = await paginator.getRowsPerPageOptions() - const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0) + let rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0) + expect(rowsPerPageOptionsText).toEqual('10') + + component.showAllOption = true + rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0) expect(rowsPerPageOptionsText).toEqual('All') }) }) @@ -478,8 +486,6 @@ describe('DataTableComponent', () => { expect(component.editTableRowObserved).toBe(true) expect(component.deleteTableRowObserved).toBe(true) - - const tableActions = await dataTable.getActionButtons() expect(tableActions.length).toBe(3) const expectedIcons = ['pi pi-eye', 'pi pi-trash', 'pi pi-pencil'] @@ -501,8 +507,6 @@ describe('DataTableComponent', () => { setUpActionButtonMockData() component.viewActionEnabledField = 'ready' - - let tableActions = await dataTable.getActionButtons() expect(tableActions.length).toBe(3) @@ -522,8 +526,6 @@ describe('DataTableComponent', () => { component.rows = [...tempRows] - - tableActions = await dataTable.getActionButtons() for (const action of tableActions) { @@ -544,7 +546,6 @@ describe('DataTableComponent', () => { expect(component.editTableRowObserved).toBe(true) expect(component.deleteTableRowObserved).toBe(true) - const tableActions = await dataTable.getActionButtons() expect(tableActions.length).toBe(3) const expectedIcons = ['pi pi-eye', 'pi pi-trash', 'pi pi-pencil'] @@ -565,8 +566,6 @@ describe('DataTableComponent', () => { setUpActionButtonMockData() component.viewActionVisibleField = 'ready' - - let tableActions = await dataTable.getActionButtons() expect(tableActions.length).toBe(2) @@ -581,8 +580,6 @@ describe('DataTableComponent', () => { component.rows = [...tempRows] - - tableActions = await dataTable.getActionButtons() expect(tableActions.length).toBe(3) const expectedIcons = ['pi pi-eye', 'pi pi-trash', 'pi pi-pencil'] diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts index 134726f6..91bcbf71 100644 --- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts +++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts @@ -432,6 +432,7 @@ export const WithPageSizes = { args: { ...defaultComponentArgs, pageSizes: [2, 15, 25], + showAllOption: false, }, } diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts index 3d0bf732..4bbeb7c3 100644 --- a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts +++ b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts @@ -166,6 +166,11 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon set pageSize(value: number | undefined) { this._pageSize$.next(value) } + _showAllOption$ = new BehaviorSubject(false) + @Input() + set showAllOption(value: boolean) { + this._showAllOption$.next(value) + } @Input() emptyResultsMessage: string | undefined @Input() name = '' @@ -398,8 +403,14 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon ) { super(locale, translateService) this.name = this.name || this.router.url.replace(/[^A-Za-z0-9]/, '_') - this.displayedPageSizes$ = combineLatest([this._pageSizes$, this.translateService.get('OCX_DATA_TABLE.ALL')]).pipe( - map(([pageSizes, translation]) => pageSizes.concat({ showAll: translation })) + this.displayedPageSizes$ = combineLatest([ + this._pageSizes$, + this.translateService.get('OCX_DATA_TABLE.ALL'), + this._showAllOption$, + ]).pipe( + map(([pageSizes, translation, showAllOption]) => + showAllOption ? pageSizes.concat({ showAll: translation }) : pageSizes + ) ) this.displayedPageSize$ = combineLatest([this._pageSize$, this._pageSizes$]).pipe( map(([pageSize, pageSizes]) => pageSize ?? pageSizes.find((val): val is number => typeof val === 'number') ?? 50) diff --git a/libs/angular-accelerator/src/lib/components/data-view/data-view.component.html b/libs/angular-accelerator/src/lib/components/data-view/data-view.component.html index 61868d5d..d040f5fc 100644 --- a/libs/angular-accelerator/src/lib/components/data-view/data-view.component.html +++ b/libs/angular-accelerator/src/lib/components/data-view/data-view.component.html @@ -15,6 +15,7 @@ [clientSideSorting]="true" [pageSizes]="pageSizes" [pageSize]="pageSize" + [showAllOption]="showAllOption" [paginator]="listGridPaginator" [page]="page" (pageChanged)="onPageChange($event)" @@ -142,6 +143,7 @@ [clientSideSorting]="clientSideSorting" [pageSizes]="pageSizes" [pageSize]="pageSize" + [showAllOption]="showAllOption" [paginator]="tablePaginator" [page]="page" (pageChanged)="onPageChange($event)" diff --git a/libs/angular-accelerator/src/lib/components/data-view/data-view.component.ts b/libs/angular-accelerator/src/lib/components/data-view/data-view.component.ts index 36a6e6dc..268e103e 100644 --- a/libs/angular-accelerator/src/lib/components/data-view/data-view.component.ts +++ b/libs/angular-accelerator/src/lib/components/data-view/data-view.component.ts @@ -13,7 +13,11 @@ import { TemplateRef, ViewChild, } from '@angular/core' -import { DataListGridComponent, DataListGridComponentState, ListGridData } from '../data-list-grid/data-list-grid.component' +import { + DataListGridComponent, + DataListGridComponentState, + ListGridData, +} from '../data-list-grid/data-list-grid.component' import { Row, Sort, DataTableComponent, DataTableComponentState } from '../data-table/data-table.component' import { DataTableColumn } from '../../model/data-table-column.model' import { DataSortDirection } from '../../model/data-sort-direction' @@ -101,6 +105,7 @@ export class DataViewComponent implements DoCheck, OnInit, AfterContentInit { @Input() sortStates: DataSortDirection[] = [DataSortDirection.ASCENDING, DataSortDirection.DESCENDING] @Input() pageSizes: number[] = [10, 25, 50] @Input() pageSize: number | undefined + @Input() showAllOption = false @Input() stringTableCellTemplate: TemplateRef | undefined @ContentChild('stringTableCell') stringTableCellChildTemplate: TemplateRef | undefined @@ -383,24 +388,25 @@ export class DataViewComponent implements DoCheck, OnInit, AfterContentInit { ngOnInit(): void { this.firstColumnId = this.columns[0]?.id - let dataTableComponentState$: Observable> = this.dataTableComponentState$ - let dataListGridComponentState$: Observable> = this.dataListGridComponentState$ + let dataTableComponentState$: Observable> = + this.dataTableComponentState$ + let dataListGridComponentState$: Observable> = + this.dataListGridComponentState$ if (this.layout === 'table') { dataListGridComponentState$ = dataListGridComponentState$.pipe(startWith({})) } else { dataTableComponentState$ = dataTableComponentState$.pipe(startWith({})) } - combineLatest([ - dataTableComponentState$.pipe(timestamp()), - dataListGridComponentState$.pipe(timestamp()), - ]) + combineLatest([dataTableComponentState$.pipe(timestamp()), dataListGridComponentState$.pipe(timestamp())]) .pipe( map((componentStates) => { return orderAndMergeValuesByTimestamp(componentStates) }) ) - .subscribe((val) => {this.componentStateChanged.emit(val)}) + .subscribe((val) => { + this.componentStateChanged.emit(val) + }) } ngAfterContentInit() { diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html index 9a682526..592b8956 100644 --- a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html +++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html @@ -89,6 +89,7 @@ [clientSideFiltering]="clientSideFiltering" [pageSizes]="pageSizes" [pageSize]="pageSize" + [showAllOption]="showAllOption" [emptyResultsMessage]="emptyResultsMessage" [layout]="layout" [name]="name" diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts index afca9369..091fe0cd 100644 --- a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts +++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts @@ -102,6 +102,7 @@ export const WithPageSizes = { args: { ...defaultComponentArgs, pageSizes: [2, 15, 25], + showAllOption: false, }, } diff --git a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts index a079f8f5..42d8c211 100644 --- a/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts +++ b/libs/angular-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts @@ -110,6 +110,7 @@ export class InteractiveDataViewComponent implements OnInit, AfterContentInit { ] @Input() pageSizes: number[] = [10, 25, 50] @Input() pageSize: number | undefined + @Input() showAllOption = false @Input() totalRecordsOnServer: number | undefined @Input() layout: 'grid' | 'list' | 'table' = 'table' @Input() defaultGroupKey = ''