fix(plugins): Draggable Grouping Toggle All should follow collapsed

- prior to this PR fix, the "Toggle All" was always set to be expanded, but it should really be aware of knowing if the first group includes the `collapsed` boolean flag and follow it - also add extra styling around each group
ghiscoding · Dec 30, 2021 · 7fedfa1 · 7fedfa1
1 parent 5edab7a
commit 7fedfa1
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 24 deletions.
diff --git a/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts b/packages/common/src/extensions/__tests__/slickDraggableGrouping.spec.ts
@@ -65,6 +65,7 @@ const mockColumns = [      // The column definitions
     grouping: {
       getter: 'age', aggregators: [new Aggregators.Avg('age')],
       formatter: (g) => `Age: ${g.value} <span style="color:green">(${g.count} items)</span>`,
+      collapsed: true
     }
   },
   {
@@ -360,6 +361,7 @@ describe('Draggable Grouping Plugin', () => {
           mockHeaderColumnDiv1.className = 'slick-dropped-grouping';
           mockHeaderColumnDiv1.id = 'age';
           mockHeaderColumnDiv1.dataset.id = 'age';
+          mockColumns[2].grouping.collapsed = false;
 
           mockHeaderColumnDiv2 = document.createElement('div');
           mockHeaderColumnDiv2.className = 'slick-dropped-grouping';
@@ -389,7 +391,7 @@ describe('Draggable Grouping Plugin', () => {
           expect(plugin.columnsGroupBy.length).toBeGreaterThan(0);
           expect(groupChangedSpy).toHaveBeenCalledWith({
             caller: 'sort-group',
-            groupColumns: [{ aggregators: expect.toBeArray(), formatter: mockColumns[2].grouping.formatter, getter: 'age' }],
+            groupColumns: [{ aggregators: expect.toBeArray(), formatter: mockColumns[2].grouping.formatter, getter: 'age', collapsed: false, }],
           });
 
           jest.spyOn(gridStub, 'getHeaderColumn').mockReturnValue(mockHeaderColumnDiv1);
@@ -415,22 +417,22 @@ describe('Draggable Grouping Plugin', () => {
           const clickEvent = new Event('click');
           Object.defineProperty(clickEvent, 'target', { writable: true, configurable: true, value: toggleAllIconElm });
 
-          // initially expanded
-          expect(toggleAllIconElm.classList.contains('expanded')).toBeTruthy();
+          // initially collapsed
           expect(toggleAllIconElm.classList.contains('collapsed')).toBeFalsy();
+          expect(toggleAllIconElm.classList.contains('expanded')).toBeTruthy();
 
           // collapsed after toggle
           toggleAllElm.dispatchEvent(clickEvent);
           toggleAllElm = document.querySelector('.slick-group-toggle-all');
-          expect(toggleAllIconElm.classList.contains('expanded')).toBeFalsy();
           expect(toggleAllIconElm.classList.contains('collapsed')).toBeTruthy();
+          expect(toggleAllIconElm.classList.contains('expanded')).toBeFalsy();
           expect(dvCollapseSpy).toHaveBeenCalled();
 
           // expanded after toggle
           toggleAllElm.dispatchEvent(clickEvent);
           toggleAllElm = document.querySelector('.slick-group-toggle-all');
-          expect(toggleAllIconElm.classList.contains('expanded')).toBeTruthy();
           expect(toggleAllIconElm.classList.contains('collapsed')).toBeFalsy();
+          expect(toggleAllIconElm.classList.contains('expanded')).toBeTruthy();
           expect(dvExpandSpy).toHaveBeenCalled();
         });
 

diff --git a/packages/common/src/extensions/slickDraggableGrouping.ts b/packages/common/src/extensions/slickDraggableGrouping.ts
@@ -79,7 +79,7 @@ export class SlickDraggableGrouping {
   protected _grid?: SlickGrid;
   protected _gridColumns: Column[] = [];
   protected _gridUid = '';
-  protected _groupToggler!: HTMLDivElement;
+  protected _groupToggler?: HTMLDivElement;
   protected _sortableInstance: any;
   protected _subscriptions: EventSubscription[] = [];
   protected _defaults = {
@@ -160,7 +160,7 @@ export class SlickDraggableGrouping {
           title: this._addonOptions.toggleAllPlaceholderText ?? '',
           style: { display: 'none' },
         });
-        const groupTogglerIconElm = createDomElement('span', { className: 'slick-group-toggle-all-icon expanded mdi mdi-close' });
+        const groupTogglerIconElm = createDomElement('span', { className: 'slick-group-toggle-all-icon' });
         this._groupToggler.appendChild(groupTogglerIconElm);
 
         if (this.gridOptions.enableTranslate && this._addonOptions.toggleAllButtonTextKey) {
@@ -341,21 +341,21 @@ export class SlickDraggableGrouping {
     this.updateGroupBy('add-group');
   }
 
-  protected addGroupByRemoveClickHandler(id: string | number, _container: HTMLDivElement, column: Column, entry: any) {
+  protected addGroupByRemoveClickHandler(id: string | number, _container: HTMLDivElement, headerColumn: JQuery<HTMLDivElement>, entry: any) {
     const groupRemoveElm = document.querySelector(`${this.gridUidSelector}_${id}_entry > .slick-groupby-remove`);
     if (groupRemoveElm) {
       this._bindEventService.bind(groupRemoveElm, 'click', () => {
         const boundedElms = this._bindEventService.boundedEvents.filter(boundedEvent => boundedEvent.element === groupRemoveElm);
         for (const boundedEvent of boundedElms) {
           this._bindEventService.unbind(boundedEvent.element, 'click', boundedEvent.listener);
         }
-        this.removeGroupBy(id, column, entry);
+        this.removeGroupBy(id, headerColumn, entry);
       });
     }
   }
 
-  protected handleGroupByDrop(container: any, column: any) {
-    const columnid = column.attr('id').replace(this._gridUid, '');
+  protected handleGroupByDrop(container: HTMLDivElement, headerColumn: JQuery<HTMLDivElement>) {
+    const columnid = headerColumn.attr('id')!.replace(this._gridUid, '');
     let columnAllowed = true;
     this.columnsGroupBy.forEach(col => {
       if (col.id === columnid) {
@@ -367,10 +367,10 @@ export class SlickDraggableGrouping {
       this._gridColumns.forEach(col => {
         if (col.id === columnid) {
           if (col.grouping !== null && !isEmptyObject(col.grouping)) {
-            const columnName = column.children('.slick-column-name').first();
+            const columnName = headerColumn.children('.slick-column-name').first();
             const entryElm = createDomElement('div', { id: `${this._gridUid}_${col.id}_entry`, className: 'slick-dropped-grouping', dataset: { id: `${col.id}` } });
             const groupTextElm = createDomElement('div', {
-              textContent: columnName.length ? columnName.text() : column.text(),
+              textContent: columnName.length ? columnName.text() : headerColumn.text(),
               style: { display: 'inline-flex' },
             });
             entryElm.appendChild(groupTextElm);
@@ -386,14 +386,27 @@ export class SlickDraggableGrouping {
             entryElm.appendChild(groupRemoveIconElm);
             entryElm.appendChild(document.createElement('div'));
             container.appendChild(entryElm);
+
+            // if we're grouping by only 1 group, at the root, we'll analyze Toggle All and add collapsed/expanded class
+            if (this._groupToggler && this.columnsGroupBy.length === 0) {
+              const togglerIcon = this._groupToggler.querySelector<HTMLSpanElement>('.slick-group-toggle-all-icon');
+              if (col.grouping?.collapsed) {
+                togglerIcon?.classList.add('collapsed');
+                togglerIcon?.classList.remove('expanded');
+              } else {
+                togglerIcon?.classList.add('expanded');
+                togglerIcon?.classList.remove('collapsed');
+              }
+            }
+
             this.addColumnGroupBy(col);
-            this.addGroupByRemoveClickHandler(col.id, container, column, entryElm);
+            this.addGroupByRemoveClickHandler(col.id, container, headerColumn, entryElm);
           }
         }
       });
 
       // show the "Toggle All" when feature is enabled
-      if (this._groupToggler) {
+      if (this._groupToggler && this.columnsGroupBy.length > 0) {
         this._groupToggler.style.display = 'inline-block';
       }
     }
@@ -409,10 +422,10 @@ export class SlickDraggableGrouping {
     return arrayToModify;
   }
 
-  protected removeGroupBy(id: string | number, _column: Column, entry: any) {
+  protected removeGroupBy(id: string | number, _hdrColumn: JQuery<HTMLDivElement>, entry: any) {
     entry.remove();
     const groupByColumns: Column[] = [];
-    this._gridColumns.forEach((col: any) => groupByColumns[col.id] = col);
+    this._gridColumns.forEach(col => groupByColumns[col.id as number] = col);
     this.removeFromArray(this.columnsGroupBy, groupByColumns[id as any]);
     if (this.columnsGroupBy.length === 0) {
       // show placeholder text & hide the "Toggle All" when that later feature is enabled

diff --git a/packages/common/src/styles/_variables-theme-material.scss b/packages/common/src/styles/_variables-theme-material.scss
@@ -84,6 +84,8 @@ $slick-draggable-group-drop-border-right:                   0px !default;
 $slick-draggable-group-drop-width:                          100% !default;
 $slick-draggable-group-drop-radius:                         0 !default;
 $slick-draggable-group-delete-vertical-align:               middle !default;
+$slick-draggable-group-toggle-all-icon-height:              $slick-icon-font-size !default;
+$slick-draggable-group-toggle-all-icon-width:               $slick-icon-font-size !default;
 $slick-draggable-group-toggle-all-icon-vertical-align:      text-bottom !default;
 $slick-draggable-group-toggle-collapsed-icon:               $slick-icon-group-collapsed !default;
 $slick-draggable-group-toggle-expanded-icon:                $slick-icon-group-expanded !default;

diff --git a/packages/common/src/styles/_variables-theme-salesforce.scss b/packages/common/src/styles/_variables-theme-salesforce.scss
@@ -104,6 +104,8 @@ $slick-draggable-group-drop-border-top:                       0px !default;
 $slick-draggable-group-drop-width:                            100% !default;
 $slick-draggable-group-drop-radius:                           0px !default;
 $slick-draggable-group-delete-vertical-align:                 middle !default;
+$slick-draggable-group-toggle-all-icon-height:                $slick-icon-font-size !default;
+$slick-draggable-group-toggle-all-icon-width:                 $slick-icon-font-size !default;
 $slick-draggable-group-toggle-all-icon-vertical-align:        text-bottom !default;
 $slick-draggable-group-toggle-collapsed-icon:                 $slick-icon-group-collapsed !default;
 $slick-draggable-group-toggle-expanded-icon:                  $slick-icon-group-expanded !default;

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -606,6 +606,11 @@ $slick-compound-filter-text-padding:                        0 0 0 2px !default;
 $slick-date-range-filter-border-radius:                     4px !default;
 
 /* Draggable Grouping Plugin */
+$slick-draggable-group-column-background-color:             transparent !default;
+$slick-draggable-group-column-border:                       1px solid transparent !default;
+$slick-draggable-group-column-border-radius:                6px !default;
+$slick-draggable-group-column-padding:                      0 5px !default;
+$slick-draggable-group-column-margin-right:                 2px !default;
 $slick-draggable-group-drop-border:                         1px solid #e0e0e0 !default;
 $slick-draggable-group-drop-border-top:                     $slick-draggable-group-drop-border !default;
 $slick-draggable-group-drop-border-bottom:                  $slick-draggable-group-drop-border !default;
@@ -623,21 +628,23 @@ $slick-draggable-group-placeholder-color:                   #616161 !default;
 $slick-draggable-group-delete-color:                        pink !default;
 $slick-draggable-group-delete-hover-color:                  red !default;
 $slick-draggable-group-delete-padding-left:                 5px !default;
-$slick-draggable-group-delete-padding-right:                7px !default;
+$slick-draggable-group-delete-padding-right:                0px !default;
 $slick-draggable-group-delete-font-size:                    16px !default;
 $slick-draggable-group-delete-vertical-align:               baseline !default;
 $slick-draggable-group-toggle-all-border:                   1px solid #c7c7c7 !default;
 $slick-draggable-group-toggle-all-border-radius:            3px !default;
 $slick-draggable-group-toggle-all-color:                    $slick-icon-group-color !default;
 $slick-draggable-group-toggle-all-display:                  none !default;
-$slick-draggable-group-toggle-all-margin-right:             8px !default;
-$slick-draggable-group-toggle-all-padding:                  0 6px !default;
+$slick-draggable-group-toggle-all-margin-right:             15px !default;
+$slick-draggable-group-toggle-all-padding:                  0 8px !default;
 $slick-draggable-group-toggle-all-position:                 relative !default;
 $slick-draggable-group-toggle-all-top:                      0px !default;
 $slick-draggable-group-toggle-all-right:                    unset !default;
 $slick-draggable-group-toggle-all-icon-vertical-align:      middle !default;
 $slick-draggable-group-toggle-all-text-font-size:           15px !default;
 $slick-draggable-group-toggle-all-text-margin:              0 0 0 2px !default;
+$slick-draggable-group-toggle-all-icon-height:              inherit !default;
+$slick-draggable-group-toggle-all-icon-width:               $slick-icon-font-size !default;
 $slick-draggable-group-toggle-collapsed-icon:               "\f0fe" !default;
 $slick-draggable-group-toggle-expanded-icon:                "\f146" !default;
 $slick-draggable-group-title-height:                        $slick-icon-group-height !default;

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -885,11 +885,13 @@ input.flatpickr.form-control {
       .slick-group-toggle-all-icon.collapsed:before {
         content: var(--slick-draggable-group-toggle-collapsed-icon, $slick-draggable-group-toggle-collapsed-icon);
       }
-      .slick-group-toggle-all-icon.collapsed:before,
-      .slick-group-toggle-all-icon.expanded:before {
+      .slick-group-toggle-all-icon:before {
+        display: inline-block;
         color: var(--slick-draggable-group-toggle-all-color, $slick-draggable-group-toggle-all-color);
         font-family: var(--slick-icon-font-family, $slick-icon-font-family);
         vertical-align: var(--slick-draggable-group-toggle-all-icon-vertical-align, $slick-draggable-group-toggle-all-icon-vertical-align);
+        height: var(--slick-draggable-group-toggle-all-icon-height, $slick-draggable-group-toggle-all-icon-height);
+        width: var(--slick-draggable-group-toggle-all-icon-width, $slick-draggable-group-toggle-all-icon-width);
       }
       .slick-group-toggle-all-text {
         font-size: var(--slick-draggable-group-toggle-all-text-font-size, $slick-draggable-group-toggle-all-text-font-size);
@@ -898,9 +900,14 @@ input.flatpickr.form-control {
     }
 
     .slick-dropped-grouping {
-      display: inline-block;
-      vertical-align: middle;
       cursor: move;
+      display: flex;
+      align-items: center;
+      background-color: var(--slick-draggable-group-column-background-color, $slick-draggable-group-column-background-color);
+      border: var(--slick-draggable-group-column-border, $slick-draggable-group-column-border);
+      border-radius: var(--slick-draggable-group-column-border-radius, $slick-draggable-group-column-border-radius);
+      padding: var(--slick-draggable-group-column-padding, $slick-draggable-group-column-padding);
+      margin-right: var(--slick-draggable-group-column-margin-right, $slick-draggable-group-column-margin-right);
     }
 
     .slick-groupby-remove {