From cd33bb6c92e9ffcd29d85b3844049f6331b14c1a Mon Sep 17 00:00:00 2001 From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com> Date: Fri, 8 Dec 2023 22:54:25 +0100 Subject: [PATCH] [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 --- .../datatable/datatable.component.html | 1 + .../datatable/datatable.component.scss | 2 +- .../datatable/datatable.component.spec.ts | 35 ++++++++++++++++++- .../datatable/datatable.component.ts | 6 +++- .../lib/config/document-list.extensions.ts | 1 + 5 files changed, 42 insertions(+), 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 index 0adf2b8551e..a97c6427796 100644 --- 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 @@ { 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 index ca48e53fb1a..b76d6ec6858 100644 --- 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 index 635da5b1ce7..2a8590b9df2 100644 --- 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; }