Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AAE-28454 Improve datatable actions display #10445

Merged
merged 2 commits into from
Dec 4, 2024
Merged

AAE-28454 Improve datatable actions display #10445

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ba0c299
AAE-28454 Improve datatable actions display
DiogoABastos Nov 29, 2024
47fc432
AAE-28454 Improve datatable style
DiogoABastos Dec 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 88 additions & 82 deletions lib/core/src/lib/datatable/components/datatable/datatable.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,101 +31,106 @@
<mat-checkbox [indeterminate]="isSelectAllIndeterminate" [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)" class="adf-checkbox-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }}</mat-checkbox>
</div>

<ng-container
*ngFor="
let col of getVisibleColumns();
let columnIndex = index
let lastColumn = last"
>
<div
class="adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-header adf-datatable-cell-data"
*ngFor="
let col of getVisibleColumns();
let columnIndex = index
let lastColumn = last"
[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">
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">

<div
adf-resizable
#resizableElement="adf-resizable"
[coverPadding]="10"
(resizing)="onResizing($event, columnIndex)"
(resizeStart)="resizingColumnIndex = columnIndex"
(resizeEnd)="onResizingEnd()"
[attr.data-automation-id]="'auto_header_content_id_' + col.key"
class="adf-datatable-cell-header-content"
[ngClass]="{ 'adf-datatable-cell-header-content--hovered':
hoveredHeaderColumnIndex === columnIndex &&
!isDraggingHeaderColumn &&
!isResizing && col.sortable}"
>
<ng-container *ngIf="!col.header">
<span *ngIf="col.title" title="{{col.title | translate}}" class="adf-datatable-cell-value">{{col.title | translate}}</span>
<div
adf-resizable
#resizableElement="adf-resizable"
[coverPadding]="10"
(resizing)="onResizing($event, columnIndex)"
(resizeStart)="resizingColumnIndex = columnIndex"
(resizeEnd)="onResizingEnd()"
[attr.data-automation-id]="'auto_header_content_id_' + col.key"
class="adf-datatable-cell-header-content"
[ngClass]="{ 'adf-datatable-cell-header-content--hovered':
hoveredHeaderColumnIndex === columnIndex &&
!isDraggingHeaderColumn &&
!isResizing && col.sortable}"
>
<ng-container *ngIf="!col.header">
<span *ngIf="col.title" title="{{col.title | translate}}" class="adf-datatable-cell-value">{{col.title | translate}}</span>

