Merge branch '5.3.x' into styling-regression-fixes

zdrawku · web-flow · commit f18406c750e7 · 2018-04-17T16:34:52.000+03:00
diff --git a/README.md b/README.md
@@ -9,6 +9,8 @@
 You can find source files under the [`src`](https://github.com/IgniteUI/igniteui-angular/tree/master/src) folder, including samples and tests.
 
 #### [**View running samples here**](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid.html)
+#### [**Install our VSCode tooltip extension**](https://marketplace.visualstudio.com/items?itemName=Infragistics.igniteui-angular-tooltips)
+![](https://dl.infragistics.com/tools/extensions/angular-tooltips/tooltip_preview.gif)
 
 **IMPORTANT** The repository has been renamed from `igniteui-js-blocks` to `igniteui-angular`. Read more on our new [naming convention](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-github-repo-name-changes). 
 
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -1,6 +1,6 @@
 # Roadmap - Ignite UI for Angular
 
-## Milestone 2 (due April 16th, 2018)
+## Milestone 2 (due April 23rd, 2018)
 1.**[DONE]** Expanding Ignite UI CLI views and templates with Ignite UI for Angular
    1. [DONE]Adding component views like App Host, Tabbar, List
    2. [DONE]Updating the default project look
diff --git a/src/grid/api.service.ts b/src/grid/api.service.ts
@@ -27,16 +27,23 @@ export class IgxGridAPIService {
     public get_column_by_name(id: string, name: string): IgxColumnComponent {
         return this.get(id).columnList.find((col) => col.field === name);
     }
+
     public set_summary_by_column_name(id: string, name: string) {
         if (!this.summaryCacheMap.get(id)) {
             this.summaryCacheMap.set(id, new Map<string, any[]>());
         }
         const column = this.get_column_by_name(id, name);
-        if (!this.summaryCacheMap.get(id).get(column.field)) {
-            this.summaryCacheMap.get(id).set(column.field,
-                column.summaries.operate(this.get(id).data.map((rec) => rec[column.field])));
+        if (this.get(id).filteredData) {
+            if (this.get(id).filteredData.length > 0) {
+                this.calculateSummaries(id, column, this.get(id).filteredData.map((rec) => rec[column.field]));
+            } else {
+                this.calculateSummaries(id, column, this.get(id).filteredData.map((rec) => rec[column.field]));
+            }
+        } else {
+            this.calculateSummaries(id, column, this.get(id).data.map((rec) => rec[column.field]));
         }
     }
+
     public get_summaries(id: string) {
         return this.summaryCacheMap.get(id);
     }
@@ -162,6 +169,13 @@ export class IgxGridAPIService {
         this.get(id).filteredData = null;
     }
 
+    protected calculateSummaries(id: string, column, data) {
+        if (!this.summaryCacheMap.get(id).get(column.field)) {
+            this.summaryCacheMap.get(id).set(column.field,
+                column.summaries.operate(data));
+        }
+    }
+
     public clear_sort(id, fieldName) {
         const sortingState = this.get(id).sortingExpressions;
         const index = sortingState.findIndex((expr) => expr.fieldName === fieldName);
diff --git a/src/grid/grid-filtering.component.ts b/src/grid/grid-filtering.component.ts
@@ -190,6 +190,7 @@ export class IgxGridFilterComponent implements IGridBus, OnInit, OnDestroy {
         this._value = null;
         this._filterCondition = undefined;
         this.gridAPI.clear_filter(this.gridID, this.column.field);
+        this.gridAPI.get(this.gridID).clearSummaryCache();
     }
 
     public conditionChanged(value): void {
diff --git a/src/grid/grid-summary.component.ts b/src/grid/grid-summary.component.ts
@@ -61,6 +61,7 @@ export class IgxGridSummaryComponent implements IGridBus, OnInit, OnDestroy, DoC
     protected subscriptionOnEdit$;
     protected subscriptionOnAdd$;
     protected subscriptionOnDelete$;
+    protected subscriptionOnFilter$;
     private itemClass = "igx-grid-summary__item";
     private hiddenItemClass = "igx-grid-summary__item--inactive";
     private summaryResultClass = "igx-grid-summary-item__result--left-align";
@@ -82,6 +83,9 @@ export class IgxGridSummaryComponent implements IGridBus, OnInit, OnDestroy, DoC
         if (this.subscriptionOnDelete$) {
             this.subscriptionOnDelete$.unsubscribe();
         }
+        if (this.subscriptionOnFilter$) {
+            this.subscriptionOnFilter$.unsubscribe();
+        }
     }
 
     ngDoCheck() {
@@ -98,6 +102,10 @@ export class IgxGridSummaryComponent implements IGridBus, OnInit, OnDestroy, DoC
                     this.clearAll();
                 }
             });
+            this.subscriptionOnFilter$ = this.gridAPI.get(this.gridID).onFilteringDone.subscribe((data) => {
+                this.fieldName = data.fieldName;
+                this.clearAll();
+            });
             this.subscriptionOnAdd$ = this.gridAPI.get(this.gridID).onRowAdded.subscribe(() => this.clearAll());
             this.subscriptionOnDelete$ = this.gridAPI.get(this.gridID).onRowDeleted.subscribe(() => this.clearAll());
         }
@@ -111,6 +119,8 @@ export class IgxGridSummaryComponent implements IGridBus, OnInit, OnDestroy, DoC
     @autoWire(true)
     clearAll() {
         this.gridAPI.remove_summary(this.gridID);
+        this.gridAPI.get(this.gridID).markForCheck();
+        this.cdr.detectChanges();
     }
 
     get resolveSummaries(): any[] {
diff --git a/src/grid/grid-summary.spec.ts b/src/grid/grid-summary.spec.ts
@@ -1,14 +1,16 @@
 import { Component, DebugElement, ViewChild } from "@angular/core";
 import { async, fakeAsync, TestBed, tick } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
+import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { IgxInputDirective } from "../directives/input/input.directive";
 import { IgxDateSummaryOperand, IgxNumberSummaryOperand } from "./grid-summary";
 import { IgxGridComponent } from "./grid.component";
 import { IgxGridModule } from "./index";
 
 describe("IgxGrid - Summaries", () => {
     const SUMMARY_CLASS = ".igx-grid-summary";
     const SUMMARY_LABEL_CLASS = ".igx-grid-summary__label";
-    const SUMMARY_VALUE_CLASS = "igx-grid-summary__result";
+    const SUMMARY_VALUE_CLASS = ".igx-grid-summary__result";
     const ITEM_CLASS = "igx-grid-summary__item";
     const HIDDEN_ITEM_CLASS = "igx-grid-summary__item--inactive";
 
@@ -18,7 +20,7 @@ describe("IgxGrid - Summaries", () => {
                 NoActiveSummariesComponent,
                 SummaryColumnComponent
             ],
-            imports: [IgxGridModule.forRoot()]
+            imports: [BrowserAnimationsModule, IgxGridModule.forRoot()]
         })
             .compileComponents();
     }));
@@ -270,10 +272,12 @@ describe("IgxGrid - Summaries", () => {
     it("should calc tfoot height according number of summary functions", () => {
         const fixture = TestBed.createComponent(SummaryColumnComponent);
         fixture.detectChanges();
-
+        const initialSummarySize = 36.36;
         const grid = fixture.componentInstance.grid1;
         const summaries = fixture.debugElement.queryAll(By.css("igx-grid-summary"));
-        const tfootSize = fixture.debugElement.query(By.css(".igx-grid__tfoot")).query(By.css(".igx-grid__tr")).nativeElement.clientHeight;
+        const footerRow = fixture.debugElement.query(By.css(".igx-grid__tfoot")).query(By.css(".igx-grid__tr"))
+        .nativeElement.style["height"].match(/\d+\.+\d/);
+        const tfootSize = +footerRow;
 
         let maxSummaryLength = 0;
         let index = 0;
@@ -284,7 +288,7 @@ describe("IgxGrid - Summaries", () => {
             }
             index++;
         });
-        const expectedHeight = maxSummaryLength * 36;
+        const expectedHeight = maxSummaryLength * initialSummarySize;
         expect(tfootSize).toBe(expectedHeight);
     });
     it("should calculate summaries for 'number' dataType or return if no data is provided", () => {
@@ -325,6 +329,47 @@ describe("IgxGrid - Summaries", () => {
         expect(emptySummaries[1].summaryResult).toBe(undefined);
         expect(emptySummaries[2].summaryResult).toBe(undefined);
     });
+    it("should calculate summaries only over filteredData",  (done) => {
+        const fixture = TestBed.createComponent(SummaryColumnComponent);
+        fixture.detectChanges();
+
+        const grid = fixture.componentInstance.grid1;
+        const filterUIContainer = fixture.debugElement.query(By.css("igx-grid-filter"));
+        const filterIcon = filterUIContainer.query(By.css("igx-icon"));
+        const input = filterUIContainer.query(By.directive(IgxInputDirective));
+        const select = filterUIContainer.query(By.css("div > select"));
+        const summaries = fixture.debugElement.queryAll(By.css("igx-grid-summary"));
+
+        filterIcon.nativeElement.click();
+        fixture.detectChanges();
+        select.nativeElement.value = "equals";
+        select.nativeElement.dispatchEvent(new Event("change"));
+
+        sendInput(input, "0", fixture).then(() => {
+            fixture.detectChanges();
+            const filterResult = grid.rowList.length;
+            expect(filterResult).toEqual(3);
+            let index = 0;
+            grid.columnList.forEach((col) => {
+                if (col.hasSummary) {
+                    const values = summaries[index].queryAll(By.css(SUMMARY_VALUE_CLASS));
+                    expect(+values[0].nativeElement.innerText).toBe(filterResult);
+                    if (col.field === "UnitsInStock") {
+                        expect(values[1].nativeElement.innerText).toBe("0");
+                        expect(values[2].nativeElement.innerText).toBe("0");
+                    }
+                }
+                index++;
+            });
+            done();
+        });
+    });
+    function sendInput(element, text: string, fix) {
+        element.nativeElement.value = text;
+        element.nativeElement.dispatchEvent(new Event("input"));
+        fix.detectChanges();
+        return fix.whenStable();
+    }
 
 });
 
@@ -372,7 +417,7 @@ export class  NoActiveSummariesComponent {
             </igx-column>
             <igx-column field="InStock" [dataType]="'boolean'" [hasSummary]="true">
             </igx-column>
-            <igx-column field="UnitsInStock" [dataType]="'number'" [hasSummary]="true">
+            <igx-column field="UnitsInStock" [dataType]="'number'" [hasSummary]="true" [filterable]="true">
             </igx-column>
             <igx-column field="OrderDate" width="200px" [dataType]="'date'" [sortable]="true" [hasSummary]="true">
             </igx-column>
diff --git a/src/grid/grid.component.ts b/src/grid/grid.component.ts
@@ -46,7 +46,7 @@ import { IgxGridRowComponent } from "./row.component";
 
 let NEXT_ID = 0;
 const DEBOUNCE_TIME = 16;
-
+const DEFAULT_SUMMARY_HEIGHT = 36.36;
 export interface IGridCellEventArgs {
     cell: IgxGridCellComponent;
     event: Event;
@@ -698,6 +698,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
         if (!this.gridAPI.get_column_by_name(this.id, name)) {
             return;
         }
+        this.clearSummaryCache();
         this.gridAPI.clear_filter(this.id, name);
     }
 
@@ -741,7 +742,6 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
                 this._unpinnedColumns.splice(this._unpinnedColumns.indexOf(col), 1);
             }
         }
-
         this.markForCheck();
         return true;
     }
