feat(plugin): add Row Detail Plugin extension (#113)

* fix(select): Single Select should use EQ operator instead of IN - the IN should only be used with MultipleSelect Filter not SingleSelect * refactor(plugin): Row Detail Plugin code enhancement * refactor(rowdetail): rename example16 to 17 * refactor(style): fix side menu not working with auto-height * refactor(event): add onExtensionRegistered to all necessary extension * refactor(rowdetail): add onExtensionRegistered with hooks * refactor(rowdetail): use latest slickgrid & clean up code * refactor(route): add unknown route map * refactor(rowdetail): move all row detail code to the extension class * refactor(rowdetail): use Aurelia View for preload template * refactor(rowdetail): cleanup code & use common calls - add missing subsciption dispose - copied examples to gitHub demo * refactor(rowdetail): fix build TSlint error * update Bootstrap to 3.4.0 to fix xss vulnerability
ghiscoding · Dec 18, 2018 · 755e026 · 755e026
1 parent 718b7c4
commit 755e026
Show file tree

Hide file tree

Showing 48 changed files with 1,504 additions and 205 deletions.
diff --git a/aurelia-slickgrid/package.json b/aurelia-slickgrid/package.json
@@ -30,7 +30,7 @@
     "aurelia-polyfills": "latest",
     "aurelia-router": "^1.5.0",
     "bluebird": "^3.4.1",
-    "bootstrap": "^3.3.7",
+    "bootstrap": "^3.4.0",
     "dompurify": "^1.0.7",
     "flatpickr": "^4.2.4",
     "font-awesome": "^4.7.0",
@@ -41,7 +41,7 @@
     "moment": "^2.19.1",
     "moment-mini": "^2.18.1",
     "nps": "^5.7.1",
-    "slickgrid": "~2.3.23",
+    "slickgrid": "github:6pac/SlickGrid",
     "text-encoding-utf-8": "^1.0.2"
   },
   "peerDependencies": {},

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/extensions/cellExternalCopyManagerExtension.ts b/aurelia-slickgrid/src/aurelia-slickgrid/extensions/cellExternalCopyManagerExtension.ts
@@ -3,10 +3,10 @@ import { Column, Extension, ExtensionName } from '../models/index';
 import { sanitizeHtmlToText } from '../services/utilities';
 import { SharedService } from '../services/shared.service';
 import { ExtensionUtility } from './extensionUtility';
+import * as $ from 'jquery';
 
 // using external non-typed js libraries
 declare var Slick: any;
