feat: fix minor bugs + implement pageSizes for data components

libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.html

@@ -1,19 +1,17 @@
 <p-dataView
-  [value]="(displayedItems$ | async) || []"
+  *ngIf="displayedPageSize$ | async as displayedPageSize"
+  [value]="(displayedItems$ | async) ?? []"
   [paginator]="paginator"
-  [first]="page * pageSize"
+  [first]="page * displayedPageSize"
   (onPage)="onPageChange($event)"
-  [rows]="pageSize"
+  [rows]="displayedPageSize"
   [layout]="layout"
   [showCurrentPageReport]="true"
   currentPageReportTemplate="{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}"
-  [rowsPerPageOptions]="[10, 25, 50, data?.length]"
+  [rowsPerPageOptions]="(displayedPageSizes$ | async) ?? []"
   id="dataListGrid_{{name}}"
   paginatorDropdownAppendTo="body"
 >
-  <ng-template let-item pTemplate="paginatordropdownitem">
-    {{ item.value === data?.length ? ("OCX_DATA_TABLE.ALL" | translate) : item.value }}
-  </ng-template>
   <ng-template #gridItem let-item pTemplate="gridItem">
     <ng-container
       [ngTemplateOutlet]="_gridItem ? _gridItem : defaultGridItem"

libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.spec.ts

@@ -286,10 +286,16 @@ describe('DataListGridComponent', () => {
     it('de', async () => {
       window.HTMLElement.prototype.scrollIntoView = jest.fn()
       translateService.use('de')
+      fixture = TestBed.createComponent(DataListGridComponent)
+      component = fixture.componentInstance
+      component.data = mockData
+      component.columns = mockColumns
+      component.paginator = true
+      fixture.detectChanges()
       const dataListGrid = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness)
       const paginator = await dataListGrid.getPaginator()
       const rowsPerPageOptions = await paginator.getRowsPerPageOptions()
-      const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(3)
+      const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0)
       expect(rowsPerPageOptionsText).toEqual('Alle')
     })
 
@@ -299,7 +305,7 @@ describe('DataListGridComponent', () => {
       const dataListGrid = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness)
       const paginator = await dataListGrid.getPaginator()
       const rowsPerPageOptions = await paginator.getRowsPerPageOptions()
-      const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(3)
+      const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0)
       expect(rowsPerPageOptionsText).toEqual('All')
     })
   })

libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts

@@ -68,6 +68,78 @@ const defaultArgTypes = {
   editItem: { action: 'deleteItem' },
   viewItem: { action: 'deleteItem' },
 }
+const extendedMockData = [
+  {
+    id: 'Test',
+    imagePath:
+      'https://images.unsplash.com/photo-1682686581427-7c80ab60e3f3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    property1: 'Card 1',
+    available: true,
+  },
+  {
+    id: 'Test2',
+    imagePath:
+      'https://images.unsplash.com/photo-1710092662335-065cdbfb9781?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    property1: 'Card 2',
+    available: false,
+  },
+  {
+    id: 'Test',
+    imagePath:
+      'https://images.unsplash.com/photo-1682686581427-7c80ab60e3f3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    property1: 'Card 1',
+    available: true,
+  },
+  {
+    id: 'Test2',
+    imagePath:
+      'https://images.unsplash.com/photo-1710092662335-065cdbfb9781?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    property1: 'Card 2',
+    available: false,
+  },
+  {
+    id: 'Test',
+    imagePath:
+      'https://images.unsplash.com/photo-1682686581427-7c80ab60e3f3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    property1: 'Card 1',
+    available: true,
+  },
+  {
+    id: 'Test2',
+    imagePath:
+      'https://images.unsplash.com/photo-1710092662335-065cdbfb9781?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    property1: 'Card 2',
+    available: false,
+  },
+  {
+    id: 'Test',
+    imagePath:
+      'https://images.unsplash.com/photo-1682686581427-7c80ab60e3f3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    property1: 'Card 1',
+    available: true,
+  },
+  {
+    id: 'Test2',
+    imagePath:
+      'https://images.unsplash.com/photo-1710092662335-065cdbfb9781?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    property1: 'Card 2',
+    available: false,
+  },
+  {
+    id: 'Test',
+    imagePath:
+      'https://images.unsplash.com/photo-1682686581427-7c80ab60e3f3?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    property1: 'Card 1',
+    available: true,
+  },
+  {
+    id: 'Test2',
+    imagePath:
+      'https://images.unsplash.com/photo-1710092662335-065cdbfb9781?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+    property1: 'Card 2',
+    available: false,
+  },
+]
 
 export const ListWithMockData = {
   render: Template,
@@ -187,6 +259,55 @@ export const ListWithAdditionalOverflowActions = {
   },
 }
 
