fix(metrics): use onRowsOrCountChanged to refresh metrics (#681)

* fix(metrics): use onRowsOrCountChanged to refresh metrics

Author: ghiscoding

package.json

@@ -137,7 +137,7 @@
     "@types/flatpickr": "^3.1.2",
     "@types/jest": "^24.0.25",
     "@types/moment": "^2.13.0",
-    "@types/node": "^14.14.20",
+    "@types/node": "^14.14.22",
     "@types/text-encoding-utf-8": "^1.0.1",
     "babel-jest": "^24.9.0",
     "bootstrap": "3.4.1",
@@ -163,17 +163,17 @@
     "ngx-bootstrap": "^4.3.0",
     "node-sass": "4.14.1",
     "npm-run-all": "^4.1.5",
-    "postcss-cli": "^7.1.1",
+    "postcss-cli": "^7.1.2",
     "require-dir": "^1.2.0",
     "rimraf": "^3.0.2",
     "run-sequence": "^2.2.1",
-    "standard-version": "^9.0.0",
+    "standard-version": "^9.1.0",
     "ts-node": "~3.3.0",
     "tsickle": "^0.37.0",
     "tslib": "^2.0.1",
     "tslint": "^5.20.1",
     "typescript": "3.5.3",
-    "uglify-js": "^3.12.4",
+    "uglify-js": "^3.12.5",
     "vinyl-paths": "^2.1.0",
     "yargs": "^16.2.0",
     "zone.js": "~0.9.1"

src/app/modules/angular-slickgrid/components/__tests__/angular-slickgrid-constructor.spec.ts

@@ -179,8 +179,7 @@ const mockDataView = {
   mapIdsToRows: jest.fn(),
   mapRowsToIds: jest.fn(),
   onRowsChanged: new Slick.Event(),
-  onRowCountChanged: jest.fn(),
-  onSetItemsCalled: jest.fn(),
+  onRowsOrCountChanged: jest.fn(),
   reSort: jest.fn(),
   setItems: jest.fn(),
   syncGridSelection: jest.fn(),

src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts

@@ -625,14 +625,9 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
 
     if (dataView && grid) {
       // When data changes in the DataView, we need to refresh the metrics and/or display a warning if the dataset is empty
-      // we will do that via the following 2 handlers (onSetItemsCalled, onRowCountChanged)
-      this._eventHandler.subscribe(dataView.onSetItemsCalled, () => {
-        this.handleOnItemsChanged(this.dataset.length);
-      });
-
-      this._eventHandler.subscribe(dataView.onRowCountChanged, (_e: Event, args: any) => {
+      this._eventHandler.subscribe(dataView.onRowsOrCountChanged, (_e: Event, args: any) => {
         grid.invalidate();
-        this.handleOnItemsChanged(args.current || 0);
+        this.handleOnItemCountChanged(args.currentRowCount || 0);
       });
 
       // Tree Data with Pagiantion is not supported, throw an error when user tries to do that
@@ -772,7 +767,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy, OnIn
   }
 
   /** When data changes in the DataView, we'll refresh the metrics and/or display a warning if the dataset is empty */
-  private handleOnItemsChanged(itemCount: number) {
+  private handleOnItemCountChanged(itemCount: number) {
     this.metrics = {
       startTime: new Date(),
       endTime: new Date(),

test/cypress/integration/example21.spec.js

@@ -120,28 +120,28 @@ describe('Example 21 - Row Detail View', () => {
     const expectedTasks = ['Task 0', 'Task 1', 'Task 3', 'Task 4', 'Task 5'];
 
     cy.get('#grid21')
-      .find('.slick-row:nth(0)')
+      .find('.slick-row:nth(2)')
       .click();
 
     cy.get('#grid21')
-      .find('.innerDetailView_0 .container_0')
-      .as('detailContainer0');
+      .find('.innerDetailView_3 .container_3')
+      .as('detailContainer3');
 
-    cy.get('@detailContainer0')
+    cy.get('@detailContainer3')
       .find('h3')
-      .contains('Task 0');
+      .contains('Task 3');
 
     cy.get('#grid21')
-      .find('.slick-row:nth(8)')
+      .find('.slick-row:nth(0)')
       .click();
 
     cy.get('#grid21')
-      .find('.innerDetailView_3 .container_3')
-      .as('detailContainer3');
+      .find('.innerDetailView_0 .container_0')
+      .as('detailContainer0');
 
-    cy.get('@detailContainer3')
+    cy.get('@detailContainer0')
       .find('h3')
-      .contains('Task 3');
+      .contains('Task 0');
 
     cy.get('[data-test=close-all-btn]')
       .click();
@@ -154,7 +154,7 @@ describe('Example 21 - Row Detail View', () => {
       .should('not.exist');
 
     cy.get('#grid21')
-      .find('.innerDetailView_3 .container_3')
+      .find('.innerDetailView_1 .container_1')
       .should('not.exist');
 
     cy.get('#grid21')

test/cypress/package.json

@@ -10,8 +10,8 @@
   "author": "Ghislain B.",
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^6.2.1",
-    "mocha": "^8.2.0",
-    "mochawesome": "^6.1.1"
+    "cypress": "^6.3.0",
+    "mocha": "^8.2.1",
+    "mochawesome": "^6.2.1"
   }
 }