chore: fix some UI bugs found with draggable grouping

ghiscoding · Apr 30, 2023 · d5b69fe · d5b69fe
1 parent c774b91
commit d5b69fe
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 17 deletions.
diff --git a/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts b/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts
@@ -121,7 +121,6 @@ describe('Draggable Grouping Plugin', () => {
   let translateService: TranslateServiceStub;
   let headerDiv: HTMLDivElement;
   let preHeaderDiv: HTMLDivElement;
-  let dropzonePlaceholderElm: HTMLDivElement;
   let dropzoneElm: HTMLDivElement;
 
   beforeEach(() => {
@@ -130,12 +129,9 @@ describe('Draggable Grouping Plugin', () => {
     headerDiv = document.createElement('div');
     dropzoneElm = document.createElement('div');
     dropzoneElm.className = 'slick-dropzone';
-    dropzonePlaceholderElm = document.createElement('div');
-    dropzonePlaceholderElm.className = 'slick-placeholder';
     headerDiv.className = 'slick-header-column';
     preHeaderDiv = document.createElement('div');
     preHeaderDiv.className = 'slick-preheader-panel';
-    dropzoneElm.appendChild(dropzonePlaceholderElm);
     gridContainerDiv.appendChild(preHeaderDiv);
     preHeaderDiv.appendChild(dropzoneElm);
     document.body.appendChild(gridContainerDiv);
@@ -402,17 +398,18 @@ 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: {} });
-      dropzonePlaceholderElm.dispatchEvent(dragoverEvent);
+      dropzonePlaceholderElm?.dispatchEvent(dragoverEvent);
 
       const dragenterEvent = new CustomEvent('dragenter', { bubbles: true, detail: {} });
-      dropzonePlaceholderElm.dispatchEvent(dragenterEvent);
-      expect(dropzoneElm.classList.contains('slick-dropzone-placeholder-hover')).toBeTruthy();
+      dropzonePlaceholderElm?.dispatchEvent(dragenterEvent);
+      expect(dropzoneElm.classList.contains('slick-dropzone-hover')).toBeTruthy();
 
       const dragleaveEvent = new CustomEvent('dragleave', { bubbles: true, detail: {} });
-      dropzonePlaceholderElm.dispatchEvent(dragleaveEvent);
-      expect(dropzoneElm.classList.contains('slick-dropzone-placeholder-hover')).toBeFalsy();
+      dropzonePlaceholderElm?.dispatchEvent(dragleaveEvent);
+      expect(dropzoneElm.classList.contains('slick-dropzone-hover')).toBeFalsy();
     });
 
     describe('setupColumnDropbox method', () => {
@@ -480,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;

diff --git a/packages/common/src/extensions/slickDraggableGrouping.ts b/packages/common/src/extensions/slickDraggableGrouping.ts
@@ -302,7 +302,7 @@ export class SlickDraggableGrouping {
       // },
       onStart: () => {
         if (draggablePlaceholderElm) {
-          draggablePlaceholderElm.style.display = 'none';
+          draggablePlaceholderElm.style.display = 'inline-block';
         }
         const droppedGroupingElms = dropzoneElm.querySelectorAll<HTMLDivElement>('.slick-dropped-grouping');
         droppedGroupingElms.forEach(droppedGroupingElm => droppedGroupingElm.style.display = 'none');
@@ -324,8 +324,6 @@ export class SlickDraggableGrouping {
           if (groupTogglerElm) {
             groupTogglerElm.style.display = 'inline-block';
           }
-        } else if (draggablePlaceholderElm) {
-          draggablePlaceholderElm.style.display = 'inline-block';
         }
 
         if (!grid.getEditorLock().commitCurrentEdit()) {
@@ -538,12 +536,12 @@ export class SlickDraggableGrouping {
   }
 
   protected addDragOverDropzoneListeners() {
-    const draggablePlaceholderElm = this._dropzoneElm.querySelector('.slick-placeholder');
+    const draggablePlaceholderElm = this._dropzoneElm.querySelector('.slick-draggable-dropzone-placeholder');
 
-    if (draggablePlaceholderElm) {
+    if (draggablePlaceholderElm && this._dropzoneElm) {
       this._bindingEventService.bind(draggablePlaceholderElm, 'dragover', (e) => e.preventDefault);
-      this._bindingEventService.bind(draggablePlaceholderElm, 'dragenter', () => this._dropzoneElm.classList.add('slick-dropzone-placeholder-hover'));
-      this._bindingEventService.bind(draggablePlaceholderElm, 'dragleave', () => this._dropzoneElm.classList.remove('slick-dropzone-placeholder-hover'));
+      this._bindingEventService.bind(draggablePlaceholderElm, 'dragenter', () => this._dropzoneElm.classList.add('slick-dropzone-hover'));
+      this._bindingEventService.bind(draggablePlaceholderElm, 'dragleave', () => this._dropzoneElm.classList.remove('slick-dropzone-hover'));
     }
   }
 

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -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 {