Merge pull request #448 from ghiscoding/bugfix/composite-previous-edi…

…t-affecting-mass-update

fix(composite): calling Edit change shouldn't affect Mass-Update

packages/common/src/services/__tests__/resizer.service.spec.ts

@@ -584,7 +584,7 @@ describe('Resizer Service', () => {
           expect(resizeSpy).toHaveBeenNthCalledWith(2);
           expect(resizeSpy).toHaveBeenNthCalledWith(3);
           done();
-        }, 20);
+        }, 25);
       });
 
       it('should try to resize grid when its UI is deemed broken and expect "resizeGridWhenStylingIsBrokenUntilCorrected" but it should stop whenever we force it', (done) => {

packages/composite-editor-component/src/slick-composite-editor.component.spec.ts

@@ -48,6 +48,7 @@ const gridOptionsMock = {
 const dataViewStub = {
   getItem: jest.fn(),
   getItemById: jest.fn(),
+  getItemCount: jest.fn(),
   getItems: jest.fn(),
   getLength: jest.fn(),
   refresh: jest.fn(),
@@ -993,6 +994,7 @@ describe('CompositeEditorService', () => {
         const mockProduct1 = { id: 222, address: { zip: 123456 }, productName: 'Product ABC', price: 12.55 };
         const mockProduct2 = { address: { zip: 345678 }, product: { name: 'Product DEF', price: 22.33 } };
         jest.spyOn(gridStub, 'getOptions').mockReturnValue(newGridOptions);
+        jest.spyOn(dataViewStub, 'getItemCount').mockReturnValue(1);
         jest.spyOn(dataViewStub, 'getItems').mockReturnValue([mockProduct1]);
         const gridSrvAddItemSpy = jest.spyOn(gridServiceStub, 'addItem');
         const saveSpy = jest.spyOn(gridStub.getEditController(), 'commitCurrentEdit');

packages/composite-editor-component/src/slick-composite-editor.component.ts

@@ -265,6 +265,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
         return null;
       }
 
+      this._formValues = null; // make sure there's no leftover from previous change
       this._options = { ...defaultOptions, ...this.gridOptions.compositeEditorOptions, ...options, labels: { ...this.gridOptions.compositeEditorOptions?.labels, ...options?.labels } }; // merge default options with user options
       this._options.backdrop = options.backdrop !== undefined ? options.backdrop : 'static';
       const viewColumnLayout = this._options.viewColumnLayout || 1;
@@ -313,8 +314,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
         this._originalDataContext = deepCopy(dataContext);
         this._columnDefinitions = this.grid.getColumns();
         const selectedRowsIndexes = this.hasRowSelectionEnabled() ? this.grid.getSelectedRows() : [];
-        const fullDataset = this.dataView?.getItems() ?? [];
-        const fullDatasetLength = (Array.isArray(fullDataset)) ? fullDataset.length : 0;
+        const fullDatasetLength = this.dataView?.getItemCount() ?? 0;
         this._lastActiveRowNumber = activeRow;
         const gridStateSelection = this.gridStateService?.getCurrentRowSelections() as CurrentRowSelection;
         const dataContextIds = gridStateSelection?.dataContextIds || [];
@@ -997,8 +997,7 @@ export class SlickCompositeEditorComponent implements ExternalResource {
 
   /** Insert an item into the DataView or throw an error when finding duplicate id in the dataset */
   protected insertNewItemInDataView(item: any) {
-    const fullDataset = this.dataView?.getItems() ?? [];
-    const fullDatasetLength = (Array.isArray(fullDataset)) ? fullDataset.length : 0;
+    const fullDatasetLength = this.dataView?.getItemCount() ?? 0;
     const newId = this._options.insertNewId ?? fullDatasetLength + 1;
     item[this.gridOptions.datasetIdPropertyName || 'id'] = newId;
 

test/cypress/integration/example12.spec.js

@@ -273,6 +273,10 @@ describe('Example 12 - Composite Editor Modal', { retries: 1 }, () => {
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('have.length', 1);
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('not.be.empty');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table');
+
+    // next few rows Title should be unchanged
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 0');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 1111');
   });
 
   it('should open the Composite Editor (Edit Item) and expect all form inputs to be filled with TASK 8888 data of previous create item', () => {
@@ -303,6 +307,10 @@ describe('Example 12 - Composite Editor Modal', { retries: 1 }, () => {
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(7)`).find('.mdi.mdi-check.checkmark-icon').should('not.exist');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(8)`).should('be.empty');
     cy.get(`[style="top:${GRID_ROW_HEIGHT * 0}px"] > .slick-cell:nth(9)`).should('contain', 'Tasty Granite Table');
+
+    // next few rows Title should be unchanged
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 1}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 0');
+    cy.get(`[style="top:${GRID_ROW_HEIGHT * 2}px"] > .slick-cell:nth(1)`).should('contain', 'TASK 1111');
   });
 
   it('should open the Composite Editor (Mass Update) and be able to change some of the inputs in the form', () => {