Skip to content

Commit

Permalink
Merge pull request #13286 from IgniteUI/ibarakov/fix-13051-master
Browse files Browse the repository at this point in the history 
Add lastSearchInfo docs and unify interfaces with highlight directive- master
  • Loading branch information
@kdinev
kdinev authored Jul 24, 2023
2 parents 9dc1164 + fe2bdf2 commit d50cd5d
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 47 deletions.
26 changes: 10 additions & 16 deletions projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,7 @@ import {
import { takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';
import { compareMaps } from '../../core/utils';

interface ISearchInfo {
searchedText: string;
content: string;
matchCount: number;
caseSensitive: boolean;
exactMatch: boolean;
}
import { ISearchInfo } from '../../grids/common/events';

/**
* An interface describing information for the active highlight.
Expand Down Expand Up @@ -274,11 +267,12 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
}

this._lastSearchInfo = {
searchedText: '',
searchText: '',
content: this.value,
matchCount: 0,
caseSensitive: false,
exactMatch: false
exactMatch: false,
activeMatchIndex: 0
};

this._container = this.parentElement.firstElementChild;
Expand All @@ -289,7 +283,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
*/
public ngAfterViewChecked() {
if (this._valueChanged) {
this.highlight(this._lastSearchInfo.searchedText, this._lastSearchInfo.caseSensitive, this._lastSearchInfo.exactMatch);
this.highlight(this._lastSearchInfo.searchText, this._lastSearchInfo.caseSensitive, this._lastSearchInfo.exactMatch);
this.activateIfNecessary();
this._valueChanged = false;
}
Expand All @@ -304,7 +298,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
const exactMatchResolved = exactMatch ? true : false;

if (this.searchNeedsEvaluation(text, caseSensitiveResolved, exactMatchResolved)) {
this._lastSearchInfo.searchedText = text;
this._lastSearchInfo.searchText = text;
this._lastSearchInfo.caseSensitive = caseSensitiveResolved;
this._lastSearchInfo.exactMatch = exactMatchResolved;
this._lastSearchInfo.content = this.value;
Expand All @@ -316,7 +310,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
this._lastSearchInfo.matchCount = this.getHighlightedText(text, caseSensitive, exactMatch);
}
} else if (this._nodeWasRemoved) {
this._lastSearchInfo.searchedText = text;
this._lastSearchInfo.searchText = text;
this._lastSearchInfo.caseSensitive = caseSensitiveResolved;
this._lastSearchInfo.exactMatch = exactMatchResolved;
}
Expand All @@ -330,7 +324,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
public clearHighlight(): void {
this.clearChildElements(false);

this._lastSearchInfo.searchedText = '';
this._lastSearchInfo.searchText = '';
this._lastSearchInfo.matchCount = 0;
}

Expand Down Expand Up @@ -368,7 +362,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
this._nodeWasRemoved = false;

this._forceEvaluation = true;
this.highlight(this._lastSearchInfo.searchedText,
this.highlight(this._lastSearchInfo.searchText,
this._lastSearchInfo.caseSensitive,
this._lastSearchInfo.exactMatch);
this._forceEvaluation = false;
Expand Down Expand Up @@ -492,7 +486,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
}

private searchNeedsEvaluation(text: string, caseSensitive: boolean, exactMatch: boolean): boolean {
const searchedText = this._lastSearchInfo.searchedText;
const searchedText = this._lastSearchInfo.searchText;

return !this._nodeWasRemoved &&
(searchedText === null ||
Expand Down
2 changes: 1 addition & 1 deletion projects/igniteui-angular/src/lib/grids/cell.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -929,7 +929,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
}
if (changes.value && !changes.value.firstChange) {
if (this.highlight) {
this.highlight.lastSearchInfo.searchedText = this.grid.lastSearchInfo.searchText;
this.highlight.lastSearchInfo.searchText = this.grid.lastSearchInfo.searchText;
this.highlight.lastSearchInfo.caseSensitive = this.grid.lastSearchInfo.caseSensitive;
this.highlight.lastSearchInfo.exactMatch = this.grid.lastSearchInfo.exactMatch;
}
Expand Down
10 changes: 9 additions & 1 deletion projects/igniteui-angular/src/lib/grids/common/events.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,15 @@ export interface ISearchInfo {
caseSensitive: boolean;
exactMatch: boolean;
activeMatchIndex: number;
matchInfoCache: any[];
matchCount: number;
content: string;
}

export interface IMatchInfoCache {
row: any;
index: number;
column: string;
metadata: Map<string, boolean>;
}

export interface IGridToolbarExportEventArgs extends IBaseEventArgs {
Expand Down
56 changes: 32 additions & 24 deletions projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,8 @@ import {
IFilteringEventArgs,
IColumnVisibilityChangedEventArgs,
IColumnVisibilityChangingEventArgs,
IPinColumnCancellableEventArgs
IPinColumnCancellableEventArgs,
IMatchInfoCache
} from './common/events';
import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
import {
Expand Down Expand Up @@ -2826,14 +2827,15 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
public disableTransitions = false;

/**
* @hidden @internal
* Represents the last search information.
*/
public lastSearchInfo: ISearchInfo = {
searchText: '',
caseSensitive: false,
exactMatch: false,
activeMatchIndex: 0,
matchInfoCache: []
matchCount: 0,
content: ''
};

/**
Expand Down Expand Up @@ -3112,6 +3114,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
private _sortHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
private _sortAscendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
private _sortDescendingHeaderIconTemplate: TemplateRef<IgxGridHeaderTemplateContext> = null;
private _matchInfoCache: IMatchInfoCache[] = [];

/**
* @hidden @internal
Expand Down Expand Up @@ -5047,7 +5050,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements

if (updateActiveInfo) {
const activeInfo = IgxTextHighlightDirective.highlightGroupsMap.get(this.id);
this.lastSearchInfo.matchInfoCache.forEach((match, i) => {
this._matchInfoCache.forEach((match, i) => {
if (match.column === activeInfo.column &&
match.row === activeInfo.row &&
match.index === activeInfo.index &&
Expand Down Expand Up @@ -5082,7 +5085,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
caseSensitive: false,
exactMatch: false,
activeMatchIndex: 0,
matchInfoCache: []
matchCount: 0,
content: ''
};

this.rowList.forEach((row) => {
Expand Down Expand Up @@ -7485,7 +7489,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
activeMatchIndex: 0,
caseSensitive: caseSensitiveResolved,
exactMatch: exactMatchResolved,
matchInfoCache: []
matchCount: 0,
content: ''
};

rebuildCache = true;
Expand All @@ -7505,14 +7510,14 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
this.rebuildMatchCache();
}

if (this.lastSearchInfo.activeMatchIndex >= this.lastSearchInfo.matchInfoCache.length) {
if (this.lastSearchInfo.activeMatchIndex >= this.lastSearchInfo.matchCount) {
this.lastSearchInfo.activeMatchIndex = 0;
} else if (this.lastSearchInfo.activeMatchIndex < 0) {
this.lastSearchInfo.activeMatchIndex = this.lastSearchInfo.matchInfoCache.length - 1;
this.lastSearchInfo.activeMatchIndex = this.lastSearchInfo.matchCount - 1;
}

if (this.lastSearchInfo.matchInfoCache.length) {
const matchInfo = this.lastSearchInfo.matchInfoCache[this.lastSearchInfo.activeMatchIndex];
if (this.lastSearchInfo.matchCount > 0) {
const matchInfo = this._matchInfoCache[this.lastSearchInfo.activeMatchIndex];
this.lastSearchInfo = { ...this.lastSearchInfo };

if (scroll !== false) {
Expand All @@ -7530,17 +7535,18 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
IgxTextHighlightDirective.clearActiveHighlight(this.id);
}

return this.lastSearchInfo.matchInfoCache.length;
return this.lastSearchInfo.matchCount;
}

private rebuildMatchCache() {
this.lastSearchInfo.matchInfoCache = [];
this._matchInfoCache = [];

const caseSensitive = this.lastSearchInfo.caseSensitive;
const exactMatch = this.lastSearchInfo.exactMatch;
const searchText = caseSensitive ? this.lastSearchInfo.searchText : this.lastSearchInfo.searchText.toLowerCase();
const data = this.filteredSortedData;
const columnItems = this.visibleColumns.filter((c) => !c.columnGroup).sort((c1, c2) => c1.visibleIndex - c2.visibleIndex);

data.forEach((dataRow, rowIndex) => {
columnItems.forEach((c) => {
const pipeArgs = this.getColumnByName(c.field).pipeArgs;
Expand All @@ -7554,28 +7560,28 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements

if (exactMatch) {
if (searchValue === searchText) {
const metadata = new Map<string, any>();
metadata.set('pinned', this.isRecordPinnedByIndex(rowIndex));
this.lastSearchInfo.matchInfoCache.push({
const mic: IMatchInfoCache = {
row: dataRow,
column: c.field,
index: 0,
metadata,
});
metadata: new Map<string, boolean>([['pinned', this.isRecordPinnedByIndex(rowIndex)]])
};

this._matchInfoCache.push(mic);
}
} else {
let occurenceIndex = 0;
let occurrenceIndex = 0;
let searchIndex = searchValue.indexOf(searchText);

while (searchIndex !== -1) {
const metadata = new Map<string, any>();
metadata.set('pinned', this.isRecordPinnedByIndex(rowIndex));
this.lastSearchInfo.matchInfoCache.push({
const mic: IMatchInfoCache = {
row: dataRow,
column: c.field,
index: occurenceIndex++,
metadata,
});
index: occurrenceIndex++,
metadata: new Map<string, boolean>([['pinned', this.isRecordPinnedByIndex(rowIndex)]])
};

this._matchInfoCache.push(mic);

searchValue = searchValue.substring(searchIndex + searchText.length);
searchIndex = searchValue.indexOf(searchText);
Expand All @@ -7584,6 +7590,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
}
});
});

this.lastSearchInfo.matchCount = this._matchInfoCache.length;
}

// TODO: About to Move to CRUD
Expand Down
4 changes: 2 additions & 2 deletions projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -395,15 +395,15 @@ describe('IgxGrid - search API #grid', () => {
let highlights = getHighlights();
expect(highlights.length).toBe(3);
verifyActiveHighlight(0);
expect(grid.lastSearchInfo.matchInfoCache.length).toBe(3);
expect(grid.lastSearchInfo.matchCount).toBe(3);
expect(grid.lastSearchInfo.activeMatchIndex).toBe(0);

grid.columnList.get(1).hidden = true;
fix.detectChanges();
highlights = getHighlights();
expect(highlights.length).toBe(1);
verifyActiveHighlight(0);
expect(grid.lastSearchInfo.matchInfoCache.length).toBe(1);
expect(grid.lastSearchInfo.matchCount).toBe(1);
expect(grid.lastSearchInfo.activeMatchIndex).toBe(0);
});

Expand Down
6 changes: 3 additions & 3 deletions src/app/grid-search-box/grid-search-box.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@

<igx-suffix *ngIf="searchText.length > 0">
<div class="resultsText" *ngIf="grid.lastSearchInfo">
<span *ngIf="grid.lastSearchInfo.matchInfoCache.length > 0">
{{ grid.lastSearchInfo.activeMatchIndex + 1 }}/{{ grid.lastSearchInfo.matchInfoCache.length }}
<span *ngIf="grid.lastSearchInfo.matchCount > 0">
{{ grid.lastSearchInfo.activeMatchIndex + 1 }}/{{ grid.lastSearchInfo.matchCount }}
</span>
<span *ngIf="grid.lastSearchInfo.matchInfoCache.length === 0">
<span *ngIf="grid.lastSearchInfo.matchCount === 0">
0/0
</span>
</div>
Expand Down

0 comments on commit d50cd5d

Please sign in to comment.