@@ -838,7 +838,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af
                 maxSummaryLength = currentLength;
             }
         });
-        return maxSummaryLength * (this.tfoot.nativeElement.clientHeight ? this.tfoot.nativeElement.clientHeight : 36);
+        return maxSummaryLength * (this.tfoot.nativeElement.clientHeight ? this.tfoot.nativeElement.clientHeight : DEFAULT_SUMMARY_HEIGHT);
     }
 
     protected calculateGridSizes() {
diff --git a/src/tabs/tabs.component.ts b/src/tabs/tabs.component.ts
@@ -20,7 +20,6 @@ import {
     ViewChildren
 } from "@angular/core";
 
-import { isNullOrUndefined } from "util";
 import { IgxBadgeModule } from "../badge/badge.component";
 import { IgxRippleModule } from "../directives/ripple/ripple.directive";
 import { IgxIconModule } from "../icon";
@@ -85,7 +84,7 @@ export class IgxTabsComponent implements AfterViewInit {
         }
 
         // Layout fix for items with icons
-        if (!isNullOrUndefined(iconLabelFound)) {
+        if (iconLabelFound !== undefined) {
             css = `${css} ${iconStyle}`;
         }
 

Original file line number	Diff line number	Diff line change
`@@ -190,6 +190,7 @@ export class IgxGridFilterComponent implements IGridBus, OnInit, OnDestroy {`
`190`	`190`	`this._value = null;`
`191`	`191`	`this._filterCondition = undefined;`
`192`	`192`	`this.gridAPI.clear_filter(this.gridID, this.column.field);`
	`193`	`+ this.gridAPI.get(this.gridID).clearSummaryCache();`
`193`	`194`	`}`
`194`	`195`
`195`	`196`	`public conditionChanged(value): void {`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@ import { IgxGridRowComponent } from "./row.component";`
`46`	`46`
`47`	`47`	`let NEXT_ID = 0;`
`48`	`48`	`const DEBOUNCE_TIME = 16;`
`49`		`-`
	`49`	`+const DEFAULT_SUMMARY_HEIGHT = 36.36;`
`50`	`50`	`export interface IGridCellEventArgs {`
`51`	`51`	`cell: IgxGridCellComponent;`
`52`	`52`	`event: Event;`
`@@ -698,6 +698,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af`
`698`	`698`	`if (!this.gridAPI.get_column_by_name(this.id, name)) {`
`699`	`699`	`return;`
`700`	`700`	`}`
	`701`	`+ this.clearSummaryCache();`
`701`	`702`	`this.gridAPI.clear_filter(this.id, name);`
`702`	`703`	`}`
`703`	`704`
`@@ -741,7 +742,6 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af`
`741`	`742`	`this._unpinnedColumns.splice(this._unpinnedColumns.indexOf(col), 1);`
`742`	`743`	`}`
`743`	`744`	`}`
`744`		`-`
`745`	`745`	`this.markForCheck();`
`746`	`746`	`return true;`
`747`	`747`	`}`
`@@ -838,7 +838,7 @@ export class IgxGridComponent implements OnInit, OnDestroy, AfterContentInit, Af`
`838`	`838`	`maxSummaryLength = currentLength;`
`839`	`839`	`}`
`840`	`840`	`});`
`841`		`- return maxSummaryLength * (this.tfoot.nativeElement.clientHeight ? this.tfoot.nativeElement.clientHeight : 36);`
	`841`	`+ return maxSummaryLength * (this.tfoot.nativeElement.clientHeight ? this.tfoot.nativeElement.clientHeight : DEFAULT_SUMMARY_HEIGHT);`
`842`	`842`	`}`
`843`	`843`
`844`	`844`	`protected calculateGridSizes() {`
Original file line number	Diff line number	Diff line change
`@@ -20,7 +20,6 @@ import {`
`20`	`20`	`ViewChildren`
`21`	`21`	`} from "@angular/core";`
`22`	`22`
`23`		`-import { isNullOrUndefined } from "util";`
`24`	`23`	`import { IgxBadgeModule } from "../badge/badge.component";`
`25`	`24`	`import { IgxRippleModule } from "../directives/ripple/ripple.directive";`
`26`	`25`	`import { IgxIconModule } from "../icon";`
`@@ -85,7 +84,7 @@ export class IgxTabsComponent implements AfterViewInit {`
`85`	`84`	`}`
`86`	`85`
`87`	`86`	`// Layout fix for items with icons`
`88`		`- if (!isNullOrUndefined(iconLabelFound)) {`
	`87`	`+ if (iconLabelFound !== undefined) {`
`89`	`88`	css = `${css} ${iconStyle}`;
`90`	`89`	`}`
`91`	`90`