Implemented search functionality for TreeGrid (#3659)

* refactor(*): refactor some comments and exports hide GroupedRecords class from typedoc API doc and refactor igx-drop-down-theme param comment Closes #3483 #3484 * test(grid): #3047 igxGrid isn't displayed properly in IE11 when in igxTabs * chore(*): Fixing lint errors * fix(grid): igxGrid isn't displayed properly in IE11 in igxTabs #3047 * Include grid's unpinnedWidth and totalWidth in cell width calculation (#3465) * test(grid): add test for summary alignment #3462 * fix(grid): include grid widths in cell width calculation #3462 * fix(summary): convert getCellWidth from getter to method #3462 * Derive possible heights after markForCheck() is called #3467 (#3479) * fix(grid): add pipeTrigger in the AfterViewInit event #3467 * test(grid): add general test for treegrid default rendering #8347 * fix(grid): calling pipeTrigger is not needed #3467 * test(grid): move general test to component test file #3467 * test(grid): remove f from test file #3467 * docs(*): updating changelog for 7.1.x #3495 * chore(*): adding sections for 6.2.4 and 7.0.5 as well * test(update): Modify firstMonth selector #3508 * Fix - Convert % column width to px when calculating default column width (#3319) * test(grid): add test for a column width in % #1245 * fix(grid): convert % to px when calculating default width #1245 * test(grid): remove fit #1245 * feat(igx-grid): Add locale property to igx-grid, #3455 * fix(#3332): Exception when exporting more than 8 nested levels (#3501) * fix(#3332): Exception when exporting more than 8 level * fix(Exporter): #3332 Adding a test. * fix(Exporter): #3332 Improve the fix and test * fix(Exporter): #3332 Fix was braking the existing export * fix(headers-api-docs): set header IG main page link depending on the lang Closes #3516 * fix(*): build errors due to displayDensity changes #3310 * chore(*): more code optimizations #3310 * test(snackbar): add tests for ng-content #3328 * chore(snackbar): blank spaces update #3328 * feat(snackbar): add ng-content #3328 * docs(snackbar): update README #3328 * igxTimePicker - editable masked input + dropdown new mode (#3394) * feat(time-picker): initial implementation of removing dialog #2337 * feat(time picker): spin on edit functionality #2337 * feat(time picker): editable input implementation #2337 * feat(time-picker): dropdown/dialog display rework #2337 * feat(time-picker): sync dropdwwon navigation and input display #2337 * feat(time picker): emit events when necessary #2337 * feat(time picker): code restructuring and demo rework #2337 * feat(time picker): fix broken sample #2337 * feat(time picker): fix test failures and styles #2337 * feat(time-picker): minor fixes and improvements #2337 * feat(time-picker): more fixes and improvements #2337 * feat(time-picker): cover corner cases with invalid value #2337 * refactor(theme): adjust time picker theme * feat(time picker): hide/show overlay via hidden attribute #2337 * test(timePicker): Adding TimePicker DropDown initial Tests. #2337 * test(timePicker): Adding TimePicker DropDown Tests. #2337 * feat(time-picker): mask directive placeholder #2337 * test(timePicker): Fixing falling Vertical test. #2337 * feat(time picker): some code refactoring #2337 * feat(time picker): code refactoring and bug fixing #2337 * test(timePicker): Finalizing TimePicker DropDown Tests. #2337 * feat(time picker): tests refactoring and bug fixing #2337 * feat(time picker): code styling #2337 * feat(time picker): update README.md and CHANGELOG.md #2337 * feat(time picker): minor fixes/improvements #2337 * feat(time picker): some more little refinements #2337 * chore(*): mask demo enhancement #2337 * chore(*): address review comments #2337 * chore(*): more refinements #2337 * feat(time picker): address comments form review #2337 * feat(time picker): expose enum again in common #2337 * feat(time picker): cover some more corner cases #2337 * feat(time picker): some more minor bug fixes #2337 * feat(time picker): fix undesired input event firing in IE #2337 * fix(IgxColumnMovingDropDirective): focus last active cell on column moving #3407 (#3524) * chore(*): Added Math ceil in order to get the correct endIndex. * chore(igx-grid): Fix typo and make little refactoring, #3455 * fix(igx-grid): Add function to localize summaries, #3533 (#3534) * chore(*): Fix 7.1.1 duplicate section in Changelog * fix(time picker): cursor flickering in IE #2337 * style(tabs): 1. Remove the wrong calculation for colors 2. Remove ellipsis for long text without icon * chore(*): Update changelog * refactor(ripple): Use AnimationBuilder for the animation * test(igx-tabs): Increase thick time of two tests, #3269 * refactor(*): Fix tests using the ripple module * test(igx-tabs): Adjust some of the tests, #3269 * fix(time picker): address comments from review #2337 * feat(time picker): clean up imports #2337 * test(snackbar): update test for ng-content #3328 * feat(snackbar): update ng-content logic and README #3328 * fix(time picker): remove renderer #2337 * Rewrite deprecation decorators (#3447) * chore(*): Remove DeprecateClass util method (#2915) * chore(datepicker): Replace deprecated selector (#2915) * chore(*): Rewrite deprecation decorator for properties and methods (#2915) * chore(*): Fix lint warnings (#2915) * chore(*): Invoke original getter/setter (#2915) Invoke original getter/setter for deprecated properties. * feat(*): Improve property deprecation messages (#2915) * chore(*): Fix lint errors (#2915) * chore(datepicker): Revert - Replace deprecated selector (#2915) This reverts commit a2e731b. * chore(datepicker): Restore removed selector (#2915) * chore(datepicker): Show deprecation message when necessary (#2915) * chore(datepicker): Replace deprecated selector (#2915) * docs(drop-down): fixing a wrong link #3531 * fix(igx-grid): Add flag for keydown for a corner case in IE, #3504 * chore(igx-grid): Remove 'f', #3504 * feat(search): fix highlight of tree cells #3519 * test(igxInput): #3550 Test setting req input value updates valid state. * fix(igxInput): #3550 Setting required input value updates valid state. * fix(Input): #3550 Abstracted the validity check to a method. * test(snackbar): update tests #3328 * feat(snackbar): update the snackbar template #3328 * feat(igx-grid): Expose column templates as inputs Closes #3562 * fix(Grid): fix and tests for #3513. Adding new prop from which to read actual px width for grid cols and using it in igxForOf calculations. * fix(Grid): fix for #3513 - add check in case getPossibleColumnWidth is called before AfterViewInit. * fix(Grid): Fix and test for scenario when row selectors are enabled with % widths. * refactor(*): Address review comments * fix(igx-date-picker): Call markForCheck in writeValue method, #3362 * chore(*): Fixing issues after merge. * fix(*): Make default locale to be 'en', #3569 (#3573) * chore(typedoc): fixing comment structure #3523 * test(snackbar): change tests #3328 * feat(snackbar): update template #3328 * chore(snackbar): remove f from a test #3328 * chore(*): shortening statement #3513 * Mvenkov/dropdown scroll fix (#3546) * fix(igxOverlay): restore correctly element original style, #3527 * chore(igxOverlay): onPosition added, WIP * fix(igxOverlay): set element scrollTop is setTimeOut, #3527 Setting the scrollTop forces the dropdown's element to flicker. When we set it just one ms latter animation has time to start and we prevent flickering. * chore(igxOverla): remove bug fix leftovers * chore(igxOverlay): use time out only for IE * fix(igxOverlay): fix elastic pos. + absolute scroll, #3527 * feat(search): fixing tree grid search highlight #3519 * test(navbar): add test for vertically-centered actionIcon content #3584 * chore(navbar): fix lint errors #3584 * fix(navbar): vertically align igx-action-icon content #3584 * fix(filtering): prevent improper event firing in IE for JP #3577 * Fix empty space in treeGrid after expand/collapse (#3554) * test(tree-grid): add test for issue #3409 * fix(grid): call recalcUpdateSizes in requestAnimationFrame #3409 * fix(grid): add a row only when less than maxItemSize #3409 * fix(Input): #3550 Fixed a bad validation check. * fix(List): #3602 Show loading template when isLoading=true. * test(tabs): Fixed tabs test to avoid flickering #3541 * fix(filtering): chip creation while typing in JP on Edge #3599 * feat(search): refactor search and highlight #3519 * feat(build): PreDeploy script cleaning sass and typescript folders #3618 * refactor(*): Fixing tests using the ripple module * feat(search): fix some grid search issues #3519 * refactor(*): rewrite the senseless logic #3599 * fix(grid): igxGrid isn't displayed properly in IE11 if in igxTabs #3047 * feat(build): Moving PreDeploy.ps1 inside extras folder #3618 * chore(*): Fixing incorrect merge * refactor(*): combine clauses to avoid code duplication #3599 * feat(search): fix the resolving of filteredSortedData #3519 * feat(search): fix setting the contentChildElement #3519 * test(search): fixing search tests #3637 * fix(search): fix converting nodeLists to array #3637 * fix(search): observe highlight when changing inEditMode #3637 * fix(search): renaming private member #3637 * feat(search): add grid search sample #3519 * test(treeGrid): create tree-grid-search.spec.ts file #3519 * test(treeGrid): add search helper methods #3519 * test(treeGrid): add initial tests #3519 * test(treeGrid): remove 'f' from describe #3519 * test(treeGrid): update hierarchical test #3519 * test(search): add pk/fk test #3519 * test(search): add a pk/fk root/child rows test #3519 * test(treeGrid): add filter and sort search tests #3519 * feat(search): fix treeGrid scrollTo method #3519 * test(treeGrid): add pinning and hiding search tests #3519 * test(search): add scrollable search tests #3519 * test(search): make beforeEach async #3519 * test(treeGrid): remove unused imports #3519 * docs(treeGrid): remove summaries,search & export from limitations #3519 * test(search): add case sensitive/exact match test #3519 * chore(*): fixing some merge errors #3519 * docs(treeGrid): add treeGrid search api to changelog #3519 * feat(search): rename IActiveHighlightInfo members #3519 * docs(search): add changelog breaking change #3519 * feat(search): add back some IActiveHighlightInfo properties #3519 * docs(search): update the changelog #3519 * docs(search): fix formatting in changelog #3519
IgniteUI · Jan 30, 2019 · 94ab5ea · 94ab5ea
1 parent 02cf1ff
commit 94ab5ea
Show file tree

Hide file tree

Showing 34 changed files with 1,409 additions and 417 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -52,6 +52,10 @@ All notable changes for each version of this project will be documented in this
         ```
 - `Theme Elevations & Shadows` - Components with shadows, set by an elevation level or otherwise, are now fully configurable by the user via schema and/or theme properties. User can also provide a custom elevations set to component themes that support them.
     - **Breaking Change** - The `$search-shadow-color` and `$search-disabled-shadow-color` properties on the `igx-input-group-theme` have been replaced with `$search-resting-shadow` and `$search-disabled-shadow` respectively. Use `ng update` to migrate automatically.
+- `IgxTreeGridComponent`
+    - We can now search in the treegrid's data by using the `findNext` and the `findPrev` methods and we can clear the search results with the `clearSearch` method.
+- `IgxTextHighlightDirective`
+    - `IgxTextHighlightDirective.page` input property is **deprecated**. `rowIndex`, `columnIndex` and `page` properties of the `IActiveHighlightInfo` interface are also **deprecated**. Instead, `row` and `column` optional properties are added.
 
 ## 7.1.2
 ### Features

diff --git a/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.spec.ts
@@ -31,7 +31,6 @@ describe('IgxHighlight', () => {
         expect(component.highlight.value).toBe(component.html);
         expect(component.highlight.row).toBe(0);
         expect(component.highlight.column).toBe(0);
-        expect(component.highlight.page).toBe(0);
         expect(component.highlight.containerClass).toBe('test');
     });
 
@@ -281,7 +280,7 @@ describe('IgxHighlight', () => {
 @Component({
     template:
         // tslint:disable-next-line:max-line-length
-        `<div igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="groupName" [value]="html" [column]="0" [row]="0" [page]="0" [containerClass]="'test'">
+        `<div igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="groupName" [value]="html" [column]="0" [row]="0" [containerClass]="'test'">
             {{html}}
         </div>`
 })
