Merge branch 'master' into VDyulgerov_fix-boolean-column-master

ddincheva · web-flow · commit 04f654c6be3e · 2021-09-27T14:06:29.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,12 @@ All notable changes for each version of this project will be documented in this
 
 ## 12.2.0
 
+### New Features
+- `igxTreeGrid`
+    - Added `TreeGridMatchingRecordsOnlyFilteringStrategy`, which allows you to display only the records matching particular filtering condition without any trace for their parents.
+
+## 12.1.6
+
 ### General
 - `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
     - 'oddRowCSS' and 'evenRowCSS' properties has been deprecated
diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts
@@ -502,6 +502,8 @@ export const yieldingLoop = (count: number, chunkSize: number, callback: (index:
     chunk();
 };
 
+export const isConstructor = (ref: any) => typeof ref === 'function' && Boolean(ref.prototype) && Boolean(ref.prototype.constructor);
+
 export const reverseAnimationResolver = (animation: AnimationReferenceMetadata): AnimationReferenceMetadata =>
     oppositeAnimation.get(animation) ?? animation;
 
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
@@ -1,5 +1,5 @@
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
-import { FormsModule, NgForm, ReactiveFormsModule } from '@angular/forms';
+import { FormControl, FormGroup, FormsModule, NgForm, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { UIInteractions } from '../test-utils/ui-interactions.spec';
 import {
@@ -33,6 +33,9 @@ const CSS_CLASS_DATE_PICKER = 'igx-date-picker';
 const DATE_PICKER_TOGGLE_ICON = 'today';
 const DATE_PICKER_CLEAR_ICON = 'clear';
 
+const CSS_CLASS_INPUT_GROUP_REQUIRED = 'igx-input-group--required';
+const CSS_CLASS_INPUT_GROUP_INVALID = 'igx-input-group--invalid ';
+const CSS_CLASS_INPUT_GROUP_LABEL = 'igx-input-group__label';
 
 describe('IgxDatePicker', () => {
     describe('Integration tests', () => {
@@ -44,7 +47,8 @@ describe('IgxDatePicker', () => {
                     IgxDatePickerTestComponent,
                     IgxDatePickerNgModelComponent,
                     IgxDatePickerWithProjectionsComponent,
-                    IgxDatePickerInFormComponent
+                    IgxDatePickerInFormComponent,
+                    IgxDatePickerReactiveFormComponent
                 ],
                 imports: [IgxDatePickerModule, FormsModule, ReactiveFormsModule,
                     NoopAnimationsModule, IgxInputGroupModule, IgxCalendarModule,
@@ -193,7 +197,9 @@ describe('IgxDatePicker', () => {
         });
 
         describe('NgControl integration', () => {
-            let fixture: ComponentFixture<IgxDatePickerNgModelComponent | IgxDatePickerInFormComponent>;
+            let fixture: ComponentFixture<IgxDatePickerNgModelComponent |
+                IgxDatePickerInFormComponent |
+                IgxDatePickerReactiveFormComponent>;
             let datePicker: IgxDatePickerComponent;
 
             beforeEach(fakeAsync(() => {
@@ -238,6 +244,53 @@ describe('IgxDatePicker', () => {
                 tick();
                 expect((datePicker as any).inputDirective.valid).toEqual(IgxInputState.INITIAL);
             }));
+
+            it('should apply asterix properly when required validator is set dynamically', () => {
+                fixture = TestBed.createComponent(IgxDatePickerReactiveFormComponent);
+                fixture.detectChanges();
+                datePicker = fixture.componentInstance.datePicker;
+
+                let inputGroupRequiredClass = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+                let inputGroupInvalidClass = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_INVALID));
+                let asterisk = window.
+                    getComputedStyle(fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').
+                    content;
+                expect(asterisk).toBe('"*"');
+                expect(inputGroupRequiredClass).toBeDefined();
+                expect(inputGroupRequiredClass).not.toBeNull();
+
+                datePicker.clear();
+                fixture.detectChanges();
+
+                inputGroupInvalidClass = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_INVALID));
+                expect(inputGroupInvalidClass).not.toBeNull();
+                expect(inputGroupInvalidClass).not.toBeUndefined();
+
+                inputGroupRequiredClass = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+                expect(inputGroupRequiredClass).not.toBeNull();
+                expect(inputGroupRequiredClass).not.toBeUndefined();
+
+                (fixture.componentInstance as IgxDatePickerReactiveFormComponent).removeValidators();
+                fixture.detectChanges();
+
+                inputGroupRequiredClass = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+                asterisk = window.
+                    getComputedStyle(fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').
+                    content;
+                expect(inputGroupRequiredClass).toBeNull();
+                expect(asterisk).toBe('none');
+
+                (fixture.componentInstance as IgxDatePickerReactiveFormComponent).addValidators();
+                fixture.detectChanges();
+
+                inputGroupRequiredClass = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_REQUIRED));
+                asterisk = window.
+                    getComputedStyle(fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP_LABEL)).nativeElement, ':after').
+                    content;
+                expect(inputGroupRequiredClass).toBeDefined();
+                expect(inputGroupRequiredClass).not.toBeNull();
+                expect(asterisk).toBe('"*"');
+            });
         });
 
         describe('Projected elements', () => {
@@ -339,6 +392,7 @@ describe('IgxDatePicker', () => {
         let overlay: IgxOverlayService;
         let mockOverlayEventArgs: OverlayEventArgs & OverlayCancelableEventArgs;
         let mockInjector;
+        let mockCdr;
         let mockInputGroup: Partial<IgxInputGroupComponent>;
         let datePicker: IgxDatePickerComponent;
         let mockDateEditor: any;
@@ -403,6 +457,8 @@ describe('IgxDatePicker', () => {
                 get: mockNgControl
             });
 
+            mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['detectChanges']);
+
             mockCalendar = { selected: new EventEmitter<any>() };
             const mockComponentInstance = {
                 calendar: mockCalendar,
@@ -512,7 +568,7 @@ describe('IgxDatePicker', () => {
                 },
                 focus: () => { }
             };
-            datePicker = new IgxDatePickerComponent(elementRef, null, overlay, mockModuleRef, mockInjector, renderer2, null);
+            datePicker = new IgxDatePickerComponent(elementRef, null, overlay, mockModuleRef, mockInjector, renderer2, null, mockCdr);
             (datePicker as any).inputGroup = mockInputGroup;
             (datePicker as any).inputDirective = mockInputDirective;
             (datePicker as any).dateTimeEditor = mockDateEditor;
@@ -1251,3 +1307,35 @@ export class IgxDatePickerInFormComponent {
 
     public date: Date = new Date(2012, 5, 3);
 }
+
+@Component({
+    template: `
+   <form [formGroup]="form">
+    <div class="date-picker-wrapper">
+        <igx-date-picker formControlName="date" [value]="date">
+            <label igxLabel>Date </label>
+        </igx-date-picker>
+    </div>
+</form>
+    `
+})
+export class IgxDatePickerReactiveFormComponent {
+    @ViewChild(IgxDatePickerComponent)
+    public datePicker: IgxDatePickerComponent;
+
+    public date: Date = new Date(2012, 5, 3);
+
+    public form: FormGroup = new FormGroup({
+        date: new FormControl(null, Validators.required)
+    });
+
+    public removeValidators() {
+        this.form.get('date').clearValidators();
+        this.form.get('date').updateValueAndValidity();
+    }
+
+    public addValidators() {
+        this.form.get('date').setValidators(Validators.required);
+        this.form.get('date').updateValueAndValidity();
+    }
+}
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -2,7 +2,7 @@ import {
     Component, ContentChild, EventEmitter, HostBinding, Input,
     OnDestroy, Output, ViewChild, ElementRef, Inject, HostListener,
     NgModuleRef, OnInit, AfterViewInit, Injector, AfterViewChecked, ContentChildren,
-    QueryList, LOCALE_ID, Renderer2, Optional, PipeTransform
+    QueryList, LOCALE_ID, Renderer2, Optional, PipeTransform, ChangeDetectorRef
 } from '@angular/core';
 import {
     ControlValueAccessor, NG_VALUE_ACCESSOR, NgControl, AbstractControl,
@@ -481,6 +481,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         private _injector: Injector,
         private _renderer: Renderer2,
         private platform: PlatformUtil,
+        private cdr: ChangeDetectorRef,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions?: IDisplayDensityOptions,
         @Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType?: IgxInputGroupType) {
         super(element, _localeId, _displayDensityOptions, _inputGroupType);
@@ -750,6 +751,10 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         if (this._ngControl) {
             this._statusChanges$ =
                 this._ngControl.statusChanges.subscribe(this.onStatusChanged.bind(this));
+                if (this._ngControl.control.validator) {
+                    this.inputGroup.isRequired = this.required;
+                    this.cdr.detectChanges();
+                }
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts
@@ -51,7 +51,7 @@ import { MRLResizeColumnInfo, MRLColumnSizeInfo, IColumnPipeArgs } from './inter
 import { DropPosition } from '../moving/moving.service';
 import { IgxColumnGroupComponent } from './column-group.component';
 import { IColumnVisibilityChangingEventArgs, IPinColumnCancellableEventArgs, IPinColumnEventArgs } from '../common/events';
-import { PlatformUtil } from '../../core/utils';
+import { isConstructor, PlatformUtil } from '../../core/utils';
 import { CellType } from '../common/cell.interface';
 import { IgxGridCell } from '../grid-public-cell';
 
@@ -1011,7 +1011,9 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy {
      * @memberof IgxColumnComponent
      */
     public set summaries(classRef: any) {
-        this._summaries = new classRef();
+        if (isConstructor(classRef)) {
+            this._summaries = new classRef();
+        }
 
         if (this.grid) {
             this.grid.summaryService.removeSummariesCachePerColumn(this.field);
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-filtering.spec.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-filtering.spec.ts
@@ -7,7 +7,7 @@ import { TreeGridFunctions } from '../../test-utils/tree-grid-functions.spec';
 import { configureTestSuite } from '../../test-utils/configure-suite';
 import { IgxStringFilteringOperand, IgxNumberFilteringOperand, IgxDateFilteringOperand } from '../../data-operations/filtering-condition';
 import { FilteringStrategy } from '../../data-operations/filtering-strategy';
-import { TreeGridFormattedValuesFilteringStrategy } from './tree-grid.filtering.strategy';
+import { TreeGridFormattedValuesFilteringStrategy, TreeGridMatchingRecordsOnlyFilteringStrategy } from './tree-grid.filtering.strategy';
 import { FilterMode } from '../common/enums';
 import { GridFunctions } from '../../test-utils/grid-functions.spec';
 import { wait } from '../../test-utils/ui-interactions.spec';
@@ -484,6 +484,26 @@ describe('IgxTreeGrid - Filtering actions #tGrid', () => {
                 expect(treeGrid.rowList.length).toBe(4);
                 expect(treeGrid.filteredData.map(rec => rec.ID)).toEqual([ 847, 225, 663, 141]);
             }));
+
+            it('should display only the filtered records when using TreeGridMatchingRecordsOnlyFilteringStrategy', fakeAsync(() => {
+                expect(treeGrid.filterStrategy).toBeUndefined();
+                treeGrid.filter('Name', 'Trevor', IgxStringFilteringOperand.instance().condition('contains'), true);
+                tick(30);
+                fix.detectChanges();
+
+                expect(treeGrid.rowList.length).toBe(3);
+
+                const matchingRecordsOnlyStrategy = new TreeGridMatchingRecordsOnlyFilteringStrategy();
+                treeGrid.filterStrategy = matchingRecordsOnlyStrategy;
+                fix.detectChanges();
+
+                treeGrid.filter('Name', 'Trevor', IgxStringFilteringOperand.instance().condition('contains'), true);
+                tick(30);
+                fix.detectChanges();
+
+                expect(treeGrid.rowList.length).toBe(1);
+                expect(treeGrid.filteredData.map(rec => rec.ID)).toEqual([141]);
+            }));
     });
     class CustomTreeGridFilterStrategy  extends FilteringStrategy {
 
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.strategy.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.filtering.strategy.ts
@@ -74,3 +74,46 @@ export class TreeGridFormattedValuesFilteringStrategy extends TreeGridFilteringS
         return value;
     }
 }
+
+export class TreeGridMatchingRecordsOnlyFilteringStrategy extends TreeGridFilteringStrategy {
+    public filter(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree,
+        advancedExpressionsTree?: IFilteringExpressionsTree, grid?: GridType): ITreeGridRecord[] {
+        return this.filterImplementation(data, expressionsTree, advancedExpressionsTree, undefined, grid);
+    }
+
+    private filterImplementation(data: ITreeGridRecord[], expressionsTree: IFilteringExpressionsTree,
+        advancedExpressionsTree: IFilteringExpressionsTree, parent: ITreeGridRecord, grid?: GridType): ITreeGridRecord[] {
+        let i: number;
+        let rec: ITreeGridRecord;
+        const len = data.length;
+        const res: ITreeGridRecord[] = [];
+        if ((FilteringExpressionsTree.empty(expressionsTree) && FilteringExpressionsTree.empty(advancedExpressionsTree)) || !len) {
+            return data;
+        }
+        for (i = 0; i < len; i++) {
+            rec = DataUtil.cloneTreeGridRecord(data[i]);
+            rec.parent = parent;
+            if (rec.children) {
+                const filteredChildren = this.filterImplementation(rec.children, expressionsTree, advancedExpressionsTree, rec, grid);
+                rec.children = filteredChildren.length > 0 ? filteredChildren : null;
+            }
+            if (this.matchRecord(rec, expressionsTree, grid) && this.matchRecord(rec, advancedExpressionsTree, grid)) {
+                res.push(rec);
+            } else if (rec.children && rec.children.length > 0) {
+                rec = this.setCorrectLevelToFilteredRecords(rec);
+                res.push(...rec.children);
+            }
+        }
+        return res;
+    }
+
+    private setCorrectLevelToFilteredRecords(rec: ITreeGridRecord): ITreeGridRecord {
+        if (rec.children && rec.children.length > 0) {
+            rec.children.map(child => {
+                child.level = child.level - 1;
+                return this.setCorrectLevelToFilteredRecords(child);
+            });
+        }
+        return rec;
+    }
+}
