[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

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"

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;
         }
 

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) => {

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();
 

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;
 }