Merge pull request #5016 from IgniteUI/ddincheva/summary-4949

Recalculate summaries when row is updated --master

CHANGELOG.md

@@ -1,7 +1,6 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
-
 ## 8.0.0
 - `IgxCombo`: Removed the following deprecated (since 6.2.0) template selectors:
     - `#emptyTemplate`
@@ -38,7 +37,7 @@ All notable changes for each version of this project will be documented in this
               <igx-icon igxListAction>info</igx-icon>
             </igx-list-item>
         </igx-list>
-        
+
         <igx-list>
           <igx-list-item [isHeader]="true">List items</igx-list-item>
           <igx-list-item>
@@ -50,7 +49,8 @@ All notable changes for each version of this project will be documented in this
     ```
 
 ## 7.3.4
-
+- `IgxGrid` - summaries
+    - `clearSummaryCache()` and `recalculateSummaries()` methods are now removed from the IgxGrid API, beacause they are no longer needed; summaries are updated when some change is perform and the summary cache is cleared automatically when needed;
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Breaking Change** The **condition** parameter of the `filterGlobal` method is no longer optional. When the filterGlobal method is called with an invalid condition, it will not clear the existing filters for all columns.
 
@@ -110,7 +110,7 @@ All notable changes for each version of this project will be documented in this
 - `igx-core()` now includes some styles for printing layout.
 In order to turn them off, you need to pass an argument and set it to `false`
     ```
-        @include igx-core($print-layout: false); 
+        @include igx-core($print-layout: false);
     ```
 
 - `Pager`
@@ -140,6 +140,11 @@ In order to turn them off, you need to pass an argument and set it to `false`
 - Group comparer is not taken into consideration when column is dragged to grouped area #4663
 
 ## 7.3.1
+`igx-core()` now includes some styles for printing layout. In order to turn them off, you need to pass an argument and set it to `false`
+
+```
+@include igx-core($print-layout: false);
+```
 - `IgxGrid` Custom keyboard navigation
     - `onFocusChange` event is deprecated.
     - `onGridKeydown` event is exposed which is emitted when `keydown` is triggered over element inside grid's body
@@ -184,7 +189,7 @@ In order to turn them off, you need to pass an argument and set it to `false`
     - **Feature** Grid components now supports [Grid Row Dragging ](https://github.com/IgniteUI/igniteui-angular/wiki/Row-Dragging). It lets users pass the data of a grid record on to another surface, which has been configured to process/render this data. It can be enabled by using the `rowDraggable` input of the grid.
 
     - **Feature** The Excel Style Filter dialog and its sub-dialogs now have a display density based on the `displayDensity` input of their respective grid.
-- `igxTreeGrid` 
+- `igxTreeGrid`
     - **Feature** The `IgxTreeGridComponent` now supports loading child rows on demand using the newly added `loadChildrenOnDemand` and `hasChildrenKey` input properties.
 - `IgxListComponent`
     - **Feature** The `IgxListComponent` now provides the ability to choose a display density from a predefined set of options: **compact**, **cosy** and **comfortable** (default one). It can be set by using the `displayDensity` input of the list.
@@ -268,9 +273,9 @@ In order to turn them off, you need to pass an argument and set it to `false`
 ## 7.2.9
 `igx-core()` now includes some styles for printing layout.
 In order to turn them off, you need to pass an argument and set it to `false`
-  
+
 ```
