Merge pull request #499 from ghiscoding/feat/internal-draggable-grouping

feat(plugins): move external Draggable Grouping into Slickgrid-Universal
ghiscoding · Sep 25, 2021 · 2824ea3 · 2824ea3
2 parents 2ae3855 + a00e0d1
commit 2824ea3
Show file tree

Hide file tree

Showing 34 changed files with 1,159 additions and 326 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/assets/i18n/en.json b/examples/webpack-demo-vanilla-bundle/assets/i18n/en.json
@@ -15,6 +15,7 @@
   "COMMANDS": "Commands",
   "CONTAINS": "Contains",
   "COPY": "Copy",
+  "DROP_COLUMN_HEADER_TO_GROUP_BY": "Drop a column header here to group by the column",
   "EMPTY_DATA_WARNING_MESSAGE": "No data to display.",
   "ENDS_WITH": "Ends With",
   "EQUALS": "Equals",
@@ -57,6 +58,7 @@
   "SORT_DESCENDING": "Sort Descending",
   "STARTS_WITH": "Starts With",
   "SYNCHRONOUS_RESIZE": "Synchronous resize",
+  "TOGGLE_ALL_GROUPS": "Toggle all Groups",
   "TOGGLE_FILTER_ROW": "Toggle Filter Row",
   "TOGGLE_PRE_HEADER_ROW": "Toggle Pre-Header Row",
   "X_OF_Y_SELECTED": "# of % selected",

diff --git a/examples/webpack-demo-vanilla-bundle/assets/i18n/fr.json b/examples/webpack-demo-vanilla-bundle/assets/i18n/fr.json
@@ -15,6 +15,7 @@
   "COMMANDS": "Commandes",
   "CONTAINS": "Contient",
   "COPY": "Copier",
+  "DROP_COLUMN_HEADER_TO_GROUP_BY": "Glisser une en-tête de colonne ici pour grouper par cet colonne",
   "EMPTY_DATA_WARNING_MESSAGE": "Aucune donnée à afficher.",
   "ENDS_WITH": "Se termine par",
   "EQUALS": "Égale",
@@ -57,6 +58,7 @@
   "SORT_DESCENDING": "Trier par ordre décroissant",
   "STARTS_WITH": "Commence par",
   "SYNCHRONOUS_RESIZE": "Redimension synchrone",
