Skip to content

Commit 7b9fc55

Browse files
ChronosSFChronosSF
authored
Merge pull request #9846 from IgniteUI/mdragnev/fix-9781
fix(*): Make context templateId more complicated object with type and…
2 parents 57b54bc + e358c12 commit 7b9fc55

File tree

11 files changed

+103
-31
lines changed

11 files changed

+103
-31
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
"test:lib:azure:tgrid": "ng test igniteui-angular --watch=false --no-progress --karma-config=./projects/igniteui-angular/karma.azure.tree-grid.conf.js",
2121
"test:lib:azure:hgrid": "ng test igniteui-angular --watch=false --no-progress --karma-config=./projects/igniteui-angular/karma.azure.hierarchical-grid.conf.js",
2222
"test:lib:azure:others": "ng test igniteui-angular --watch=false --no-progress --karma-config=./projects/igniteui-angular/karma.azure.non-grid.conf.js",
23-
"test:lib:watch": "ng test igniteui-angular",
23+
"test:lib:watch": "ng test igniteui-angular --karma-config=./projects/igniteui-angular/karma.watch.conf.js",
2424
"test:schematics": "ts-node --project projects/igniteui-angular/migrations/tsconfig.json ./node_modules/jasmine/bin/jasmine.js ./projects/igniteui-angular/migrations/**/*.spec.ts ./projects/igniteui-angular/schematics/**/*.spec.ts",
2525
"test:styles": "ts-node --skip-project ./node_modules/jasmine/bin/jasmine.js ./projects/igniteui-angular/src/lib/core/styles/spec/tests.ts",
2626
"build:lib": "ng build igniteui-angular --configuration production && gulp buildStyle",

‎projects/igniteui-angular/karma.watch.conf.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// Karma configuration file, see link for more information
2+
// https://karma-runner.github.io/1.0/config/configuration-file.html
3+
4+
module.exports = function (config) {
5+
config.set({
6+
basePath: '',
7+
frameworks: ['jasmine', 'jasmine-spec-tags', '@angular-devkit/build-angular'],
8+
files: [
9+
{ pattern: '../../node_modules/hammerjs/hammer.min.js', watched: false },
10+
{ pattern: '../../node_modules/hammer-simulator/index.js', watched: false },
11+
{ pattern: './test.css', watched: false },
12+
{ pattern: '../../dist/igniteui-angular/styles/igniteui-angular.css', watched: false }
13+
],
14+
plugins: [
15+
require('karma-jasmine'),
16+
require('karma-chrome-launcher'),
17+
require('karma-jasmine-spec-tags'),
18+
require('karma-jasmine-html-reporter'),
19+
require('karma-spec-reporter'),
20+
require('@angular-devkit/build-angular/plugins/karma')
21+
],
22+
client: {
23+
clearContext: false, // leave Jasmine Spec Runner output visible in browser
24+
jasmine: {
25+
random: false
26+
},
27+
tagPrefix: '#',
28+
skipTags: 'perf'
29+
},
30+
reporters: ['progress'],
31+
specReporter: {
32+
suppressSkipped: true,
33+
suppressErrorSummary: false,
34+
suppressFailed: false,
35+
suppressPassed: false,
36+
showSpecTiming: false,
37+
failFast: false
38+
},
39+
port: 9876,
40+
colors: true,
41+
logLevel: config.LOG_INFO,
42+
autoWatch: true,
43+
browsers: ['Chrome'],
44+
singleRun: false
45+
});
46+
};

