From 61a1a31e4a0fe36edd319dedf1fe5cdbbb35ed5a Mon Sep 17 00:00:00 2001 From: Jeremy Date: Thu, 22 Mar 2018 23:10:37 -0400 Subject: [PATCH 1/2] feat(editor): add dependency injection support in editors (#33) * feat(editor): add dependency injection support in editors The current state supports editor dependencies through the Column.params property. By adding `Factory.of`, with aurelia's container, we are wrapping the creation of an editor in a function that already resolves injected dependencies at the time the grid is bound. `Factory.of` returns a function that passes any number of arguments to the editor. When Slickgrid calls `currentEditor = new useEditor({})`, the function created by `Factory.of` passes the slick grid arguments to the editor's constructor after the injected dependencies, so order matters. closes #18 * fix(editor): default to en when no locale if i18n is not configured it will return undefined. we want to return 'en' --- .../aurelia-slickgrid/aurelia-slickgrid.ts | 18 +++++++++++++++--- .../aurelia-slickgrid/editors/dateEditor.ts | 15 ++++----------- .../editors/multipleSelectEditor.ts | 19 +++++++------------ .../editors/singleSelectEditor.ts | 11 ++++------- .../filters/compoundDateFilter.ts | 11 +---------- 5 files changed, 31 insertions(+), 43 deletions(-) diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts b/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts index 21b5ac578..c276f52fa 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/aurelia-slickgrid.ts @@ -21,7 +21,7 @@ import 'slickgrid/plugins/slick.headermenu'; import 'slickgrid/plugins/slick.rowmovemanager'; import 'slickgrid/plugins/slick.rowselectionmodel'; -import { bindable, bindingMode, inject } from 'aurelia-framework'; +import { Container, Factory, bindable, bindingMode, inject } from 'aurelia-framework'; import { EventAggregator, Subscription } from 'aurelia-event-aggregator'; import { I18N } from 'aurelia-i18n'; import { GlobalGridOptions } from './global-grid-options'; @@ -56,7 +56,7 @@ const aureliaEventPrefix = 'asg'; const eventPrefix = 'sg'; // Aurelia doesn't support well TypeScript @autoinject in a Plugin so we'll do it the old fashion way -@inject(ControlAndPluginService, ExportService, Element, EventAggregator, FilterService, GraphqlService, GridEventService, GridExtraService, GridStateService, I18N, ResizerService, SortService) +@inject(ControlAndPluginService, ExportService, Element, EventAggregator, FilterService, GraphqlService, GridEventService, GridExtraService, GridStateService, I18N, ResizerService, SortService, Container) export class AureliaSlickgridCustomElement { private _dataset: any[]; private _eventHandler: any = new Slick.EventHandler(); @@ -91,7 +91,8 @@ export class AureliaSlickgridCustomElement { private gridStateService: GridStateService, private i18n: I18N, private resizer: ResizerService, - private sortService: SortService) { } + private sortService: SortService, + private container: Container) { } attached() { this.elm.dispatchEvent(new CustomEvent(`${eventPrefix}-on-before-grid-create`, { @@ -189,6 +190,17 @@ export class AureliaSlickgridCustomElement { height: `${binding.gridHeight}px`, width: `${binding.gridWidth}px` }; + + // Wrap each editor class in the Factory resolver so consumers of this library can use + // dependency injection. Aurelia will resolve all dependencies when we pass the container + // and allow slickgrid to pass its arguments to the editors constructor last + // when slickgrid creates the editor + // https://github.com/aurelia/dependency-injection/blob/master/src/resolvers.js + for (const c of this.columnDefinitions) { + if (c.editor) { + c.editor = Factory.of(c.editor).get(this.container); + } + } } datasetChanged(newValue: any[], oldValue: any[]) { diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/editors/dateEditor.ts b/aurelia-slickgrid/src/aurelia-slickgrid/editors/dateEditor.ts index 99c50e40d..3f0f56595 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/editors/dateEditor.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/editors/dateEditor.ts @@ -1,6 +1,7 @@ import { mapFlatpickrDateFormatWithFieldType } from './../services/utilities'; import { Column, Editor, FieldType, GridOption } from './../models/index'; import { I18N } from 'aurelia-i18n'; +import { inject } from 'aurelia-framework'; import * as flatpickr from 'flatpickr'; import * as $ from 'jquery'; @@ -8,12 +9,13 @@ import * as $ from 'jquery'; * An example of a date picker editor using Flatpickr * https://chmln.github.io/flatpickr */ +@inject(I18N) export class DateEditor implements Editor { $input: any; flatInstance: any; defaultDate: string; - constructor(private args: any) { + constructor(private i18n: I18N, private args: any) { this.init(); } @@ -22,7 +24,7 @@ export class DateEditor implements Editor { this.defaultDate = this.args.item[this.args.column.field] || null; const inputFormat = mapFlatpickrDateFormatWithFieldType(this.args.column.type || FieldType.dateIso); const outputFormat = mapFlatpickrDateFormatWithFieldType(this.args.column.outputType || FieldType.dateUtc); - let currentLocale = this.getCurrentLocale(this.args.column, gridOptions); + let currentLocale = this.i18n.getLocale() || 'en'; if (currentLocale.length > 2) { currentLocale = currentLocale.substring(0, 2); } @@ -45,15 +47,6 @@ export class DateEditor implements Editor { this.show(); } - getCurrentLocale(columnDef: Column, gridOptions: GridOption) { - const params = gridOptions.params || columnDef.params || {}; - if (params.i18n && params.i18n instanceof I18N) { - return params.i18n.getLocale(); - } - - return 'en'; - } - loadFlatpickrLocale(locale: string) { // change locale if needed, Flatpickr reference: https://chmln.github.io/flatpickr/localization/ if (locale !== 'en') { diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/editors/multipleSelectEditor.ts b/aurelia-slickgrid/src/aurelia-slickgrid/editors/multipleSelectEditor.ts index 03d3ba10c..40abf582e 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/editors/multipleSelectEditor.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/editors/multipleSelectEditor.ts @@ -1,3 +1,4 @@ +import { inject } from 'aurelia-framework'; import { I18N } from 'aurelia-i18n'; import { arraysEqual } from '../services/index'; import { @@ -12,6 +13,7 @@ import * as $ from 'jquery'; /** * Slickgrid editor class for multiple select lists */ +@inject(I18N) export class MultipleSelectEditor implements Editor { /** * The JQuery DOM element @@ -41,15 +43,10 @@ export class MultipleSelectEditor implements Editor { * The property name for labels in the collection */ labelName: string; - /** - * The i18n aurelia library - */ - private _i18n: I18N; - constructor(private args: any) { + constructor(private i18n: I18N, private args: any) { const gridOptions = this.args.grid.getOptions() as GridOption; const params = gridOptions.params || this.args.column.params || {}; - this._i18n = params.i18n; this.defaultOptions = { container: 'body', @@ -62,11 +59,9 @@ export class MultipleSelectEditor implements Editor { offsetLeft: 20 }; - if (this._i18n) { - this.defaultOptions.countSelected = this._i18n.tr('X_OF_Y_SELECTED'); - this.defaultOptions.allSelected = this._i18n.tr('ALL_SELECTED'); - this.defaultOptions.selectAllText = this._i18n.tr('SELECT_ALL'); - } + this.defaultOptions.countSelected = this.i18n.tr('X_OF_Y_SELECTED'); + this.defaultOptions.allSelected = this.i18n.tr('ALL_SELECTED'); + this.defaultOptions.selectAllText = this.i18n.tr('SELECT_ALL'); this.init(); } @@ -162,7 +157,7 @@ export class MultipleSelectEditor implements Editor { } const labelKey = (option.labelKey || option[this.labelName]) as string; - const textLabel = ((option.labelKey || isEnabledTranslate) && this._i18n && typeof this._i18n.tr === 'function') ? this._i18n.tr(labelKey || ' ') : labelKey; + const textLabel = (option.labelKey || isEnabledTranslate) ? this.i18n.tr(labelKey || ' ') : labelKey; options += ``; }); diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/editors/singleSelectEditor.ts b/aurelia-slickgrid/src/aurelia-slickgrid/editors/singleSelectEditor.ts index 4c0862e42..914cb9d6a 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/editors/singleSelectEditor.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/editors/singleSelectEditor.ts @@ -1,3 +1,4 @@ +import { inject } from 'aurelia-framework'; import { I18N } from 'aurelia-i18n'; import { Editor, @@ -12,6 +13,7 @@ import * as $ from 'jquery'; /** * Slickgrid editor class for single select lists */ +@inject(I18N) export class SingleSelectEditor implements Editor { /** * The JQuery DOM element @@ -41,15 +43,10 @@ export class SingleSelectEditor implements Editor { * The property name for labels in the collection */ labelName: string; - /** - * The i18n aurelia library - */ - private _i18n: I18N; - constructor(private args: any) { + constructor(private i18n: I18N, private args: any) { const gridOptions = this.args.grid.getOptions() as GridOption; const params = gridOptions.params || this.args.column.params || {}; - this._i18n = params.i18n; this.defaultOptions = { container: 'body', @@ -152,7 +149,7 @@ export class SingleSelectEditor implements Editor { '{ collection: [ { value: \'1\', label: \'One\' } ] } } }'); } const labelKey = (option.labelKey || option[this.labelName]) as string; - const textLabel = ((option.labelKey || isEnabledTranslate) && this._i18n && typeof this._i18n.tr === 'function') ? this._i18n.tr(labelKey || ' ') : labelKey; + const textLabel = (option.labelKey || isEnabledTranslate) ? this.i18n.tr(labelKey || ' ') : labelKey; options += ``; }); diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/filters/compoundDateFilter.ts b/aurelia-slickgrid/src/aurelia-slickgrid/filters/compoundDateFilter.ts index fb016ea92..3d924c56a 100644 --- a/aurelia-slickgrid/src/aurelia-slickgrid/filters/compoundDateFilter.ts +++ b/aurelia-slickgrid/src/aurelia-slickgrid/filters/compoundDateFilter.ts @@ -97,7 +97,7 @@ export class CompoundDateFilter implements Filter { private buildDatePickerInput(searchTerm: SearchTerm) { const inputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.type || FieldType.dateIso); const outputFormat = mapFlatpickrDateFormatWithFieldType(this.columnDef.outputType || this.columnDef.type || FieldType.dateUtc); - let currentLocale = this.getCurrentLocale(this.columnDef, this.gridOptions) || ''; + let currentLocale = this.i18n.getLocale() || 'en'; if (currentLocale.length > 2) { currentLocale = currentLocale.substring(0, 2); } @@ -211,15 +211,6 @@ export class CompoundDateFilter implements Filter { return $filterContainerElm; } - private getCurrentLocale(columnDef: Column, gridOptions: GridOption) { - const params = gridOptions.params || columnDef.params || {}; - if (params.i18n && params.i18n instanceof I18N) { - return params.i18n.getLocale(); - } - - return 'en'; - } - private loadFlatpickrLocale(locale: string) { // change locale if needed, Flatpickr reference: https://chmln.github.io/flatpickr/localization/ if (locale !== 'en') { From 554576c25e2ea932e2e500cbb6d89ab171e8a00f Mon Sep 17 00:00:00 2001 From: Jeremy Zagorski Date: Fri, 23 Mar 2018 09:37:17 -0400 Subject: [PATCH 2/2] docs(ISSUE_TEMPALTE): remove npm and node these dont pertain to the library --- ISSUE_TEMPLATE.md | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md index 1f5c2c67b..d84c884bc 100644 --- a/ISSUE_TEMPLATE.md +++ b/ISSUE_TEMPLATE.md @@ -16,20 +16,6 @@ major.minor.patch * **Operating System:** OSX 10.x|Linux (distro)|Windows [7|8|8.1|10] -* **Node Version:** -8.x.x - - -* **NPM Version:** -3.8.9 - - * **Bundler used (WebPack/RequireJS/SystemJS** JSPM 0.16.32 | webpack 2.1.0-beta.17