Skip to content

Commit

Permalink
feat(core): expose all addon instances (#545)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed Jul 28, 2020
1 parent 13abe5b commit 3578d9e
Show file tree
Hide file tree
Showing 10 changed files with 76 additions and 49 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
"lodash.isequal": "^4.5.0",
"moment-mini": "^2.22.1",
"rxjs": "^6.3.3",
"slickgrid": "^2.4.25",
"slickgrid": "^2.4.27",
"text-encoding-utf-8": "^1.0.2"
},
"devDependencies": {
Expand Down
8 changes: 7 additions & 1 deletion src/app/examples/grid-rowdetail.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,13 @@ export class GridRowDetailComponent implements OnInit {
}

get rowDetailInstance(): any {
return this.angularGrid && this.angularGrid.extensionService.getSlickgridAddonInstance(ExtensionName.rowDetailView) || {};
// you can get the SlickGrid RowDetail plugin (addon) instance via 2 ways

// option 1
return this.angularGrid.extensions.rowDetailView.instance || {};

// OR options 2
// return this.angularGrid && this.angularGrid.extensionService.getSlickgridAddonInstance(ExtensionName.rowDetailView) || {};
}

ngOnInit(): void {
Expand Down
10 changes: 8 additions & 2 deletions src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import {
Column,
ColumnEditor,
CustomFooterOption,
ExtensionList,
ExtensionName,
GraphqlPaginatedResult,
GraphqlResult,
Expand Down Expand Up @@ -122,6 +123,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
private _dataset: any[];
private _columnDefinitions: Column[];
private _eventHandler: SlickEventHandler = new Slick.EventHandler();
private _angularGridInstances: AngularGridInstance | undefined;
private _fixedHeight: number | null;
private _fixedWidth: number | null;
private _hideHeaderRowAfterPageLoad = false;
Expand Down Expand Up @@ -862,10 +864,11 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
this.loadLocalGridPagination();
}

this.onAngularGridCreated.emit({
this._angularGridInstances = {
// Slick Grid & DataView objects
dataView: this.dataView,
slickGrid: this.grid,
extensions: this.extensionService && this.extensionService.extensionList,

// public methods
destroy: this.destroy.bind(this),
Expand All @@ -887,7 +890,10 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn

/** @deprecated please use "extensionService" instead */
pluginService: this.extensionService,
});
}

// all instances (SlickGrid, DataView & all Services)
this.onAngularGridCreated.emit(this._angularGridInstances);

// user could show a custom footer with the data metrics (dataset length and last updated timestamp)
this.optionallyShowCustomFooterWithMetrics();
Expand Down
4 changes: 4 additions & 0 deletions src/app/modules/angular-slickgrid/models/angularGridInstance.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
SortService,
TreeDataService,
} from '../services';
import { ExtensionList } from './extensionList.type';

export interface AngularGridInstance {
/** Slick DataView object */
Expand All @@ -21,6 +22,9 @@ export interface AngularGridInstance {
/** Slick Grid object */
slickGrid: any;

/** SlickGrid extensions (external controls/plugins) */
extensions: ExtensionList;

// --
// Methods

Expand Down
3 changes: 3 additions & 0 deletions src/app/modules/angular-slickgrid/models/extensionList.type.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { ExtensionName, ExtensionModel } from './index';

export type ExtensionList = Record<ExtensionName, ExtensionModel>;
1 change: 1 addition & 0 deletions src/app/modules/angular-slickgrid/models/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export * from './excelWorkbook.interface';
export * from './excelWorksheet.interface';
export * from './exportOption.interface';
export * from './extension.interface';
export * from './extensionList.type';
export * from './extensionModel.interface';
export * from './extensionName.enum';
export * from './fieldType.enum';
Expand Down
6 changes: 2 additions & 4 deletions src/app/modules/angular-slickgrid/services/__tests__/extension.service.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -135,10 +135,8 @@ describe('ExtensionService', () => {
expect(spy).toHaveBeenCalled();
});

it('should return empty array when "getAllExtensions" method is called', () => {
const spy = jest.spyOn(service, 'getAllExtensions');
service.getAllExtensions();
expect(spy).toHaveReturnedWith([]);
it('should return empty object when "extensionlList" GETTER is called', () => {
expect(service.extensionList).toEqual({});
});

describe('getSlickgridAddonInstance method', () => {
Expand Down
77 changes: 43 additions & 34 deletions src/app/modules/angular-slickgrid/services/extension.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { Injectable, Optional } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import {
Column,
ExtensionList,
ExtensionModel,
ExtensionName,
GridOption,
Expand All @@ -31,8 +32,12 @@ import { SharedService } from './shared.service';

@Injectable()
export class ExtensionService {
private _extensionCreatedList: any[] = [];
private _extensionList: ExtensionModel[] = [];
private _extensionCreatedList: ExtensionList = {} as ExtensionList;
private _extensionList: ExtensionList = {} as ExtensionList;

get extensionList(): ExtensionList {
return this._extensionList;
}

constructor(
private autoTooltipExtension: AutoTooltipExtension,
Expand All @@ -59,12 +64,15 @@ export class ExtensionService {
this.sharedService.visibleColumns = [];

// dispose of each control/plugin & reset the list
this._extensionList.forEach((item) => {
if (item && item.class && item.class.dispose) {
item.class.dispose();
for (const extensionName of Object.keys(this._extensionList)) {
if (this._extensionList.hasOwnProperty(extensionName)) {
const extension = this._extensionList[extensionName] as ExtensionModel;
if (extension && extension.class && extension.class.dispose) {
extension.class.dispose();
}
}
});
this._extensionList = [];
}
this._extensionList = {} as ExtensionList;
}

/** Get all columns (includes visible and non-visible) */
Expand All @@ -77,17 +85,15 @@ export class ExtensionService {
return this.sharedService.visibleColumns || [];
}

/** Get all Extensions */
getAllExtensions(): ExtensionModel[] {
return this._extensionList;
}

/**
* Get an Extension by it's name
* @param name
*/
getExtensionByName(name: ExtensionName): ExtensionModel | undefined {
return Array.isArray(this._extensionList) && this._extensionList.find((p) => p.name === name);
if (this._extensionList && this._extensionList[name]) {
return this._extensionList[name];
}
return undefined;
}

/**
Expand Down Expand Up @@ -126,23 +132,23 @@ export class ExtensionService {
if (this.sharedService.gridOptions.enableAutoTooltip) {
if (this.autoTooltipExtension && this.autoTooltipExtension.register) {
const instance = this.autoTooltipExtension.register();
this._extensionList.push({ name: ExtensionName.autoTooltip, class: this.autoTooltipExtension, addon: instance, instance });
this._extensionList[ExtensionName.autoTooltip] = { name: ExtensionName.autoTooltip, class: this.autoTooltipExtension, addon: instance, instance };
}
}

// Cell External Copy Manager Plugin (Excel Like)
if (this.sharedService.gridOptions.enableExcelCopyBuffer) {
if (this.cellExternalCopyExtension && this.cellExternalCopyExtension.register) {
const instance = this.cellExternalCopyExtension.register();
this._extensionList.push({ name: ExtensionName.cellExternalCopyManager, class: this.cellExternalCopyExtension, addon: instance, instance });
this._extensionList[ExtensionName.cellExternalCopyManager] = { name: ExtensionName.cellExternalCopyManager, class: this.cellExternalCopyExtension, addon: instance, instance };
}
}

// (Action) Cell Menu Plugin
if (this.sharedService.gridOptions.enableCellMenu) {
if (this.cellMenuExtension && this.cellMenuExtension.register) {
const instance = this.cellMenuExtension.register();
this._extensionList.push({ name: ExtensionName.cellMenu, class: this.cellMenuExtension, addon: instance, instance });
this._extensionList[ExtensionName.cellMenu] = { name: ExtensionName.cellMenu, class: this.cellMenuExtension, addon: instance, instance };
}
}

Expand All @@ -151,7 +157,7 @@ export class ExtensionService {
if (!this.getExtensionByName(ExtensionName.rowSelection) && (this.sharedService.gridOptions.enableRowSelection || this.sharedService.gridOptions.enableCheckboxSelector || this.sharedService.gridOptions.enableRowDetailView || this.sharedService.gridOptions.enableRowMoveManager)) {
if (this.rowSelectionExtension && this.rowSelectionExtension.register) {
const instance = this.rowSelectionExtension.register();
this._extensionList.push({ name: ExtensionName.rowSelection, class: this.rowSelectionExtension, addon: instance, instance });
this._extensionList[ExtensionName.rowSelection] = { name: ExtensionName.rowSelection, class: this.rowSelectionExtension, addon: instance, instance };
}
}

Expand All @@ -162,39 +168,39 @@ export class ExtensionService {
this.checkboxSelectorExtension.register(rowSelectionExtension);
const createdExtension = this.getCreatedExtensionByName(ExtensionName.checkboxSelector); // get the instance from when it was really created earlier
const instance = createdExtension && createdExtension.instance;
this._extensionList.push({ name: ExtensionName.checkboxSelector, class: this.checkboxSelectorExtension, addon: instance, instance });
this._extensionList[ExtensionName.checkboxSelector] = { name: ExtensionName.checkboxSelector, class: this.checkboxSelectorExtension, addon: instance, instance };
}
}

// Column Picker Control
if (this.sharedService.gridOptions.enableColumnPicker) {
if (this.columnPickerExtension && this.columnPickerExtension.register) {
const instance = this.columnPickerExtension.register();
this._extensionList.push({ name: ExtensionName.columnPicker, class: this.columnPickerExtension, addon: instance, instance });
this._extensionList[ExtensionName.columnPicker] = { name: ExtensionName.columnPicker, class: this.columnPickerExtension, addon: instance, instance };
}
}

// Context Menu Control
if (this.sharedService.gridOptions.enableContextMenu) {
if (this.contextMenuExtension && this.contextMenuExtension.register) {
const instance = this.contextMenuExtension.register();
this._extensionList.push({ name: ExtensionName.contextMenu, class: this.contextMenuExtension, addon: instance, instance });
this._extensionList[ExtensionName.contextMenu] = { name: ExtensionName.contextMenu, class: this.contextMenuExtension, addon: instance, instance };
}
}

// Draggable Grouping Plugin
if (this.sharedService.gridOptions.enableDraggableGrouping) {
if (this.draggableGroupingExtension && this.draggableGroupingExtension.register) {
const instance = this.draggableGroupingExtension.register();
this._extensionList.push({ name: ExtensionName.draggableGrouping, class: this.draggableGroupingExtension, addon: instance, instance });
this._extensionList[ExtensionName.draggableGrouping] = { name: ExtensionName.draggableGrouping, class: this.draggableGroupingExtension, addon: instance, instance };
}
}

// Grid Menu Control
if (this.sharedService.gridOptions.enableGridMenu) {
if (this.gridMenuExtension && this.gridMenuExtension.register) {
const instance = this.gridMenuExtension.register();
this._extensionList.push({ name: ExtensionName.gridMenu, class: this.gridMenuExtension, addon: instance, instance });
this._extensionList[ExtensionName.gridMenu] = { name: ExtensionName.gridMenu, class: this.gridMenuExtension, addon: instance, instance };
}
}

Expand All @@ -203,23 +209,23 @@ export class ExtensionService {
if (this.sharedService.gridOptions.enableDraggableGrouping || this.sharedService.gridOptions.enableGrouping) {
if (this.groupItemMetaExtension && this.groupItemMetaExtension.register) {
const instance = this.groupItemMetaExtension.register();
this._extensionList.push({ name: ExtensionName.groupItemMetaProvider, class: this.groupItemMetaExtension, addon: instance, instance });
this._extensionList[ExtensionName.groupItemMetaProvider] = { name: ExtensionName.groupItemMetaProvider, class: this.groupItemMetaExtension, addon: instance, instance };
}
}

// Header Button Plugin
if (this.sharedService.gridOptions.enableHeaderButton) {
if (this.headerButtonExtension && this.headerButtonExtension.register) {
const instance = this.headerButtonExtension.register();
this._extensionList.push({ name: ExtensionName.headerButton, class: this.headerButtonExtension, addon: instance, instance });
this._extensionList[ExtensionName.headerButton] = { name: ExtensionName.headerButton, class: this.headerButtonExtension, addon: instance, instance };
}
}

// Header Menu Plugin
if (this.sharedService.gridOptions.enableHeaderMenu) {
if (this.headerMenuExtension && this.headerMenuExtension.register) {
const instance = this.headerMenuExtension.register();
this._extensionList.push({ name: ExtensionName.headerMenu, class: this.headerMenuExtension, addon: instance, instance });
this._extensionList[ExtensionName.headerMenu] = { name: ExtensionName.headerMenu, class: this.headerMenuExtension, addon: instance, instance };
}
}

Expand All @@ -230,7 +236,7 @@ export class ExtensionService {
this.rowDetailViewExtension.register(rowSelectionExtension);
const createdExtension = this.getCreatedExtensionByName(ExtensionName.rowDetailView); // get the plugin from when it was really created earlier
const instance = createdExtension && createdExtension.instance;
this._extensionList.push({ name: ExtensionName.rowDetailView, class: this.rowDetailViewExtension, addon: instance, instance });
this._extensionList[ExtensionName.rowDetailView] = { name: ExtensionName.rowDetailView, class: this.rowDetailViewExtension, addon: instance, instance };
}
}

Expand All @@ -240,7 +246,7 @@ export class ExtensionService {
this.rowMoveManagerExtension.register(rowSelectionExtension);
const createdExtension = this.getCreatedExtensionByName(ExtensionName.rowMoveManager); // get the instance from when it was really created earlier
const instance = createdExtension && createdExtension.instance;
this._extensionList.push({ name: ExtensionName.rowMoveManager, class: this.rowMoveManagerExtension, addon: instance, instance });
this._extensionList[ExtensionName.rowMoveManager] = { name: ExtensionName.rowMoveManager, class: this.rowMoveManagerExtension, addon: instance, instance };
}

// manually register other plugins
Expand All @@ -252,13 +258,13 @@ export class ExtensionService {
gridOptions.registerPlugins.forEach((plugin: any) => {
grid.registerPlugin(plugin);
const instance = grid.getPluginByName(plugin && plugin.name || '');
this._extensionList.push({ name: ExtensionName.noname, class: null, addon: instance, instance });
this._extensionList[ExtensionName.noname] = { name: ExtensionName.noname, class: null, addon: instance, instance };
});
} else {
const plugin = gridOptions.registerPlugins;
grid.registerPlugin(plugin);
const instance = grid.getPluginByName(plugin && plugin.name || '');
this._extensionList.push({ name: ExtensionName.noname, class: null, addon: instance, instance });
this._extensionList[ExtensionName.noname] = { name: ExtensionName.noname, class: null, addon: instance, instance };
}
}
}
Expand All @@ -274,26 +280,26 @@ export class ExtensionService {
if (options.enableCheckboxSelector) {
if (!this.getCreatedExtensionByName(ExtensionName.checkboxSelector)) {
const checkboxInstance = this.checkboxSelectorExtension.create(columnDefinitions, options);
this._extensionCreatedList.push({ name: ExtensionName.checkboxSelector, instance: checkboxInstance });
this._extensionCreatedList[ExtensionName.checkboxSelector] = { name: ExtensionName.checkboxSelector, addon: checkboxInstance, instance: checkboxInstance, class: this.checkboxSelectorExtension };
}
}
if (options.enableRowMoveManager) {
if (!this.getCreatedExtensionByName(ExtensionName.rowMoveManager)) {
const rowMoveInstance = this.rowMoveManagerExtension.create(columnDefinitions, options);
this._extensionCreatedList.push({ name: ExtensionName.rowMoveManager, instance: rowMoveInstance });
this._extensionCreatedList[ExtensionName.rowMoveManager] = { name: ExtensionName.rowMoveManager, addon: rowMoveInstance, instance: rowMoveInstance, class: this.rowMoveManagerExtension };
}
}
if (options.enableRowDetailView) {
if (!this.getCreatedExtensionByName(ExtensionName.rowDetailView)) {
const rowDetailInstance = this.rowDetailViewExtension.create(columnDefinitions, options);
this._extensionCreatedList.push({ name: ExtensionName.rowDetailView, instance: rowDetailInstance });
this._extensionCreatedList[ExtensionName.rowDetailView] = { name: ExtensionName.rowDetailView, addon: rowDetailInstance, instance: rowDetailInstance, class: this.rowDetailViewExtension };
}
}
if (options.enableDraggableGrouping) {
if (!this.getCreatedExtensionByName(ExtensionName.draggableGrouping)) {
const draggableInstance = this.draggableGroupingExtension.create(options);
options.enableColumnReorder = draggableInstance.getSetupColumnReorder;
this._extensionCreatedList.push({ name: ExtensionName.draggableGrouping, instance: draggableInstance });
this._extensionCreatedList[ExtensionName.draggableGrouping] = { name: ExtensionName.draggableGrouping, addon: draggableInstance, instance: draggableInstance, class: draggableInstance.getSetupColumnReorder };
}
}
}
Expand Down Expand Up @@ -442,7 +448,10 @@ export class ExtensionService {
* @param name
*/
private getCreatedExtensionByName(name: ExtensionName): ExtensionModel | undefined {
return Array.isArray(this._extensionCreatedList) && this._extensionCreatedList.find((p) => p.name === name);
if (this._extensionCreatedList && this._extensionCreatedList.hasOwnProperty(name)) {
return this._extensionCreatedList[name];
}
return undefined;
}

/** Translate an array of items from an input key and assign translated value to the output key */
Expand Down
12 changes: 6 additions & 6 deletions test/cypress/integration/example25.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ describe('Example 25 - Range Filters', () => {
.each(($cell) => {
const value = parseInt($cell.text().trim(), 10);
if (!isNaN(value)) {
expect(value > presetMinDuration).to.eq(true);
expect(value < presetMaxDuration).to.eq(true);
expect(value >= presetMinDuration).to.eq(true);
expect(value <= presetMaxDuration).to.eq(true);
}
});
});
Expand Down Expand Up @@ -126,8 +126,8 @@ describe('Example 25 - Range Filters', () => {
.each(($cell) => {
const value = parseInt($cell.text().trim(), 10);
if (!isNaN(value)) {
expect(value > newMin).to.eq(true);
expect(value < newMax).to.eq(true);
expect(value >= newMin).to.eq(true);
expect(value <= newMax).to.eq(true);
}
});
});
Expand Down Expand Up @@ -186,8 +186,8 @@ describe('Example 25 - Range Filters', () => {
.each(($cell) => {
const value = parseInt($cell.text().trim(), 10);
if (!isNaN(value)) {
expect(value > dynamicMinComplete).to.eq(true);
expect(value < dynamicMaxComplete).to.eq(true);
expect(value >= dynamicMinComplete).to.eq(true);
expect(value <= dynamicMaxComplete).to.eq(true);
}
});
});
Expand Down

0 comments on commit 3578d9e

Please sign in to comment.