inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[MNT-23166] Add resize flag to document list with option to disable blur (#9090)

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

* [MNT-23166] Missing docs and CR fixes

* [MNT-23166] Lint fixes

* [MNT-23166] Lint fixes

* [MNT-23166] Lint fixes
This commit is contained in:
MichalKinas
2023-11-15 14:51:38 +01:00
committed by GitHub
parent e5ca7d2069
commit 81787d5202
7 changed files with 54 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/content-services/src/lib/document-list/components/document-list.component.html
View File

@@ -16,6 +16,8 @@
[rowMenuCacheEnabled]="false"
[stickyHeader]="stickyHeader"
[allowFiltering]="allowFiltering"
[isResizingEnabled]="isResizingEnabled"
[blurOnResize]="blurOnResize"
(showRowContextMenu)="onShowRowContextMenu($event)"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"

8
lib/content-services/src/lib/document-list/components/document-list.component.ts
View File

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

2
lib/core/src/lib/datatable/components/datatable/datatable.component.html
View File

@@ -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"

50
lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
View File

@@ -1646,11 +1646,16 @@ describe('Column Resizing', () => {
let data: { id: number; name: string }[] = [];
let dataTableSchema: DataColumn[] = [];
const getTableBody = (): HTMLDivElement => fixture.debugElement.nativeElement.querySelector('.adf-datatable-body');
const getResizeHandler = (): HTMLDivElement => fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
const testClassesAfterResizing = (headerColumnsSelector = '.adf-datatable-cell-header', excludedClass = 'adf-datatable__cursor--pointer') => {
dataTable.isResizingEnabled = true;
fixture.detectChanges();
const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
const resizeHandle: HTMLElement = getResizeHandler();
resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
fixture.detectChanges();
@@ -1685,7 +1690,7 @@ describe('Column Resizing', () => {
});
it('should NOT display resize handle when the feature is Disabled [isResizingEnabled=false]', () => {
const resizeHandle = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
const resizeHandle = getResizeHandler();
expect(resizeHandle).toBeNull();
const headerColumns = fixture.debugElement.nativeElement.querySelectorAll('.adf-datatable-cell-header');
@@ -1699,7 +1704,7 @@ describe('Column Resizing', () => {
dataTable.isResizingEnabled = true;
fixture.detectChanges();
const resizeHandle = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
const resizeHandle = getResizeHandler();
expect(resizeHandle).not.toBeNull();
const headerColumns = fixture.debugElement.nativeElement.querySelectorAll('.adf-datatable-cell-header');
@@ -1738,18 +1743,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 = getResizeHandler();
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 = getTableBody();
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 = getTableBody();
expect(dataTable.isResizing).toBeTrue();
expect(tableBody.classList).not.toContain('adf-blur-datatable-body');
});
});
it('should set column width on resizing', fakeAsync(() => {
@@ -1819,7 +1835,7 @@ describe('Column Resizing', () => {
tick();
fixture.detectChanges();
const tableBody = fixture.debugElement.nativeElement.querySelector('.adf-datatable-body');
const tableBody = getTableBody();
const firstCell: HTMLElement = tableBody.querySelector('[data-automation-id="name1"]');
const secondCell: HTMLElement = tableBody.querySelector('[data-automation-id="name2"]');
@@ -1832,7 +1848,7 @@ describe('Column Resizing', () => {
tick();
fixture.detectChanges();
const tableBody = fixture.debugElement.nativeElement.querySelector('.adf-datatable-body');
const tableBody = getTableBody();
const firstCell: HTMLElement = tableBody.querySelector('[data-automation-id="name1"]');
const secondCell: HTMLElement = tableBody.querySelector('[data-automation-id="name2"]');
@@ -1844,11 +1860,11 @@ describe('Column Resizing', () => {
dataTable.isResizingEnabled = true;
fixture.detectChanges();
const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
const resizeHandle: HTMLElement = getResizeHandler();
resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
fixture.detectChanges();
const tableBody = fixture.debugElement.nativeElement.querySelector('.adf-datatable-body');
const tableBody = getTableBody();
expect(dataTable.isResizing).toBeTrue();
expect(tableBody.classList).toContain('adf-blur-datatable-body');
@@ -1869,7 +1885,7 @@ describe('Column Resizing', () => {
dataTable.isResizingEnabled = true;
fixture.detectChanges();
const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
const resizeHandle: HTMLElement = getResizeHandler();
resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
fixture.detectChanges();

8
lib/core/src/lib/datatable/components/datatable/datatable.component.ts
View File

@@ -236,7 +236,13 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
* Flag that indicates if the datatable allows column resizing.
*/
@Input()
isResizingEnabled: boolean = false;
isResizingEnabled = false;
/**
* Flag that indicates if the datatable should be blurred when resizing.
*/
@Input()
blurOnResize = true;
headerFilterTemplate: TemplateRef<any>;
noContentTemplate: TemplateRef<any>;