AAE-28454 Improve datatable actions display (#10445)

* AAE-28454 Improve datatable actions display * AAE-28454 Improve datatable style
Alfresco · Dec 4, 2024 · 70a38ae · 70a38ae
1 parent c92d34f
commit 70a38ae
Show file tree

Hide file tree

Showing 6 changed files with 194 additions and 82 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
@@ -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
@@ -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">

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
@@ -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 {

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
@@ -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);
+        });
+    });
 });
diff --git 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/...-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html b/...-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/...ss-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts b/...ss-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts
@@ -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