feat: (re)add option to cancel Row Detail opening (#1136)

* feat: (re)add option to cancel Row Detail opening
- I tried to implement this feature in a previous PR but that introduced a regression which is got fixed in this PR and reintroduces this feature without regressing this time.

package.json

@@ -45,11 +45,11 @@
     "@lerna-lite/cli": "^3.1.0",
     "@lerna-lite/publish": "^3.1.0",
     "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.5",
-    "@typescript-eslint/eslint-plugin": "^6.15.0",
-    "@typescript-eslint/parser": "^6.15.0",
+    "@types/node": "^20.10.6",
+    "@typescript-eslint/eslint-plugin": "^6.16.0",
+    "@typescript-eslint/parser": "^6.16.0",
     "cross-env": "^7.0.3",
-    "cypress": "^13.6.1",
+    "cypress": "^13.6.2",
     "eslint": "^8.56.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-prefer-arrow": "^1.2.3",
@@ -61,10 +61,10 @@
     "jsdom-global": "^3.0.2",
     "moment-mini": "^2.29.4",
     "npm-run-all2": "^6.1.1",
-    "pnpm": "^8.12.1",
+    "pnpm": "^8.13.1",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.1",
     "typescript": "^5.3.3"
   },
-  "packageManager": "pnpm@8.12.1"
+  "packageManager": "pnpm@8.13.1"
 }

packages/aurelia-slickgrid/package.json

@@ -51,13 +51,13 @@
     "@aurelia/i18n": "latest",
     "@aurelia/runtime": "latest",
     "@aurelia/runtime-html": "latest",
-    "@slickgrid-universal/common": "~4.1.0",
-    "@slickgrid-universal/custom-footer-component": "~4.1.0",
-    "@slickgrid-universal/empty-warning-component": "~4.1.0",
-    "@slickgrid-universal/event-pub-sub": "~4.1.0",
-    "@slickgrid-universal/pagination-component": "~4.1.0",
-    "@slickgrid-universal/row-detail-view-plugin": "~4.1.0",
-    "@slickgrid-universal/utils": "^4.1.0",
+    "@slickgrid-universal/common": "~4.2.0",
+    "@slickgrid-universal/custom-footer-component": "~4.2.0",
+    "@slickgrid-universal/empty-warning-component": "~4.2.0",
+    "@slickgrid-universal/event-pub-sub": "~4.2.0",
+    "@slickgrid-universal/pagination-component": "~4.2.0",
+    "@slickgrid-universal/row-detail-view-plugin": "~4.2.0",
+    "@slickgrid-universal/utils": "~4.2.0",
     "dequal": "^2.0.3",
     "dompurify": "^3.0.6",
     "moment-mini": "^2.29.4",

packages/aurelia-slickgrid/src/extensions/__tests__/slickRowDetailView.spec.ts

@@ -677,6 +677,28 @@ describe('SlickRowDetailView', () => {
 
       expect(handlerSpy).toHaveBeenCalled();
     });
+
+    it('should call internal event handler subscribe and expect the "onBeforeRowDetailToggle" option to be called and return true when addon notify is called', () => {
+      gridOptionsMock.rowDetailView!.onBeforeRowDetailToggle = undefined;
+      const onAsyncRespSpy = jest.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onAsyncResponse');
+      const onAsyncEndSpy = jest.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onAsyncEndUpdate');
+      const onAfterRowSpy = jest.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onAfterRowDetailToggle');
+      // const onBeforeRowSpy = jest.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onBeforeRowDetailToggle');
+      const onRowOutViewSpy = jest.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onRowOutOfViewportRange');
+      const onRowBackViewSpy = jest.spyOn(gridOptionsMock.rowDetailView as RowDetailView, 'onRowBackToViewportRange');
+
+      plugin.init(gridStub);
+      plugin.onBeforeRowDetailToggle = new SlickEvent();
+      plugin.register();
+      const result = plugin.onBeforeRowDetailToggle.notify({ item: columnsMock[0], grid: gridStub }, new SlickEventData(), gridStub);
+
+      expect(result.getReturnValue()).toEqual(true);
+      expect(onAsyncRespSpy).not.toHaveBeenCalled();
+      expect(onAsyncEndSpy).not.toHaveBeenCalled();
+      expect(onAfterRowSpy).not.toHaveBeenCalled();
+      expect(onRowOutViewSpy).not.toHaveBeenCalled();
+      expect(onRowBackViewSpy).not.toHaveBeenCalled();
+    });
   });
 
   describe('possible error thrown', () => {

packages/aurelia-slickgrid/src/extensions/slickRowDetailView.ts

@@ -163,8 +163,9 @@ export class SlickRowDetailView extends UniversalSlickRowDetailView {
               this.handleOnBeforeRowDetailToggle(event, args);
 
               if (typeof this.rowDetailViewOptions?.onBeforeRowDetailToggle === 'function') {
-                this.rowDetailViewOptions.onBeforeRowDetailToggle(event, args);
+                return this.rowDetailViewOptions.onBeforeRowDetailToggle(event, args);
               }
+              return true;
             });
           }
 

