Skip to content

Commit

Permalink
fix: SlickDraggableGrouping should hide group elms when dragging (#965)
Browse files Browse the repository at this point in the history 
* fix: SlickDraggableGrouping should hide group elms when dragging
- when dragging a column to a new group, it should hide all existing grouped elements
- also fixes an issue were the dropzone hovering wasn't working as it should
  • Loading branch information
@ghiscoding
ghiscoding authored Apr 30, 2023
1 parent fe9cf80 commit 6601998
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 29 deletions.
8 changes: 4 additions & 4 deletions packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -398,16 +398,17 @@ describe('Draggable Grouping Plugin', () => {
fn.sortableLeftInstance!.options.onStart!({} as any);
plugin.droppableInstance!.options.onAdd!({ item: headerColumnDiv3, clone: headerColumnDiv3.cloneNode(true) } as any);
fn.sortableLeftInstance.options.onEnd!(new CustomEvent('end') as any);
const dropzonePlaceholderElm = dropzoneElm.querySelector('.slick-draggable-dropzone-placeholder');

const dragoverEvent = new CustomEvent('dragover', { bubbles: true, detail: {} });
dropzoneElm.dispatchEvent(dragoverEvent);
dropzonePlaceholderElm?.dispatchEvent(dragoverEvent);

const dragenterEvent = new CustomEvent('dragenter', { bubbles: true, detail: {} });
dropzoneElm.dispatchEvent(dragenterEvent);
dropzonePlaceholderElm?.dispatchEvent(dragenterEvent);
expect(dropzoneElm.classList.contains('slick-dropzone-hover')).toBeTruthy();

const dragleaveEvent = new CustomEvent('dragleave', { bubbles: true, detail: {} });
dropzoneElm.dispatchEvent(dragleaveEvent);
dropzonePlaceholderElm?.dispatchEvent(dragleaveEvent);
expect(dropzoneElm.classList.contains('slick-dropzone-hover')).toBeFalsy();
});

Expand Down Expand Up @@ -476,7 +477,6 @@ describe('Draggable Grouping Plugin', () => {
it('should call "clearDroppedGroups" and expect the grouping to be cleared', () => {
const preHeaderElm = document.querySelector('.slick-preheader-panel') as HTMLDivElement;
let dropboxPlaceholderElm = preHeaderElm.querySelector('.slick-draggable-dropzone-placeholder') as HTMLDivElement;
expect(dropboxPlaceholderElm.style.display).toBe('none');

plugin.clearDroppedGroups();
dropboxPlaceholderElm = preHeaderElm.querySelector('.slick-draggable-dropzone-placeholder') as HTMLDivElement;
Expand Down
47 changes: 22 additions & 25 deletions packages/common/src/extensions/slickDraggableGrouping.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ declare const Slick: SlickNamespace;
*/
export class SlickDraggableGrouping {
protected _addonOptions!: DraggableGrouping;
protected _bindEventService: BindingEventService;
protected _bindingEventService: BindingEventService;
protected _droppableInstance?: SortableInstance;
protected _dropzoneElm!: HTMLDivElement;
protected _dropzonePlaceholderElm!: HTMLDivElement;
Expand Down Expand Up @@ -87,7 +87,7 @@ export class SlickDraggableGrouping {
protected readonly pubSubService: BasePubSubService,
protected readonly sharedService: SharedService,
) {
this._bindEventService = new BindingEventService();
this._bindingEventService = new BindingEventService();
this._eventHandler = new Slick.EventHandler();
this.onGroupChanged = new Slick.Event();
}
Expand Down Expand Up @@ -227,7 +227,7 @@ export class SlickDraggableGrouping {
this.onGroupChanged.unsubscribe();
this._eventHandler.unsubscribeAll();
this.pubSubService.unsubscribeAll(this._subscriptions);
this._bindEventService.unbindAll();
this._bindingEventService.unbindAll();
emptyElement(document.querySelector(`.${this.gridUid} .slick-preheader-panel`));
}

Expand Down Expand Up @@ -278,7 +278,7 @@ export class SlickDraggableGrouping {
* @param uid - grid UID
* @param trigger - callback to execute when triggering a column grouping
*/
setupColumnReorder(grid: SlickGrid, headers: any, _headerColumnWidthDiff: any, setColumns: (columns: Column[]) => void, setupColumnResize: () => void, columns: Column[], getColumnIndex: (columnId: string) => number, uid: string, trigger: (slickEvent: SlickEvent, data?: any) => void) {
setupColumnReorder(grid: SlickGrid, headers: any, _headerColumnWidthDiff: any, setColumns: (columns: Column[]) => void, setupColumnResize: () => void, _columns: Column[], getColumnIndex: (columnId: string) => number, _uid: string, trigger: (slickEvent: SlickEvent, data?: any) => void) {
const dropzoneElm = grid.getPreHeaderPanel();
const draggablePlaceholderElm = dropzoneElm.querySelector<HTMLDivElement>('.slick-draggable-dropzone-placeholder');
const groupTogglerElm = dropzoneElm.querySelector<HTMLDivElement>('.slick-group-toggle-all');
Expand All @@ -302,12 +302,10 @@ export class SlickDraggableGrouping {
// },
onStart: () => {
if (draggablePlaceholderElm) {
draggablePlaceholderElm.style.display = 'none';
}
const droppedGroupingElm = dropzoneElm.querySelector<HTMLDivElement>('.slick-dropped-grouping');
if (droppedGroupingElm) {
droppedGroupingElm.style.display = 'none';
draggablePlaceholderElm.style.display = 'inline-block';
}
const droppedGroupingElms = dropzoneElm.querySelectorAll<HTMLDivElement>('.slick-dropped-grouping');
droppedGroupingElms.forEach(droppedGroupingElm => droppedGroupingElm.style.display = 'none');
if (groupTogglerElm) {
groupTogglerElm.style.display = 'none';
}
Expand All @@ -316,19 +314,16 @@ export class SlickDraggableGrouping {
dropzoneElm?.classList.remove('slick-dropzone-hover');
draggablePlaceholderElm?.parentElement?.classList.remove('slick-dropzone-placeholder-hover');

if (dropzoneElm.querySelectorAll('.slick-dropped-grouping').length) {
const droppedGroupingElms = dropzoneElm.querySelectorAll<HTMLDivElement>('.slick-dropped-grouping');
droppedGroupingElms.forEach(droppedGroupingElm => droppedGroupingElm.style.display = 'flex');

if (droppedGroupingElms.length) {
if (draggablePlaceholderElm) {
draggablePlaceholderElm.style.display = 'none';
}
const droppedGroupingElm = dropzoneElm.querySelector<HTMLDivElement>('.slick-dropped-grouping');
if (droppedGroupingElm) {
droppedGroupingElm.style.display = 'flex';
}
if (groupTogglerElm) {
groupTogglerElm.style.display = 'inline-block';
}
} else if (draggablePlaceholderElm) {
draggablePlaceholderElm.style.display = 'inline-block';
}

if (!grid.getEditorLock().commitCurrentEdit()) {
Expand Down Expand Up @@ -381,18 +376,18 @@ export class SlickDraggableGrouping {
}

protected addGroupByRemoveClickHandler(id: string | number, groupRemoveIconElm: HTMLDivElement, headerColumnElm: HTMLDivElement, entry: any) {
this._bindEventService.bind(groupRemoveIconElm, 'click', () => {
const boundedElms = this._bindEventService.boundedEvents.filter(boundedEvent => boundedEvent.element === groupRemoveIconElm);
this._bindingEventService.bind(groupRemoveIconElm, 'click', () => {
const boundedElms = this._bindingEventService.boundedEvents.filter(boundedEvent => boundedEvent.element === groupRemoveIconElm);
for (const boundedEvent of boundedElms) {
this._bindEventService.unbind(boundedEvent.element, 'click', boundedEvent.listener);
this._bindingEventService.unbind(boundedEvent.element, 'click', boundedEvent.listener);
}
this.removeGroupBy(id, headerColumnElm, entry);
});
}

protected addGroupSortClickHandler(col: Column, groupSortContainerElm: HTMLDivElement) {
const { grouping, type } = col;
this._bindEventService.bind(groupSortContainerElm, 'click', () => {
this._bindingEventService.bind(groupSortContainerElm, 'click', () => {
// group sorting requires all group to be opened, make sure that the Toggle All is also expanded
this.toggleGroupAll(col, false);

Expand Down Expand Up @@ -541,10 +536,12 @@ export class SlickDraggableGrouping {
}

protected addDragOverDropzoneListeners() {
if (this._dropzoneElm) {
this._bindEventService.bind(this._dropzoneElm, 'dragover', (e: Event) => e.preventDefault);
this._bindEventService.bind(this._dropzoneElm, 'dragenter', () => this._dropzoneElm.classList.add('slick-dropzone-hover'));
this._bindEventService.bind(this._dropzoneElm, 'dragleave', () => this._dropzoneElm.classList.remove('slick-dropzone-hover'));
const draggablePlaceholderElm = this._dropzoneElm.querySelector('.slick-draggable-dropzone-placeholder');

if (draggablePlaceholderElm && this._dropzoneElm) {
this._bindingEventService.bind(draggablePlaceholderElm, 'dragover', (e) => e.preventDefault);
this._bindingEventService.bind(draggablePlaceholderElm, 'dragenter', () => this._dropzoneElm.classList.add('slick-dropzone-hover'));
this._bindingEventService.bind(draggablePlaceholderElm, 'dragleave', () => this._dropzoneElm.classList.remove('slick-dropzone-hover'));
}
}

Expand Down Expand Up @@ -585,7 +582,7 @@ export class SlickDraggableGrouping {
this.addDragOverDropzoneListeners();

if (this._groupToggler) {
this._bindEventService.bind(this._groupToggler, 'click', ((event: DOMMouseOrTouchEvent<HTMLDivElement>) => {
this._bindingEventService.bind(this._groupToggler, 'click', ((event: DOMMouseOrTouchEvent<HTMLDivElement>) => {
const target = event.target.classList.contains('slick-group-toggle-all-icon') ? event.target : event.currentTarget.querySelector('.slick-group-toggle-all-icon');
this.toggleGroupToggler(target, target?.classList.contains('expanded'));
}) as EventListener);
Expand Down
1 change: 1 addition & 0 deletions packages/common/src/styles/slick-plugins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -907,6 +907,7 @@ input.flatpickr.form-control {
.slick-draggable-dropzone-placeholder {
font-style: var(--slick-draggable-group-placeholder-font-style, $slick-draggable-group-placeholder-font-style);
color: var(--slick-draggable-group-placeholder-color, $slick-draggable-group-placeholder-color);
width: 100%;
}

.slick-group-toggle-all {
Expand Down

0 comments on commit 6601998

Please sign in to comment.