inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-28454 Improve datatable actions display (#10445)

Browse Source 
* AAE-28454 Improve datatable actions display

* AAE-28454 Improve datatable style
This commit is contained in:
Diogo Bastos 2024-12-04 11:43:44 +00:00 committed by GitHub
parent c92d34f2f8
commit 70a38aecda
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 199 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
lib/core/src/lib/datatable/components/datatable/datatable.component.html
View File

@ -31,12 +31,15 @@
<mat-checkbox [indeterminate]="isSelectAllIndeterminate" [checked]="isSelectAllChecked" (change)="onSelectAllClick($event)" class="adf-checkbox-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.SELECT_ALL' | translate }}</mat-checkbox>
</div>
<div
class="adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}} adf-datatable-cell-header adf-datatable-cell-data"
<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"
*ngIf="col.title || !showProvidedActions"
[attr.data-automation-id]="'auto_id_' + col.key"
[ngClass]="{
'adf-sortable': col.sortable,
@ -120,12 +123,14 @@
</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
@ -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">

6
lib/core/src/lib/datatable/components/datatable/datatable.component.scss
View File

@ -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 {

91
lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
View File

@ -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
lib/core/src/lib/datatable/components/datatable/datatable.component.ts
View File

@ -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

1
lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html
View File

@ -11,6 +11,7 @@
[actionsPosition]="actionsPosition"
[contextMenu]="showContextMenu"
[showMainDatatableActions]="showMainDatatableActions"
[showProvidedActions]="showProvidedActions"
[isResizingEnabled]="isResizingEnabled"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(showRowContextMenu)="onShowRowContextMenu($event)"

4
lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts
View File

@ -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