Skip to content

Commit 49489a0

Browse files
ChronosSFChronosSF
authored
Merge pull request #7192 from IgniteUI/pbozhinov/fix-rp-search
Fix Search with Row Pinning
2 parents a446bf8 + 707a746 commit 49489a0

File tree

12 files changed

+145
-13
lines changed

12 files changed

+145
-13
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,9 @@ All notable changes for each version of this project will be documented in this
162162
- Added `tabIndex` input so it can support change detection as well.
163163

164164

165+
- `IgxHighlightDirective`
166+
- New `metadata` property was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.
167+
165168
### RTL Support
166169
- `igxSlider` have full right-to-left (RTL) support.
167170

‎projects/igniteui-angular/src/lib/core/utils.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -355,3 +355,31 @@ export function resizeObservable(target: HTMLElement): Observable<ResizeObserver
355355
return unsubscribe;
356356
});
357357
}
358+
359+
/**
360+
* @hidden
361+
* @internal
362+
*
363+
* Compares two maps.
364+
*/
365+
export function compareMaps(map1: Map<any, any>, map2: Map<any, any>): boolean {
366+
if (!map2) {
367+
return !map1 ? true : false;
368+
}
369+
if (map1.size !== map2.size) {
370+
return false;
371+
}
372+
let match = true;
373+
const keys = Array.from(map2.keys());
374+
for (const key of keys) {
375+
if (map1.has(key)) {
376+
match = map1.get(key) === map2.get(key);
377+
} else {
378+
match = false;
379+
}
380+
if (!match) {
381+
break;
382+
}
383+
}
384+
return match;
385+
}

‎projects/igniteui-angular/src/lib/directives/text-highlight/text-highlight.directive.ts‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
import { takeUntil } from 'rxjs/operators';
1515
import { Subject } from 'rxjs';
1616
import { DeprecateProperty } from '../../core/deprecateDecorators';
17+
import { compareMaps } from '../../core/utils';
1718

