feat(core): add "Empty Data" warning message when grid is empty (#155)

* feat(core): add "Empty Data" warning message when grid is empty - this is in fact a div element that is created and reposition inside the grid, the reason we do that is because we cannot put that text inside a cell because it has its cell boundary, so creating a div and position it over the grid is the best approach * fix(core): mem leaks w/orphan DOM elements when disposing * feat(formatters): add FakeHyperlink Formatter
ghiscoding · Nov 9, 2020 · 13875b4 · 13875b4
1 parent 9633d4a
commit 13875b4
Show file tree

Hide file tree

Showing 38 changed files with 403 additions and 81 deletions.
diff --git a/examples/webpack-demo-vanilla-bundle/assets/i18n/en.json b/examples/webpack-demo-vanilla-bundle/assets/i18n/en.json
@@ -13,6 +13,7 @@
   "COMMANDS": "Commands",
   "CONTAINS": "Contains",
   "COPY": "Copy",
+  "EMPTY_DATA_WARNING_MESSAGE": "No data to display.",
   "ENDS_WITH": "Ends With",
   "EQUALS": "Equals",
   "EQUAL_TO": "Equal to",

diff --git a/examples/webpack-demo-vanilla-bundle/assets/i18n/fr.json b/examples/webpack-demo-vanilla-bundle/assets/i18n/fr.json
@@ -13,6 +13,7 @@
   "COMMANDS": "Commandes",
   "CONTAINS": "Contient",
   "COPY": "Copier",
+  "EMPTY_DATA_WARNING_MESSAGE": "Aucune donnée à afficher.",
   "ENDS_WITH": "Se termine par",
   "EQUALS": "Égale",
   "EQUAL_TO": "Égal à",

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example10.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example10.ts
@@ -208,7 +208,7 @@ export class Example10 {
    * @param query
    * @return Promise<GraphqlPaginatedResult>
    */
-  getCustomerApiCall(query: string): Promise<GraphqlPaginatedResult> {
+  getCustomerApiCall(_query: string): Promise<GraphqlPaginatedResult> {
     // in your case, you will call your WebAPI function (wich needs to return a Promise)
     // for the demo purpose, we will call a mock WebAPI function
     const mockedResult = {

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example11.ts
@@ -572,7 +572,7 @@ export class Example11 {
 
   pushNewFilterToSelectPreFilter(predefinedFilters: FilterPreset | FilterPreset[], isOptionSelected = false) {
     if (isOptionSelected) {
-      this.resetPredefinedFilterSelection(this.predefinedPresets);
+      this.predefinedPresets.forEach(preFilter => preFilter.isSelected = false); // reset selection
     }
     const presetFilters: FilterPreset[] = Array.isArray(predefinedFilters) ? predefinedFilters : [predefinedFilters];
     const filterSelect = document.querySelector('.selected-filter');
@@ -611,6 +611,7 @@ export class Example11 {
       event.stopPropagation();
       return;
     }
+    this.predefinedPresets.forEach(preFilter => preFilter.isSelected = false); // reset selection
     const currentFilters = this.sgb.filterService.getCurrentLocalFilters();
 
     const filterName = await prompt('Please provide a name for the new Filter.');
@@ -665,7 +666,7 @@ export class Example11 {
   }
 
   usePredefinedFilter(filterValue: string) {
-    this.resetPredefinedFilterSelection(this.predefinedPresets);
+    this.predefinedPresets.forEach(preFilter => preFilter.isSelected = false); // reset selection
     const selectedFilter = this.predefinedPresets.find(preset => preset.value === filterValue);
     if (selectedFilter) {
       selectedFilter.isSelected = true;
@@ -681,10 +682,6 @@ export class Example11 {
     this.currentSelectedFilterPreset = selectedFilter;
   }
 
-  resetPredefinedFilterSelection(predefinedFilters: FilterPreset[]) {
-    predefinedFilters.forEach(preFilter => preFilter.isSelected = false);
-  }
-
   mockProducts() {
     return [
       {

diff --git a/packages/common/src/editors/dateEditor.ts b/packages/common/src/editors/dateEditor.ts
@@ -168,7 +168,6 @@ export class DateEditor implements Editor {
       if (this.flatInstance.element) {
         setTimeout(() => destroyObjectDomElementProps(this.flatInstance));
       }
-      this.flatInstance = null;
     }
     if (this._$editorInputElm?.remove) {
       this._$editorInputElm.remove();
@@ -178,6 +177,7 @@ export class DateEditor implements Editor {
       this._$inputWithData.remove();
       this._$inputWithData = null;
     }
+    this._$input.remove();
   }
 
   disable(isDisabled = true) {

diff --git a/packages/common/src/editors/sliderEditor.ts b/packages/common/src/editors/sliderEditor.ts
@@ -104,7 +104,7 @@ export class SliderEditor implements Editor {
       // if user chose to display the slider number on the right side, then update it every time it changes
       // we need to use both "input" and "change" event to be all cross-browser
       if (!this.editorParams.hideSliderNumber) {
-        this._$editorElm.on('input change', (event: JQueryEventObject & { target: HTMLInputElement }) => {
+        this._$editorElm.on('input change', (event: JQuery.Event & { target: HTMLInputElement }) => {
           const value = event && event.target && event.target.value || '';
           if (value && document) {
             const elements = document.getElementsByClassName(this._elementRangeOutputId || '');

diff --git a/packages/common/src/extensions/__tests__/checkboxSelectorExtension.spec.ts b/packages/common/src/extensions/__tests__/checkboxSelectorExtension.spec.ts
@@ -111,11 +111,14 @@ describe('checkboxSelectorExtension', () => {
 
     it('should dispose of the addon', () => {
       const instance = extension.create(columnsMock, gridOptionsMock);
-      const destroySpy = jest.spyOn(instance, 'destroy');
+      const selectionModel = extension.register();
+      const addonDestroySpy = jest.spyOn(instance, 'destroy');
+      const smDestroySpy = jest.spyOn(selectionModel, 'destroy');
 
       extension.dispose();
 
-      expect(destroySpy).toHaveBeenCalled();
+      expect(addonDestroySpy).toHaveBeenCalled();
+      expect(smDestroySpy).toHaveBeenCalled();
     });
 
     it('should provide addon options and expect them to be called in the addon constructor', () => {

diff --git a/packages/common/src/extensions/cellExternalCopyManagerExtension.ts b/packages/common/src/extensions/cellExternalCopyManagerExtension.ts
@@ -24,6 +24,7 @@ declare const Slick: SlickNamespace;
 export class CellExternalCopyManagerExtension implements Extension {
   private _addon: SlickCellExternalCopyManager | null;
   private _addonOptions: ExcelCopyBufferOption;
+  private _cellSelectionModel: SlickCellSelectionModel;
   private _eventHandler: SlickEventHandler;
   private _commandQueue: EditCommand[];
   private _undoRedoBuffer: EditUndoRedoBuffer;
@@ -55,6 +56,10 @@ export class CellExternalCopyManagerExtension implements Extension {
     if (this._addon && this._addon.destroy) {
       this._addon.destroy();
     }
+    if (this._cellSelectionModel?.destroy) {
+      this._cellSelectionModel.destroy();
+    }
+    document.removeEventListener('keydown', this.hookUndoShortcutKey.bind(this));
   }
 
   /** Get the instance of the SlickGrid addon (control or plugin). */
@@ -72,7 +77,8 @@ export class CellExternalCopyManagerExtension implements Extension {
       this.hookUndoShortcutKey();
 
       this._addonOptions = { ...this.getDefaultOptions(), ...this.sharedService.gridOptions.excelCopyBufferOptions } as ExcelCopyBufferOption;
-      this.sharedService.slickGrid.setSelectionModel(new Slick.CellSelectionModel() as SlickCellSelectionModel);
+      this._cellSelectionModel = new Slick.CellSelectionModel() as SlickCellSelectionModel;
+      this.sharedService.slickGrid.setSelectionModel(this._cellSelectionModel);
       this._addon = new Slick.CellExternalCopyManager(this._addonOptions);
       if (this._addon) {
         this.sharedService.slickGrid.registerPlugin<SlickCellExternalCopyManager>(this._addon);

diff --git a/packages/common/src/extensions/checkboxSelectorExtension.ts b/packages/common/src/extensions/checkboxSelectorExtension.ts
@@ -8,6 +8,7 @@ declare const Slick: SlickNamespace;
 
 export class CheckboxSelectorExtension implements Extension {
   private _addon: SlickCheckboxSelectColumn | null;
+  private _rowSelectionPlugin: SlickRowSelectionModel;
 
   constructor(private extensionUtility: ExtensionUtility, private sharedService: SharedService) { }
 
@@ -16,6 +17,9 @@ export class CheckboxSelectorExtension implements Extension {
       this._addon.destroy();
       this._addon = null;
     }
+    if (this._rowSelectionPlugin?.destroy) {
+      this._rowSelectionPlugin.destroy();
+    }
   }
 
   /**
@@ -73,7 +77,7 @@ export class CheckboxSelectorExtension implements Extension {
       if (this.sharedService.gridOptions.preselectedRows && rowSelectionPlugin && this.sharedService.slickGrid.getSelectionModel()) {
         setTimeout(() => this._addon?.selectRows(this.sharedService.gridOptions.preselectedRows || []));
       }
-
+      this._rowSelectionPlugin = rowSelectionPlugin;
       return rowSelectionPlugin;
     }
     return null;

diff --git a/packages/common/src/extensions/rowMoveManagerExtension.ts b/packages/common/src/extensions/rowMoveManagerExtension.ts
@@ -18,6 +18,7 @@ declare const Slick: SlickNamespace;
 export class RowMoveManagerExtension implements Extension {
   private _addon: SlickRowMoveManager | null;
   private _eventHandler: SlickEventHandler;
+  private _rowSelectionPlugin: SlickRowSelectionModel;
 
   constructor(private extensionUtility: ExtensionUtility, private sharedService: SharedService) {
     this._eventHandler = new Slick.EventHandler();
@@ -35,6 +36,9 @@ export class RowMoveManagerExtension implements Extension {
       this._addon.destroy();
       this._addon = null;
     }
+    if (this._rowSelectionPlugin?.destroy) {
+      this._rowSelectionPlugin.destroy();
+    }
   }
 
   /**
@@ -101,7 +105,7 @@ export class RowMoveManagerExtension implements Extension {
         rowSelectionPlugin = new Slick.RowSelectionModel(this.sharedService.gridOptions.rowSelectionOptions);
         this.sharedService.slickGrid.setSelectionModel(rowSelectionPlugin);
       }
-
+      this._rowSelectionPlugin = rowSelectionPlugin;
       this.sharedService.slickGrid.registerPlugin<SlickRowMoveManager>(this._addon);
 
       // hook all events

diff --git a/packages/common/src/filters/compoundDateFilter.ts b/packages/common/src/filters/compoundDateFilter.ts
@@ -126,14 +126,13 @@ export class CompoundDateFilter implements Filter {
       if (this.flatInstance.element) {
         destroyObjectDomElementProps(this.flatInstance);
       }
-      this.flatInstance = null;
     }
     if (this.$filterElm) {
       this.$filterElm.off('keyup').remove();
       this.$filterElm = null;
     }
     if (this.$selectOperatorElm) {
-      this.$selectOperatorElm.off('change').remove()
+      this.$selectOperatorElm.off('change').remove();
     }
   }
 

diff --git a/packages/common/src/formatters/__tests__/fakeHyperlinkFormatter.spec.ts b/packages/common/src/formatters/__tests__/fakeHyperlinkFormatter.spec.ts
@@ -0,0 +1,15 @@
+import { fakeHyperlinkFormatter } from '../fakeHyperlinkFormatter';
+
+describe('the Edit Icon Formatter', () => {
+  it('should return a span with the "fake-hyperlink" class when a value is provided', () => {
+    const value = 'Custom Value';
+    const result = fakeHyperlinkFormatter(0, 0, value);
+    expect(result).toBe('<span class="fake-hyperlink">Custom Value</span>');
+  });
+
+  it('should return an empty string formatter when no value is provided', () => {
+    const value = null;
+    const result = fakeHyperlinkFormatter(0, 0, value);
+    expect(result).toBe('');
+  });
+});
diff --git a/packages/common/src/formatters/fakeHyperlinkFormatter.ts b/packages/common/src/formatters/fakeHyperlinkFormatter.ts
@@ -0,0 +1,5 @@
+import { Formatter } from './../interfaces/index';
+
+export const fakeHyperlinkFormatter: Formatter = (_row: number, _cell: number, value: string) => {
+  return value ? `<span class="fake-hyperlink">${value}</span>` : '';
+};
diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -96,6 +96,14 @@ export const GlobalGridOptions: GridOption = {
   defaultSlickgridEventPrefix: '',
   editable: false,
   editorTypingDebounce: 450,
+  enableEmptyDataWarningMessage: true,
+  emptyDataWarning: {
+    class: 'slick-empty-data-warning',
+    message: 'No data to display.',
+    messageKey: 'EMPTY_DATA_WARNING_MESSAGE',
+    marginTop: 100,
+    marginLeft: 10
+  },
   enableAutoResize: true,
   enableAutoSizeColumns: true,
   enableCellNavigation: false,

diff --git a/packages/common/src/interfaces/emptyWarning.interface.ts b/packages/common/src/interfaces/emptyWarning.interface.ts
@@ -0,0 +1,16 @@
+export interface EmptyWarning {
+  /** Empty data warning message, defaults to "No data to display." */
+  message: string;
+
+  /** Empty data warning message translation key, defaults to "EMPTY_DATA_WARNING_MESSAGE" */
+  messageKey?: string;
+
+  /** DOM Element class name, defaults to "empty-data-warning" */
+  class?: string;
+
+  /** Top margin position, number in pixel, of where the warning message will be displayed, default calculation is (header title row + filter row + 5px) */
+  marginTop?: number;
+
+  /** Left margin position, number in pixel, of where the warning message will be displayed, defaults to 10px */
+  marginLeft?: number;
+}
diff --git a/packages/common/src/interfaces/gridOption.interface.ts b/packages/common/src/interfaces/gridOption.interface.ts
@@ -11,6 +11,7 @@ import {
   DataViewOption,
   DraggableGrouping,
   EditCommand,
+  EmptyWarning,
   ExcelCopyBufferOption,
   ExcelExportOption,
   ExportOption,
@@ -170,6 +171,15 @@ export interface GridOption {
   /** Default to 450ms and only applies to Composite Editor, how long to wait until we start validating the editor changes on Editor that support it (integer, float, text, longText). */
   editorTypingDebounce?: number;
 
+  emptyDataWarning?: EmptyWarning;
+
+  /**
+   * Defaults to true, will display a warning message positioned inside the grid when there's no data returned.
+   * When using local (in-memory) dataset, it will show the message when there's no filtered data returned.
+   * When using backend Pagination it will display the message as soon as the total row count is 0.
+   */
+  enableEmptyDataWarningMessage?: boolean;
+
   /** Do we want to emulate paging when we are scrolling? */
   emulatePagingWhenScrolling?: boolean;
 

diff --git a/packages/common/src/interfaces/index.ts b/packages/common/src/interfaces/index.ts
@@ -43,6 +43,7 @@ export * from './editorValidationResult.interface';
 export * from './editorValidator.interface';
 export * from './editUndoRedoBuffer.interface';
 export * from './elementPosition.interface';
+export * from './emptyWarning.interface';
 export * from './excelCellFormat.interface';
 export * from './excelCopyBufferOption.interface';
 export * from './excelExportOption.interface';

diff --git a/packages/common/src/interfaces/slickCellRangeSelector.interface.ts b/packages/common/src/interfaces/slickCellRangeSelector.interface.ts
@@ -1,7 +1,6 @@
-import { SlickCellRangeDecorator, SlickGrid } from './index';
+import { SlickCellRangeDecorator, SlickGrid, SlickRange } from './index';
 import { CellRange } from './cellRange.interface';
 import { SlickEvent } from './slickEvent.interface';
-import { SlickEventData } from './slickEventData.interface';
 
 export interface SlickCellRangeSelector {
   pluginName: 'CellRangeSelector'
@@ -28,5 +27,5 @@ export interface SlickCellRangeSelector {
   onBeforeCellRangeSelected: SlickEvent<{ cell: { row: number; cell: number; } }>;
 
   /** Triggered after a cell range selection happened */
-  onCellRangeSelected: SlickEventData;
+  onCellRangeSelected: SlickEvent<{ range: SlickRange }>;
 }
diff --git a/packages/common/src/services/__tests__/grid.service.spec.ts b/packages/common/src/services/__tests__/grid.service.spec.ts
@@ -7,14 +7,15 @@ jest.useFakeTimers();
 
 declare const Slick: SlickNamespace;
 
-const mockSelectionModel = jest.fn().mockImplementation(() => ({
+const mockSelectionModel = {
   init: jest.fn(),
   destroy: jest.fn()
-}));
+};
+const mockSelectionModelImplementation = jest.fn().mockImplementation(() => mockSelectionModel);
 
 jest.mock('flatpickr', () => { });
-jest.mock('slickgrid/plugins/slick.rowselectionmodel', () => mockSelectionModel);
-Slick.RowSelectionModel = mockSelectionModel;
+jest.mock('slickgrid/plugins/slick.rowselectionmodel', () => mockSelectionModelImplementation);
+Slick.RowSelectionModel = mockSelectionModelImplementation;
 
 const extensionServiceStub = {
   getAllColumns: jest.fn(),
@@ -99,6 +100,15 @@ describe('Grid Service', () => {
     expect(service).toBeTruthy();
   });
 
+  it('should dispose of the service', () => {
+    const destroySpy = jest.spyOn(mockSelectionModel, 'destroy');
+
+    service.highlightRow(0, 10, 15);
+    service.dispose();
+
+    expect(destroySpy).toHaveBeenCalled();
+  });
+
   describe('getAllColumnDefinitions method', () => {
     it('should call "allColumns" GETTER ', () => {
       const mockColumns = [{ id: 'field1', field: 'field1', width: 100 }, { id: 'field2', field: 'field2', width: 100 }];
@@ -1358,7 +1368,7 @@ describe('Grid Service', () => {
       const extensionSpy = jest.spyOn(extensionServiceStub, 'getAllColumns').mockReturnValue(mockColumns);
       // const gridStateSpy = jest.spyOn(gridStateServiceStub, 'resetColumns');
 
-      service.resetGrid(mockColumns);
+      service.resetGrid();
 
       expect(extensionSpy).toHaveBeenCalled();
       // expect(gridStateSpy).toHaveBeenCalledWith(mockColumns);

diff --git a/packages/common/src/services/extension.service.ts b/packages/common/src/services/extension.service.ts
@@ -59,7 +59,7 @@ export class ExtensionService {
     for (const extensionName of Object.keys(this._extensionList)) {
       if (this._extensionList.hasOwnProperty(extensionName)) {
         const extension = this._extensionList[extensionName] as ExtensionModel<any, any>;
-        if (extension && extension.class && extension.class.dispose) {
+        if (extension?.class?.dispose) {
           extension.class.dispose();
         }
       }

diff --git a/packages/common/src/services/grid.service.ts b/packages/common/src/services/grid.service.ts
@@ -9,6 +9,7 @@ import {
   OnEventArgs,
   SlickGrid,
   SlickNamespace,
+  SlickRowSelectionModel,
 } from '../interfaces/index';
 import { ExtensionService } from './extension.service';
 import { FilterService } from './filter.service';
@@ -27,6 +28,7 @@ const GridServiceUpdateOptionDefaults: GridServiceUpdateOption = { highlightRow:
 
 export class GridService {
   private _grid: SlickGrid;
+  private _rowSelectionPlugin: SlickRowSelectionModel;
 
   constructor(
     private extensionService: ExtensionService,
@@ -47,6 +49,12 @@ export class GridService {
     return (this._grid?.getOptions) ? this._grid.getOptions() : {};
   }
 
+  dispose() {
+    if (this._rowSelectionPlugin?.destroy) {
+      this._rowSelectionPlugin.destroy();
+    }
+  }
+
   init(grid: SlickGrid): void {
     this._grid = grid;
   }
@@ -215,8 +223,8 @@ export class GridService {
   highlightRow(rowNumber: number | number[], fadeDelay = 1500, fadeOutDelay = 300) {
     // create a SelectionModel if there's not one yet
     if (!this._grid.getSelectionModel() && Slick && Slick.RowSelectionModel) {
-      const rowSelectionPlugin = new Slick.RowSelectionModel(this._gridOptions.rowSelectionOptions);
-      this._grid.setSelectionModel(rowSelectionPlugin);
+      this._rowSelectionPlugin = new Slick.RowSelectionModel(this._gridOptions.rowSelectionOptions);
+      this._grid.setSelectionModel(this._rowSelectionPlugin);
     }
 
     if (Array.isArray(rowNumber)) {