<span *ngIf="col.title && col.sortable && isDraggingHeaderColumn" class="adf-sr-only" aria-live="polite">
{{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
</span>
<span *ngIf="col.title && col.sortable && isDraggingHeaderColumn" class="adf-sr-only" aria-live="polite">
{{ getSortLiveAnnouncement(col) | translate: { string: col.title | translate } }}
</span>

<span *ngIf="!col.title && !col.sortable && !headerFilterTemplate" [attr.title]="'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate"></span>
</ng-container>
<span *ngIf="!col.title && !col.sortable && !headerFilterTemplate" [attr.title]="'ADF-DATATABLE.ACCESSIBILITY.EMPTY_HEADER' | translate"></span>
</ng-container>

<div *ngIf="col.header" class="adf-datatable-cell-value">
<ng-template [ngTemplateOutlet]="col.header" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
</div>
<div *ngIf="col.header" class="adf-datatable-cell-value">
<ng-template [ngTemplateOutlet]="col.header" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
</div>

<span
[class.adf-datatable__header--sorted-asc]="isColumnSorted(col, 'asc')"
[class.adf-datatable__header--sorted-desc]="isColumnSorted(col, 'desc')">
</span>
<span
[class.adf-datatable__header--sorted-asc]="isColumnSorted(col, 'asc')"
[class.adf-datatable__header--sorted-desc]="isColumnSorted(col, 'desc')">
</span>

<ng-template *ngIf="allowFiltering" [ngTemplateOutlet]="headerFilterTemplate" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
<ng-template *ngIf="allowFiltering" [ngTemplateOutlet]="headerFilterTemplate" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>

<span
*ngIf="col.draggable"
cdkDragHandle
[ngClass]="{ 'adf-datatable-cell-header-drag-icon': !isResizing }"
>
<adf-icon
*ngIf="hoveredHeaderColumnIndex === columnIndex && !isResizing"
value="adf:drag_indicator"
class="adf-datatable-cell-header-drag-icon-visible"
[attr.data-automation-id]="'adf-datatable-cell-header-drag-icon-'+col.key" />
</span>
</div>
<div
*ngIf="isResizingEnabled && col.resizable && !lastColumn"
[ngClass]="hoveredHeaderColumnIndex === columnIndex && !isResizing || resizingColumnIndex === columnIndex ? 'adf-datatable__resize-handle-visible' : 'adf-datatable__resize-handle-hidden'"
adf-resize-handle
tabindex="0"
role="button"
(click)="$event.stopPropagation()"
(keyup.enter)="$event.stopPropagation()"
class="adf-datatable__resize-handle"
[resizableContainer]="resizableElement">
<div class="adf-datatable__resize-handle--divider"></div>
</div>
<div class="adf-drop-header-cell-placeholder" *cdkDragPlaceholder></div>
<span
*ngIf="col.draggable"
cdkDragHandle
[ngClass]="{ 'adf-datatable-cell-header-drag-icon': !isResizing }"
>
<adf-icon
*ngIf="hoveredHeaderColumnIndex === columnIndex && !isResizing"
value="adf:drag_indicator"
class="adf-datatable-cell-header-drag-icon-visible"
[attr.data-automation-id]="'adf-datatable-cell-header-drag-icon-'+col.key" />
</span>
</div>
<div
*ngIf="isResizingEnabled && col.resizable && !lastColumn"
[ngClass]="hoveredHeaderColumnIndex === columnIndex && !isResizing || resizingColumnIndex === columnIndex ? 'adf-datatable__resize-handle-visible' : 'adf-datatable__resize-handle-hidden'"
adf-resize-handle
tabindex="0"
role="button"
(click)="$event.stopPropagation()"
(keyup.enter)="$event.stopPropagation()"
class="adf-datatable__resize-handle"
[resizableContainer]="resizableElement">
<div class="adf-datatable__resize-handle--divider"></div>
</div>
<div class="adf-drop-header-cell-placeholder" *cdkDragPlaceholder></div>
</div>
</ng-container>

<!-- Header actions (right) -->
<div
*ngIf="(actions && actionsPosition === 'right') ||
(mainActionTemplate && showMainDatatableActions)"
class="adf-actions-column adf-datatable-actions-menu adf-datatable-cell-header adf-datatable__actions-cell"
[class.adf-datatable-actions-menu-provided]="showProvidedActions"
>
<ng-container *ngIf="mainActionTemplate">
<button
Expand Down Expand Up @@ -367,8 +372,9 @@

<!-- Row actions (right) -->
<div *ngIf="
(actions && actionsPosition === 'right') ||
(mainActionTemplate && showMainDatatableActions)"
!showProvidedActions &&
((actions && actionsPosition === 'right') ||
(mainActionTemplate && showMainDatatableActions))"
role="gridcell"
tabindex="0"
class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-center-actions-column-ie adf-datatable-actions-menu">
Expand Down
6 changes: 6 additions & 0 deletions lib/core/src/lib/datatable/components/datatable/datatable.component.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,12 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
margin-left: auto;
justify-content: end;
padding-right: 15px;

&-provided {
max-width: 100px !important;
justify-content: center;
padding-right: 0;
}
}

.adf-datatable-checkbox {
Expand Down
91 changes: 91 additions & 0 deletions lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2188,4 +2188,95 @@ describe('Column Resizing', () => {
dataTable.onDragDrop(data as CdkDragDrop<any>);
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);
});
});
});
4 changes: 4 additions & 0 deletions lib/core/src/lib/datatable/components/datatable/datatable.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions ...-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
[actionsPosition]="actionsPosition"
[contextMenu]="showContextMenu"
[showMainDatatableActions]="showMainDatatableActions"
[showProvidedActions]="showProvidedActions"
[isResizingEnabled]="isResizingEnabled"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(showRowContextMenu)="onShowRowContextMenu($event)"
Expand Down
4 changes: 4 additions & 0 deletions ...ss-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,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
Expand Down
Loading