[ACS-8634] "Manage Searches" - a full page list of saved searches (#10307)

* [ACS-8634] "Manage Searches" - a full page list of saved searches * Changes after CR * [ACS-8634] Removed extra selector, drag&drop on hover * [ACS-8634] Fix discovered bugs * [ACS-8634] Unit test fixes * [ACS-8634] Cleanup failing test case * [ACS-8634] Unit test fixes * [ACS-8634] Remove unused import * [ACS-8634] Final cleanup * [ACS-8634] Remove unused imports --------- Co-authored-by: MichalKinas <michal.kinas@hyland.com>
2025-07-24 17:32:15 +00:00 · 2024-10-25 16:14:11 +02:00
parent ba52074bb5
commit a7911338c3
11 changed files with 308 additions and 55 deletions
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@@ -15,6 +15,12 @@
            class="adf-datatable-row"
            role="row">

+
+            <!-- Drag -->
+            <div *ngIf="enableDragRows" class="adf-datatable-cell-header adf-drag-column">
+                <span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate }}</span>
+            </div>
+
            <!-- Actions (left) -->
            <div *ngIf="actions && actionsPosition === 'left'" class="adf-actions-column adf-datatable-cell-header">
                <span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.ACTIONS' | translate }}</span>
@@ -148,10 +154,17 @@

    <div
        class="adf-datatable-body"
-        [ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing) }"
+        [ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing), 'adf-datatable-body__draggable': enableDragRows && !isDraggingRow, 'adf-datatable-body__dragging': isDraggingRow }"
+        cdkDropList
+        [cdkDropListDisabled]="!enableDragRows"
        role="rowgroup">
        <ng-container *ngIf="!loading && !noPermission">
            <adf-datatable-row *ngFor="let row of data.getRows(); let idx = index"
+                cdkDrag
+                [cdkDragDisabled]="!enableDragRows"
+                (cdkDragDropped)="onDragDrop($event)"
+                (cdkDragStarted)="onDragStart()"
+                (cdkDragEnded)="onDragEnd()"
                [row]="row"
                (select)="onEnterKeyPressed(row, $event)"
                (keyup)="onRowKeyUp(row, $event)"
@@ -160,8 +173,19 @@
                [adf-upload-data]="row"
                [ngStyle]="rowStyle"
                [ngClass]="getRowStyle(row)"
+                [class.adf-datatable-row__dragging]="isDraggingRow"
                [attr.data-automation-id]="'datatable-row-' + idx"
                (contextmenu)="markRowAsContextMenuSource(row)">
+                <!-- Drag button -->
+                <div *ngIf="enableDragRows"
+                     role="gridcell"
+                     class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-hover-only">
+                    <button mat-icon-button
+                            [attr.aria-label]="'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate">
+                        <mat-icon>drag_indicator</mat-icon>
+                    </button>
+                </div>
+
                <!-- Actions (left) -->
                <div *ngIf="actions && actionsPosition === 'left'" role="gridcell" class="adf-datatable-cell">
                    <button mat-icon-button [matMenuTriggerFor]="menu" #actionsMenuTrigger="matMenuTrigger"
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
@@ -133,6 +133,14 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
        width: 100%;
        min-width: 100%;

+        &.adf-datatable-body__draggable {
+            cursor: grab;
+        }
+
+        &.adf-datatable-body__dragging {
+            cursor: grabbing;
+        }
+
        .adf-datatable-row {
            @include material-animation-default(0.28s);

@@ -148,6 +156,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
                background-color: var(--adf-theme-background-selected-button-color);
            }

+            &.adf-drag-row {
+                cursor: grab;
+            }
+
            &:last-child {
                border-bottom: 1px solid var(--adf-theme-foreground-text-color-007);
            }
@@ -284,6 +296,10 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
            box-sizing: content-box;
        }

+        &.adf-drag-column {
+            flex: 0;
+        }
+
        .adf-datatable-cell-container {
            overflow: hidden;
            min-height: inherit;
@@ -585,6 +601,13 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
 }

 #{$cdk-drag-preview} {
+    min-height: $data-table-row-height;
+    display: flex;
+    align-items: center;
+    background-color: var(--theme-background-color);
+    border-top: 2px solid var(--theme-selected-background-color);
+    opacity: 1;
+
    &.adf-datatable-cell-header {
        border-radius: 6px;
        background-color: var(--theme-background-color);
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
@@ -2126,4 +2126,24 @@ describe('Column Resizing', () => {
        expect(dataTable.isResizing).toBeFalse();
        expect(dataTable.columnsWidthChanged.emit).toHaveBeenCalled();
    });
+
+    it('should not have drag and drop directive enabled and not emit event when drag rows is disabled', () => {
+        spyOn(dataTable.dragDropped, 'emit');
+        dataTable.enableDragRows = false;
+        dataTable.showHeader = ShowHeaderMode.Never;
+        fixture.detectChanges();
+        const dragAndDrop = fixture.debugElement.query(By.directive(CdkDropList)).injector.get(CdkDropList);
+        dataTable.onDragDrop({} as CdkDragDrop<any>);
+        expect(dataTable.dragDropped.emit).not.toHaveBeenCalled();
+        expect(dragAndDrop.disabled).toBeTrue();
+    });
+
+    it('should emit event when drag rows is enabled', () => {
+        spyOn(dataTable.dragDropped, 'emit');
+        dataTable.enableDragRows = true;
+        fixture.detectChanges();
+        const data = { previousIndex: 1, currentIndex: 0 };
+        dataTable.onDragDrop(data as CdkDragDrop<any>);
+        expect(dataTable.dragDropped.emit).toHaveBeenCalledWith(data);
+    });
 });
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
@@ -292,6 +292,16 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
    @Input()
    displayCheckboxesOnHover = false;