+export const ListWithOnlyAdditionalOverflowActions = {
+  argTypes: defaultArgTypes,
+  render: Template,
+  args: {
+    ...defaultComponentArgs,
+    deleteItem: null,
+    editItem: null,
+    viewItem: null,
+    deletePermission: null,
+    editPermission: null,
+    viewPermission: null,
+    additionalActions: [
+      {
+        id: '1',
+        labelKey: 'Additional Action',
+        icon: 'pi pi-plus',
+        permission: 'TEST_MGMT#TEST_VIEW',
+        showAsOverflow: true,
+      },
+      {
+        id: '2',
+        labelKey: 'Conditionally Hidden',
+        icon: 'pi pi-plus',
+        permission: 'TEST_MGMT#TEST_VIEW',
+        showAsOverflow: true,
+        actionVisibleField: 'available',
+      },
+      {
+        id: '3',
+        labelKey: 'Conditionally Enabled',
+        icon: 'pi pi-plus',
+        permission: 'TEST_MGMT#TEST_VIEW',
+        showAsOverflow: true,
+        actionEnabledField: 'available',
+      },
+    ]
+  },
+}
+
+export const ListWithPageSizes = {
+  argTypes: defaultArgTypes,
+  render: Template,
+  args: {
+    ...defaultComponentArgs,
+    pageSizes: [2, 15, 25],
+    data: extendedMockData
+  },
+}
+
 export const GridWithMockData = {
   render: Template,
   argTypes: defaultArgTypes,
@@ -280,4 +401,16 @@ export const GridWithConditionallyVisibleAdditionalActions = {
     ]
   },
 }
+
+export const GridWithPageSizes = {
+  argTypes: defaultArgTypes,
+  render: Template,
+  args: {
+    ...defaultComponentArgs,
+    layout: 'grid',
+    pageSizes: [2, 15, 25],
+    data: extendedMockData,
+  },
+}
+
 export default DataListGridComponentSBConfig

libs/angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.ts

@@ -48,8 +48,27 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe
   @Input() clientSideSorting = true
   @Input() clientSideFiltering = true
   @Input() sortStates: DataSortDirection[] = []
-  @Input() pageSizes: number[] = [10, 25, 50]
-  @Input() pageSize: number = this.pageSizes[0] || 50
+
+  displayedPageSizes$: Observable<(number | { showAll: string })[]>
+  _pageSizes$ = new BehaviorSubject<(number | { showAll: string })[]>([10, 25, 50])
+  @Input()
+  get pageSizes(): (number | { showAll: string })[] {
+    return this._pageSizes$.getValue()
+  }
+  set pageSizes(value: (number | { showAll: string })[]) {
+    this._pageSizes$.next(value)
+  }
+
+  displayedPageSize$: Observable<number>
+  _pageSize$ = new BehaviorSubject<number | undefined>(undefined)
+  @Input()
+  get pageSize(): number | undefined {
+    return this._pageSize$.getValue()
+  }
+  set pageSize(value: number | undefined) {
+    this._pageSize$.next(value)
+  }
+
   @Input() emptyResultsMessage: string | undefined
   @Input() fallbackImage = 'placeholder.png'
   @Input() layout: 'grid' | 'list' = 'grid'
