From a3d6221f6e1c577c7a294d6861d15cad60b4b046 Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Wed, 30 Jan 2019 14:08:42 +0200 Subject: [PATCH 1/3] feat(search): refactor highlight directive applying #3520 --- .../text-highlight.directive.ts | 8 ++-- .../src/lib/grids/cell.component.html | 13 +++--- .../src/lib/grids/cell.component.ts | 44 ++++++++----------- .../src/lib/grids/grid-base.component.ts | 7 ++- 4 files changed, 35 insertions(+), 37 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts index 5884face701..58ec7d097e2 100644 --- a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts @@ -196,9 +196,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke IgxTextHighlightDirective.onActiveElementChanged.emit(groupName); } - constructor(element: ElementRef, public renderer: Renderer2) { - this.parentElement = this.renderer.parentNode(element.nativeElement); - + constructor(private element: ElementRef, public renderer: Renderer2) { IgxTextHighlightDirective.onActiveElementChanged.pipe(takeUntil(this.destroy$)).subscribe((groupName) => { if (this.groupName === groupName) { if (this._activeElementIndex !== -1) { @@ -213,6 +211,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke * @hidden */ ngOnDestroy() { + this.clearHighlight(); + if (this._observer !== null) { this._observer.disconnect(); } @@ -241,6 +241,8 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke * @hidden */ ngAfterViewInit() { + this.parentElement = this.renderer.parentNode(this.element.nativeElement); + if (IgxTextHighlightDirective.highlightGroupsMap.has(this.groupName) === false) { IgxTextHighlightDirective.highlightGroupsMap.set(this.groupName, { rowIndex: -1, diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index 34aea2801a6..c1a40279298 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -1,11 +1,8 @@ - - -
{{ formatter ? formatter(value) : value }}
-
- -
{{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}
-
+ +
{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts index ce131dadcfc..e93396e1612 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts @@ -38,7 +38,7 @@ import { DataType } from '../data-operations/data-util'; selector: 'igx-grid-cell', templateUrl: './cell.component.html' }) -export class IgxGridCellComponent implements OnInit, AfterViewInit { +export class IgxGridCellComponent implements OnInit { /** * Gets the column of the cell. @@ -267,15 +267,8 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit { */ get inEditMode(): boolean { const editableCell = this.gridAPI.get_cell_inEditMode(this.gridID); - const result = editableCell ? this.cellID.rowID === editableCell.cellID.rowID && - this.cellID.columnID === editableCell.cellID.columnID : false; - - if (result && !this._inEditMode && this.highlight && this.grid.lastSearchInfo.searchText) { - this.highlight.observe(); - } - this._inEditMode = result; - - return result; + return editableCell ? this.cellID.rowID === editableCell.cellID.rowID && + this.cellID.columnID === editableCell.cellID.columnID : false; } /** @@ -463,8 +456,23 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit { @ViewChild('inlineEditor', { read: TemplateRef }) protected inlineEditorTemplate: TemplateRef; + private _highlight: IgxTextHighlightDirective; + @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective }) - private highlight: IgxTextHighlightDirective; + private set highlight(value: IgxTextHighlightDirective) { + this._highlight = value; + + if (this._highlight && this.grid.lastSearchInfo.searchText) { + this._highlight.highlight(this.grid.lastSearchInfo.searchText, + this.grid.lastSearchInfo.caseSensitive, + this.grid.lastSearchInfo.exactMatch); + this._highlight.activateIfNecessary(); + } + } + + private get highlight() { + return this._highlight; + } /** * Sets the current edit value while a cell is in edit mode. @@ -500,7 +508,6 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit { private cellSelectionID: string; private prevCellSelectionID: string; private previousCellEditMode = false; - private _inEditMode: boolean; constructor( public gridAPI: GridBaseAPIService, @@ -625,19 +632,6 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit { this.grid.refreshSearch(); } - - /** - *@hidden - */ - public ngAfterViewInit() { - if (this.highlight && this.grid.lastSearchInfo.searchText) { - this.highlight.highlight(this.grid.lastSearchInfo.searchText, - this.grid.lastSearchInfo.caseSensitive, - this.grid.lastSearchInfo.exactMatch); - this.highlight.activateIfNecessary(); - } - } - /** *@hidden */ diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts index 4da4d1a80ed..e675589330a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts @@ -4179,7 +4179,12 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements const editModeCell = this.gridAPI.get_cell_inEditMode(this.id); if (editModeCell) { - this.endEdit(false); + const editCell = this.gridAPI.get_cell_by_index(this.id, editModeCell.cellID.rowIndex, editModeCell.cellID.columnID); + if (editCell) { + editCell.inEditMode = false; + } else { + this.endEdit(false); + } } if (this.collapsedHighlightedItem) { From 9ba11a64d85878cb2fc61542c9a754f8525a75f5 Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Wed, 30 Jan 2019 14:27:07 +0200 Subject: [PATCH 2/3] fix(search): fix highlight directive for tree cell #3520 --- .../lib/grids/tree-grid/tree-cell.component.html | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html index 34e99dd7c7a..c4ec78a187d 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html @@ -1,11 +1,8 @@ - - -
{{ formatter ? formatter(value) : value }}
-
- -
{{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}
-
+ +
{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}
From 00049aafd8c6b34b78f7802a91649971e020133b Mon Sep 17 00:00:00 2001 From: Diyan Dimitrov Date: Wed, 30 Jan 2019 17:11:48 +0200 Subject: [PATCH 3/3] test(search): add tests for #3520 and #3653 --- .../src/lib/grids/grid/grid.search.spec.ts | 44 +++++++++++++++---- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts index e164193b6e1..43456a361d9 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts @@ -713,9 +713,12 @@ describe('IgxGrid - search API', () => { expect(highlights.length).toBe(1); expect(activeHighlight).toBe(highlights[0]); - cell.inEditMode = false; - await wait(30); + const nextCell = grid.getCellByColumn(0, 'JobTitle').nativeElement; + nextCell.dispatchEvent(new Event('click')); + await wait(); fix.detectChanges(); + + expect(cell.nativeElement.innerText.trim()).toBe('Casey Houston'); }); }); @@ -1178,13 +1181,38 @@ describe('IgxGrid - search API', () => { }); /* Grid with Avatar */ - it('Cells with no text should be excluded from the search', () => { - fix = TestBed.createComponent(GridWithAvatarComponent); - grid = fix.componentInstance.grid; - fix.detectChanges(); + describe('', () => { + beforeEach(() => { + fix = TestBed.createComponent(GridWithAvatarComponent); + grid = fix.componentInstance.grid; + fix.detectChanges(); + }); + + it('Cells with no text should be excluded from the search', () => { + const matches = grid.findNext('https'); + expect(matches).toBe(0); + }); - const matches = grid.findNext('https'); - expect(matches).toBe(0); + it('Cells with custom template should be excluded from search when pin/unpin', () => { + grid.columns[1].pinned = true; + fix.detectChanges(); + + const matches = grid.findNext('https'); + expect(matches).toBe(0); + + let cell = grid.getCellByColumn(0, 'Avatar').nativeElement; + expect(cell.children.length).toBe(1); + let image = cell.querySelector('.cell__inner, .avatar-cell'); + expect(image.hidden).toBeFalsy(); + + grid.columns[1].pinned = false; + fix.detectChanges(); + + cell = grid.getCellByColumn(0, 'Avatar').nativeElement; + expect(cell.children.length).toBe(1); + image = cell.querySelector('.cell__inner, .avatar-cell'); + expect(image.hidden).toBeFalsy(); + }); }); function findNext(currentGrid: IgxGridComponent, text: string) {