+    /**
+     * Flag that enables dragging rows
+     */
+    @Input()
+    enableDragRows = false;
+
+    /** Emitted when dragged row is dropped. */
+    @Output()
+    dragDropped = new EventEmitter<{ previousIndex: number; currentIndex: number }>();
+
    headerFilterTemplate: TemplateRef<any>;
    noContentTemplate: TemplateRef<any>;
    noPermissionTemplate: TemplateRef<any>;
@@ -306,6 +316,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
    isDraggingHeaderColumn = false;
    hoveredHeaderColumnIndex = -1;
    resizingColumnIndex = -1;
+    isDraggingRow = false;

    private keyManager: FocusKeyManager<DataTableRowComponent>;
    private clickObserver: Observer<DataRowEvent>;
@@ -844,7 +855,8 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
        row.cssClass = row.cssClass ? row.cssClass : '';
        this.rowStyleClass = this.rowStyleClass ? this.rowStyleClass : '';
        const contextMenuSourceClass = row.isContextMenuSource ? 'adf-context-menu-source' : '';
-        return `${row.cssClass} ${this.rowStyleClass} ${contextMenuSourceClass}`;
+        const isDragEnabled = this.enableDragRows ? 'adf-drag-row' : '';
+        return `${row.cssClass} ${this.rowStyleClass} ${contextMenuSourceClass} ${isDragEnabled}`;
    }

    markRowAsContextMenuSource(selectedRow: DataRow): void {
@@ -1010,6 +1022,20 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
        return !drop.getSortedItems()[index].disabled;
    }

+    onDragDrop(droppedEvent: CdkDragDrop<any>): void {
+        if (this.enableDragRows) {
+            this.dragDropped.emit({ previousIndex: droppedEvent.previousIndex, currentIndex: droppedEvent.currentIndex });
+        }
+    }
+
+    onDragStart(): void {
+        this.isDraggingRow = true;
+    }
+
+    onDragEnd(): void {
+        this.isDraggingRow = false;
+    }
+
    private updateColumnsWidths(): void {
        const allColumns = this.data.getColumns();

--- a/lib/core/src/lib/i18n/en.json
+++ b/lib/core/src/lib/i18n/en.json
@@ -381,6 +381,7 @@
      "ICON_TEXT": "Item type {{ type }}",
      "ICON_DISABLED": "Disabled",
      "ROW_OPTION_BUTTON": "Actions",
+      "DRAG": "Drag button",
      "EMPTY_HEADER": "Empty header"
    },
    "FILE_TYPE": {
--- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.spec.ts
+++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.spec.ts
@@ -79,6 +79,8 @@ describe('SidenavLayoutComponent', () => {

        fixture = TestBed.createComponent(SidenavLayoutComponent);
        component = fixture.componentInstance;
+        component.sidenavMin = 70;
+        component.sidenavMax = 320;
    });

    afterEach(() => {
--- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.ts
+++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.ts
@@ -26,7 +26,8 @@ import {
    OnDestroy,
    TemplateRef,
    EventEmitter,
-    ViewEncapsulation
+    ViewEncapsulation,
+    ChangeDetectorRef
 } from '@angular/core';
 import { MediaMatcher } from '@angular/cdk/layout';
 import { UserPreferencesService } from '../../../common/services/user-preferences.service';
@@ -100,7 +101,11 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy

    private onDestroy$ = new Subject<boolean>();

-    constructor(private mediaMatcher: MediaMatcher, private userPreferencesService: UserPreferencesService) {
+    constructor(
+        private readonly mediaMatcher: MediaMatcher,
+        private readonly userPreferencesService: UserPreferencesService,
+        private readonly changeDetectorRef: ChangeDetectorRef
+    ) {
        this.onMediaQueryChange = this.onMediaQueryChange.bind(this);
    }

@@ -137,6 +142,7 @@ export class SidenavLayoutComponent implements OnInit, AfterViewInit, OnDestroy
        } else {
            this.isMenuMinimized = false;
        }
+        this.changeDetectorRef.detectChanges();

        this.container.toggleMenu();
        this.expanded.emit(!this.isMenuMinimized);