feat(core): expose all services, slickgrid, dataview instances

- we can expose all of these services, ... in the root of the sgb object (it's also in the new "instances" property as well)
ghiscoding · Jul 23, 2020 · a33e387 · a33e387
1 parent f8054c9
commit a33e387
Show file tree

Hide file tree

Showing 20 changed files with 311 additions and 340 deletions.
diff --git a/README.md b/README.md
@@ -156,6 +156,6 @@ yarn run test:watch
   - [x] Add interfaces to all SlickGrid core lib classes & plugins (basically add Types to everything)
 - [x] Copy cell text (context menu) doesn't work in SF
 - [x] Remove all Services init method 2nd argument (we can get DataView directly from the Grid object)
+- [x] The Pagination/Footer width is a little off sometime compare to the width of the grid container
+- [ ] See if we can make all vanilla-grid-bundle services as readonly
 - [ ] Check why `DOM Purify` doesn't work in SF
-- [ ] Search for any left "todo" in the entire solution
-- [ ] The Pagination/Footer width is a little off sometime compare to the width of the grid container
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example01.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example01.ts
@@ -1,5 +1,5 @@
 import { Column, Formatters, GridOption } from '@slickgrid-universal/common';
-import { Slicker } from '@slickgrid-universal/vanilla-bundle';
+import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 import { ExampleGridOptions } from './example-grid-options';
 
 // use any of the Styling Theme
@@ -15,8 +15,8 @@ export class Example1 {
   columnDefinitions2: Column[];
   dataset1: any[];
   dataset2: any[];
-  slickgridLwc1;
-  slickgridLwc2;
+  sgb1: SlickVanillaGridBundle;
+  sgb2: SlickVanillaGridBundle;
 
   attached() {
     this.defineGrids();
@@ -27,17 +27,17 @@ export class Example1 {
     this.dataset1 = this.mockData(NB_ITEMS);
     this.dataset2 = this.mockData(NB_ITEMS);
 
-    this.slickgridLwc1 = new Slicker.GridBundle(gridContainerElm1, this.columnDefinitions1, { ...ExampleGridOptions, ...this.gridOptions1 }, this.dataset1);
-    this.slickgridLwc2 = new Slicker.GridBundle(gridContainerElm2, this.columnDefinitions2, { ...ExampleGridOptions, ...this.gridOptions2 }, this.dataset2);
+    this.sgb1 = new Slicker.GridBundle(gridContainerElm1, this.columnDefinitions1, { ...ExampleGridOptions, ...this.gridOptions1 }, this.dataset1);
+    this.sgb2 = new Slicker.GridBundle(gridContainerElm2, this.columnDefinitions2, { ...ExampleGridOptions, ...this.gridOptions2 }, this.dataset2);
 
     // setTimeout(() => {
     //   this.slickgridLwc2.dataset = this.dataset2;
     // }, 1000);
   }
 
   dispose() {
-    this.slickgridLwc1?.dispose();
-    this.slickgridLwc2?.dispose();
+    this.sgb1?.dispose();
+    this.sgb2?.dispose();
   }
 
   /* Define grid Options and Columns */

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example02.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example02.ts
@@ -1,7 +1,22 @@
-import { Aggregators, Column, FieldType, Filters, FileType, Formatters, GridOption, Grouping, GroupTotalFormatters, SlickDataView, SlickGrid, SortComparers, SortDirectionNumber } from '@slickgrid-universal/common';
+import {
+  Aggregators,
+  Column,
+  FieldType,
+  Filters,
+  FileType,
+  Formatters,
+  GridOption,
+  Grouping,
+  GroupTotalFormatters,
+  SlickDataView,
+  SlickGrid,
+  SlickerGridInstance,
+  SortComparers,
+  SortDirectionNumber
+} from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { FileExportService } from '@slickgrid-universal/file-export';
-import { Slicker } from '@slickgrid-universal/vanilla-bundle';
+import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import { ExampleGridOptions } from './example-grid-options';
 import '../material-styles.scss';
@@ -12,27 +27,33 @@ const NB_ITEMS = 500;
 export class Example2 {
   columnDefinitions: Column[];
   gridOptions: GridOption;
-  dataset;
-  dataViewObj: SlickDataView;
-  gridObj: SlickGrid;
+  dataset: any[];
   commandQueue = [];
-  slickgridLwc;
-  slickerGridInstance;
+  sgb: SlickVanillaGridBundle;
   excelExportService = new ExcelExportService();
 
+  get dataViewObj(): SlickDataView {
+    return this.sgb?.dataView;
+  }
+  get gridObj(): SlickGrid {
+    return this.sgb?.slickGrid;
+  }
+  get slickerGridInstance(): SlickerGridInstance {
+    return this.sgb?.instances;
+  }
+
   attached() {
     this.initializeGrid();
     this.dataset = this.loadData(NB_ITEMS);
     const gridContainerElm = document.querySelector<HTMLDivElement>(`.grid2`);
 
-    gridContainerElm.addEventListener('onslickergridcreated', this.handleOnSlickerGridCreated.bind(this));
     gridContainerElm.addEventListener('onbeforeexporttoexcel', () => console.log('onBeforeExportToExcel'));
     gridContainerElm.addEventListener('onafterexporttoexcel', () => console.log('onAfterExportToExcel'));
-    this.slickgridLwc = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
+    this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
   }
 
   dispose() {
-    this.slickgridLwc?.dispose();
+    this.sgb?.dispose();
   }
 
   initializeGrid() {
@@ -136,6 +157,7 @@ export class Example2 {
     this.gridOptions = {
       autoResize: {
         container: '.demo-container',
+        rightPadding: 10
       },
       enableExport: true,
       enableFiltering: true,
@@ -214,7 +236,7 @@ export class Example2 {
     } as Grouping);
 
     // you need to manually add the sort icon(s) in UI
-    this.gridObj.setSortColumns([{ columnId: 'duration', sortAsc: true }]);
+    this.sgb.instances.slickGrid.setSortColumns([{ columnId: 'duration', sortAsc: true }]);
     this.gridObj.invalidate(); // invalidate all rows and re-render
   }
 
@@ -308,34 +330,4 @@ export class Example2 {
     this.gridObj.setSortColumns(sortColumns);
     this.gridObj.invalidate(); // invalidate all rows and re-render
   }
-
-  handleOnSlickerGridCreated(event) {
-    this.slickerGridInstance = event && event.detail;
-    this.gridObj = this.slickerGridInstance && this.slickerGridInstance.slickGrid;
-    this.dataViewObj = this.slickerGridInstance && this.slickerGridInstance.dataView;
-    console.log('handleOnSlickerGridCreated', this.slickerGridInstance);
-  }
-
-  executeCommand(e, args) {
-    const columnDef = args.column;
-    const command = args.command;
-    const dataContext = args.dataContext;
-
-    switch (command) {
-      case 'command1':
-        alert('Command 1');
-        break;
-      case 'command2':
-        alert('Command 2');
-        break;
-      case 'help':
-        alert('Please help!');
-        break;
-      case 'delete-row':
-        if (confirm(`Do you really want to delete row (${args.row + 1}) with "${dataContext.title}"`)) {
-          this.slickerGridInstance.gridService.deleteItemById(dataContext.id);
-        }
-        break;
-    }
-  }
 }
diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example03.ts
@@ -12,11 +12,12 @@ import {
   SlickDataView,
   SlickDraggableGrouping,
   SlickGrid,
+  SlickerGridInstance,
   SortComparers,
   SortDirectionNumber,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
-import { Slicker } from '@slickgrid-universal/vanilla-bundle';
+import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import { ExampleGridOptions } from './example-grid-options';
 import '../salesforce-styles.scss';
@@ -52,12 +53,12 @@ interface ReportItem {
 export class Example3 {
   columnDefinitions: Column<ReportItem>[];
   gridOptions: GridOption;
-  dataset;
+  dataset: any[];
   dataViewObj: SlickDataView;
   gridObj: SlickGrid;
   commandQueue = [];
-  slickgridLwc;
-  slickerGridInstance;
+  sgb: SlickVanillaGridBundle;
+  slickerGridInstance: SlickerGridInstance;
   durationOrderByCount = false;
   draggableGroupingPlugin: SlickDraggableGrouping;
   selectedGroupingFields: Array<string | GroupingGetterFunction> = ['', '', ''];
@@ -72,11 +73,11 @@ export class Example3 {
     gridContainerElm.addEventListener('onvalidationerror', this.handleValidationError.bind(this));
     gridContainerElm.addEventListener('onitemdeleted', this.handleItemDeleted.bind(this));
     gridContainerElm.addEventListener('onslickergridcreated', this.handleOnSlickerGridCreated.bind(this));
-    this.slickgridLwc = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
+    this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, this.dataset);
   }
 
   dispose() {
-    this.slickgridLwc?.dispose();
+    this.sgb?.dispose();
   }
 
   initializeGrid() {
@@ -340,7 +341,7 @@ export class Example3 {
           const dataContext = args && args.dataContext;
           if (dataContext && dataContext.hasOwnProperty('completed')) {
             dataContext.completed = args.item.option;
-            this.slickgridLwc.gridService.updateItem(dataContext);
+            this.sgb.gridService.updateItem(dataContext);
           }
         },
       },
@@ -349,8 +350,8 @@ export class Example3 {
 
   changeGridToReadOnly() {
     // change a single grid options to make the grid non-editable (readonly)
-    this.slickgridLwc.gridOptions = { editable: false };
-    this.gridOptions = this.slickgridLwc.gridOptions;
+    this.sgb.gridOptions = { editable: false };
+    this.gridOptions = this.sgb.gridOptions;
   }
 
   loadData(count: number) {
@@ -378,8 +379,8 @@ export class Example3 {
       //   delete tmpArray[i].duration; // test with undefined properties
       // }
     }
-    if (this.slickgridLwc) {
-      this.slickgridLwc.dataset = tmpArray;
+    if (this.sgb) {
+      this.sgb.dataset = tmpArray;
     }
     return tmpArray;
   }

diff --git a/examples/webpack-demo-vanilla-bundle/src/examples/example04.ts b/examples/webpack-demo-vanilla-bundle/src/examples/example04.ts
@@ -12,7 +12,7 @@ import {
   SlickGrid,
 } from '@slickgrid-universal/common';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
-import { Slicker } from '@slickgrid-universal/vanilla-bundle';
+import { Slicker, SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 
 import { ExampleGridOptions } from './example-grid-options';
 
@@ -43,15 +43,14 @@ const customEditableInputFormatter = (row: number, cell: number, value: any, col
 export class Example4 {
   columnDefinitions: Column<ReportItem>[];
   gridOptions: GridOption;
-  dataset;
+  dataset: any[];
   dataViewObj: SlickDataView;
   gridObj: SlickGrid;
   commandQueue = [];
   frozenColumnCount = 2;
   frozenRowCount = 3;
   isFrozenBottom = false;
-  slickgridLwc;
-  slickerGridInstance;
+  sgb: SlickVanillaGridBundle;
 
   attached() {
     const dataset = this.initializeGrid();
@@ -60,12 +59,11 @@ export class Example4 {
     // gridContainerElm.addEventListener('onclick', handleOnClick);
     gridContainerElm.addEventListener('onvalidationerror', this.handleOnValidationError.bind(this));
     gridContainerElm.addEventListener('onitemdeleted', this.handleOnItemDeleted.bind(this));
-    gridContainerElm.addEventListener('onslickergridcreated', this.handleOnSlickerGridCreated.bind(this));
-    this.slickgridLwc = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, dataset);
+    this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, { ...ExampleGridOptions, ...this.gridOptions }, dataset);
   }
 
   dispose() {
-    this.slickgridLwc?.dispose();
+    this.sgb?.dispose();
   }
 
   initializeGrid() {
@@ -366,7 +364,7 @@ export class Example4 {
           const dataContext = args && args.dataContext;
           if (dataContext && dataContext.hasOwnProperty('completed')) {
             dataContext.completed = args.item.option;
-            this.slickgridLwc.gridService.updateItem(dataContext);
+            this.sgb.gridService.updateItem(dataContext);
           }
         },
       },
@@ -442,8 +440,8 @@ export class Example4 {
   }
 
   setFrozenColumns(frozenCols: number) {
-    this.slickerGridInstance.slickGrid.setOptions({ frozenColumn: frozenCols, alwaysShowVerticalScroll: false });
-    this.gridOptions = this.slickerGridInstance.slickGrid.getOptions();
+    this.sgb.slickGrid.setOptions({ frozenColumn: frozenCols, alwaysShowVerticalScroll: false });
+    this.gridOptions = this.sgb.slickGrid.getOptions();
   }
 
   /** toggle dynamically, through slickgrid "setOptions()" the top/bottom pinned location */
@@ -456,13 +454,6 @@ export class Example4 {
     }
   }
 
-  handleOnSlickerGridCreated(event) {
-    this.slickerGridInstance = event && event.detail;
-    this.gridObj = this.slickerGridInstance && this.slickerGridInstance.slickGrid;
-    this.dataViewObj = this.slickerGridInstance && this.slickerGridInstance.dataView;
-    console.log('handleOnSlickerGridCreated', this.slickerGridInstance);
-  }
-
   executeCommand(e, args) {
     const columnDef = args.column;
     const command = args.command;
@@ -480,7 +471,7 @@ export class Example4 {
         break;
       case 'delete-row':
         if (confirm(`Do you really want to delete row (${args.row + 1}) with "${dataContext.title}"`)) {
-          this.slickerGridInstance.gridService.deleteItemById(dataContext.id);
+          this.sgb.gridService.deleteItemById(dataContext.id);
         }
         break;
     }