+  "TOGGLE_ALL_GROUPS": "Basculer tous les groupes",
   "TOGGLE_FILTER_ROW": "Basculer la ligne des filtres",
   "TOGGLE_PRE_HEADER_ROW": "Basculer la ligne de pré-en-tête",
   "X_OF_Y_SELECTED": "# de % sélectionnés",

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts
@@ -2,6 +2,7 @@ import {
   Aggregators,
   BindingEventService,
   Column,
+  DraggableGroupingPlugin,
   Editors,
   FieldType,
   FileType,
@@ -11,7 +12,6 @@ import {
   Grouping,
   GroupingGetterFunction,
   GroupTotalFormatters,
-  SlickDraggableGrouping,
   SlickNamespace,
   SortComparers,
   SortDirectionNumber,
@@ -45,7 +45,7 @@ export class Example3 {
   excelExportService: ExcelExportService;
   sgb: SlickVanillaGridBundle;
   durationOrderByCount = false;
-  draggableGroupingPlugin: SlickDraggableGrouping;
+  draggableGroupingPlugin: DraggableGroupingPlugin;
   loadingClass = '';
   selectedGroupingFields: Array<string | GroupingGetterFunction> = ['', '', ''];
 
@@ -310,6 +310,7 @@ export class Example3 {
         deleteIconCssClass: 'mdi mdi-close color-danger',
         onGroupChanged: (_e, args) => this.onGroupChanged(args),
         onExtensionRegistered: (extension) => this.draggableGroupingPlugin = extension,
+        // groupIconCssClass: 'mdi mdi-drag-vertical',
       },
       enableCheckboxSelector: true,
       enableRowSelection: true,
@@ -381,7 +382,7 @@ export class Example3 {
   }
 
   clearGrouping() {
-    if (this.draggableGroupingPlugin && this.draggableGroupingPlugin.setDroppedGroups) {
+    if (this.draggableGroupingPlugin?.setDroppedGroups) {
       this.draggableGroupingPlugin.clearDroppedGroups();
     }
     this.sgb?.slickGrid.invalidate(); // invalidate all rows and re-render
@@ -404,7 +405,7 @@ export class Example3 {
 
   groupByDuration() {
     this.clearGrouping();
-    if (this.draggableGroupingPlugin && this.draggableGroupingPlugin.setDroppedGroups) {
+    if (this.draggableGroupingPlugin?.setDroppedGroups) {
       this.showPreHeader();
       this.draggableGroupingPlugin.setDroppedGroups('duration');
       this.sgb?.slickGrid.invalidate(); // invalidate all rows and re-render
@@ -424,20 +425,16 @@ export class Example3 {
 
   groupByDurationEffortDriven() {
     this.clearGrouping();
-    if (this.draggableGroupingPlugin && this.draggableGroupingPlugin.setDroppedGroups) {
+    if (this.draggableGroupingPlugin?.setDroppedGroups) {
       this.showPreHeader();
       this.draggableGroupingPlugin.setDroppedGroups(['duration', 'effortDriven']);
       this.sgb?.slickGrid.invalidate(); // invalidate all rows and re-render
-
-      // you need to manually add the sort icon(s) in UI
-      const sortColumns = [{ columnId: 'duration', sortAsc: true }];
-      this.sgb?.slickGrid.setSortColumns(sortColumns);
     }
   }
 
   groupByFieldName(_fieldName, _index) {
     this.clearGrouping();
-    if (this.draggableGroupingPlugin && this.draggableGroupingPlugin.setDroppedGroups) {
+    if (this.draggableGroupingPlugin?.setDroppedGroups) {
       this.showPreHeader();
 
       // get the field names from Group By select(s) dropdown, but filter out any empty fields

diff --git a/packages/common/src/constants.ts b/packages/common/src/constants.ts
@@ -18,6 +18,7 @@ export class Constants {
     TEXT_COLUMN_RESIZE_BY_CONTENT: 'Resize by Content',
     TEXT_COMMANDS: 'Commands',
     TEXT_COPY: 'Copy',
+    TEXT_DROP_COLUMN_HEADER_TO_GROUP_BY: 'Drop a column header here to group by the column',
     TEXT_EQUALS: 'Equals',
     TEXT_EQUAL_TO: 'Equal to',
     TEXT_ENDS_WITH: 'Ends With',
@@ -61,6 +62,7 @@ export class Constants {
     TEXT_SORT_ASCENDING: 'Sort Ascending',
     TEXT_SORT_DESCENDING: 'Sort Descending',
     TEXT_STARTS_WITH: 'Starts With',
+    TEXT_TOGGLE_ALL_GROUPS: 'Toggle all Groups',
     TEXT_TOGGLE_FILTER_ROW: 'Toggle Filter Row',
     TEXT_TOGGLE_PRE_HEADER_ROW: 'Toggle Pre-Header Row',
     TEXT_X_OF_Y_SELECTED: '# of % selected',

diff --git a/packages/common/src/enums/columnReorderFunction.type.ts b/packages/common/src/enums/columnReorderFunction.type.ts
@@ -1,3 +1,3 @@
-import { Column, SlickGrid } from '../interfaces/index';
+import { Column, SlickEvent, SlickGrid } from '../interfaces/index';
 
-export type ColumnReorderFunction = (grid: SlickGrid, headers: HTMLElement[], headerColumnWidthDiff: any, setColumns: (col: Column) => void, setupColumnResize: () => void, columns: Column[], getColumnIndex: number, uid: string, trigger: boolean) => void;
+export type ColumnReorderFunction = (grid: SlickGrid, headers: any, headerColumnWidthDiff: any, setColumns: (cols: Column[]) => void, setupColumnResize: () => void, columns: Column[], getColumnIndex: (column: Column) => number, uid: string, trigger: (slickEvent: SlickEvent, data?: any) => void) => void;
diff --git a/packages/common/src/extensions/__tests__/draggableGroupingExtension.spec.ts b/packages/common/src/extensions/__tests__/draggableGroupingExtension.spec.ts
diff --git a/packages/common/src/extensions/draggableGroupingExtension.ts b/packages/common/src/extensions/draggableGroupingExtension.ts
diff --git a/packages/common/src/extensions/extensionUtility.ts b/packages/common/src/extensions/extensionUtility.ts
@@ -134,12 +134,12 @@ export class ExtensionUtility {
     }
   }
 
-  /** Translate the an array of items from an input key and assign to the output key */
+  /** Translate the array of items from an input key and assign them to their output key */
   translateItems<T = any>(items: T[], inputKey: string, outputKey: string) {
     if (Array.isArray(items)) {
       for (const item of items) {
         if ((item as any)[inputKey]) {
-          (item as any)[outputKey] = this.translaterService && this.translaterService.getCurrentLanguage && this.translaterService.translate && this.translaterService.translate((item as any)[inputKey]);
+          (item as any)[outputKey] = this.translaterService?.translate?.((item as any)[inputKey]);
         }
       }
     }

diff --git a/packages/common/src/extensions/index.ts b/packages/common/src/extensions/index.ts
@@ -1,6 +1,5 @@
 export * from './cellExternalCopyManagerExtension';
 export * from './checkboxSelectorExtension';
-export * from './draggableGroupingExtension';
 export * from './extensionUtility';
 export * from './groupItemMetaProviderExtension';
 export * from './rowDetailViewExtension';

diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -105,6 +105,11 @@ export const GlobalGridOptions: GridOption = {
   defaultColumnSortFieldId: 'id',
   defaultComponentEventPrefix: '',
   defaultSlickgridEventPrefix: '',
+  draggableGrouping: {
+    hideToggleAllButton: false,
+    toggleAllButtonText: '',
+    dropPlaceHolderTextKey: 'DROP_COLUMN_HEADER_TO_GROUP_BY',
+  },
   editable: false,
   editorTypingDebounce: 450,
   filterTypingDebounce: 0,