-declare var $: any;
 
 @singleton(true)
 @inject(ExtensionUtility, SharedService)

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/extensions/checkboxSelectorExtension.ts b/aurelia-slickgrid/src/aurelia-slickgrid/extensions/checkboxSelectorExtension.ts
@@ -20,8 +20,8 @@ export class CheckboxSelectorExtension implements Extension {
   }
 
   /**
-   * Attach/Create different plugins before the Grid creation.
-   * For example the multi-select have to be added to the column definition before the grid is created to work properly
+   * Create the plugin before the Grid creation, else it will behave oddly.
+   * Mostly because the column definitions might change after the grid creation
    */
   create(columnDefinitions: Column[], gridOptions: GridOption) {
     if (columnDefinitions && gridOptions) {
@@ -43,8 +43,7 @@ export class CheckboxSelectorExtension implements Extension {
 
   register(rowSelectionPlugin?: any) {
     if (this.sharedService && this.sharedService.grid && this.sharedService.gridOptions) {
-      // when enabling the Checkbox Selector Plugin, we need to also watch onClick events to perform certain actions
-      // the selector column has to be created BEFORE the grid (else it behaves oddly), but we can only watch grid events AFTER the grid is created
+      // the plugin has to be created BEFORE the grid (else it behaves oddly), but we can only watch grid events AFTER the grid is created
       this.sharedService.grid.registerPlugin(this._extension);
 
       // this also requires the Row Selection Model to be registered as well

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/extensions/extensionUtility.ts b/aurelia-slickgrid/src/aurelia-slickgrid/extensions/extensionUtility.ts
@@ -60,6 +60,9 @@ export class ExtensionUtility {
         case ExtensionName.rowSelection:
           require('slickgrid/plugins/slick.rowselectionmodel');
           break;
+        case ExtensionName.rowDetailView:
+          require('slickgrid/plugins/slick.rowdetailview.js');
+          break;
         case ExtensionName.rowMoveManager:
           require('slickgrid/plugins/slick.rowmovemanager.js');
           break;

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/extensions/gridMenuExtension.ts b/aurelia-slickgrid/src/aurelia-slickgrid/extensions/gridMenuExtension.ts
@@ -20,10 +20,11 @@ import { ExtensionUtility } from './extensionUtility';
 import { FilterService } from '../services/filter.service';
 import { SortService } from '../services/sort.service';
 import { SharedService } from '../services/shared.service';
+import * as $ from 'jquery';
 
 // using external non-typed js libraries
 declare var Slick: any;
-declare var $: any;
+
 @singleton(true)
 @inject(
   ExportService,
@@ -75,7 +76,12 @@ export class GridMenuExtension implements Extension {
       this.extensionUtility.sortItems(this.sharedService.gridOptions.gridMenu.customItems, 'positionOrder');
 
       this._extension = new Slick.Controls.GridMenu(this.sharedService.columnDefinitions, this.sharedService.grid, this.sharedService.gridOptions);
+
+      // hook all events
       if (this.sharedService.grid && this.sharedService.gridOptions.gridMenu) {
+        if (this.sharedService.gridOptions.gridMenu.onExtensionRegistered) {
+          this.sharedService.gridOptions.gridMenu.onExtensionRegistered(this._extension);
+        }
         this._eventHandler.subscribe(this._extension.onBeforeMenuShow, (e: any, args: CellArgs) => {
           if (this.sharedService.gridOptions.gridMenu && typeof this.sharedService.gridOptions.gridMenu.onBeforeMenuShow === 'function') {
             this.sharedService.gridOptions.gridMenu.onBeforeMenuShow(e, args);

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/extensions/headerButtonExtension.ts b/aurelia-slickgrid/src/aurelia-slickgrid/extensions/headerButtonExtension.ts
@@ -31,11 +31,18 @@ export class HeaderButtonExtension implements Extension {
 
       this._extension = new Slick.Plugins.HeaderButtons(this.sharedService.gridOptions.headerButton || {});
       this.sharedService.grid.registerPlugin(this._extension);
-      this._eventHandler.subscribe(this._extension.onCommand, (e: any, args: HeaderButtonOnCommandArgs) => {
-        if (this.sharedService.gridOptions.headerButton && typeof this.sharedService.gridOptions.headerButton.onCommand === 'function') {
-          this.sharedService.gridOptions.headerButton.onCommand(e, args);
+
+      // hook all events
+      if (this.sharedService.grid && this.sharedService.gridOptions.headerButton) {
+        if (this.sharedService.gridOptions.headerButton.onExtensionRegistered) {
+          this.sharedService.gridOptions.headerButton.onExtensionRegistered(this._extension);
         }
-      });
+        this._eventHandler.subscribe(this._extension.onCommand, (e: any, args: HeaderButtonOnCommandArgs) => {
+          if (this.sharedService.gridOptions.headerButton && typeof this.sharedService.gridOptions.headerButton.onCommand === 'function') {
+            this.sharedService.gridOptions.headerButton.onCommand(e, args);
+          }
+        });
+      }
       return this._extension;
     }
     return null;

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/extensions/headerMenuExtension.ts b/aurelia-slickgrid/src/aurelia-slickgrid/extensions/headerMenuExtension.ts
@@ -62,20 +62,25 @@ export class HeaderMenuExtension implements Extension {
         this.sharedService.gridOptions.headerMenu = this.addHeaderMenuCustomCommands(this.sharedService.gridOptions, this.sharedService.columnDefinitions);
       }
       this._extension = new Slick.Plugins.HeaderMenu(this.sharedService.gridOptions.headerMenu);
-
       this.sharedService.grid.registerPlugin(this._extension);
-      this._eventHandler.subscribe(this._extension.onCommand, (e: any, args: HeaderMenuOnCommandArgs) => {
-        this.executeHeaderMenuInternalCommands(e, args);
-        if (this.sharedService.gridOptions.headerMenu && typeof this.sharedService.gridOptions.headerMenu.onCommand === 'function') {
-          this.sharedService.gridOptions.headerMenu.onCommand(e, args);
-        }
-      });
-      this._eventHandler.subscribe(this._extension.onBeforeMenuShow, (e: any, args: HeaderMenuOnBeforeMenuShowArgs) => {
-        if (this.sharedService.gridOptions.headerMenu && typeof this.sharedService.gridOptions.headerMenu.onBeforeMenuShow === 'function') {
-          this.sharedService.gridOptions.headerMenu.onBeforeMenuShow(e, args);
-        }
-      });
 
+      // hook all events
+      if (this.sharedService.grid && this.sharedService.gridOptions.headerMenu) {
+        if (this.sharedService.gridOptions.headerMenu.onExtensionRegistered) {
+          this.sharedService.gridOptions.headerMenu.onExtensionRegistered(this._extension);
+        }
+        this._eventHandler.subscribe(this._extension.onCommand, (e: any, args: HeaderMenuOnCommandArgs) => {
+          this.executeHeaderMenuInternalCommands(e, args);
+          if (this.sharedService.gridOptions.headerMenu && typeof this.sharedService.gridOptions.headerMenu.onCommand === 'function') {
+            this.sharedService.gridOptions.headerMenu.onCommand(e, args);
+          }
+        });
+        this._eventHandler.subscribe(this._extension.onBeforeMenuShow, (e: any, args: HeaderMenuOnBeforeMenuShowArgs) => {
+          if (this.sharedService.gridOptions.headerMenu && typeof this.sharedService.gridOptions.headerMenu.onBeforeMenuShow === 'function') {
+            this.sharedService.gridOptions.headerMenu.onBeforeMenuShow(e, args);
+          }
+        });
+      }
       return this._extension;
     }
     return null;

diff --git a/aurelia-slickgrid/src/aurelia-slickgrid/extensions/index.ts b/aurelia-slickgrid/src/aurelia-slickgrid/extensions/index.ts
@@ -8,5 +8,6 @@ export * from './gridMenuExtension';
 export * from './groupItemMetaProviderExtension';
 export * from './headerButtonExtension';
 export * from './headerMenuExtension';
+export * from './rowDetailViewExtension';
 export * from './rowMoveManagerExtension';
 export * from './rowSelectionExtension';