container to simulate a row detail DOM element
@@ -16,10 +20,8 @@ describe('aureliaUtilService', () => {
div.innerHTML = `
some text
`;
document.body.appendChild(div);
- container = new Container();
- viewResources = new ViewResources();
- viewCompiler = new ViewCompiler(new BindingLanguage(), viewResources);
- service = new AureliaUtilService(container, viewCompiler, viewResources);
+ au = new Aurelia();
+ service = new AureliaUtilService(au);
});
afterEach(() => {
@@ -32,80 +34,34 @@ describe('aureliaUtilService', () => {
});
describe('createAureliaViewModelAddToSlot method', () => {
- it('should return null when html dom element is not provided', () => {
- const mockCompilerCreate = { bind: jest.fn(), appendNodesTo: jest.fn() };
- jest.spyOn(viewCompiler, 'compile').mockReturnValue({ create: () => mockCompilerCreate as any } as any);
-
- const output = service.createAureliaViewModelAddToSlot('./template/path', { firstName: 'John' }, undefined);
-
- expect(output).toBeNull();
- });
-
- it('should create an Aurelia ViewModel and add it to a View Slot', () => {
- const domElm = document.getElementById(DOM_ELEMENT_ID) as HTMLElement;
- const mockCompilerCreate = { bind: jest.fn(), appendNodesTo: jest.fn() };
- const spyCompiler = jest.spyOn(viewCompiler, 'compile').mockReturnValue({ create: () => mockCompilerCreate as any } as any);
- const spyView = jest.spyOn(mockCompilerCreate, 'bind').mockReturnValue({ create: jest.fn() });
-
- const output = service.createAureliaViewModelAddToSlot('./template/path', { firstName: 'John' }, domElm, true);
-
- expect(spyCompiler).toHaveBeenCalled();
- expect(spyView).toHaveBeenCalled();
- expect(domElm.innerHTML).toBe('');
- expect(output).toEqual({ bindings: { template: './template/path', firstName: 'John', viewModelRef: {} }, view: mockCompilerCreate, viewSlot: expect.anything() });
- });
-
- it('should create an Aurelia ViewModel and add it to a View Slot even when template is not provided', () => {
- const domElm = document.getElementById(DOM_ELEMENT_ID) as HTMLElement;
- const mockCompilerCreate = { bind: jest.fn(), appendNodesTo: jest.fn() };
- const spyCompiler = jest.spyOn(viewCompiler, 'compile').mockReturnValue({ create: () => mockCompilerCreate as any } as any);
- const spyView = jest.spyOn(mockCompilerCreate, 'bind').mockReturnValue({ create: jest.fn() });
-
- const output = service.createAureliaViewModelAddToSlot(undefined as any, { firstName: 'John' }, domElm, true);
-
- expect(spyCompiler).toHaveBeenCalled();
- expect(spyView).toHaveBeenCalled();
- expect(domElm.innerHTML).toBe('');
- expect(output).toEqual({ bindings: { template: '', firstName: 'John', viewModelRef: {} }, view: mockCompilerCreate, viewSlot: expect.anything() });
- });
- });
-
- describe('createAureliaViewAddToSlot method', () => {
- it('should return null when html dom element is not provided', () => {
- const mockCompilerCreate = { bind: jest.fn(), appendNodesTo: jest.fn() };
- jest.spyOn(viewCompiler, 'compile').mockReturnValue({ create: () => mockCompilerCreate as any } as any);
-
- const output = service.createAureliaViewAddToSlot('./template/path', undefined);
+ it('should return null when html dom element is not provided', async () => {
+ const output = await service.createAureliaViewModelAddToSlot(ExampleLoader, { model: { firstName: 'John' } } as ViewModelBindableInputData, undefined);
expect(output).toBeNull();
});
- it('should create an Aurelia ViewModel and add it to a View Slot', () => {
+ it('should create an Aurelia ViewModel and add it to a View Slot with only model attribute when nothing else is provided', async () => {
+ const controllerMock = { viewModel: {} };
const domElm = document.getElementById(DOM_ELEMENT_ID) as HTMLElement;
- const mockCompilerCreate = { bind: jest.fn(), appendNodesTo: jest.fn() };
- const spyCompiler = jest.spyOn(viewCompiler, 'compile').mockReturnValue({ create: () => mockCompilerCreate as any } as any);
- const spyView = jest.spyOn(mockCompilerCreate, 'bind').mockReturnValue({ create: jest.fn() });
+ const enhanceSpy = jest.spyOn(au, 'enhance').mockResolvedValue(controllerMock as any);
- const output = service.createAureliaViewAddToSlot('./template/path', domElm, true);
+ const output = await service.createAureliaViewModelAddToSlot(ExampleLoader, { model: { firstName: 'John' } } as ViewModelBindableInputData, domElm);
- expect(spyCompiler).toHaveBeenCalled();
- expect(spyView).toHaveBeenCalled();
- expect(domElm.innerHTML).toBe('');
- expect(output).toEqual({ bindings: { template: './template/path', viewModelRef: {} }, view: mockCompilerCreate, viewSlot: expect.anything() });
+ expect(enhanceSpy).toHaveBeenCalled();
+ expect(domElm.innerHTML).toBe('
');
+ expect(output).toEqual({ controller: controllerMock});
});
- it('should create an Aurelia ViewModel and add it to a View Slot even when template is not provided', () => {
+ it('should create an Aurelia ViewModel and add it to a View Slot with all bindable attributes when all are provided', async () => {
+ const controllerMock = { viewModel: {} };
const domElm = document.getElementById(DOM_ELEMENT_ID) as HTMLElement;
- const mockCompilerCreate = { bind: jest.fn(), appendNodesTo: jest.fn() };
- const spyCompiler = jest.spyOn(viewCompiler, 'compile').mockReturnValue({ create: () => mockCompilerCreate as any } as any);
- const spyView = jest.spyOn(mockCompilerCreate, 'bind').mockReturnValue({ create: jest.fn() });
+ const enhanceSpy = jest.spyOn(au, 'enhance').mockResolvedValue(controllerMock as any);
- const output = service.createAureliaViewAddToSlot(undefined as any, domElm, true);
+ const output = await service.createAureliaViewModelAddToSlot(ExampleLoader, { model: { firstName: 'John', }, addon: {}, grid: {}, dataView: {}, parent: {} } as ViewModelBindableInputData, domElm);
- expect(spyCompiler).toHaveBeenCalled();
- expect(spyView).toHaveBeenCalled();
- expect(domElm.innerHTML).toBe('');
- expect(output).toEqual({ bindings: { template: '', viewModelRef: {} }, view: mockCompilerCreate, viewSlot: expect.anything() });
+ expect(enhanceSpy).toHaveBeenCalled();
+ expect(domElm.innerHTML).toBe('
');
+ expect(output).toEqual({ controller: controllerMock});
});
});
});
diff --git a/src/aurelia-slickgrid/services/__tests__/container.service.spec.ts b/src/aurelia-slickgrid/services/__tests__/container.service.spec.ts
index 135deb71f..04aaf50d1 100644
--- a/src/aurelia-slickgrid/services/__tests__/container.service.spec.ts
+++ b/src/aurelia-slickgrid/services/__tests__/container.service.spec.ts
@@ -1,9 +1,9 @@
-import { Container } from 'aurelia-framework';
+import { DI } from 'aurelia';
import { SharedService } from '@slickgrid-universal/common';
import { ContainerService } from '../container.service';
describe('Container Service', () => {
- const container = new Container();
+ const container = DI.createContainer();
let service: ContainerService;
let sharedService: SharedService;
@@ -17,9 +17,10 @@ describe('Container Service', () => {
expect(service.get('SharedService')).toEqual(sharedService);
});
- it('should register an instance and expect to null when calling the get method with an invalid name', () => {
+ it('should register an instance and expect to return null when calling the get method with an invalid name', () => {
service.registerInstance('SharedService', sharedService);
const output = service.get('DifferentName');
expect(output).toBeNull();
+ // expect(() => service.get('DifferentName')).toThrow();
});
});
diff --git a/src/aurelia-slickgrid/services/__tests__/translater.service.spec.ts b/src/aurelia-slickgrid/services/__tests__/translater.service.spec.ts
index b15b0197b..64574f0a5 100644
--- a/src/aurelia-slickgrid/services/__tests__/translater.service.spec.ts
+++ b/src/aurelia-slickgrid/services/__tests__/translater.service.spec.ts
@@ -1,32 +1,36 @@
import 'jest-extended';
-import { I18N } from 'aurelia-i18n';
-import { EventAggregator } from 'aurelia-event-aggregator';
-import { BindingSignaler } from 'aurelia-templating-resources';
+import { EventAggregator } from 'aurelia';
+import { MockSignaler } from '@aurelia/testing';
+import { I18N, I18nInitOptions, I18nService } from '@aurelia/i18n';
+import i18next from 'i18next';
import { TranslaterService } from '../translater.service';
describe('Translater Service', () => {
- let ea: EventAggregator;
let i18n: I18N;
let service: TranslaterService;
+ const defaultLng = 'en';
- beforeEach(() => {
- ea = new EventAggregator();
- i18n = new I18N(ea, new BindingSignaler());
- service = new TranslaterService(i18n);
-
- i18n.setup({
- lng: 'en',
- fallbackLng: 'en',
+ beforeEach(async () => {
+ const options: I18nInitOptions = {
+ lng: defaultLng,
+ fallbackLng: defaultLng,
+ debug: false,
+ plugins: [],
+ skipTranslationOnMissingKey: false,
resources: {
en: { translation: { ITEMS: 'items', OF: 'of', } },
fr: { translation: { ITEMS: 'éléments', OF: 'de', } }
- },
- });
+ }
+ };
+ i18n = new I18nService({ i18next }, options, new EventAggregator(), new MockSignaler());
+ await i18n.initPromise;
+ service = new TranslaterService(i18n);
});
- it('should create the service', () => {
+ it('should create the service with default language', () => {
expect(service).toBeTruthy();
+ expect(service.getCurrentLanguage()).toBe(defaultLng);
});
it('should call "use" method and expect "getCurrentLanguage" to be equal', async () => {
diff --git a/src/aurelia-slickgrid/services/__tests__/utilities.spec.ts b/src/aurelia-slickgrid/services/__tests__/utilities.spec.ts
index 4f9b7a55c..79a4d74e9 100644
--- a/src/aurelia-slickgrid/services/__tests__/utilities.spec.ts
+++ b/src/aurelia-slickgrid/services/__tests__/utilities.spec.ts
@@ -1,4 +1,4 @@
-import { EventAggregator, Subscription } from 'aurelia-event-aggregator';
+import { EventAggregator, IDisposable } from 'aurelia';
import { disposeAllSubscriptions } from '../utilities';
describe('Service/Utilies', () => {
@@ -9,12 +9,25 @@ describe('Service/Utilies', () => {
});
it('should return unique values when input array has duplicate objects', () => {
- const subscriptions: Subscription[] = [];
+ const subscriptions: IDisposable[] = [];
const ea1 = new EventAggregator();
const ea2 = new EventAggregator();
subscriptions.push(ea1.subscribe('test', () => { }), ea2.subscribe('test', () => { }));
const output = disposeAllSubscriptions(subscriptions);
expect(output).toHaveLength(0);
});
+
+ it('should be able to unsubscribe all PubSub events or anything that has an unsubscribe method', () => {
+ const mockUnsubscribe1 = jest.fn();
+ const mockUnsubscribe2 = jest.fn();
+ const mockSubscription1 = { unsubscribe: mockUnsubscribe1 };
+ const mockSubscription2 = { unsubscribe: mockUnsubscribe2 };
+ const mockSubscriptions = [mockSubscription1, mockSubscription2];
+
+ disposeAllSubscriptions(mockSubscriptions);
+
+ expect(mockUnsubscribe1).toHaveBeenCalledTimes(1);
+ expect(mockUnsubscribe2).toHaveBeenCalledTimes(1);
+ });
});
});
diff --git a/src/aurelia-slickgrid/services/aureliaUtil.service.ts b/src/aurelia-slickgrid/services/aureliaUtil.service.ts
index f6c0ca306..baa5679fb 100644
--- a/src/aurelia-slickgrid/services/aureliaUtil.service.ts
+++ b/src/aurelia-slickgrid/services/aureliaUtil.service.ts
@@ -1,74 +1,23 @@
-import {
- inject,
- Container,
- createOverrideContext,
- singleton,
- ViewCompiler,
- ViewResources,
- ViewSlot,
-} from 'aurelia-framework';
-import { AureliaViewOutput } from '../models/index';
+import { AureliaViewOutput, ViewModelBindableInputData } from '../models/index';
+import { Constructable, CustomElement, IAurelia, singleton } from 'aurelia';
-@singleton(true)
-@inject(
- Container,
- ViewCompiler,
- ViewResources
-)
+@singleton()
export class AureliaUtilService {
- constructor(
- private readonly container: Container,
- private readonly viewCompiler: ViewCompiler,
- private readonly viewResources: ViewResources,
- ) { }
+ constructor(@IAurelia private readonly au: IAurelia) { }
- createAureliaViewModelAddToSlot(templateUrl: string, bindableData: any, targetElement?: HTMLElement | Element, clearTargetContent = false): AureliaViewOutput | null {
- const viewFactory = this.viewCompiler.compile('
', this.viewResources);
-
- if (targetElement) {
- if (clearTargetContent && targetElement.innerHTML) {
- targetElement.innerHTML = '';
- }
-
- // create some bindings including the template & other bindable data
- const bindings: any = { template: (templateUrl || ''), ...bindableData, viewModelRef: {} };
-
- // Creates a view
- const view = viewFactory.create(this.container);
- view.bind(bindings, createOverrideContext(bindings));
-
- // Add the view to the slot
- const viewSlot = new ViewSlot(targetElement, true);
- if (viewSlot && viewSlot.add) {
- viewSlot.add(view);
- }
- return { bindings, view, viewSlot };
+ async createAureliaViewModelAddToSlot(viewModel: Constructable, bindableData?: ViewModelBindableInputData, targetElement?: HTMLElement | Element): Promise
{
+ if (!targetElement) {
+ return null;
}
- return null;
- }
-
- createAureliaViewAddToSlot(templateUrl: string, targetElement?: HTMLElement | Element, clearTargetContent = false): AureliaViewOutput | null {
- const viewFactory = this.viewCompiler.compile('', this.viewResources);
- if (targetElement) {
- if (clearTargetContent && targetElement.innerHTML) {
- targetElement.innerHTML = '';
- }
+ const def = CustomElement.getDefinition(viewModel);
+ const addonBindable = bindableData?.addon ? 'addon.bind="bindableData.addon"' : '';
+ const gridBindable = bindableData?.grid ? 'grid.bind="bindableData.grid"' : '';
+ const dataViewBindable = bindableData?.dataView ? 'data-view.bind="bindableData.dataView"' : '';
+ const parentBindable = bindableData?.parent ? 'parent.bind="bindableData.parent"' : '';
- // create some bindings including the template & other bindable data
- const bindings = { template: (templateUrl || ''), viewModelRef: {} };
+ targetElement.innerHTML = `<${def.name} model.bind="bindableData.model" ${addonBindable} ${gridBindable} ${dataViewBindable} ${parentBindable}>`.trim();
- // Creates a view
- const view = viewFactory.create(this.container);
- view.bind(bindings, createOverrideContext(bindings));
-
- // Add the view to the slot
- const viewSlot = new ViewSlot(targetElement, true);
- if (viewSlot && viewSlot.add) {
- viewSlot.add(view);
- }
- return { bindings, view, viewSlot };
- }
- return null;
+ return { controller: await this.au.enhance({ host: targetElement, component: { bindableData } }) };
}
}
diff --git a/src/aurelia-slickgrid/services/container.service.ts b/src/aurelia-slickgrid/services/container.service.ts
index 7ded04991..20cd348c9 100644
--- a/src/aurelia-slickgrid/services/container.service.ts
+++ b/src/aurelia-slickgrid/services/container.service.ts
@@ -1,20 +1,19 @@
import { ContainerService as UniversalContainerService } from '@slickgrid-universal/common';
-import { Container, inject, singleton } from 'aurelia-framework';
+import { IContainer, Registration, transient } from 'aurelia';
-@inject(Container)
-@singleton(true)
+@transient()
export class ContainerService implements UniversalContainerService {
- constructor(private readonly container: Container) { }
+ constructor(@IContainer private readonly container: IContainer) { }
get(key: string): T | null {
- const dependency = this.container.get(key);
- if (typeof key === 'string' && dependency === key) {
+ try {
+ return this.container.get(key) as T;
+ } catch (_) {
return null;
}
- return dependency;
}
registerInstance(key: string, instance: any) {
- this.container.registerInstance(key, instance);
+ this.container.register(Registration.instance(key, instance));
}
}
diff --git a/src/aurelia-slickgrid/services/translater.service.ts b/src/aurelia-slickgrid/services/translater.service.ts
index ddffae4bf..a7140685b 100644
--- a/src/aurelia-slickgrid/services/translater.service.ts
+++ b/src/aurelia-slickgrid/services/translater.service.ts
@@ -1,14 +1,12 @@
import { TranslaterService as UniversalTranslateService } from '@slickgrid-universal/common';
-import { inject } from 'aurelia-framework';
-import { I18N } from 'aurelia-i18n';
+import { I18N } from '@aurelia/i18n';
/**
* This is a Translate Service Wrapper for Slickgrid-Universal monorepo lib to work properly,
* it must implement Slickgrid-Universal TranslaterService interface to work properly
*/
-@inject(I18N)
export class TranslaterService implements UniversalTranslateService {
- constructor(private readonly i18n: I18N) { }
+ constructor(@I18N private readonly i18n: I18N) { }
/**
* Method to return the current language used by the App
diff --git a/src/aurelia-slickgrid/services/utilities.ts b/src/aurelia-slickgrid/services/utilities.ts
index a267e09ea..0269af6d1 100644
--- a/src/aurelia-slickgrid/services/utilities.ts
+++ b/src/aurelia-slickgrid/services/utilities.ts
@@ -1,4 +1,4 @@
-import { Subscription } from 'aurelia-event-aggregator';
+import { IDisposable } from 'aurelia';
import { EventSubscription } from '@slickgrid-universal/common';
/**
@@ -6,13 +6,13 @@ import { EventSubscription } from '@slickgrid-universal/common';
* @param subscriptions
* @return empty array
*/
-export function disposeAllSubscriptions(subscriptions: Array): Array {
+export function disposeAllSubscriptions(subscriptions: Array): Array {
if (Array.isArray(subscriptions)) {
while (subscriptions.length > 0) {
- const subscription = subscriptions.pop() as EventSubscription | Subscription;
- if ((subscription as Subscription)?.dispose) {
- (subscription as Subscription).dispose();
- } else if ((subscription as EventSubscription)?.unsubscribe) {
+ const subscription = subscriptions.pop();
+ if (subscription?.dispose) {
+ subscription.dispose();
+ } else if (typeof (subscription as EventSubscription)?.unsubscribe === 'function') {
(subscription as EventSubscription).unsubscribe!();
}
}
diff --git a/src/aurelia-slickgrid/tsconfig.build.json b/src/aurelia-slickgrid/tsconfig.build.json
index 2a7891694..8b1374e15 100644
--- a/src/aurelia-slickgrid/tsconfig.build.json
+++ b/src/aurelia-slickgrid/tsconfig.build.json
@@ -1,31 +1,5 @@
{
- "compilerOptions": {
- "module": "esnext",
- "moduleResolution": "node",
- "target": "es2017",
- "lib": [
- "es2017",
- "dom"
- ],
- "typeRoots": [
- "../typings",
- "../../node_modules/@types"
- ],
- "outDir": "dist/amd",
- "noImplicitAny": true,
- "noUnusedLocals": false,
- "noUnusedParameters": false,
- "noImplicitReturns": true,
- "skipLibCheck": true,
- "strictNullChecks": true,
- "declaration": true,
- "forceConsistentCasingInFileNames": true,
- "experimentalDecorators": true,
- "noEmitHelpers": false,
- "strict": true,
- "stripInternal": true,
- "sourceMap": true
- },
+ "extends": "../../tsconfig.json",
"exclude": [
".vscode",
"src/aurelia_project",
@@ -35,8 +9,5 @@
"**/*.spec.ts",
"**/*.scss"
],
- "include": [
- "../typings",
- "**/*"
- ]
+ "include": ["../typings", "**/*"]
}
diff --git a/src/aurelia-slickgrid/value-converters/asgDateFormat.ts b/src/aurelia-slickgrid/value-converters/asgDateFormat.ts
index 16d0b8820..96829a25a 100644
--- a/src/aurelia-slickgrid/value-converters/asgDateFormat.ts
+++ b/src/aurelia-slickgrid/value-converters/asgDateFormat.ts
@@ -1,4 +1,4 @@
-import * as moment from 'moment-mini';
+import moment from 'moment-mini';
export class AsgDateFormatValueConverter {
toView(value: any, format: string): string {
diff --git a/src/examples/resources/index.ts b/src/examples/resources/index.ts
deleted file mode 100644
index fbabd97ff..000000000
--- a/src/examples/resources/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { FrameworkConfiguration } from 'aurelia-framework';
-import { PLATFORM } from 'aurelia-pal';
-
-export function configure(config: FrameworkConfiguration) {
- config.globalResources([
- PLATFORM.moduleName('./value-converters/date-format'),
- PLATFORM.moduleName('./value-converters/decimal'),
- PLATFORM.moduleName('./value-converters/stringify')
- ]);
-}
diff --git a/src/examples/resources/value-converters/date-format.ts b/src/examples/resources/value-converters/date-format.ts
index 7a1a7bf6d..14223f925 100644
--- a/src/examples/resources/value-converters/date-format.ts
+++ b/src/examples/resources/value-converters/date-format.ts
@@ -1,4 +1,4 @@
-import * as moment from 'moment-mini';
+import moment from 'moment-mini';
export class DateFormatValueConverter {
toView(value: any, format: string): string {
diff --git a/src/examples/slickgrid/custom-aureliaViewModelEditor.ts b/src/examples/slickgrid/custom-aureliaViewModelEditor.ts
index 13ecacab9..3689e528a 100644
--- a/src/examples/slickgrid/custom-aureliaViewModelEditor.ts
+++ b/src/examples/slickgrid/custom-aureliaViewModelEditor.ts
@@ -1,4 +1,5 @@
-import { View, ViewSlot } from 'aurelia-framework';
+import { ICustomElementController } from '@aurelia/runtime-html';
+import { IBindingContext } from '@aurelia/runtime';
import {
AureliaUtilService,
@@ -8,18 +9,17 @@ import {
EditorValidationResult,
GridOption,
SlickGrid,
+ ViewModelBindableInputData,
} from '../../aurelia-slickgrid';
/*
- * An example of a 'detached' editor.
+ * An example of a 'detaching' editor.
* KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
*/
export class CustomAureliaViewModelEditor implements Editor {
/** Aurelia ViewModel Reference */
aureliaViewModel: any;
- aureliaCustomElementInstance: any;
-
/** default item Id */
defaultId?: string;
@@ -30,6 +30,8 @@ export class CustomAureliaViewModelEditor implements Editor {
/** SlickGrid grid object */
grid: SlickGrid;
+ vm?: { controller?: ICustomElementController } | null;
+ elmBindingContext?: IBindingContext;
constructor(private args: any) {
this.grid = args && args.grid;
@@ -74,27 +76,22 @@ export class CustomAureliaViewModelEditor implements Editor {
return this.columnEditor.validator || this.columnDef.validator;
}
- init() {
- if (!this.columnEditor || !this.columnEditor.params || !this.columnEditor.params.templateUrl) {
+ async init() {
+ if (!this.columnEditor?.params?.viewModel) {
throw new Error(`[Aurelia-Slickgrid] For the Editors.aureliaComponent to work properly, you need to fill in the "templateUrl" property of your Custom Element Editor.
- Example: this.columnDefs = [{ id: 'title', field: 'title', editor: { templateUrl: PLATFORM.moduleName('my-viewmodel'), collection: [...] },`);
- }
- if (this.columnEditor && this.columnEditor.params && this.columnEditor.params.templateUrl) {
- this.aureliaViewModel = (this.columnEditor.params.aureliaUtilService as AureliaUtilService).createAureliaViewModelAddToSlot(this.columnEditor.params.templateUrl, { collection: this.collection }, this.args.container, true);
+ Example: this.columnDefs = [{ id: 'title', field: 'title', editor: { model: new CustomAureliaViewModelFilter(), collection: [...], param: { viewModel: MyVM } },`);
}
- }
-
- disposeViewSlot(createdView: { view?: View; viewSlot?: ViewSlot; }) {
- if (createdView && createdView.view && createdView.viewSlot && createdView.view.unbind && createdView.viewSlot.remove) {
- const container = this.args.container;
- if (container && container.length > 0) {
- createdView.viewSlot.remove(createdView.view);
- createdView.view.unbind();
- container[0].innerHTML = '';
- return createdView;
- }
+ if (this.columnEditor?.params?.viewModel) {
+ const bindableData = {
+ grid: this.grid,
+ model: {
+ collection: this.collection,
+ },
+ } as ViewModelBindableInputData;
+ const viewModel = this.columnEditor.params.viewModel;
+ this.vm = await this.aureliaUtilService.createAureliaViewModelAddToSlot(viewModel, bindableData, this.args.container);
+ this.elmBindingContext = this.vm?.controller?.children?.[0].scope.bindingContext;
}
- return null;
}
save() {
@@ -109,40 +106,32 @@ export class CustomAureliaViewModelEditor implements Editor {
}
cancel() {
- this.aureliaCustomElementInstance.selectedId = this.defaultId;
- this.aureliaCustomElementInstance.selectedItem = this.defaultItem;
- if (this.args && this.args.cancelChanges) {
+ if (this.elmBindingContext) {
+ this.elmBindingContext.selectedItem = this.defaultItem;
+ }
+ if (this.args?.cancelChanges) {
this.args.cancelChanges();
}
}
/** destroy the Aurelia ViewModel & Subscription */
destroy() {
- if (this.aureliaViewModel && this.aureliaViewModel.dispose) {
- this.aureliaViewModel.dispose();
- this.disposeViewSlot(this.aureliaViewModel.viewSlot);
- }
+ this.vm?.controller?.deactivate(this.vm.controller, null);
}
/** optional, implement a hide method on your Aurelia ViewModel */
hide() {
- if (this.aureliaViewModel && this.aureliaViewModel.bindings.viewModelRef.currentViewModel && typeof this.aureliaViewModel.bindings.viewModelRef.currentViewModel.hide === 'function') {
- this.aureliaViewModel.bindings.viewModelRef.currentViewModel.hide();
- }
+ this.elmBindingContext?.hide();
}
/** optional, implement a show method on your Aurelia ViewModel */
show() {
- if (typeof this.aureliaViewModel?.bindings.viewModelRef.currentViewModel?.show === 'function') {
- this.aureliaViewModel.bindings.viewModelRef.currentViewModel.show();
- }
+ this.elmBindingContext?.focus();
}
/** optional, implement a focus method on your Aurelia ViewModel */
focus() {
- if (typeof this.aureliaViewModel?.bindings.viewModelRef.currentViewModel?.focus === 'function') {
- this.aureliaViewModel.bindings.viewModelRef.currentViewModel.focus();
- }
+ this.elmBindingContext?.focus();
}
applyValue(item: any, state: any) {
@@ -150,22 +139,29 @@ export class CustomAureliaViewModelEditor implements Editor {
}
getValue() {
- return this.aureliaCustomElementInstance.selectedId;
+ return this.elmBindingContext?.selectedItem.id;
}
loadValue(item: any) {
- const itemObject = item && item[this.columnDef.field];
+ const itemObject = item?.[this.columnDef.field];
this.selectedItem = itemObject;
+ this.defaultItem = itemObject;
+
+ // add a delay so that the editor has time to be enhanced (created) prior to changing the value
setTimeout(() => {
- this.aureliaCustomElementInstance = this.aureliaViewModel.bindings.viewModelRef.currentViewModel;
- this.aureliaCustomElementInstance.selectedItem = itemObject;
- this.aureliaCustomElementInstance.selectedItemChanged = ((newItem: any) => {
- this.selectedItem = newItem;
- if (newItem !== itemObject) {
- this.save();
- }
- });
- });
+ this.focus();
+ if (this.elmBindingContext) {
+ this.elmBindingContext.selectedItem = itemObject;
+
+ // whenever the selected item changed (from the @bindable() selectedItem), we'll save the new value
+ this.elmBindingContext.selectedItemChanged = ((newItem: any) => {
+ this.selectedItem = newItem;
+ if (newItem !== itemObject) {
+ this.save();
+ }
+ });
+ }
+ }, 0);
}
serializeValue(): any {
diff --git a/src/examples/slickgrid/custom-aureliaViewModelFilter.ts b/src/examples/slickgrid/custom-aureliaViewModelFilter.ts
index f29346fc6..4c5ecfd11 100644
--- a/src/examples/slickgrid/custom-aureliaViewModelFilter.ts
+++ b/src/examples/slickgrid/custom-aureliaViewModelFilter.ts
@@ -1,3 +1,6 @@
+import { ICustomElementController } from '@aurelia/runtime-html';
+import { IBindingContext } from '@aurelia/runtime';
+
import {
AureliaUtilService,
Column,
@@ -11,13 +14,12 @@ import {
OperatorString,
SearchTerm,
SlickGrid,
+ ViewModelBindableInputData,
} from '../../aurelia-slickgrid';
-import { View, ViewSlot } from 'aurelia-framework';
-
export class CustomAureliaViewModelFilter implements Filter {
private _shouldTriggerQuery = true;
- container!: any;
+ container!: HTMLDivElement;
grid!: SlickGrid;
searchTerms: SearchTerm[] = [];
columnDef!: Column;
@@ -25,10 +27,8 @@ export class CustomAureliaViewModelFilter implements Filter {
operator: OperatorType | OperatorString = OperatorType.equal;
/** Aurelia ViewModel Reference */
- aureliaViewModel: any;
- aureliaCustomElementInstance: any;
-
- constructor() { }
+ vm?: { controller?: ICustomElementController } | null;
+ elmBindingContext?: IBindingContext;
/** Aurelia Util Service (could be inside the Grid Options Params or the Filter Params ) */
get aureliaUtilService(): AureliaUtilService {
@@ -57,74 +57,65 @@ export class CustomAureliaViewModelFilter implements Filter {
/**
* Initialize the Filter
*/
- init(args: FilterArguments) {
+ async init(args: FilterArguments) {
this.grid = args.grid;
this.callback = args.callback;
this.columnDef = args.columnDef;
this.searchTerms = (args.hasOwnProperty('searchTerms') ? args.searchTerms : []) || [];
- if (!this.columnFilter || !this.columnFilter.params || !this.columnFilter.params.templateUrl) {
- throw new Error(`[Aurelia-Slickgrid] For the Filters.aureliaComponent to work properly, you need to fill in the "templateUrl" property of your Custom Element Filter.
- Example: this.columnDefs = [{ id: 'title', field: 'title', filter: { templateUrl: PLATFORM.moduleName('my-viewmodel'), collection: [...] },`);
+ if (!this.columnFilter?.params?.viewModel) {
+ throw new Error(`[Aurelia-Slickgrid] For the Filters.aureliaComponent to work properly, you need to fill in the "viewModel" property of your Custom Element Filter.
+ Example: this.columnDefs = [{ id: 'title', field: 'title', filter: { model: new CustomAureliaViewModelFilter(), collection: [...], param: { viewModel: MyVM } },`);
}
- if (this.columnFilter && this.columnFilter.params && this.columnFilter.params.templateUrl) {
- // use a delay to make sure AngAurelia ran at least a full cycle and it finished rendering the Component before hooking onto it
- // else we get the infamous error "ExpressionChangedAfterItHasBeenCheckedError"
- setTimeout(() => {
- this.container = this.grid.getHeaderRowColumn(this.columnDef.id);
- emptyElement(this.container);
+ if (this.columnFilter.params.viewModel) {
+ this.container = this.grid.getHeaderRowColumn(this.columnDef.id);
+ emptyElement(this.container);
+
+ // provide model binding including collection and selectedItem callback, we can use this binding in createAureliaViewModelAddToSlot()
+ const bindableData = {
+ grid: this.grid,
// here we override the collection object of the Aurelia Custom Element
// but technically you can pass any values you wish as bindings
- this.aureliaViewModel = (this.columnFilter.params.aureliaUtilService as AureliaUtilService).createAureliaViewModelAddToSlot(this.columnFilter.params.templateUrl, { collection: this.collection }, this.container, true);
-
- setTimeout(() => {
- this.aureliaCustomElementInstance = this.aureliaViewModel.bindings.viewModelRef.currentViewModel;
- this.aureliaCustomElementInstance.selectedItemChanged = ((item: any) => {
- this.callback(undefined, { columnDef: this.columnDef, operator: this.operator, searchTerms: [item.id], shouldTriggerQuery: this._shouldTriggerQuery });
- // reset flag for next use
- this._shouldTriggerQuery = true;
- });
+ model: {
+ collection: this.collection,
+ },
+ } as ViewModelBindableInputData;
+ const viewModel = this.columnFilter.params.viewModel;
+ this.vm = await this.aureliaUtilService.createAureliaViewModelAddToSlot(viewModel, bindableData, this.container);
+ this.elmBindingContext = this.vm?.controller?.children?.[0].scope.bindingContext;
+
+ // override the FilterSelect selectedItemChanged method (from the @bindable() selectedItem), we'll trigger the filter callback
+ if (this.elmBindingContext) {
+ this.elmBindingContext.selectedItemChanged = ((item: any) => {
+ this.callback(undefined, { columnDef: this.columnDef, operator: this.operator, searchTerms: [item.id], shouldTriggerQuery: this._shouldTriggerQuery });
+ // reset flag for next use
+ this._shouldTriggerQuery = true;
});
- });
+ }
}
}
- /**
- * Clear the filter value
- */
+ /** Clear the filter value */
clear(shouldTriggerQuery = true) {
this._shouldTriggerQuery = shouldTriggerQuery;
- if (this.aureliaCustomElementInstance && this.aureliaCustomElementInstance.hasOwnProperty('selectedId')) {
- this.aureliaCustomElementInstance.selectedId = 0;
+ if (this.elmBindingContext?.selectedItem) {
+ this.elmBindingContext.selectedItem = { id: '', name: '' };
}
}
/** destroy the Aurelia Custom Element & Subscription */
destroy() {
- if (this.aureliaViewModel && this.aureliaViewModel.dispose) {
- this.aureliaViewModel.dispose();
- this.disposeViewSlot(this.aureliaViewModel.viewSlot);
- }
+ this.vm?.controller?.deactivate(this.vm.controller, null);
+ this.container = this.grid.getHeaderRowColumn(this.columnDef.id);
+ emptyElement(this.container);
}
/** Set value(s) on the DOM element */
setValues(values: any) {
- if (this.aureliaCustomElementInstance && this.aureliaCustomElementInstance.hasOwnProperty('selectedId')) {
- this.aureliaCustomElementInstance.selectedId = values;
- }
- }
-
- disposeViewSlot(createdView: { view?: View; viewSlot?: ViewSlot; }) {
- if (createdView && createdView.view && createdView.viewSlot && createdView.view.unbind && createdView.viewSlot.remove) {
- if (this.container?.length > 0) {
- createdView.viewSlot.remove(createdView.view);
- createdView.view.unbind();
- this.container[0].innerHTML = '';
- return createdView;
- }
+ if (this.elmBindingContext?.selectedItem) {
+ this.elmBindingContext.selectedItem = values;
}
- return null;
}
}
diff --git a/src/examples/slickgrid/custom-footer.ts b/src/examples/slickgrid/custom-footer.ts
index 7864071ce..7a8b21608 100644
--- a/src/examples/slickgrid/custom-footer.ts
+++ b/src/examples/slickgrid/custom-footer.ts
@@ -1,9 +1,10 @@
-import { inlineView } from 'aurelia-framework';
+import { customElement } from 'aurelia';
-@inlineView(`
-
- You've clicked me \${clickedTimes} time(s)
-`)
+@customElement({
+ name: 'custom-footer',
+ template: `
+ You've clicked me \${clickedTimes} time(s)
`
+})
export class CustomFooter {
clickedTimes = 0;
diff --git a/src/examples/slickgrid/custom-inputEditor.ts b/src/examples/slickgrid/custom-inputEditor.ts
index 6584fb556..b2ce66952 100644
--- a/src/examples/slickgrid/custom-inputEditor.ts
+++ b/src/examples/slickgrid/custom-inputEditor.ts
@@ -8,7 +8,7 @@ import {
} from '../../aurelia-slickgrid';
/*
- * An example of a 'detached' editor.
+ * An example of a 'detaching' editor.
* KeyDown events are also handled to provide handling for Tab, Shift-Tab, Esc and Ctrl-Enter.
*/
export class CustomInputEditor implements Editor {
diff --git a/src/examples/slickgrid/custom-title-formatter.ts b/src/examples/slickgrid/custom-title-formatter.ts
index 717f96bfe..ad4f30f2e 100644
--- a/src/examples/slickgrid/custom-title-formatter.ts
+++ b/src/examples/slickgrid/custom-title-formatter.ts
@@ -1,10 +1,9 @@
-import { inlineView } from 'aurelia-framework';
+import { bindable, customElement } from 'aurelia';
-@inlineView(``)
+@customElement({
+ name: 'custom-title-formatter',
+ template: ''
+})
export class CustomTitleFormatter {
- item: any;
-
- bind(_bindingContext: any, overrideContext: any) {
- this.item = overrideContext.parentOverrideContext.bindingContext.model;
- }
+ @bindable() model: any;
}
diff --git a/src/examples/slickgrid/editor-select.html b/src/examples/slickgrid/editor-select.html
index 8f2b65837..00be088c6 100644
--- a/src/examples/slickgrid/editor-select.html
+++ b/src/examples/slickgrid/editor-select.html
@@ -1,9 +1,9 @@
-
-
+
+
-
+
diff --git a/src/examples/slickgrid/editor-select.ts b/src/examples/slickgrid/editor-select.ts
index 9650f565e..6935df9e8 100644
--- a/src/examples/slickgrid/editor-select.ts
+++ b/src/examples/slickgrid/editor-select.ts
@@ -1,25 +1,30 @@
-import { EventAggregator } from 'aurelia-event-aggregator';
-import { autoinject, bindable, DOM } from 'aurelia-framework';
+import { bindable } from 'aurelia';
+import { SlickGrid } from '../../aurelia-slickgrid';
-@autoinject()
export class EditorSelect {
+ @bindable() model!: {
+ collection: any[]; // this will be filled by the collection of your column definition
+ };
+ @bindable() grid!: SlickGrid;
@bindable selectedItem: any;
- selectedId = '';
- collection: any; // this will be filled by the collection of your column definition
+
itemMatcher = (a: any, b: any) => a && b && a.id === b.id;
- constructor(private elm: Element, private ea: EventAggregator) {
- console.log(ea);
+ constructor(private elm: HTMLElement) {}
+
+ focus() {
+ this.elm.querySelector('select')?.focus();
}
- bind(bindingContext: any, overrideContext: any) {
- console.log(bindingContext, overrideContext);
+ hide() {
+ this.elm.style.display = 'none';
}
- selectedItemChanged(newItem: any) {
- console.log(newItem);
- if (newItem) {
- this.elm.dispatchEvent(DOM.createCustomEvent('on-select-changed', { detail: newItem }));
- }
+ show() {
+ this.elm.style.display = 'block';
}
+
+ // we need to define the method, it can be empty so that we can override it
+ // inside the `custom-aureliaViewModelFilter()` method
+ selectedItemChanged() {}
}
diff --git a/src/examples/slickgrid/example1.html b/src/examples/slickgrid/example1.html
index e725f861d..45012bea7 100644
--- a/src/examples/slickgrid/example1.html
+++ b/src/examples/slickgrid/example1.html
@@ -1,30 +1,22 @@
-
-
- ${title}
-
-
- code
-
-
-
-
+
+ ${title}
+
+
+ code
+
+
+
+
- Grid 1
-
-
+Grid 1
+
+
-
+
- Grid 2 (with local Pagination)
-
-
-
+Grid 2 (with local Pagination)
+
+
diff --git a/src/examples/slickgrid/example1.ts b/src/examples/slickgrid/example1.ts
index d1f96eae9..d36111ad9 100644
--- a/src/examples/slickgrid/example1.ts
+++ b/src/examples/slickgrid/example1.ts
@@ -58,7 +58,7 @@ export class Example1 {
mockData(count: number) {
// mock a dataset
- const mockDataset = [];
+ const mockDataset: any[] = [];
for (let i = 0; i < count; i++) {
const randomYear = 2000 + Math.floor(Math.random() * 10);
const randomMonth = Math.floor(Math.random() * 11);
diff --git a/src/examples/slickgrid/example10.html b/src/examples/slickgrid/example10.html
index e057f74d2..d149ceb47 100644
--- a/src/examples/slickgrid/example10.html
+++ b/src/examples/slickgrid/example10.html
@@ -16,10 +16,10 @@
Pagination
-
@@ -37,9 +37,9 @@
column-definitions.bind="columnDefinitions1"
grid-options.bind="gridOptions1"
dataset.bind="dataset1"
- on-aurelia-grid-created.delegate="aureliaGrid1Ready($event.detail)"
- on-grid-state-changed.delegate="grid1StateChanged($event.detail)"
- on-selected-rows-changed.delegate="onGrid1SelectedRowsChanged($event.detail.eventData, $event.detail.args)">
+ on-aurelia-grid-created.trigger="aureliaGrid1Ready($event.detail)"
+ on-grid-state-changed.trigger="grid1StateChanged($event.detail)"
+ on-selected-rows-changed.trigger="onGrid1SelectedRowsChanged($event.detail.eventData, $event.detail.args)">
