[MNT-23166] Add resize flag to document list with option to disable blur

Alfresco · Nov 15, 2023 · 7bba2d9 · 7bba2d9
1 parent e5ca7d2
commit 7bba2d9
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 10 deletions.
diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.html b/lib/content-services/src/lib/document-list/components/document-list.component.html
@@ -16,6 +16,8 @@
     [rowMenuCacheEnabled]="false"
     [stickyHeader]="stickyHeader"
     [allowFiltering]="allowFiltering"
+    [isResizingEnabled]="isResizingEnabled"
+    [blurOnResize]="blurOnResize"
     (showRowContextMenu)="onShowRowContextMenu($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)"

diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.ts b/lib/content-services/src/lib/document-list/components/document-list.component.ts
@@ -323,6 +323,14 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
     @Input()
     maxColumnsVisible?: number;
 
+    /** Enables column resizing for datatable */
+    @Input()
+    isResizingEnabled = false;
+
+    /** Enables blur when resizing datatable columns */
+    @Input()
+    blurOnResize = true;
+
     /** Emitted when the user clicks a list node */
     @Output()
     nodeClick = new EventEmitter<NodeEntityEvent>();

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@@ -160,7 +160,7 @@
 
     <div
         class="adf-datatable-body"
-        [ngClass]="{ 'adf-blur-datatable-body': isDraggingHeaderColumn || isResizing }"
+        [ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing) }"
         role="rowgroup">
         <ng-container *ngIf="!loading && !noPermission">
             <adf-datatable-row *ngFor="let row of data.getRows(); let idx = index"

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
@@ -1738,18 +1738,29 @@ describe('Column Resizing', () => {
         expect(dragIcon).toBeNull();
     });
 
-    it('should blur the table body upon resizing starts', () => {
-        dataTable.isResizingEnabled = true;
-        fixture.detectChanges();
+    describe('Datatable blur', () => {
+        beforeEach(() => {
+            dataTable.isResizingEnabled = true;
+            fixture.detectChanges();
 
-        const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
-        resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
-        fixture.detectChanges();
+            const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
+            resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
+            fixture.detectChanges();
+        });
 
-        const tableBody = fixture.debugElement.nativeElement.querySelector('.adf-datatable-body');
+        it('should blur the table body upon resizing starts', () => {
+            const tableBody = fixture.debugElement.nativeElement.querySelector('.adf-datatable-body');
+            expect(dataTable.isResizing).toBeTrue();
+            expect(tableBody.classList).toContain('adf-blur-datatable-body');
+        });
 
-        expect(dataTable.isResizing).toBeTrue();
-        expect(tableBody.classList).toContain('adf-blur-datatable-body');
+        it('should not blur the table body upon resizing starts when blurOnResize is false', () => {
+            dataTable.blurOnResize = false;
+            fixture.detectChanges();
+            const tableBody = fixture.debugElement.nativeElement.querySelector('.adf-datatable-body');
+            expect(dataTable.isResizing).toBeTrue();
+            expect(tableBody.classList).not.toContain('adf-blur-datatable-body');
+        });
     });
 
     it('should set column width on resizing', fakeAsync(() => {

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
@@ -238,6 +238,12 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
     @Input()
     isResizingEnabled: boolean = false;
 
+    /**
+     * Flag that indicates if the datatable should be blurred when resizing.
+     */
+     @Input()
+     blurOnResize: boolean = true;
+
     headerFilterTemplate: TemplateRef<any>;
     noContentTemplate: TemplateRef<any>;
     noPermissionTemplate: TemplateRef<any>;