refactor(services): refactor singleton Services into transient

- also add new AureliaGridInstance

aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts

@@ -34,6 +34,7 @@ import {
   GridStateChange,
   GridStateType,
   Pagination,
+  AureliaGridInstance,
 } from './models/index';
 import {
   ControlAndPluginService,
@@ -191,6 +192,24 @@ export class AureliaSlickgridCustomElement {
     }
 
     this.gridStateService.init(this.grid, this.filterService, this.sortService);
+
+    // create the Aurelia Grid Instance with reference to all Services
+    const aureliaElementInstance: AureliaGridInstance = {
+      backendService: this.gridOptions && this.gridOptions.backendServiceApi && this.gridOptions.backendServiceApi.service,
+      exportService: this.exportService,
+      filterService: this.filterService,
+      gridEventService: this.gridEventService,
+      gridStateService: this.gridStateService,
+      gridService: this.gridExtraService,
+      groupingService: this.groupingAndColspanService,
+      pluginService: this.controlAndPluginService,
+      resizerService: this.resizer,
+      sortService: this.sortService,
+    };
+    this.elm.dispatchEvent(new CustomEvent(`${aureliaEventPrefix}-on-aurelia-grid-created`, {
+      bubbles: true,
+      detail: aureliaElementInstance
+    }));
   }
 
   detached() {

aurelia-slickgrid/src/aurelia-slickgrid/index.ts

@@ -3,11 +3,11 @@ import { AureliaSlickgridCustomElement } from './aurelia-slickgrid';
 import { SlickPaginationCustomElement } from './slick-pagination';
 import { SlickgridConfig } from './slickgrid-config';
 import { Filters, PLUGIN_NAME as FILTER_PLUGIN_NAME } from './filters/index';
+const SERVICE_NAME = 'AURELIA__SLICKGRID_SERVICES';
 
 // expose all public classes
 // aggregators, editors, formatters, services...
 export * from './models/index';
-export * from './services/index';
 export * from './formatters/index';
 export * from './grouping-formatters/index';
 export * from './sorters/index';
@@ -17,6 +17,26 @@ export * from './editors/index';
 export * from './filter-conditions/index';
 export * from './filters/index';
 
+export { GridExtraUtils, GraphqlService, GridOdataService } from './services/index';
+
+// import all Services separately
+import {
+  CollectionService,
+  ControlAndPluginService,
+  ExportService,
+  FilterService,
+  GraphqlService,
+  GridEventService,
+  GridExtraService,
+  GridExtraUtils,
+  GridStateService,
+  GridOdataService,
+  GroupingAndColspanService,
+  OdataService,
+  ResizerService,
+  SortService,
+} from './services/index';
+
 export function configure(aurelia: any, callback: any) {
   aurelia.globalResources(PLATFORM.moduleName('./aurelia-slickgrid'));
   aurelia.globalResources(PLATFORM.moduleName('./slick-pagination'));
@@ -29,6 +49,20 @@ export function configure(aurelia: any, callback: any) {
   aurelia.container.registerTransient(FILTER_PLUGIN_NAME, Filters.singleSelect);
   aurelia.container.registerTransient(FILTER_PLUGIN_NAME, Filters.select);
 
+  // register all Services as transient to support multiple grids
+  aurelia.container.registerTransient(SERVICE_NAME, ControlAndPluginService);
+  aurelia.container.registerTransient(SERVICE_NAME, ExportService);
+  aurelia.container.registerTransient(SERVICE_NAME, FilterService);
+  aurelia.container.registerTransient(SERVICE_NAME, GraphqlService);
+  aurelia.container.registerTransient(SERVICE_NAME, GridEventService);
+  aurelia.container.registerTransient(SERVICE_NAME, GridExtraService);
+  aurelia.container.registerTransient(SERVICE_NAME, GridStateService);
+  aurelia.container.registerTransient(SERVICE_NAME, GridOdataService);
+  aurelia.container.registerTransient(SERVICE_NAME, GroupingAndColspanService);
+  aurelia.container.registerTransient(SERVICE_NAME, OdataService);
+  aurelia.container.registerTransient(SERVICE_NAME, ResizerService);
+  aurelia.container.registerTransient(SERVICE_NAME, SortService);
+
   const config = new SlickgridConfig();
 
   aurelia.container.registerInstance(SlickgridConfig, config);

aurelia-slickgrid/src/aurelia-slickgrid/models/aureliaGridInstance.interface.ts

@@ -0,0 +1,25 @@
+import { BackendService } from './../models';
+import {
+  ControlAndPluginService,
+  ExportService,
+  FilterService,
+  GridExtraService,
+  GridEventService,
+  GridStateService,
+  GroupingAndColspanService,
+  ResizerService,
+  SortService
+} from '../services';
+
+export interface AureliaGridInstance {
+  backendService?: BackendService;
+  pluginService: ControlAndPluginService;
+  exportService: ExportService;
+  filterService: FilterService;
+  gridService: GridExtraService;
+  gridEventService: GridEventService;
+  gridStateService: GridStateService;
+  groupingService: GroupingAndColspanService;
+  resizerService: ResizerService;
+  sortService: SortService;
+}

aurelia-slickgrid/src/aurelia-slickgrid/models/index.ts

@@ -1,4 +1,5 @@
 export * from './aggregator.interface';
+export * from './aureliaGridInstance.interface';
 export * from './autoResizeOption.interface';
 export * from './backendService.interface';
 export * from './backendEventChanged.interface';

aurelia-slickgrid/src/aurelia-slickgrid/services/graphql.service.ts

@@ -1,5 +1,4 @@
 import { EventAggregator } from 'aurelia-event-aggregator';
-import { inject } from 'aurelia-framework';
 import { I18N } from 'aurelia-i18n';
 import { mapOperatorType, mapOperatorByFilterType, mapOperatorByFieldType } from './utilities';
 import {
@@ -34,7 +33,6 @@ const DEFAULT_FILTER_TYPING_DEBOUNCE = 750;
 const DEFAULT_ITEMS_PER_PAGE = 25;
 const DEFAULT_PAGE_SIZE = 20;
 
-@inject(I18N)
 export class GraphqlService implements BackendService {
   private _currentFilters: ColumnFilters | CurrentFilter[];
   private _currentPagination: CurrentPagination;
@@ -49,8 +47,6 @@ export class GraphqlService implements BackendService {
     offset: 0
   };
 
-  constructor(private i18n: I18N) { }
-
   /** Getter for the Grid Options pulled through the Grid Object */
   private get _gridOptions(): GridOption {
     return (this._grid && this._grid.getOptions) ? this._grid.getOptions() : {};
@@ -134,7 +130,7 @@ export class GraphqlService implements BackendService {
     }
     if (this.options.addLocaleIntoQuery) {
       // first: 20, ... locale: "en-CA"
-      datasetFilters.locale = this.i18n.getLocale() || 'en';
+      datasetFilters.locale = (this._gridOptions.params && this._gridOptions.params.i18n && this._gridOptions.params.i18n.getLocale()) || 'en';
     }
     if (this.options.extraQueryArguments) {
       // first: 20, ... userId: 123

aurelia-slickgrid/src/aurelia-slickgrid/services/grid-odata.service.ts

@@ -37,6 +37,7 @@ export class GridOdataService implements BackendService {
   private _currentPagination: CurrentPagination;
   private _currentSorters: CurrentSorter[];
   private _grid: any;
+  odataService: OdataService;
   options: OdataOption;
   pagination: Pagination | undefined;
   defaultOptions: OdataOption = {
@@ -45,7 +46,9 @@ export class GridOdataService implements BackendService {
     caseType: CaseType.pascalCase
   };
 
-  constructor(private odataService: OdataService) { }
+  constructor() {
+    this.odataService = new OdataService();
+  }
 
   /** Getter for the Grid Options pulled through the Grid Object */
   private get _gridOptions(): GridOption {

aurelia-slickgrid/src/examples/slickgrid/example10.html

@@ -24,7 +24,13 @@ <h2>${title}</h2>
     </div>
   </div>
 
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" dataview.bind="dataviewObj" grid.bind="gridObj"
-    grid-options.bind="gridOptions" dataset.bind="dataset">
+  <aurelia-slickgrid
+    grid-id="grid1"
+    column-definitions.bind="columnDefinitions"
+    dataview.bind="dataviewObj"
+    grid.bind="gridObj"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset"
+    asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
   </aurelia-slickgrid>
 </template>

aurelia-slickgrid/src/examples/slickgrid/example10.ts

@@ -1,5 +1,5 @@
 import { autoinject, bindable } from 'aurelia-framework';
-import { Column, FieldType, Formatter, Formatters, GridExtraService, GridExtraUtils, GridOption } from '../../aurelia-slickgrid';
+import { AureliaGridInstance, Column, FieldType, Formatter, Formatters, GridExtraUtils, GridOption } from '../../aurelia-slickgrid';
 
 @autoinject()
 export class Example2 {
@@ -12,14 +12,15 @@ export class Example2 {
     </ul>
   `;
 
+  aureliaGrid: AureliaGridInstance;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
   dataviewObj: any;
   isMultiSelect = true;
   selectedObjects: any[] = [];
 
-  constructor(private gridExtraService: GridExtraService) {
+  constructor() {
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
   }
@@ -35,6 +36,10 @@ export class Example2 {
     this.gridObj.onSelectedRowsChanged.unsubscribe();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   /* Define grid Options and Columns */
   defineGrid() {
     this.columnDefinitions = [
@@ -100,7 +105,7 @@ export class Example2 {
       enableCellNavigation: !isMultiSelect,
       enableCheckboxSelector: isMultiSelect
     }); // change the grid option dynamically
-    this.gridExtraService.setSelectedRows([]);
+    this.aureliaGrid.gridService.setSelectedRows([]);
 
     return true;
   }

aurelia-slickgrid/src/examples/slickgrid/example11.html

@@ -11,6 +11,11 @@ <h2>${title}</h2>
     <hr/>
   </div>
 
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset">
+  <aurelia-slickgrid
+    grid-id="grid1"
+    column-definitions.bind="columnDefinitions"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset"
+    asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
   </aurelia-slickgrid>
-</template>
+</template>

aurelia-slickgrid/src/examples/slickgrid/example11.ts

@@ -1,5 +1,15 @@
 import { autoinject } from 'aurelia-framework';
-import { Column, Editors, FieldType, Formatter, Formatters, GridExtraService, GridExtraUtils, GridOption, OnEventArgs, ResizerService } from '../../aurelia-slickgrid';
+import {
+  AureliaGridInstance,
+  Column,
+  Editors,
+  FieldType,
+  Formatter,
+  Formatters,
+  GridExtraUtils,
+  GridOption,
+  OnEventArgs
+} from '../../aurelia-slickgrid';
 
 @autoinject()
 export class Example11 {
@@ -20,12 +30,13 @@ export class Example11 {
   </ul>
   `;
 
+  aureliaGrid: AureliaGridInstance;
   columnDefinitions: Column[];
   gridOptions: GridOption;
   dataset: any[];
   updatedObject: any;
 
-  constructor(private gridExtraService: GridExtraService, private resizer: ResizerService) {
+  constructor() {
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
   }
@@ -35,6 +46,10 @@ export class Example11 {
     this.getData();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   /* Define grid Options and Columns */
   defineGrid() {
     this.columnDefinitions = [
@@ -105,16 +120,16 @@ export class Example11 {
       finish: new Date(randomYear, (randomMonth + 2), randomDay),
       effortDriven: true
     };
-    this.gridExtraService.addItemToDatagrid(newItem);
+    this.aureliaGrid.gridService.addItemToDatagrid(newItem);
   }
 
   highlighFifthRow() {
-    this.gridExtraService.highlightRow(4, 1500);
+    this.aureliaGrid.gridService.highlightRow(4, 1500);
   }
 
   updateSecondItem() {
-    const firstItem = this.gridExtraService.getDataItemByRowNumber(1);
+    const firstItem = this.aureliaGrid.gridService.getDataItemByRowNumber(1);
     firstItem.duration = Math.round(Math.random() * 100);
-    this.gridExtraService.updateDataGridItem(firstItem);
+    this.aureliaGrid.gridService.updateDataGridItem(firstItem);
   }
 }

aurelia-slickgrid/src/examples/slickgrid/example12.html

@@ -26,6 +26,11 @@ <h2>${title}</h2>
       </button>
     </span>
   </div>
-  <aurelia-slickgrid grid-id="grid1" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions" dataset.bind="dataset">
+  <aurelia-slickgrid
+    grid-id="grid12"
+    column-definitions.bind="columnDefinitions"
+    grid-options.bind="gridOptions"
+    dataset.bind="dataset"
+    asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
   </aurelia-slickgrid>
 </template>

aurelia-slickgrid/src/examples/slickgrid/example12.ts

@@ -1,6 +1,16 @@
 import { autoinject } from 'aurelia-framework';
 import { I18N } from 'aurelia-i18n';
-import { Column, DelimiterType, ExportService, FieldType, FileType, FilterType, Formatter, Formatters, GridOption } from '../../aurelia-slickgrid';
+import {
+  AureliaGridInstance,
+  Column,
+  DelimiterType,
+  FieldType,
+  FileType,
+  FilterType,
+  Formatter,
+  Formatters,
+  GridOption
+} from '../../aurelia-slickgrid';
 
 @autoinject()
 export class Example12 {
@@ -32,13 +42,14 @@ export class Example12 {
       </ol>
     `;
 
+  aureliaGrid: AureliaGridInstance;
   gridOptions: GridOption;
   columnDefinitions: Column[];
   dataset: any[];
   selectedLanguage: string;
   duplicateTitleHeaderCount = 1;
 
-  constructor(private exportService: ExportService, private i18n: I18N) {
+  constructor(private i18n: I18N) {
     // define the grid options & columns and then create the grid itself
     this.defineGrid();
     this.selectedLanguage = this.i18n.getLocale();
@@ -49,6 +60,10 @@ export class Example12 {
     this.getData();
   }
 
+  aureliaGridReady(aureliaGrid: AureliaGridInstance) {
+    this.aureliaGrid = aureliaGrid;
+  }
+
   /* Define grid Options and Columns */
   defineGrid() {
     this.columnDefinitions = [
@@ -145,7 +160,7 @@ export class Example12 {
   }
 
   exportToFile(type = 'csv') {
-    this.exportService.exportToFile({
+    this.aureliaGrid.exportService.exportToFile({
       delimiter: (type === 'csv') ? DelimiterType.comma : DelimiterType.tab,
       filename: 'myExport',
       format: (type === 'csv') ? FileType.csv : FileType.txt

aurelia-slickgrid/src/examples/slickgrid/example3.html

@@ -33,8 +33,14 @@ <h2>${title}</h2>
   </div>
 
   <div id="grid-container" class="col-sm-12">
-    <aurelia-slickgrid grid-id="grid1" dataview.bind="dataview" grid.bind="gridObj" column-definitions.bind="columnDefinitions"
-      grid-options.bind="gridOptions" dataset.bind="dataset">
+    <aurelia-slickgrid
+      grid-id="grid1"
+      dataview.bind="dataview"
+      grid.bind="gridObj"
+      column-definitions.bind="columnDefinitions"
+      grid-options.bind="gridOptions"
+      dataset.bind="dataset"
+      asg-on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
     </aurelia-slickgrid>
   </div>
 </template>