fix: paginator All option displayed only for one element (#263)

onecx · May 29, 2024 · 4e71709 · 4e71709
1 parent 45b183e
commit 4e71709
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 6 deletions.
diff --git a/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html b/libs/angular-accelerator/src/lib/components/data-table/data-table.component.html
@@ -89,15 +89,12 @@
   [rows]="pageSize"
   [showCurrentPageReport]="true"
   currentPageReportTemplate="{{ (totalRecordsOnServer ? currentPageShowingWithTotalOnServerKey : currentPageShowingKey) | translate:params }}"
-  [rowsPerPageOptions]="[10, 25, 50, rows?.length]"
+  [rowsPerPageOptions]="[10, 25, 50, { showAll: ('OCX_DATA_TABLE.ALL' | translate)}]"
   id="dataTable_{{name}}"
   (selectionChange)="onSelectionChange($event)"
   [selection]="(selectedRows$ | async) || []"
   [scrollable]="true"
 >
-  <ng-template let-item pTemplate="paginatordropdownitem">
-    {{ item.value === rows?.length ? ("OCX_DATA_TABLE.ALL" | translate) : item.value }}
-  </ng-template>
   <ng-template pTemplate="header">
     <tr>
       <th style="width: 4rem" scope="col" *ngIf="selectionChangedObserved">

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
@@ -279,7 +279,7 @@ describe('DataTableComponent', () => {
       const dataTable = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness)
       const paginator = await dataTable.getPaginator()
       const rowsPerPageOptions = await paginator.getRowsPerPageOptions()
-      const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(3)
+      const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0)
       expect(rowsPerPageOptionsText).toEqual('Alle')
     })
 
@@ -289,11 +289,33 @@ describe('DataTableComponent', () => {
       const dataTable = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness)
       const paginator = await dataTable.getPaginator()
       const rowsPerPageOptions = await paginator.getRowsPerPageOptions()
-      const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(3)
+      const rowsPerPageOptionsText = await rowsPerPageOptions.selectedDropdownItemText(0)
       expect(rowsPerPageOptionsText).toEqual('All')
     })
   })
 
+  it('should display 10 rows by default for 1000 rows', async () => {
+    component.rows = Array.from(Array(1000).keys()).map((number) => {
+      return {
+        id: number,
+        name: number,
+      }
+    })
+    component.columns = [
+      {
+        columnType: ColumnType.NUMBER,
+        id: 'name',
+        nameKey: 'COLUMN_HEADER_NAME.NAME',
+      },
+    ]
+    component.paginator = true
+    fixture.detectChanges()
+
+    const dataTable = await TestbedHarnessEnvironment.harnessForFixture(fixture, DataTableHarness)
+    const rows = await dataTable.getRows()
+    expect(rows.length).toBe(10)
+  })
+
   describe('Table row selection', () => {
     it('should initially show a table without selection checkboxes', async () => {
       expect(dataTable).toBeTruthy()