1819
interface ISearchInfo {
1920
searchedText: string;
@@ -39,6 +40,10 @@ export interface IActiveHighlightInfo {
3940
* The index of the highlight.
4041
*/
4142
index: number;
43+
/**
44+
* Additional, custom checks to perform prior an element highlighting.
45+
*/
46+
metadata?: Map<string, any>;
4247
}
4348

4449
@Directive({
@@ -163,6 +168,27 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
163168
@Input('column')
164169
public column: any;
165170

171+
/**
172+
* A map that contains all aditional conditions, that you need to activate a highlighted
173+
* element. To activate the condition, you will have to add a new metadata key to
174+
* the `metadata` property of the IActiveHighlightInfo interface.
175+
*
176+
* @example
177+
* ```typescript
178+
* // Set a property, which would disable the highlight for a given element on a cetain condition
179+
* const metadata = new Map<string, any>();
180+
* metadata.set('highlightElement', false);
181+
* ```
182+
* ```html
183+
* <div
184+
* igxTextHighlight
185+
* [metadata]="metadata">
186+
* </div>
187+
* ```
188+
*/
189+
@Input()
190+
public metadata: Map<string, any>;
191+
166192
/**
167193
* @hidden
168194
*/
@@ -317,7 +343,7 @@ export class IgxTextHighlightDirective implements AfterViewInit, AfterViewChecke
317343
public activateIfNecessary(): void {
318344
const group = IgxTextHighlightDirective.highlightGroupsMap.get(this.groupName);
319345

320-
if (group.column === this.column && group.row === this.row) {
346+
if (group.column === this.column && group.row === this.row && compareMaps(this.metadata, group.metadata)) {
321347
this.activate(group.index);
322348
}
323349
}

‎projects/igniteui-angular/src/lib/grids/cell.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<ng-template #defaultCell>
55
<div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
66
[value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
7-
[row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'"
7+
[row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'" [metadata]="searchMetadata"
88
class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:
99
grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
1010
</ng-template>

‎projects/igniteui-angular/src/lib/grids/cell.component.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -899,4 +899,14 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
899899
return Math.max(...Array.from(this.nativeElement.children)
900900
.map((child) => getNodeSizeViaRange(range, child)));
901901
}
902+
903+
/**
904+
* @hidden
905+
* @internal
906+
*/
907+
public get searchMetadata() {
908+
const meta = new Map<string, any>();
909+
meta.set('pinned', this.grid.isRecordPinnedByViewIndex(this.row.index));
910+
return meta;
911+
}
902912
}

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,13 @@ import {
3030
import ResizeObserver from 'resize-observer-polyfill';
3131
import { Subject, pipe } from 'rxjs';
3232
import { takeUntil, first, filter, throttleTime, map } from 'rxjs/operators';
33-
import { cloneArray, flatten, mergeObjects, isIE } from '../core/utils';
33+
import { cloneArray, flatten, mergeObjects, isIE, compareMaps } from '../core/utils';
3434
import { DataType } from '../data-operations/data-util';
3535
import { FilteringLogic, IFilteringExpression } from '../data-operations/filtering-expression.interface';
3636
import { IGroupByRecord } from '../data-operations/groupby-record.interface';
3737
import { ISortingExpression } from '../data-operations/sorting-expression.interface';
3838
import { IForOfState, IgxGridForOfDirective } from '../directives/for-of/for_of.directive';
39-
import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
39+
import { IgxTextHighlightDirective, IActiveHighlightInfo } from '../directives/text-highlight/text-highlight.directive';
4040
import {
4141
AbsoluteScrollStrategy,
4242
HorizontalAlignment,
@@ -2723,14 +2723,31 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
27232723
}
27242724

27252725
/**
2726+
* Returns whether the record is pinned or not.
2727+
*
2728+
* @param rowIndex Index of the record in the `dataView` collection.
2729+
*
27262730
* @hidden
27272731
* @internal
27282732
*/
2729-
public isRecordPinnedByIndex(rowIndex: number) {
2733+
public isRecordPinnedByViewIndex(rowIndex: number) {
27302734
return this.hasPinnedRecords && (this.isRowPinningToTop && rowIndex < this.pinnedDataView.length) ||
27312735
(!this.isRowPinningToTop && rowIndex >= this.unpinnedDataView.length);
27322736
}
27332737

2738+
/**
2739+
* Returns whether the record is pinned or not.
2740+
*
2741+
* @param rowIndex Index of the record in the `filteredSortedData` collection.
2742+
*
2743+
* @hidden
2744+
* @internal
2745+
*/
2746+
public isRecordPinnedByIndex(rowIndex: number) {
2747+
return this.hasPinnedRecords && (this.isRowPinningToTop && rowIndex < this._filteredSortedPinnedData.length) ||
2748+
(!this.isRowPinningToTop && rowIndex >= this._filteredSortedUnpinnedData.length);
2749+
}
2750+
27342751
/**
27352752
* @hidden
27362753
* @internal
@@ -4334,7 +4351,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
43344351
this.lastSearchInfo.matchInfoCache.forEach((match, i) => {
43354352
if (match.column === activeInfo.column &&
43364353
match.row === activeInfo.row &&
4337-
match.index === activeInfo.index) {
4354+
match.index === activeInfo.index &&
4355+
compareMaps(match.metadata, activeInfo.metadata)) {
43384356
this.lastSearchInfo.activeMatchIndex = i;
43394357
}
43404358
});
@@ -5856,6 +5874,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
58565874
column: matchInfo.column,
58575875
row: matchInfo.row,
58585876
index: matchInfo.index,
5877+
metadata: matchInfo.metadata,
58595878
});
58605879

58615880
} else {
@@ -5994,7 +6013,7 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
59946013

59956014
const numberPipe = new IgxDecimalPipeComponent(this.locale);
59966015
const datePipe = new IgxDatePipeComponent(this.locale);
5997-
data.forEach((dataRow) => {
6016+
data.forEach((dataRow, rowIndex) => {
59986017
columnItems.forEach((c) => {
59996018
const value = c.formatter ? c.formatter(dataRow[c.field]) :
60006019
c.dataType === 'number' ? numberPipe.transform(dataRow[c.field], this.locale) :
@@ -6005,21 +6024,27 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
60056024

60066025
if (exactMatch) {
60076026
if (searchValue === searchText) {
6027+
const metadata = new Map<string, any>();
6028+
metadata.set('pinned', this.isRecordPinnedByIndex(rowIndex));
60086029
this.lastSearchInfo.matchInfoCache.push({
60096030
row: dataRow,
60106031
column: c.field,
60116032
index: 0,
6033+
metadata: metadata,
60126034
});
60136035
}
60146036
} else {
60156037
let occurenceIndex = 0;
60166038
let searchIndex = searchValue.indexOf(searchText);
60176039

60186040
while (searchIndex !== -1) {
6041+
const metadata = new Map<string, any>();
6042+
metadata.set('pinned', this.isRecordPinnedByIndex(rowIndex));
60196043
this.lastSearchInfo.matchInfoCache.push({
60206044
row: dataRow,
60216045
column: c.field,
60226046
index: occurenceIndex++,
6047+
metadata: metadata,
60236048
});
60246049

60256050
searchValue = searchValue.substring(searchIndex + searchText.length);

‎projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -309,7 +309,7 @@ export class IgxGridNavigationService {
309309
}
310310

311311
public shouldPerformVerticalScroll(targetRowIndex: number, visibleColIndex: number): boolean {
312-
if (this.grid.isRecordPinnedByIndex(targetRowIndex)) { return false; }
312+
if (this.grid.isRecordPinnedByViewIndex(targetRowIndex)) { return false; }
313313
const scrollRowIndex = this.grid.hasPinnedRecords && this.grid.isRowPinningToTop ?
314314
targetRowIndex - this.grid.pinnedDataView.length : targetRowIndex;
315315
const targetRow = this.getRowElementByIndex(targetRowIndex);

‎projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<ng-template #defaultCell>
55
<div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
66
[value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
7-
[row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'"
7+
[row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'" [metadata]="searchMetadata"
88
class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:
99
grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
1010
</ng-template>

‎projects/igniteui-angular/src/lib/grids/grid/grid.search.spec.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { wait } from '../../test-utils/ui-interactions.spec';
1313
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
1414
import { DataType } from '../../data-operations/data-util';
1515
import { setupGridScrollDetection } from '../../test-utils/helper-utils.spec';
16+
import { IgxTextHighlightDirective } from '../../directives/text-highlight/text-highlight.directive';
1617

1718
describe('IgxGrid - search API #grid - ', () => {
1819
configureTestSuite();
@@ -1129,6 +1130,37 @@ describe('IgxGrid - search API #grid - ', () => {
11291130
expect(grid.isExpandedGroup(grid.groupsRecords[0])).toBeTruthy();
11301131
expect(grid.page).toBe(0);
11311132
});
1133+
1134+
it('Should highlight search results in pinned and unpinned row areas separately', () => {
1135+
grid.getRowByIndex(2).pin();
1136+
fix.detectChanges();
1137+
1138+
grid.findNext('Tanya Bennett');
1139+
fix.detectChanges();
1140+
1141+
const spans = getSpans();
1142+
expect(spans.length).toBe(2);
1143+
verifyActiveSpan(0);
1144+
1145+
grid.findNext('Tanya Bennett');
1146+
fix.detectChanges();
1147+
verifyActiveSpan(1);
1148+
});
1149+
1150+
it('Should differentiate IgxHighlightDirective\'s metadata of pinned and unpinned rows', () => {
1151+
grid.getRowByIndex(2).pin();
1152+
fix.detectChanges();
1153+
1154+
grid.findNext('Tanya Bennett');
1155+
fix.detectChanges();
1156+
1157+
const highlightDirectives = fix.debugElement.queryAll(By.css('div[ng-reflect-value="Tanya Bennett"]'));
1158+
const firstHighlight = highlightDirectives[0].injector.get(IgxTextHighlightDirective);
1159+
const secondHighlight = highlightDirectives[1].injector.get(IgxTextHighlightDirective);
1160+
1161+
expect(firstHighlight.metadata.get('pinned')).toBe(true);
1162+
expect(secondHighlight.metadata.get('pinned')).toBe(false);
1163+
});
11321164
});
11331165

11341166
describe('Grid with Avatar - ', () => {

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<ng-template #defaultCell>
55
<div igxTextHighlight style="pointer-events: none" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="gridID"
66
[value]="formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
7-
[row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'"
7+
[row]="rowData" [column]="this.column.field" [containerClass]="'igx-grid__td-text'" [metadata]="searchMetadata"
88
class="igx-grid__td-text">{{ formatter ? formatter(value) : column.dataType === 'number' ? (value | igxdecimal:
99
grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value }}</div>
1010
</ng-template>

0 commit comments

Comments
 (0)