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

[AAE-15610] - Fixed column resizing issue (#8742)

Browse Source 
* [AAE-15610] - Fixed column resizing issue

* AAE-15610: Code improvement

* AAE-15610: Added coverPadding input to resize directive

* AAE-15610: Code Improvement by setting first and last column width based on padding dynamically

* AAE-15610: Fixing lint issue
This commit is contained in:
Ehsan Rezaei
2023-07-10 10:39:22 +02:00
committed by GitHub
parent 11155e3882
commit 6e203d3aa0
4 changed files with 31 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -56,6 +56,7 @@
<div
adf-resizable
#resizableElement="adf-resizable"
[coverPadding]="10"
(resizing)="onResizing($event, columnIndex)"
(resizeStart)="isResizing = true"
(resizeEnd)="onResizingEnd()"

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

@@ -980,7 +980,15 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
headerContainerColumns.forEach((column: HTMLElement, index: number): void => {
if (allColumns[index]) {
allColumns[index].width = column.offsetWidth ?? DataTableComponent.MINIMUM_COLUMN_SIZE;
if (index === 0) {
allColumns[index].width =
column.clientWidth - parseInt(window.getComputedStyle(column).paddingLeft, 10);
} else if ( index === headerContainerColumns.length - 1) {
allColumns[index].width =
column.clientWidth - parseInt(window.getComputedStyle(column).paddingRight, 10);
} else {
allColumns[index].width = column.clientWidth;
}
}
});
}

14
lib/core/src/lib/datatable/directives/resizable/resizable.directive.spec.ts
View File

@@ -139,4 +139,18 @@ describe('ResizableDirective', () => {
expect(directive.resizing.emit).toHaveBeenCalledWith({ rectangle: { top: 0, left: 0, bottom: 0, right: 120, width: 120 } });
});
it('should emit resizing on mousemove considering cover padding', () => {
spyOn(directive.resizing, 'emit');
directive.coverPadding = 10;
directive.resizing.subscribe();
const mouseDownEvent = new MouseEvent('mousedown');
const mouseMoveEvent = new MouseEvent('mousemove', { clientX: 120 });
directive.mousedown.next({ ...mouseDownEvent, resize: true });
directive.mousemove.next(mouseMoveEvent);
expect(directive.resizing.emit).toHaveBeenCalledWith({ rectangle: { top: 0, left: 0, bottom: 0, right: 130, width: 130 } });
});
});

9
lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts
View File

@@ -18,7 +18,7 @@
import { Subject, Observable, Observer, merge } from 'rxjs';
import { BoundingRectangle, ResizeEvent, IResizeMouseEvent, ICoordinateX } from './types';
import { map, take, share, filter, pairwise, mergeMap, takeUntil } from 'rxjs/operators';
import { OnInit, Output, NgZone, OnDestroy, Directive, Renderer2, ElementRef, EventEmitter } from '@angular/core';
import { OnInit, Output, NgZone, OnDestroy, Directive, Renderer2, ElementRef, EventEmitter, Input } from '@angular/core';
@Directive({
selector: '[adf-resizable]',
@@ -40,6 +40,11 @@ export class ResizableDirective implements OnInit, OnDestroy {
*/
@Output() resizeEnd = new EventEmitter<ResizeEvent>();
/**
* This is to cover sum of the left and right padding between resize handler and its parent.
*/
@Input() coverPadding = 0;
mouseup = new Subject<IResizeMouseEvent>();
mousedown = new Subject<IResizeMouseEvent>();
@@ -151,7 +156,7 @@ export class ResizableDirective implements OnInit, OnDestroy {
mousedrag
.pipe(
map(({ clientX }) => this.getNewBoundingRectangle(this.startingRect, clientX))
map(({ clientX }) => this.getNewBoundingRectangle(this.startingRect, clientX + this.coverPadding))
)
.subscribe((rectangle: BoundingRectangle) => {
if (this.resizing.observers.length > 0) {