Skip to content

Commit

Permalink
[ACS-6323] dynamic content list changing columns order with drag drop (
Browse files Browse the repository at this point in the history
…#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
  • Loading branch information
AleksanderSklorz authored Dec 8, 2023
1 parent 064c1fd commit cd33bb6
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
<adf-datatable-row
cdkDropList
cdkDropListOrientation="horizontal"
[cdkDropListSortPredicate]="filterDisabledColumns"
data-automation-id="datatable-row-header"
[disabled]="!isHeaderVisible()"
class="adf-datatable-row"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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();

Expand Down
1 change: 1 addition & 0 deletions lib/extensions/src/lib/config/document-list.extensions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,5 @@ export interface DocumentListPresetRef extends ExtensionElement {
[key: string]: string;
visible?: string;
};
draggable?: boolean;
}

0 comments on commit cd33bb6

Please sign in to comment.