@@ -310,9 +309,8 @@ class HighlightLoremIpsumComponent {
 
     public activate(index: number) {
         const activeHighlightInfo: IActiveHighlightInfo = {
-            rowIndex: 0,
-            columnIndex: 0,
-            page: 0,
+            row: 0,
+            column: 0,
             index: index
         };
         IgxTextHighlightDirective.setActiveHighlight(this.groupName, activeHighlightInfo);

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
@@ -15,6 +15,7 @@ import {
 } from '@angular/core';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
+import { DeprecateProperty } from '../../core/deprecateDecorators';
 
 interface ISearchInfo {
     searchedText: string;
@@ -24,10 +25,33 @@ interface ISearchInfo {
     exactMatch: boolean;
 }
 
+/**
+ * An interface describing information for the active highlight.
+ */
 export interface IActiveHighlightInfo {
-    rowIndex: number;
-    columnIndex: number;
-    page: number;
+    /**
+     * The row index of the highlight. This property is deprecated, use `row` instead.
+     */
+    rowIndex?: number;
+    /**
+     * The column index of the highlight. This property is deprecated, use `column` instead.
+     */
+    columnIndex?: number;
+    /**
+     * The page index of the highlight. This property is deprecated.
+     */
+    page?: number;
+    /**
+     * The row of the highlight.
+     */
+    row?: any;
+    /**
+     * The column of the highlight.
+     */
+    column?: any;
+    /**
+     * The index of the highlight.
+     */
     index: number;
 }
 
@@ -126,7 +150,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
     }
 
     /**
-     * The index of the row on which the directive is currently on.
+     * The identifier of the row on which the directive is currently on.
      *
      * ```html
      * <div
@@ -136,10 +160,10 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
      * ```
      */
     @Input('row')
-    public row: number;
+    public row: any;
 
     /**
-     * The index of the column on which the directive is currently on.
+     * The identifier of the column on which the directive is currently on.
      *
      * ```html
      * <div
@@ -149,22 +173,17 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
      * ```
      */
     @Input('column')
-    public column: number;
+    public column: any;
 
-    /**
-     * The index of the page on which the directive is currently on.
-     * It is used when the component containing the directive supports paging.
-     *
-     * ```html
-     * <div
-     *   igxTextHighlight
-     *   [page]="0">
-     * </div>
-     * ```
-     */
     @Input('page')
+    @DeprecateProperty(`IgxTextHighlightDirective 'page' input property is deprecated.`)
     public page: number;
 
+    /**
+     * The content child element that should be hidden when there is a highlight
+     */
+    public contentChildElement: ElementRef;
+
     /**
      * @hidden
      */
@@ -188,9 +207,6 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
      */
     public static clearActiveHighlight(groupName) {
         IgxTextHighlightDirective.highlightGroupsMap.set(groupName, {
-            rowIndex: -1,
-            columnIndex: -1,
-            page: -1,
             index: -1
         });
         IgxTextHighlightDirective.onActiveElementChanged.emit(groupName);
@@ -243,9 +259,6 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
     ngAfterViewInit() {
         if (IgxTextHighlightDirective.highlightGroupsMap.has(this.groupName) === false) {
             IgxTextHighlightDirective.highlightGroupsMap.set(this.groupName, {
-                rowIndex: -1,
-                columnIndex: -1,
-                page: -1,
                 index: -1
             });
         }
@@ -316,7 +329,10 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
      */
     public activateIfNecessary(): void {
         const group = IgxTextHighlightDirective.highlightGroupsMap.get(this.groupName);
-        if (group.columnIndex === this.column && group.rowIndex === this.row && group.page === this.page) {
+        const column = group.columnIndex === undefined ? group.column : group.columnIndex;
+        const row = group.rowIndex === undefined ? group.row : group.rowIndex;
+
+        if (column === this.column && row === this.row && group.page === this.page) {
             this.activate(group.index);
         }
     }
@@ -398,8 +414,10 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
     }
 
     private clearChildElements(originalContentHidden: boolean): void {
-        if (this.parentElement.firstElementChild) {
-            this.renderer.setProperty(this.parentElement.firstElementChild, 'hidden', originalContentHidden);
+        const childToHide = this.contentChildElement ? this.contentChildElement.nativeElement :
+                            this.parentElement.firstElementChild ? this.parentElement.firstElementChild : null;
+        if (childToHide) {
+            this.renderer.setProperty(childToHide, 'hidden', originalContentHidden);
         }
 
         if (this._div !== null) {
@@ -464,7 +482,9 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
 
     private appendDiv() {
         this._div = this.renderer.createElement('div');
-        this.renderer.addClass(this._div, this.containerClass);
+        if ( this.containerClass) {
+            this.renderer.addClass(this._div, this.containerClass);
+        }
         this.renderer.appendChild(this.parentElement, this._div);
     }
 

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -1,5 +1,5 @@
 <ng-template #defaultCell igxTextHighlight [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
-        [value]="formatter ? formatter(value) : value" [row]="rowIndex" [column]="this.column.visibleIndex" [page]="this.grid.page" [containerClass]="'igx-grid__td-text'">
+        [value]="formatter ? formatter(value) : value" [row]="row.rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'">
     <ng-container *ngIf="column.dataType === 'boolean' || column.dataType === 'string' || formatter; else default" >
         <div class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
     </ng-container>

diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -464,7 +464,7 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
     protected inlineEditorTemplate: TemplateRef<any>;
 
     @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective })
-    private highlight: IgxTextHighlightDirective;
+    protected highlight: IgxTextHighlightDirective;
 
     /**
      * Sets the current edit value while a cell is in edit mode.
@@ -622,7 +622,6 @@ export class IgxGridCellComponent implements OnInit, AfterViewInit {
             this.gridAPI.escape_editMode(this.gridID, editableCell.cellID);
         }
         this.cdr.markForCheck();
-        this.grid.refreshSearch();
     }
 
 

diff --git a/projects/igniteui-angular/src/lib/grids/column.component.ts b/projects/igniteui-angular/src/lib/grids/column.component.ts
@@ -199,20 +199,7 @@ export class IgxColumnComponent implements AfterContentInit {
             }
             this.check();
             if (this.grid) {
-                const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.grid.id);
-                if (!activeInfo) {
-                    return;
-                }
-                const oldIndex = activeInfo.columnIndex;
-
-                if (this.grid.lastSearchInfo.searchText) {
-                    if (this.index <= oldIndex) {
-                        const newIndex = this.hidden ? oldIndex - 1 : oldIndex + 1;
-                        IgxColumnComponent.updateHighlights(oldIndex, newIndex, this.grid);
-                    } else if (oldIndex === -1 && !this.hidden) {
-                        this.grid.refreshSearch();
-                    }
-                }
+                this.grid.refreshSearch(true);
                 this.grid.summaryService.resetSummaryHeight();
                 this.grid.reflow();
                 this.grid.filteringService.refreshExpressions();
@@ -893,21 +880,6 @@ export class IgxColumnComponent implements AfterContentInit {
     @ContentChild(IgxCellEditorTemplateDirective, { read: IgxCellEditorTemplateDirective })
     protected editorTemplate: IgxCellEditorTemplateDirective;
 
-    public static updateHighlights(oldIndex: number, newIndex: number, grid: IgxGridBaseComponent) {
-        const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(grid.id);
-
-        if (activeInfo && activeInfo.columnIndex === oldIndex) {
-            IgxTextHighlightDirective.setActiveHighlight(grid.id, {
-                columnIndex: newIndex,
-                rowIndex: activeInfo.rowIndex,
-                index: activeInfo.index,
-                page: activeInfo.page,
-            });
-
-            grid.refreshSearch(true);
-        }
-    }
-
     constructor(public gridAPI: GridBaseAPIService<IgxGridBaseComponent>, public cdr: ChangeDetectorRef) { }
     /**
      *@hidden
@@ -957,27 +929,6 @@ export class IgxColumnComponent implements AfterContentInit {
             }
         }
     }
-    /**
-     * Updates the highlights when a column index is changed.
-     * ```typescript
-     * this.column.updateHighlights(1, 3);
-     * ```
-     * @memberof IgxColumnComponent
-     */
-    public updateHighlights(oldIndex: number, newIndex: number) {
-        const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.grid.id);
-
-        if (activeInfo && activeInfo.columnIndex === oldIndex) {
-            IgxTextHighlightDirective.setActiveHighlight(this.grid.id, {
-                columnIndex: newIndex,
-                rowIndex: activeInfo.rowIndex,
-                index: activeInfo.index,
-                page: activeInfo.page,
-            });
-
-            this.grid.refreshSearch(true);
-        }
-    }
     /**
      * Pins the column at the provided index in the pinned area. Defaults to index `0` if not provided.
      * Returns `true` if the column is successfully pinned. Returns `false` if the column cannot be pinned.
@@ -1043,8 +994,7 @@ export class IgxColumnComponent implements AfterContentInit {
 
         grid.cdr.detectChanges();
         this.grid.filteringService.refreshExpressions();
-        const newIndex = this.visibleIndex;
-        IgxColumnComponent.updateHighlights(oldIndex, newIndex, grid);
+        this.grid.refreshSearch(true);
         return true;
     }
     /**
@@ -1099,8 +1049,7 @@ export class IgxColumnComponent implements AfterContentInit {
 
         grid.cdr.detectChanges();
         this.grid.filteringService.refreshExpressions();
-        const newIndex = this.visibleIndex;
-        IgxColumnComponent.updateHighlights(oldIndex, newIndex, grid);
+        this.grid.refreshSearch(true);
         return true;
     }
     /**