Merge branch '8.1.x' into tzhelev/fix-5238-8.1.x

DiyanDimitrov · web-flow · commit 28db0d6b1ac9 · 2019-07-31T11:17:52.000+03:00
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -8,6 +8,9 @@
 2. IgxGrid row and cell selection modes [#4989](https://github.com/IgniteUI/igniteui-angular/issues/4989)
 3. Fluent Theme [#5335](https://github.com/IgniteUI/igniteui-angular/issues/5335)
 4. Drag and Drop enhancements [#5319](https://github.com/IgniteUI/igniteui-angular/issues/5319)
+5. Multi-View Calendar + Range DatePicker [#4282](https://github.com/IgniteUI/igniteui-angular/issues/4282)
+6. Custom grid row selector templates [#4998](https://github.com/IgniteUI/igniteui-angular/issues/4998)
+7. Per-column Filtering Strategies [#5323](https://github.com/IgniteUI/igniteui-angular/issues/5323)
 
 ## Going down the road
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
@@ -373,7 +373,7 @@
     }
 
     %igx-list__item-lines {
-        color: --var($theme, 'item-text-color');
+        color: currentColor;
         display: flex;
         flex-direction: column;
         flex: 1 0 0%;
diff --git a/projects/igniteui-angular/src/lib/grids/api.service.ts b/projects/igniteui-angular/src/lib/grids/api.service.ts
@@ -328,13 +328,6 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
     }
 
     public clear_filter(fieldName: string) {
-        if (fieldName) {
-            const column = this.get_column_by_name(fieldName);
-            if (!column) {
-                return;
-            }
-        }
-
         const grid = this.grid;
         grid.endEdit(false);
         const filteringState = grid.filteringExpressionsTree;
@@ -426,6 +419,9 @@ export class GridBaseAPIService <T extends IgxGridBaseComponent & IGridDataBinda
     protected remove_grouping_expression(fieldName) {
     }
 
+    public clear_groupby(name?: string | Array<string>) {
+    }
+
     public should_apply_number_style(column: IgxColumnComponent): boolean {
         return column.dataType === DataType.Number;
     }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.pipe.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.pipe.ts
@@ -19,7 +19,7 @@ export class IgxExcelStyleSearchFilterPipe implements PipeTransform {
 
         searchText = searchText.toLowerCase();
         const result = items.filter((it, i) => (i === 0 && it.isSpecial) ||
-            (it.value || it.value === 0) &&
+            (it.value !== null && it.value !== undefined) &&
             it.value.toString().toLowerCase().indexOf(searchText) > -1);
 
         return result.length > 1 ? result : [];
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
@@ -218,10 +218,10 @@ export class IgxFilteringService implements OnDestroy {
         if (!this.columnToExpressionsMap.has(columnId)) {
             const column = this.grid.columns.find((col) => col.field === columnId);
             const expressionUIs = new Array<ExpressionUI>();
-
-            this.generateExpressionsList(column.filteringExpressionsTree, this.grid.filteringExpressionsTree.operator, expressionUIs);
-            this.columnToExpressionsMap.set(columnId, expressionUIs);
-
+            if (column) {
+                this.generateExpressionsList(column.filteringExpressionsTree, this.grid.filteringExpressionsTree.operator, expressionUIs);
+                this.columnToExpressionsMap.set(columnId, expressionUIs);
+            }
             return expressionUIs;
         }
 
@@ -322,7 +322,7 @@ export class IgxFilteringService implements OnDestroy {
         }
 
         const column = this.grid.columns.find((col) => col.field === columnId);
-        const isComplex = this.isFilteringTreeComplex(column.filteringExpressionsTree);
+        const isComplex = column && this.isFilteringTreeComplex(column.filteringExpressionsTree);
         if (isComplex) {
             this.columnsWithComplexFilter.add(columnId);
         }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -4314,13 +4314,22 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
             diff.forEachRemovedItem((record: IterableChangeRecord<IgxColumnComponent | IgxColumnGroupComponent>) => {
                 const isColumnGroup = record.item instanceof IgxColumnGroupComponent;
                 if (!isColumnGroup) {
+                    // Clear Grouping
+                    this.gridAPI.clear_groupby(record.item.field);
+
                     // Clear Filtering
                     this.gridAPI.clear_filter(record.item.field);
 
+                    // Close filter row
+                    if ( this.filteringService.isFilterRowVisible
+                        && this.filteringService.filteredColumn
+                        && this.filteringService.filteredColumn.field === record.item.field) {
+                        this.filteringRow.close();
+                    }
+
                     // Clear Sorting
                     this.gridAPI.clear_sort(record.item.field);
                 }
-
                 removed = true;
             });
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts
@@ -5,10 +5,11 @@ import { IgxGridComponent } from './grid.component';
 import { IgxGridModule } from './index';
 import { GridTemplateStrings, ColumnDefinitions } from '../../test-utils/template-strings.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
-import { ColumnHiddenFromMarkupComponent, ColumnCellFormatterComponent } from '../../test-utils/grid-samples.spec';
+import { ColumnHiddenFromMarkupComponent, ColumnCellFormatterComponent, DynamicColumnsComponent } from '../../test-utils/grid-samples.spec';
 import { wait } from '../../test-utils/ui-interactions.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular';
 
 describe('IgxGrid - Column properties', () => {
     configureTestSuite();
@@ -24,7 +25,8 @@ describe('IgxGrid - Column properties', () => {
                 TemplatedInputColumnsComponent,
                 ColumnCellFormatterComponent,
                 ColumnHaederClassesComponent,
-                ColumnHiddenFromMarkupComponent
+                ColumnHiddenFromMarkupComponent,
+                DynamicColumnsComponent
             ],
             imports: [IgxGridModule, NoopAnimationsModule]
         })
@@ -301,6 +303,63 @@ describe('IgxGrid - Column properties', () => {
             expect(grid.getCellByColumn(i, 'Name').value).toBe(expectedVal[i]);
         }
     });
+
+    it('should clear filter when a columns is removed dynamically', () => {
+        const fix = TestBed.createComponent(DynamicColumnsComponent);
+        fix.detectChanges();
+
+        const columns = fix.componentInstance.columns;
+        const grid = fix.componentInstance.grid;
+        grid.allowFiltering = true;
+        fix.detectChanges();
+
+        expect(grid.columns.length).toBe(7);
+
+        grid.filter('CompanyName', 'NoItemsFound', IgxStringFilteringOperand.instance().condition('contains'), true);
+        fix.detectChanges();
+
+        expect(grid.rowList.length).toEqual(0);
+
+        expect(() => {
+            fix.componentInstance.columns = columns.slice(2, columns.length - 1);
+            fix.detectChanges();
+        }).not.toThrow();
+
+        expect(grid.rowList.length).toBeGreaterThan(10);
+        expect(grid.columns.length).toBe(4);
+    });
+
+    it('should clear grouping when a columns is removed dynamically', () => {
+        const fix = TestBed.createComponent(DynamicColumnsComponent);
+        fix.detectChanges();
+
+        const columns = fix.componentInstance.columns;
+        const grid = fix.componentInstance.grid;
+        grid.getColumnByName('CompanyName').groupable = true;
+        grid.getColumnByName('Address').groupable = true;
+        grid.getColumnByName('City').groupable = true;
+        fix.detectChanges();
+
+        grid.groupBy({
+            fieldName: 'CompanyName', dir: SortingDirection.Asc, ignoreCase: false
+        });
+
+        fix.detectChanges();
+
+        let groupRows = grid.nativeElement.querySelectorAll('igx-grid-groupby-row');
+
+        expect(groupRows.length).toBeGreaterThan(0);
+
+        expect(() => {
+            fix.componentInstance.columns = columns.slice(2, columns.length - 1);
+            fix.detectChanges();
+        }).not.toThrow();
+
+        groupRows = grid.nativeElement.querySelectorAll('igx-grid-groupby-row');
+
+        expect(groupRows.length).toBe(0);
+        expect(grid.columns.length).toBe(4);
+    });
 });
 
 @Component({
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
@@ -4420,6 +4420,26 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             fix.detectChanges();
         }));
 
+        it('Should include \'false\' value in results when searching.', fakeAsync(() => {
+            // Open excel style custom filtering dialog.
+            GridFunctions.clickExcelFilterIcon(fix, 'Released');
+            fix.detectChanges();
+
+            // Type string in search box.
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
+            const inputNativeElement = searchComponent.querySelector('.igx-input-group__input');
+            sendInputNativeElement(inputNativeElement, 'false', fix);
+            tick(100);
+            fix.detectChanges();
+
+            // Verify that the first item is 'Select All' and the second item is 'false'.
+            const listItems = GridFunctions.sortNativeElementsVertically(
+                Array.from(searchComponent.querySelectorAll('igx-list-item')));
+            expect(listItems.length).toBe(2, 'incorrect rendered list items count');
+            expect(listItems[0].innerText).toBe('Select All');
+            expect(listItems[1].innerText).toBe('false');
+        }));
+
         it('should scroll items in search list correctly', (async () => {
             // Add additional rows as prerequisite for the test
             for (let index = 0; index < 30; index++) {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html
@@ -7,11 +7,11 @@
     <igx-chips-area (onReorder)="chipsOrderChanged($event)" (onMoveEnd)="chipsMovingEnded()">
         <ng-container *ngFor="let expr of chipsGoupingExpressions; let last = last;">
             <igx-chip [id]="expr.fieldName" [attr.title]="getGroupByChipTitle(expr)"
-                [removable]="getColumnByName(expr.fieldName).groupable"
-                [draggable]="getColumnByName(expr.fieldName).groupable" [displayDensity]="displayDensity"
+                [removable]="getColumnGroupable(expr.fieldName)"
+                [draggable]="getColumnGroupable(expr.fieldName)" [displayDensity]="displayDensity"
                 (onKeyDown)="onChipKeyDown($event)" (onRemove)="onChipRemoved($event)"
-                (onClick)="getColumnByName(expr.fieldName).groupable ? onChipClicked($event): null"
-                [disabled]='!getColumnByName(expr.fieldName).groupable'>
+                (onClick)="getColumnGroupable(expr.fieldName) ? onChipClicked($event): null"
+                [disabled]='!getColumnGroupable(expr.fieldName)'>
                 <span>{{ getGroupByChipTitle(expr) }}</span>
                 <igx-icon igxSuffix>{{ expr.dir == 1 ? 'arrow_upward' : 'arrow_downward' }}</igx-icon>
             </igx-chip>
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -902,7 +902,16 @@ export class IgxGridComponent extends IgxGridBaseComponent implements IGridDataB
      * @hidden
      */
     public getGroupByChipTitle(expression: IGroupingExpression): string {
-        return this.getColumnByName(expression.fieldName).header || expression.fieldName;
+        const column = this.getColumnByName(expression.fieldName);
+        return (column && column.header) || expression.fieldName;
+    }
+
+    /**
+     * @hidden
+     */
+    public getColumnGroupable(fieldName: string): boolean {
+        const column = this.getColumnByName(fieldName);
+        return column && column.groupable;
     }
 
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
@@ -9,6 +9,7 @@ import {
     ViewChild,
 } from '@angular/core';
 import { IGroupByRecord } from '../../data-operations/groupby-record.interface';
+import { DataType } from '../../data-operations/data-util';
 import { GridBaseAPIService } from '../api.service';
 import { IgxGridBaseComponent, IGridDataBindable } from '../grid-base.component';
 import { IgxGridSelectionService, ISelectionNode } from '../../core/grid-selection';
@@ -250,7 +251,8 @@ export class IgxGridGroupByRowComponent {
      * @hidden
      */
     get dataType(): any {
-        return this.grid.getColumnByName(this.groupRow.expression.fieldName).dataType;
+        const column = this.grid.getColumnByName(this.groupRow.expression.fieldName);
+        return (column && column.dataType) || DataType.String;
     }
 
     private handleTabKey(shift: boolean, activeNode: ISelectionNode) {
diff --git a/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts b/projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts
@@ -1099,3 +1099,23 @@ export class IgxGridClipboardComponent extends BasicGridComponent {
     public data = SampleTestData.excelFilteringData();
     formatter = (value: any) => `** ${value} **`;
 }
+
+@Component({
+    template: GridTemplateStrings.declareGrid(` [height]="height" [width]="width"`, ``,
+                ColumnDefinitions.generatedWithDataType)
+})
+export class DynamicColumnsComponent extends GridWithSizeComponent {
+    public columns = [
+        { field: 'ID', width: 100 , dataType: 'number'},
+        { field: 'CompanyName', width: 300 , dataType: 'string'},
+        { field: 'ContactName', width: 200 , dataType: 'string'},
+        { field: 'ContactTitle', width: 200 , dataType: 'string'},
+        { field: 'Address', width: 300 , dataType: 'string'},
+        { field: 'City', width: 100 , dataType: 'string'},
+        { field: 'Region', width: 100 , dataType: 'string'}
+    ];
+
+    data = SampleTestData.contactInfoDataFull();
+    width = '800px';
+    height = '800px';
+}

Original file line number	Diff line number	Diff line change
`@@ -373,7 +373,7 @@`
`373`	`373`	`}`
`374`	`374`
`375`	`375`	`%igx-list__item-lines {`
`376`		`- color: --var($theme, 'item-text-color');`
	`376`	`+ color: currentColor;`
`377`	`377`	`display: flex;`
`378`	`378`	`flex-direction: column;`
`379`	`379`	`flex: 1 0 0%;`