feat: show all option controlled in all data views (#613)

* feat: show all option is optional in all data view * fix: lint fixes
onecx · Nov 19, 2024 · ff00417 · ff00417
1 parent 5122c72
commit ff00417
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 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
@@ -23,7 +23,7 @@ describe('DataListGridComponent', () => {
     return this
   })
   global.MutationObserver = mutationObserverMock
-  
+
   let fixture: ComponentFixture<DataListGridComponent>
   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/...angular-accelerator/src/lib/components/data-list-grid/data-list-grid.component.stories.ts b/...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
@@ -79,6 +79,11 @@ export class DataListGridComponent extends DataSortBase implements OnInit, DoChe
   set pageSize(value: number | undefined) {
     this._pageSize$.next(value)
   }
+  _showAllOption$ = new BehaviorSubject<boolean>(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
@@ -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
@@ -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
@@ -166,6 +166,11 @@ export class DataTableComponent extends DataSortBase implements OnInit, AfterCon
   set pageSize(value: number | undefined) {
     this._pageSize$.next(value)
   }
+  _showAllOption$ = new BehaviorSubject<boolean>(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
@@ -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
@@ -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<any> | undefined
   @ContentChild('stringTableCell') stringTableCellChildTemplate: TemplateRef<any> | undefined
@@ -383,24 +388,25 @@ export class DataViewComponent implements DoCheck, OnInit, AfterContentInit {
   ngOnInit(): void {
     this.firstColumnId = this.columns[0]?.id
 
-    let dataTableComponentState$: Observable<DataTableComponentState | Record<string, never>> = this.dataTableComponentState$
-    let dataListGridComponentState$: Observable<DataListGridComponentState | Record<string, never>> = this.dataListGridComponentState$
+    let dataTableComponentState$: Observable<DataTableComponentState | Record<string, never>> =
+      this.dataTableComponentState$
+    let dataListGridComponentState$: Observable<DataListGridComponentState | Record<string, never>> =
+      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/...accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.html b/...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/...rator/src/lib/components/interactive-data-view/interactive-data-view.component.stories.ts b/...rator/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/...r-accelerator/src/lib/components/interactive-data-view/interactive-data-view.component.ts b/...r-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 = ''
-Original file line number
+Diff line change
@@ Expand Up / @@ -432,6 +432,7 @@ export const WithPageSizes = { @@
       args: {
         ...defaultComponentArgs,
         pageSizes: [2, 15, 25],
+        showAllOption: false,
       },
     }
@@ Expand Down @@