From 1d1e2e5b2fa7f3bcf849d02edc93ad04b9648f73 Mon Sep 17 00:00:00 2001 From: Diogo Bastos Date: Fri, 29 Nov 2024 16:47:49 +0000 Subject: [PATCH] AAE-28454 Improve datatable actions display --- .../datatable/datatable.component.html | 179 +++++++++--------- .../datatable/datatable.component.spec.ts | 91 +++++++++ .../datatable/datatable.component.ts | 4 + .../process-list-cloud.component.html | 1 + .../process-list-cloud.component.ts | 4 + 5 files changed, 192 insertions(+), 87 deletions(-) diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html index 497df1b2ca..d45e923c15 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html @@ -31,95 +31,99 @@ {{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }} +
+ class="adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-header adf-datatable-cell-data" + *ngIf="col.title || !showProvidedActions" + [attr.data-automation-id]="'auto_id_' + col.key" + [ngClass]="{ + 'adf-sortable': col.sortable, + 'adf-datatable__cursor--pointer': !isResizing, + 'adf-datatable__header--sorted-asc': isColumnSorted(col, 'asc'), + 'adf-datatable__header--sorted-desc': isColumnSorted(col, 'desc')}" + [ngStyle]="(col.width) && !lastColumn && {'flex': getFlexValue(col)}" + [attr.aria-label]="col.title | translate" + (click)="onColumnHeaderClick(col, $event)" + (keyup.enter)="onColumnHeaderClick(col, $event)" + role="columnheader" + [attr.tabindex]="isHeaderVisible() ? 0 : null" + [attr.aria-sort]="col.sortable ? (getAriaSort(col) | translate) : null" + cdkDrag + cdkDragLockAxis="x" + (cdkDragStarted)="isDraggingHeaderColumn = true" + (cdkDragDropped)="onDropHeaderColumn($event)" + [cdkDragDisabled]="!col.draggable" + (mouseenter)="hoveredHeaderColumnIndex = columnIndex" + (mouseleave)="hoveredHeaderColumnIndex = -1" + adf-drop-zone dropTarget="header" [dropColumn]="col"> -
+ + {{col.title | translate}} + + + {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }} + + + + + +
+ +
+ + + + + + + - - {{col.title | translate}} - - - {{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }} - - - - - -
- -
- - - - - - - - - -
-
-
-
-
+ +
+
+
+
+
+ +
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts index 1f60f6c6dc..7d9c152cb5 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts @@ -2188,4 +2188,95 @@ describe('Column Resizing', () => { dataTable.onDragDrop(data as CdkDragDrop); expect(dataTable.dragDropped.emit).toHaveBeenCalledWith(data); }); + + describe('show correct column count', () => { + it('should display 2 columns for no provided actions and no default actions', () => { + dataTable.data = new ObjectDataTableAdapter( + [{ name: '1' }], + [new ObjectDataColumn({ key: 'name', title: 'Name', sortable: true }), new ObjectDataColumn({ key: 'other', title: 'Other', sortable: true })] + ); + + fixture.detectChanges(); + + const visibleColumns = dataTable.getVisibleColumns(); + + const datatableCellHeaders = fixture.debugElement.queryAll(By.css('.adf-datatable-cell-header')); + const datatableCells = fixture.debugElement.queryAll(By.css('.adf-datatable-cell')); + + expect(visibleColumns.length).toBe(2); + + const expectedNumberOfColumns = 2; + + expect(datatableCellHeaders.length).toBe(expectedNumberOfColumns); + expect(datatableCells.length).toBe(expectedNumberOfColumns); + }); + + it('should display 2 columns if last column has no title and there are no provided actions and no default actions', () => { + dataTable.data = new ObjectDataTableAdapter( + [{ name: '1' }], + [new ObjectDataColumn({ key: 'name', title: 'Name', sortable: true }), new ObjectDataColumn({ key: 'other', sortable: true })] + ); + + fixture.detectChanges(); + + const visibleColumns = dataTable.getVisibleColumns(); + + const datatableCellHeaders = fixture.debugElement.queryAll(By.css('.adf-datatable-cell-header')); + const datatableCells = fixture.debugElement.queryAll(By.css('.adf-datatable-cell')); + + expect(visibleColumns.length).toBe(2); + + const expectedNumberOfColumns = 2; + + expect(datatableCellHeaders.length).toBe(expectedNumberOfColumns); + expect(datatableCells.length).toBe(expectedNumberOfColumns); + }); + + it('should display 3 columns if there are default actions', () => { + dataTable.data = new ObjectDataTableAdapter( + [{ name: '1' }], + [new ObjectDataColumn({ key: 'name', title: 'Name', sortable: true }), new ObjectDataColumn({ key: 'other', title: 'Other', sortable: true })] + ); + + dataTable.actions = true; + + fixture.detectChanges(); + + const visibleColumns = dataTable.getVisibleColumns(); + + const datatableCellHeaders = fixture.debugElement.queryAll(By.css('.adf-datatable-cell-header')); + const datatableCells = fixture.debugElement.queryAll(By.css('.adf-datatable-cell')); + + expect(visibleColumns.length).toBe(2); + + const expectedNumberOfColumns = 3; + + expect(datatableCellHeaders.length).toBe(expectedNumberOfColumns); + expect(datatableCells.length).toBe(expectedNumberOfColumns); + }); + + it('should display 2 columns if there are default actions and provided actions', () => { + dataTable.data = new ObjectDataTableAdapter( + [{ name: '1' }], + [new ObjectDataColumn({ key: 'name', title: 'Name', sortable: true }), new ObjectDataColumn({ key: 'other', sortable: true })] + ); + + dataTable.actions = true; + dataTable.showProvidedActions = true; + + fixture.detectChanges(); + + const visibleColumns = dataTable.getVisibleColumns(); + + const datatableCellHeaders = fixture.debugElement.queryAll(By.css('.adf-datatable-cell-header')); + const datatableCells = fixture.debugElement.queryAll(By.css('.adf-datatable-cell')); + + expect(visibleColumns.length).toBe(2); + + const expectedNumberOfColumns = 2; + + expect(datatableCellHeaders.length).toBe(expectedNumberOfColumns); + expect(datatableCells.length).toBe(expectedNumberOfColumns); + }); + }); }); diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts index fd99a890ad..6013b79360 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts +++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts @@ -178,6 +178,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges, @Input() showMainDatatableActions: boolean = false; + /** Toggles the provided actions. */ + @Input() + showProvidedActions: boolean = false; + /** Position of the actions dropdown menu. Can be "left" or "right". */ @Input() actionsPosition: string = 'right'; // left|right diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html index 4cc2ddb93b..e916022465 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html @@ -11,6 +11,7 @@ [actionsPosition]="actionsPosition" [contextMenu]="showContextMenu" [showMainDatatableActions]="showMainDatatableActions" + [showProvidedActions]="showProvidedActions" [isResizingEnabled]="isResizingEnabled" (showRowActionsMenu)="onShowRowActionsMenu($event)" (showRowContextMenu)="onShowRowContextMenu($event)" diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts index 672f3d2050..5daff8a71b 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts @@ -188,6 +188,10 @@ export class ProcessListCloudComponent @Input() showActions: boolean = false; + /** Toggles the provided actions. */ + @Input() + showProvidedActions: boolean = false; + /** Position of the actions dropdown menu. Can be "left" or "right". */ @Input() actionsPosition: string = 'right'; // left|right