[ACS-6323] dynamic content list changing columns order with drag drop (…

…#9146) * ACS-6323 Added draggable field to DocumentListPresetRef * ACS-6323 Allow to dragging column over columns in index range * ACS-6323 Allow to dragging column over only enabled columns * ACS-6323 Fixed styles for drag and drop icon for first column * ACS-6323 Unit tests and function renaming * ACS-6323 Corrected unit test
Alfresco · Dec 8, 2023 · cd33bb6 · cd33bb6
1 parent 064c1fd
commit cd33bb6
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 3 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
@@ -10,6 +10,7 @@
         <adf-datatable-row
             cdkDropList
             cdkDropListOrientation="horizontal"
+            [cdkDropListSortPredicate]="filterDisabledColumns"
             data-automation-id="datatable-row-header"
             [disabled]="!isHeaderVisible()"
             class="adf-datatable-row"

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
@@ -386,7 +386,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
         min-height: inherit;
 
         &:first-child {
-            padding-left: 15px;
+            margin-left: 15px;
             box-sizing: content-box;
         }
 

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
@@ -30,7 +30,7 @@ import { DataColumnComponent } from '../../data-column/data-column.component';
 import { TranslateModule } from '@ngx-translate/core';
 import { domSanitizerMock } from '../../../mock/dom-sanitizer-mock';
 import { matIconRegistryMock } from '../../../mock/mat-icon-registry-mock';
-import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
 import { take } from 'rxjs/operators';
 import { By } from '@angular/platform-browser';
 import { mockCarsData, mockCarsSchemaDefinition } from '../mocks/datatable.mock';
@@ -213,6 +213,13 @@ describe('DataTable', () => {
     describe('Header modes', () => {
         const newData = new ObjectDataTableAdapter([{ name: '1' }, { name: '2' }], [new ObjectDataColumn({ key: 'name' })]);
         const emptyData = new ObjectDataTableAdapter();
+        const getDropList = (): CdkDropList => {
+            dataTable.showHeader = ShowHeaderMode.Data;
+            dataTable.loading = false;
+            dataTable.data = newData;
+            fixture.detectChanges();
+            return fixture.debugElement.query(By.directive(CdkDropList)).injector.get(CdkDropList);
+        };
 
         it('should show the header if showHeader is `Data` and there is data', () => {
             dataTable.showHeader = ShowHeaderMode.Data;
@@ -285,6 +292,32 @@ describe('DataTable', () => {
             dataTable.loading = true;
             testNotShownHeader(emptyData);
         });
+
+        it('should have assigned filterDisabledColumns to sortPredicate of CdkDropList', () => {
+            expect(getDropList().sortPredicate).toBe(dataTable.filterDisabledColumns);
+        });
+
+        it('should sortPredicate from CdkDropList return true if column is enabled', () => {
+            const dropList = getDropList();
+            spyOn(dropList, 'getSortedItems').and.returnValue([{
+                disabled: true
+            }, {
+                disabled: false
+            }] as CdkDrag[]);
+
+            expect(dropList.sortPredicate(1, undefined, dropList)).toBeTrue();
+        });
+
+        it('should sortPredicate from CdkDropList return false if column is disabled', () => {
+            const dropList = getDropList();
+            spyOn(dropList, 'getSortedItems').and.returnValue([{
+                disabled: true
+            }, {
+                disabled: true
+            }] as CdkDrag[]);
+
+            expect(dropList.sortPredicate(1, undefined, dropList)).toBeFalse();
+        });
     });
 
     it('should emit "sorting-changed" DOM event', (done) => {

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
@@ -57,7 +57,7 @@ import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
 import { DataCellEvent } from '../data-cell.event';
 import { DataRowActionEvent } from '../data-row-action.event';
 import { buffer, debounceTime, filter, map, share } from 'rxjs/operators';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
 import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ResizeEvent } from '../../directives/resizable/types';
@@ -975,6 +975,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
         return `0 1 ${width < DataTableComponent.MINIMUM_COLUMN_SIZE ? DataTableComponent.MINIMUM_COLUMN_SIZE : width}px`;
     }
 
+    filterDisabledColumns(index: number, _drag: CdkDrag, drop: CdkDropList): boolean {
+        return !drop.getSortedItems()[index].disabled;
+    }
+
     private updateColumnsWidths(): void {
         const allColumns = this.data.getColumns();
 

diff --git a/lib/extensions/src/lib/config/document-list.extensions.ts b/lib/extensions/src/lib/config/document-list.extensions.ts
@@ -49,4 +49,5 @@ export interface DocumentListPresetRef extends ExtensionElement {
         [key: string]: string;
         visible?: string;
     };
+    draggable?: boolean;
 }