packages/demo/package.json

@@ -50,21 +50,21 @@
     "@faker-js/faker": "^8.3.1",
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
-    "@slickgrid-universal/common": "~4.1.0",
-    "@slickgrid-universal/composite-editor-component": "~4.1.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "~4.1.0",
-    "@slickgrid-universal/excel-export": "~4.1.0",
-    "@slickgrid-universal/graphql": "~4.1.0",
-    "@slickgrid-universal/odata": "~4.1.0",
-    "@slickgrid-universal/row-detail-view-plugin": "~4.1.0",
-    "@slickgrid-universal/rxjs-observable": "~4.1.0",
-    "@slickgrid-universal/text-export": "~4.1.0",
+    "@slickgrid-universal/common": "~4.2.0",
+    "@slickgrid-universal/composite-editor-component": "~4.2.0",
+    "@slickgrid-universal/custom-tooltip-plugin": "~4.2.0",
+    "@slickgrid-universal/excel-export": "~4.2.0",
+    "@slickgrid-universal/graphql": "~4.2.0",
+    "@slickgrid-universal/odata": "~4.2.0",
+    "@slickgrid-universal/row-detail-view-plugin": "~4.2.0",
+    "@slickgrid-universal/rxjs-observable": "~4.2.0",
+    "@slickgrid-universal/text-export": "~4.2.0",
     "aurelia": "latest",
     "aurelia-slickgrid": "workspace:*",
     "bootstrap": "^5.3.2",
     "dompurify": "^3.0.6",
     "flatpickr": "^4.6.13",
-    "i18next": "^23.7.11",
+    "i18next": "^23.7.13",
     "i18next-fetch-backend": "^5.0.2",
     "moment-mini": "^2.29.4",
     "rxjs": "^7.8.1"
@@ -76,7 +76,7 @@
     "@types/dompurify": "^3.0.5",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.5",
+    "@types/node": "^20.10.6",
     "@types/sortablejs": "^1.15.7",
     "aurelia-polyfills": "^1.3.4",
     "autoprefixer": "^10.4.16",
@@ -92,12 +92,12 @@
     "isomorphic-fetch": "^3.0.0",
     "npm-run-all2": "^6.1.1",
     "postcss": "^8.4.32",
-    "postcss-loader": "^7.3.3",
+    "postcss-loader": "^7.3.4",
     "rimraf": "^5.0.5",
-    "sass": "^1.69.5",
-    "sass-loader": "^13.3.2",
+    "sass": "^1.69.6",
+    "sass-loader": "^13.3.3",
     "servor": "^4.0.2",
-    "source-map-loader": "^4.0.1",
+    "source-map-loader": "^4.0.2",
     "style-loader": "^3.3.3",
     "ts-loader": "^9.5.1",
     "ts-node": "^10.9.2",

packages/demo/src/examples/slickgrid/example19.html

@@ -13,7 +13,7 @@ <h2>
   <button class="btn btn-outline-secondary btn-xs" click.trigger="changeEditableGrid()" data-test="editable-grid-btn">
     Make Grid Editable
   </button>
-  <button class="btn btn-outline-secondary btn-xs" click.trigger="closeAllRowDetail()" data-test="close-all-btn">
+  <button class="btn btn-outline-secondary btn-xs" click.trigger="closeAllRowDetail()" data-test="collapse-all-btn">
     Close all Row Details
   </button>
   &nbsp;&nbsp;
@@ -31,4 +31,4 @@ <h2>
 
 <aurelia-slickgrid grid-id="grid19" column-definitions.bind="columnDefinitions" grid-options.bind="gridOptions"
   dataset.bind="dataset" extensions.bind="extensions" instances.bind="aureliaGrid">
-</aurelia-slickgrid>
+</aurelia-slickgrid>

packages/demo/src/examples/slickgrid/example19.ts

@@ -123,7 +123,17 @@ export class Example19 {
         viewModel: Example19DetailView,
 
         // Optionally pass your Parent Component reference to your Child Component (row detail component)
-        parent: this
+        parent: this,
+
+        onBeforeRowDetailToggle: (e, args) => {
+          // you coud cancel opening certain rows
+          // if (args.item.rowId === 1) {
+          //   e.preventDefault();
+          //   return false;
+          // }
+          console.log('before toggling row detail', args.item);
+          return true;
+        },
       }
     };
   }
@@ -163,6 +173,7 @@ export class Example19 {
 
   changeEditableGrid() {
     // this.rowDetailInstance.setOptions({ useRowClick: false });
+    this.rowDetailInstance.collapseAll();
     (this.rowDetailInstance as any).addonOptions.useRowClick = false;
     this.gridOptions.autoCommitEdit = !this.gridOptions.autoCommitEdit;
     this.aureliaGrid?.slickGrid.setOptions({