- @include igx-core($print-layout: false); 
+ @include igx-core($print-layout: false);
 ```
 
 - `Pager`
@@ -288,7 +293,7 @@ In order to turn them off, you need to pass an argument and set it to `false`
 - [igx-grid] some cells don't go into edit state or selected state when resizing window. #4746
 - igx-tree-grid when no data in grid pagination shows wrong #4666
 - ElasticPositionStrategy should resize shown element with Center/Middle directions #4564
-- ESF custom dialog new filter not fully visible #4639 
+- ESF custom dialog new filter not fully visible #4639
 - igx-grid: row virtualization doesn't work when setting height in percent if you fetch and bind data after initial rendering. #3949
 - Grid height is calculated wrongly as grid width narrows #4745
 - [igx-grid][IE11] filtering problems with IME mode. #4636

projects/igniteui-angular/src/lib/grids/grid-base.component.ts

@@ -3718,13 +3718,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         this.gridAPI.clear_sort(name);
     }
 
-    /**
-     * @hidden
-     */
-    @DeprecateMethod('There is no need to call clearSummaryCache method.The summary cache is cleared automatically when needed.')
-    public clearSummaryCache(args?) {
-    }
-
     /**
      * @hidden
      */
@@ -3775,13 +3768,6 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         this.calculateGridSizes();
     }
 
-    /**
-     * @hidden
-     */
-    @DeprecateMethod('There is no need to call recalculateSummaries method. The summaries are recalculated automatically when needed.')
-    public recalculateSummaries() {
-    }
-
     /**
      * Finds the next occurrence of a given string in the grid and scrolls to the cell if it isn't visible.
      * Returns how many times the grid contains the string.

projects/igniteui-angular/src/lib/grids/grid/grid-summary.spec.ts

@@ -706,6 +706,55 @@ describe('IgxGrid - Summaries', () => {
 
         });
 
+        it('CRUD: should not recalc summaries when update cell and rowEditing is set to TRUE', async() => {
+            const fixture = TestBed.createComponent(SummariesGroupByWithScrollsComponent);
+            await wait(30);
+            fixture.detectChanges();
+            const grid = fixture.componentInstance.grid;
+            grid.getColumnByName('ID').editable = true;
+            grid.getColumnByName('ParentID').editable = true;
+            fixture.detectChanges();
+            grid.rowEditable = true;
+            fixture.detectChanges();
+
+            grid.groupBy({
+                fieldName: 'ID', dir: SortingDirection.Asc, ignoreCase: false
+            });
+            fixture.detectChanges();
+            const cell = grid.getCellByColumn(1, 'ParentID');
+            cell.nativeElement.focus();
+            fixture.detectChanges();
+
+            let summaryRow = fixture.debugElement.query(By.css(SUMMARY_ROW));
+            HelperUtils.verifyColumnSummaries(summaryRow, 1,
+                ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['1', '17', '17', '17', '17']);
+
+            UIInteractions.triggerKeyDownEvtUponElem('enter', cell.nativeElement, true);
+            await wait(50);
+            fixture.detectChanges();
+
+            const editTemplate = fixture.debugElement.query(By.css('input[type=\'number\']'));
+            UIInteractions.sendInput(editTemplate, 87);
+            fixture.detectChanges();
+
+            UIInteractions.triggerKeyDownEvtUponElem('tab', cell.nativeElement, true, false, true);
+            await wait(50);
+            fixture.detectChanges();
+
+            summaryRow = fixture.debugElement.query(By.css(SUMMARY_ROW));
+            HelperUtils.verifyColumnSummaries(summaryRow, 1,
+                ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['1', '17', '17', '17', '17']);
+
+            const idCell = grid.getCellByColumn(1, 'ID');
+            UIInteractions.triggerKeyDownEvtUponElem('enter', idCell.nativeElement, true);
+            await wait(50);
+            fixture.detectChanges();
+
+            summaryRow = fixture.debugElement.query(By.css(SUMMARY_ROW));
+            HelperUtils.verifyColumnSummaries(summaryRow, 1,
+                ['Count', 'Min', 'Max', 'Sum', 'Avg'], ['1', '87', '87', '87', '87']);
+        });
+
         it('CRUD and GroupBy: recalculate summaries when update cell which is grouped', fakeAsync(/** height/width setter rAF */() => {
             const fixture = TestBed.createComponent(SummariesGroupByWithScrollsComponent);
             fixture.detectChanges();
@@ -1484,6 +1533,46 @@ describe('IgxGrid - Summaries', () => {
             HelperUtils.verifyColumnSummariesBySummaryRowIndex(fix, 15, 4, ['Min', 'Max'], ['19', '25']);
         }));
 
+        it('CRUD: summaries should be updated when row is submitted when rowEditable=true', (async () => {
+            grid.getColumnByName('Age').editable = true;
+            grid.getColumnByName('HireDate').editable = true;
+            fix.detectChanges();
+            grid.rowEditable = true;
+            fix.detectChanges();
+
+            grid.groupBy({
+                fieldName: 'ParentID', dir: SortingDirection.Asc, ignoreCase: false
+            });
+            fix.detectChanges();
+            const cell = grid.getCellByColumn(1, 'Age');
+
+            let summaryRow = fix.debugElement.query(By.css(SUMMARY_ROW));
+            HelperUtils.verifyColumnSummaries(summaryRow, 4, ['Min', 'Max'], ['27', '50']);
+
+            UIInteractions.triggerKeyDownEvtUponElem('enter', cell.nativeElement, true);
+            await wait(50);
+            fix.detectChanges();
+
+            const editTemplate = fix.debugElement.query(By.css('input[type=\'number\']'));
+            UIInteractions.sendInput(editTemplate, 87);
+            fix.detectChanges();
+
+            UIInteractions.triggerKeyDownEvtUponElem('tab', cell.nativeElement, true, false, true);
+            await wait(50);
+            fix.detectChanges();
+
+            summaryRow = fix.debugElement.query(By.css(SUMMARY_ROW));
+            HelperUtils.verifyColumnSummaries(summaryRow, 4, ['Min', 'Max'], ['27', '50']);
+
+            const hireDateCell = grid.getCellByColumn(1, 'HireDate');
+            UIInteractions.triggerKeyDownEvtUponElem('enter', hireDateCell.nativeElement, true);
+            await wait(50);
+            fix.detectChanges();
+
+            summaryRow = fix.debugElement.query(By.css(SUMMARY_ROW));
+            HelperUtils.verifyColumnSummaries(summaryRow, 4, ['Min', 'Max'], ['27', '87']);
+        }));
+
         it('Grouping: Update row and change grouping', (async () => {
             grid.groupBy({
                 fieldName: 'ParentID', dir: SortingDirection.Asc, ignoreCase: false

projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts

@@ -2777,7 +2777,6 @@ describe('IgxGrid Component Tests', () => {
                 (<any>grid).gridAPI.get_cell_inEditMode().value = newDate;
                 // targetCell.update(newDate);
                 fix.detectChanges();
-                grid.recalculateSummaries();
 
                 // get the summaries for a particular column
                 const summaries = targetCell.gridAPI.get_summary_data();

projects/igniteui-angular/src/lib/grids/summaries/grid-summary.service.ts

@@ -31,26 +31,23 @@ export class IgxGridSummaryService {
             return;
         }
         if (args.data) {
-            let rowID = args.rowID;
-            if (!args.rowID) {
-                rowID = this.grid.primaryKey ? args.data[this.grid.primaryKey] : args.data;
-            }
+            const rowID = this.grid.primaryKey ? args.data[this.grid.primaryKey] : args.data;
             this.removeSummaries(rowID);
         }
         if (args.rowID !== undefined && args.rowID !== null) {
-            const columnName = args.cellID ? this.grid.columnList.find(col => col.index === args.cellID.columnID).field : undefined;
+            let columnName = args.cellID ? this.grid.columnList.find(col => col.index === args.cellID.columnID).field : undefined;
+            if (columnName && this.grid.rowEditable) { return; }
+
             const isGroupedColumn = this.grid.groupingExpressions &&
                     this.grid.groupingExpressions.map(expr => expr.fieldName).indexOf(columnName) !== -1;
-            if (columnName && isGroupedColumn) {
-                this.removeSummaries(args.rowID);
-                return;
+            if (columnName && isGroupedColumn ) {
+                columnName = undefined;
             }
             this.removeSummaries(args.rowID, columnName);
         }
     }
 
     public removeSummaries(rowID, columnName?) {
-        if (this.summaryCacheMap.size === 0) { return; }
         this.deleteSummaryCache(this.rootSummaryID, columnName);
         if (this.summaryCacheMap.size === 1 && this.summaryCacheMap.has(this.rootSummaryID)) { return; }
         if (this.isTreeGrid) {
@@ -65,7 +62,6 @@ export class IgxGridSummaryService {
             if (this.grid.transactions.enabled && this.deleteOperation) {
                 this.deleteOperation = false;
                 this.summaryCacheMap.clear();
-                return;
             }
         } else {
            const summaryIds = this.getSummaryID(rowID, this.grid.groupingExpressions);