@@ -208,6 +227,12 @@ 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.displayedPageSize$ = combineLatest([this._pageSize$, this._pageSizes$]).pipe(
+      map(([pageSize, pageSizes]) => pageSize ?? pageSizes.find((val): val is number => typeof val === 'number') ?? 50)
+    )
   }
 
   ngDoCheck(): void {

libs/angular-accelerator/src/lib/components/data-table/data-table.component.html

@@ -1,5 +1,5 @@
 <ng-template #actionColumn let-rowObject="localRowObject">
-  <ng-container *ngIf="anyRowActionObserved || this.additionalActions.length > 0">
+  <ng-container *ngIf="anyRowActionObserved || this.additionalActions.length > 0 || this.overflowActions.length > 0">
     <td
       class="actions"
       pFrozenColumn
@@ -88,7 +88,7 @@
 </ng-template>
 
 <ng-template #actionColumnHeader>
-  <ng-container *ngIf="anyRowActionObserved || this.additionalActions.length > 0">
+  <ng-container *ngIf="anyRowActionObserved || this.additionalActions.length > 0  || this.overflowActions.length > 0">
     <th
       pFrozenColumn
       [frozen]="frozenActionColumn"
@@ -102,18 +102,19 @@
 </ng-template>
 
 <p-table
-  [value]="(displayedRows$ | async) || []"
+  *ngIf="displayedPageSize$ | async as displayedPageSize"
+  [value]="(displayedRows$ | async) ?? []"
   responsiveLayout="scroll"
   [paginator]="paginator"
-  [first]="page * pageSize"
+  [first]="page * displayedPageSize"
   (onPage)="onPageChange($event)"
-  [rows]="pageSize"
+  [rows]="displayedPageSize"
   [showCurrentPageReport]="true"
   currentPageReportTemplate="{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}"
-  [rowsPerPageOptions]="[10, 25, 50, { showAll: ('OCX_DATA_TABLE.ALL' | translate)}]"
+  [rowsPerPageOptions]="(displayedPageSizes$ | async) ?? []"
   id="dataTable_{{name}}"
   (selectionChange)="onSelectionChange($event)"
-  [selection]="(selectedRows$ | async) || []"
+  [selection]="(selectedRows$ | async) ?? []"
   [scrollable]="true"
   paginatorDropdownAppendTo="body"
 >

libs/angular-accelerator/src/lib/components/data-table/data-table.component.spec.ts

@@ -276,6 +276,12 @@ describe('DataTableComponent', () => {
     it('de', async () => {
       window.HTMLElement.prototype.scrollIntoView = jest.fn()
       translateService.use('de')
+      fixture = TestBed.createComponent(DataTableComponent)
+      component = fixture.componentInstance
+      component.rows = mockData
+      component.columns = mockColumns
+      component.paginator = true
+      fixture.detectChanges()
       const dataTable = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness)
       const paginator = await dataTable.getPaginator()
       const rowsPerPageOptions = await paginator.getRowsPerPageOptions()

libs/angular-accelerator/src/lib/components/data-table/data-table.component.stories.ts

@@ -399,4 +399,44 @@ export const WithAdditionalOverflowActions = {
   },
 }
 
+export const WithOnlyOverflowActions = {
+  render: Template,
+  args: {
+    ...defaultComponentArgs,
+    additionalActions: [
+      {
+        id: '1',
+        labelKey: 'Additional Action',
+        icon: 'pi pi-plus',
+        permission: 'TEST_MGMT#TEST_VIEW',
+        showAsOverflow: true,
+      },
+      {
+        id: '2',
+        labelKey: 'Conditionally Hidden',
+        icon: 'pi pi-plus',
+        permission: 'TEST_MGMT#TEST_VIEW',
+        showAsOverflow: true,
+        actionVisibleField: 'available',
+      },
+      {
+        id: '3',
+        labelKey: 'Conditionally Enabled',
+        icon: 'pi pi-plus',
+        permission: 'TEST_MGMT#TEST_VIEW',
+        showAsOverflow: true,
+        actionEnabledField: 'available',
+      },
+    ]
+  },
+}
+
+export const WithPageSizes = {
+  render: Template,
+  args: {
+    ...defaultComponentArgs,
+    pageSizes: [2, 15, 25]
+  },
+}
+
 export default DataTableComponentSBConfig

libs/angular-accelerator/src/lib/components/data-table/data-table.component.ts

@@ -81,8 +81,26 @@ export class DataTableComponent extends DataSortBase implements OnInit {
   @Input() clientSideFiltering = true
   @Input() clientSideSorting = true
   @Input() sortStates: DataSortDirection[] = [DataSortDirection.ASCENDING, DataSortDirection.DESCENDING]
-  @Input() pageSizes: number[] = [10, 25, 50]
-  @Input() pageSize: number = this.pageSizes[0] || 50
+
+  displayedPageSizes$: Observable<(number | { showAll: string })[]>
+  _pageSizes$ = new BehaviorSubject<(number | { showAll: string })[]>([10, 25, 50])
+  @Input()
+  get pageSizes(): (number | { showAll: string })[] {
+    return this._pageSizes$.getValue()
+  }
+  set pageSizes(value: (number | { showAll: string })[]) {
+    this._pageSizes$.next(value)
+  }
+  displayedPageSize$: Observable<number>
+  _pageSize$ = new BehaviorSubject<number | undefined>(undefined)
+  @Input()
+  get pageSize(): number | undefined {
+    return this._pageSize$.getValue()
+  }
+  set pageSize(value: number | undefined) {
+    this._pageSize$.next(value)
+  }
+
   @Input() emptyResultsMessage: string | undefined
   @Input() name = ''
   @Input() deletePermission: string | undefined
@@ -215,6 +233,12 @@ export class DataTableComponent extends DataSortBase implements OnInit {
   ) {
     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.displayedPageSize$ = combineLatest([this._pageSize$, this._pageSizes$]).pipe(
+      map(([pageSize, pageSizes]) => pageSize ?? pageSizes.find((val): val is number => typeof val === 'number') ?? 50)
+    )
   }
 
   ngOnInit(): void {

libs/angular-accelerator/src/lib/components/data-view/data-view.component.ts

@@ -84,7 +84,7 @@ export class DataViewComponent implements DoCheck, OnInit {
 
   @Input() sortStates: DataSortDirection[] = [DataSortDirection.ASCENDING, DataSortDirection.DESCENDING]
   @Input() pageSizes: number[] = [10, 25, 50]
-  @Input() pageSize: number = this.pageSizes?.[0] || 50
+  @Input() pageSize: number | undefined
 
   @Input() stringTableCellTemplate: TemplateRef<any> | undefined
   @ContentChild('stringTableCell') stringTableCellChildTemplate: TemplateRef<any> | undefined