fix(examples): queued edit cells style should follow page it was edit…

…ed (#167)

* fix(examples): queued edit cells style should follow page it was edited

* refactor: update to Cypress 6.0

examples/webpack-demo-vanilla-bundle/src/examples/example12.ts

@@ -113,6 +113,7 @@ export class Example12 {
     this._bindingEventService.bind(this.gridContainerElm, 'ongridstatechanged', this.handleOnSelectedRowsChanged.bind(this));
     this._bindingEventService.bind(this.gridContainerElm, 'ondblclick', () => this.openCompositeModal('edit', 50));
     this._bindingEventService.bind(this.gridContainerElm, 'oncompositeeditorchange', this.handleOnCompositeEditorChange.bind(this));
+    this._bindingEventService.bind(this.gridContainerElm, 'onpaginationchanged', this.handlePaginationChanged.bind(this));
   }
 
   dispose() {
@@ -375,12 +376,11 @@ export class Example12 {
 
           if (prevSerializedValue !== serializedValue) {
             const finalColumn = Array.isArray(editCommand.prevSerializedValue) ? editorColumns[index] : column;
-            this.editedItems[editCommand.row] = item; // keep items by their row indexes, if the row got edited twice then we'll keep only the last change
+            this.editedItems[this.gridOptions.datasetIdPropertyName || 'id'] = item; // keep items by their row indexes, if the row got edited twice then we'll keep only the last change
             this.sgb.slickGrid.invalidate();
             editCommand.execute();
 
-            const hash = { [editCommand.row]: { [finalColumn.field]: 'unsaved-editable-field' } };
-            this.sgb.slickGrid.setCellCssStyles(`unsaved_highlight_${[finalColumn.field]}${editCommand.row}`, hash);
+            this.renderUnsavedCellStyling(item, finalColumn, editCommand);
             modifiedColumns.push(finalColumn);
           }
         });
@@ -513,6 +513,11 @@ export class Example12 {
     */
   }
 
+  handlePaginationChanged() {
+    this.removeAllUnsavedStylingFromCell();
+    this.renderUnsavedStylingOnAllVisibleCells();
+  }
+
   handleOnSelectedRowsChanged(event) {
     const gridState = event && event.detail && event.detail.gridState;
     if (Array.isArray(gridState?.rowSelection.dataContextIds)) {
@@ -577,6 +582,29 @@ export class Example12 {
     }
   }
 
+  renderUnsavedStylingOnAllVisibleCells() {
+    for (const lastEdit of this.editQueue) {
+      if (lastEdit) {
+        const { item, columns, editCommand } = lastEdit;
+        if (Array.isArray(columns)) {
+          columns.forEach((col) => {
+            this.renderUnsavedCellStyling(item, col, editCommand);
+          });
+        }
+      }
+    }
+  }
+
+  renderUnsavedCellStyling(item, column, editCommand) {
+    if (editCommand && item && column) {
+      const row = this.sgb.dataView.getRowByItem(item);
+      if (row >= 0) {
+        const hash = { [row]: { [column.field]: 'unsaved-editable-field' } };
+        this.sgb.slickGrid.setCellCssStyles(`unsaved_highlight_${[column.field]}${row}`, hash);
+      }
+    }
+  }
+
   saveAll() {
     // Edit Queue (array increases every time a cell is changed, regardless of item object)
     console.log(this.editQueue);

package.json

@@ -50,7 +50,7 @@
     "@types/node": "^14.14.9",
     "@typescript-eslint/eslint-plugin": "^4.8.1",
     "@typescript-eslint/parser": "^4.8.1",
-    "cypress": "^5.6.0",
+    "cypress": "^6.0.0",
     "eslint": "^7.13.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-prefer-arrow": "^1.2.2",

yarn.lock

@@ -3913,10 +3913,10 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
-cypress@^5.6.0:
-  version "5.6.0"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-5.6.0.tgz#6781755c3ddfd644ce3179fcd7389176c0c82280"
-  integrity sha512-cs5vG3E2JLldAc16+5yQxaVRLLqMVya5RlrfPWkC72S5xrlHFdw7ovxPb61s4wYweROKTyH01WQc2PFzwwVvyQ==
+cypress@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-6.0.0.tgz#57050773c61e8fe1e5c9871cc034c616fcacded9"
+  integrity sha512-A/w9S15xGxX5UVeAQZacKBqaA0Uqlae9e5WMrehehAdFiLOZj08IgSVZOV8YqA9OH9Z0iBOnmsEkK3NNj43VrA==
   dependencies:
     "@cypress/listr-verbose-renderer" "^0.4.1"
     "@cypress/request" "^2.88.5"