‎projects/igniteui-angular/src/lib/directives/template-outlet/template_outlet.directive.ts‎

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,10 @@ export class IgxTemplateOutletDirective implements OnChanges {
3131

3232
/**
3333
* The embedded views cache. Collection is key-value paired.
34-
* Key is the template id, value is the embedded view for the related template.
34+
* Key is the template type, value is another key-value paired collection
35+
* where the key is the template id and value is the embedded view for the related template.
3536
*/
36-
private _embeddedViewsMap: Map<string, EmbeddedViewRef<any>> = new Map();
37+
private _embeddedViewsMap: Map<string, Map<any, EmbeddedViewRef<any>>> = new Map();
3738

3839
constructor(public _viewContainerRef: ViewContainerRef, private _zone: NgZone, public cdr: ChangeDetectorRef) {
3940
}
@@ -49,19 +50,23 @@ export class IgxTemplateOutletDirective implements OnChanges {
4950
}
5051

5152
public cleanCache() {
52-
this._embeddedViewsMap.forEach((item) => {
53-
if (!item.destroyed) {
54-
item.destroy();
55-
}
53+
this._embeddedViewsMap.forEach((collection) => {
54+
collection.forEach((item => {
55+
if (!item.destroyed) {
56+
item.destroy();
57+
}
58+
}));
59+
collection.clear();
5660
});
5761
this._embeddedViewsMap.clear();
5862
}
5963

6064
public cleanView(tmplID) {
61-
const embView = this._embeddedViewsMap.get(tmplID);
65+
const embViewCollection = this._embeddedViewsMap.get(tmplID.type);
66+
const embView = embViewCollection?.get(tmplID.id);
6267
if (embView) {
6368
embView.destroy();
64-
this._embeddedViewsMap.delete(tmplID);
69+
this._embeddedViewsMap.get(tmplID.type).delete(tmplID.id);
6570
}
6671
}
6772

@@ -81,9 +86,11 @@ export class IgxTemplateOutletDirective implements OnChanges {
8186
// if context contains a template id, check if we have a view for that template already stored in the cache
8287
// if not create a copy and add it to the cache in detached state.
8388
// Note: Views in detached state do not appear in the DOM, however they remain stored in memory.
84-
const res = this._embeddedViewsMap.get(this.igxTemplateOutletContext['templateID']);
89+
const resCollection = this._embeddedViewsMap.get(this.igxTemplateOutletContext['templateID'].type);
90+
const res = resCollection?.get(this.igxTemplateOutletContext['templateID'].id);
8591
if (!res) {
86-
this._embeddedViewsMap.set(this.igxTemplateOutletContext['templateID'], this._viewRef);
92+
this._embeddedViewsMap.set(this.igxTemplateOutletContext['templateID'].type,
93+
new Map([[this.igxTemplateOutletContext['templateID'].id, this._viewRef]]));
8794
}
8895
}
8996
}
@@ -115,7 +122,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
115122
// use view for specific template cached in the current template outlet
116123
const tmplID = this.igxTemplateOutletContext['templateID'];
117124
const cachedView = tmplID ?
118-
this._embeddedViewsMap.get(tmplID) :
125+
this._embeddedViewsMap.get(tmplID.type)?.get(tmplID.id) :
119126
null;
120127
// if view exists, but template has been changed and there is a view in the cache with the related template
121128
// then detach old view and insert the stored one with the matching template
@@ -171,7 +178,7 @@ export class IgxTemplateOutletDirective implements OnChanges {
171178
const movedView = this.igxTemplateOutletContext['moveView'];
172179
const tmplID = this.igxTemplateOutletContext['templateID'];
173180
const cachedView = tmplID ?
174-
this._embeddedViewsMap.get(tmplID) :
181+
this._embeddedViewsMap.get(tmplID.type)?.get(tmplID.id) :
175182
null;
176183
const shouldRecreate = this._shouldRecreateView(changes);
177184
if (movedView) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5848,7 +5848,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
58485848
*/
58495849
public cachedViewLoaded(args: ICachedViewLoadedEventArgs) {
58505850
if (this.hasHorizontalScroll()) {
5851-
const tmplId = args.context.templateID;
5851+
const tmplId = args.context.templateID.type;
58525852
const index = args.context.index;
58535853
args.view.detectChanges();
58545854
this.zone.onStable.pipe(first()).subscribe(() => {

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -845,7 +845,7 @@ describe('IgxGrid - Row Adding #grid', () => {
845845
});
846846
fixture.detectChanges();
847847

848-
const groupRows = grid.groupsRowList.toArray();
848+
let groupRows = grid.groupsRowList.toArray();
849849
grid.toggleGroup(groupRows[2].groupRow);
850850
fixture.detectChanges();
851851
expect(groupRows[2].expanded).toBeFalse();
@@ -867,6 +867,7 @@ describe('IgxGrid - Row Adding #grid', () => {
867867
fixture.detectChanges();
868868
const row2 = grid.getRowByKey(addedRec[grid.primaryKey]);
869869

870+
groupRows = grid.groupsRowList.toArray();
870871
expect(row2).not.toBeNull();
871872
expect(groupRows[2].expanded).toBeTrue();
872873
expect(groupRows[2].groupRow.records.length).toEqual(2);

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

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -838,7 +838,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
838838
public getContext(rowData: any, rowIndex: number, pinned?: boolean): any {
839839
if (this.isDetailRecord(rowData)) {
840840
const cachedData = this.childDetailTemplates.get(rowData.detailsData);
841-
const rowID = this.primaryKey ? rowData.detailsData[this.primaryKey] : this.data.indexOf(rowData.detailsData);
841+
const rowID = this.primaryKey ? rowData.detailsData[this.primaryKey] : rowData.detailsData;
842842
if (cachedData) {
843843
const view = cachedData.view;
844844
const tmlpOutlet = cachedData.owner;
@@ -847,21 +847,30 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
847847
moveView: view,
848848
owner: tmlpOutlet,
849849
index: this.dataView.indexOf(rowData),
850-
templateID: 'detailRow-' + rowID
850+
templateID: {
851+
type:'detailRow',
852+
id: rowID
853+
}
851854
};
852855
} else {
853856
// child rows contain unique grids, hence should have unique templates
854857
return {
855858
$implicit: rowData.detailsData,
856-
templateID: 'detailRow-' + rowID,
859+
templateID: {
860+
type:'detailRow',
861+
id: rowID
862+
},
857863
index: this.dataView.indexOf(rowData)
858864
};
859865
}
860866
}
861867
return {
862868
$implicit: this.isGhostRecord(rowData) || this.isAddRowRecord(rowData) ? rowData.recordRef : rowData,
863869
index: this.getDataViewIndex(rowIndex, pinned),
864-
templateID: this.isGroupByRecord(rowData) ? 'groupRow' : this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow',
870+
templateID: {
871+
type: this.isGroupByRecord(rowData) ? 'groupRow' : this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow',
872+
id: null
873+
},
865874
disabled: this.isGhostRecord(rowData),
866875
addRow: this.isAddRowRecord(rowData) ? rowData.addRow : false
867876
};
@@ -871,7 +880,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
871880
* @hidden @internal
872881
*/
873882
public viewCreatedHandler(args) {
874-
if (args.context.templateID.indexOf('detailRow') !== -1) {
883+
if (args.context.templateID.type === 'detailRow') {
875884
this.childDetailTemplates.set(args.context.$implicit, args);
876885
}
877886
}
@@ -880,7 +889,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
880889
* @hidden @internal
881890
*/
882891
public viewMovedHandler(args) {
883-
if (args.context.templateID.indexOf('detailRow') !== -1) {
892+
if (args.context.templateID.type === 'detailRow') {
884893
// view was moved, update owner in cache
885894
const key = args.context.$implicit;
886895
const cachedData = this.childDetailTemplates.get(key);

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -933,7 +933,8 @@ describe('IgxGrid Master Detail #grid', () => {
933933
expect(row).toBeUndefined();
934934
detailViews = GridFunctions.getAllMasterRowDetailDebug(fix);
935935
expect(detailViews[0].context.index).toBe(1);
936-
expect(detailViews[0].context.templateID).toBe('detailRow-ANATR');
936+
expect(detailViews[0].context.templateID.type).toBe('detailRow');
937+
expect(detailViews[0].context.templateID.id).toBe('ANATR');
937938
});
938939

939940
it('Should be able to expand detail view of newly added row.', async () => {

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

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -649,18 +649,23 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
649649
index: this.dataView.indexOf(rowData)
650650
};
651651
} else {
652-
const rowID = this.primaryKey ? rowData.rowID : this.data.indexOf(rowData.rowID);
653652
// child rows contain unique grids, hence should have unique templates
654653
return {
655654
$implicit: rowData,
656-
templateID: 'childRow-' + rowID,
655+
templateID: {
656+
type: 'childRow',
657+
id: rowData.rowID
658+
},
657659
index: this.dataView.indexOf(rowData)
658660
};
659661
}
660662
} else {
661663
return {
662664
$implicit: this.isGhostRecord(rowData) || this.isAddRowRecord(rowData) ? rowData.recordRef : rowData,
663-
templateID: 'dataRow',
665+
templateID: {
666+
type: 'dataRow',
667+
id: null
668+
},
664669
index: this.getDataViewIndex(rowIndex, pinned),
665670
disabled: this.isGhostRecord(rowData),
666671
addRow: this.isAddRowRecord(rowData) ? rowData.addRow : false

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -612,7 +612,10 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
612612
return {
613613
$implicit: this.isGhostRecord(rowData) || this.isAddRowRecord(rowData) ? rowData.recordRef : rowData,
614614
index: this.getDataViewIndex(rowIndex, pinned),
615-
templateID: this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow',
615+
templateID: {
616+
type: this.isSummaryRow(rowData) ? 'summaryRow' : 'dataRow',
617+
id: null
618+
},
616619
disabled: this.isGhostRecord(rowData) ? rowData.recordRef.isFilteredOutParent === undefined : false,
617620
addRow: this.isAddRowRecord(rowData) ? rowData.addRow : false
618621
};

‎projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -628,11 +628,11 @@ describe('Excel Exporter', () => {
628628

629629
fix.detectChanges();
630630

631-
const groupRows = grid.groupsRowList.toArray();
631+
const groupRows = grid.groupsRecords;
632632

633-
grid.toggleGroup(groupRows[2].groupRow);
634-
grid.toggleGroup(groupRows[3].groupRow);
635-
grid.toggleGroup(groupRows[6].groupRow);
633+
grid.toggleGroup(groupRows[0].groups[1]);
634+
grid.toggleGroup(groupRows[1]);
635+
grid.toggleGroup(groupRows[1].groups[2]);
636636

637637
fix.detectChanges();
638638

0 commit comments

Comments
 (0)