Skip to content

Commit f022e5d

Browse files
MKirovaMKirova
MKirova
authored and
MKirova
committed
chore(*): Merge from master.
2 parents 5218aaa + b95934d commit f022e5d

File tree

11 files changed

+130
-27
lines changed

11 files changed

+130
-27
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ export const NAVIGATION_KEYS = new Set([
324324
]);
325325
export const ROW_EXPAND_KEYS = new Set('right down arrowright arrowdown'.split(' '));
326326
export const ROW_COLLAPSE_KEYS = new Set('left up arrowleft arrowup'.split(' '));
327-
export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup']);
327+
export const SUPPORTED_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'enter', 'f2', 'escape', 'esc', 'pagedown', 'pageup', '+']);
328328
export const HEADER_KEYS = new Set([...Array.from(NAVIGATION_KEYS), 'escape', 'esc' , 'l']);
329329

330330
/**

‎projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1010,7 +1010,7 @@ describe('igxExpansionPanel', () => {
10101010
expect(grid.attributes.getNamedItem('ng-reflect-auto-generate').nodeValue).toEqual('true');
10111011
expect(grid.attributes.getNamedItem('ng-reflect-width').nodeValue).toEqual(fixture.componentInstance.width);
10121012
expect(grid.attributes.getNamedItem('ng-reflect-height').nodeValue).toEqual(fixture.componentInstance.height);
1013-
expect(grid.childElementCount).toEqual(8); // +1 because of add row snackbar
1013+
expect(grid.childElementCount).toEqual(7);
10141014
}));
10151015
it('Should apply all appropriate classes on combo initialization_image + text content', fakeAsync(() => {
10161016
const fixture: ComponentFixture<IgxExpansionPanelImageComponent> = TestBed.createComponent(IgxExpansionPanelImageComponent);

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

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2712,7 +2712,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
27122712
private _rowSelectionMode: GridSelectionMode = GridSelectionMode.none;
27132713
private _columnSelectionMode: GridSelectionMode = GridSelectionMode.none;
27142714

2715-
private lastAddedRowId;
2715+
private lastAddedRowIndex;
27162716

27172717
private rowEditPositioningStrategy = new RowEditPositionStrategy({
27182718
horizontalDirection: HorizontalAlignment.Right,
@@ -3274,7 +3274,8 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
32743274
});
32753275

32763276
this.addRowSnackbar?.onAction.subscribe(() => {
3277-
this.navigateTo(this.lastAddedRowId, 0);
3277+
const rec = this.filteredSortedData[this.lastAddedRowIndex];
3278+
this.scrollTo(rec, 0);
32783279
this.addRowSnackbar.hide();
32793280
});
32803281
}
@@ -5887,9 +5888,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
58875888
/**
58885889
* @hidden @internal
58895890
*/
5890-
public showSnackbarFor(id: number) {
5891-
this.addRowSnackbar.actionText = id === -1 ? '' : this.snackbarActionText;
5892-
this.lastAddedRowId = id;
5891+
public showSnackbarFor(index: number) {
5892+
this.addRowSnackbar.actionText = index === -1 ? '' : this.snackbarActionText;
5893+
this.lastAddedRowIndex = index;
58935894
this.addRowSnackbar.show();
58945895
}
58955896

@@ -6565,9 +6566,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
65656566
if (commit) {
65666567
this.onRowAdded.pipe(first()).subscribe(rowData => {
65676568
// A check whether the row is in the current view
6568-
const index = this.findRecordIndexInView(rowData);
6569-
const shouldScroll = this.navigation.shouldPerformVerticalScroll(index, 0);
6570-
const showIndex = shouldScroll ? index : -1;
6569+
const viewIndex = this.findRecordIndexInView(rowData);
6570+
const dataIndex = this.filteredSortedData.findIndex(data => data[this.primaryKey] === rowData[this.primaryKey]);
6571+
const isInView = viewIndex !== -1 && !this.navigation.shouldPerformVerticalScroll(viewIndex, 0);
6572+
const showIndex = isInView ? -1 : dataIndex;
65716573
this.showSnackbarFor(showIndex);
65726574
});
65736575
this.gridAPI.submit_add_value();
@@ -6603,7 +6605,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
66036605
}
66046606

66056607
protected findRecordIndexInView(rec) {
6606-
return this.dataView.findIndex(data => data === rec);
6608+
return this.dataView.findIndex(data => data[this.primaryKey] === rec[this.primaryKey]);
66076609
}
66086610

66096611
protected getUnpinnedIndexById(id) {

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export class IgxGridNavigationService {
5050
if (!this.activeNode || !(SUPPORTED_KEYS.has(key) || (key === 'tab' && this.grid.crudService.cell))) { return; }
5151
const shift = event.shiftKey;
5252
const ctrl = event.ctrlKey;
53+
const alt = event.altKey;
5354
if (NAVIGATION_KEYS.has(key) && this.pendingNavigation) { event.preventDefault(); return; }
5455

5556
const type = this.isDataRow(this.activeNode.row) ? 'dataCell' :
@@ -262,9 +263,20 @@ export class IgxGridNavigationService {
262263
protected handleAlt(key: string, event: KeyboardEvent) {
263264
event.preventDefault();
264265
const row = this.grid.getRowByIndex(this.activeNode.row) as any;
265-
if (!this.isToggleKey(key) || !row) { return; }
266266

267-
if (!row.expanded && ROW_EXPAND_KEYS.has(key)) {
267+
if (!(this.isToggleKey(key) || this.isAddKey(key)) || !row) { return; }
268+
if (this.isAddKey(key)) {
269+
if (!this.grid.rowEditable) {
270+
console.warn('The grid must be in row edit mode to perform row adding!');
271+
return;
272+
}
273+
274+
if (event.shiftKey && row.treeRow !== undefined) {
275+
row.beginAddChild();
276+
} else if (!event.shiftKey) {
277+
row.beginAddRow();
278+
}
279+
} else if (!row.expanded && ROW_EXPAND_KEYS.has(key)) {
268280
row.rowID === undefined ? row.toggle() :
269281
this.grid.gridAPI.set_row_expansion_state(row.rowID, true, event);
270282
} else if (row.expanded && ROW_COLLAPSE_KEYS.has(key)) {
@@ -607,4 +619,8 @@ export class IgxGridNavigationService {
607619
private isToggleKey(key: string): boolean {
608620
return ROW_COLLAPSE_KEYS.has(key) || ROW_EXPAND_KEYS.has(key);
609621
}
622+
623+
private isAddKey(key: string): boolean {
624+
return key === '+';
625+
}
610626
}

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

Lines changed: 86 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import { By } from '@angular/platform-browser';
1212
import { IgxActionStripComponent } from '../../action-strip/action-strip.component';
1313
import { IgxActionStripModule } from '../../action-strip/action-strip.module';
14-
import { UIInteractions } from '../../test-utils/ui-interactions.spec';
14+
import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
1515
import { IgxGridRowComponent } from './grid-row.component';
1616

1717
describe('IgxGrid - Row Adding #grid', () => {
@@ -99,7 +99,28 @@ describe('IgxGrid - Row Adding #grid', () => {
9999
// No much space between the row and the banner
100100
expect(addRowTop - bannerBottom).toBeLessThan(2);
101101
});
102+
it('Should be able to enter add row mode on Alt + plus key.', () => {
103+
GridFunctions.focusFirstCell(fixture);
104+
fixture.detectChanges();
105+
106+
UIInteractions.triggerEventHandlerKeyDown('+', gridContent, true, false, false);
107+
fixture.detectChanges();
102108

109+
const addRow = grid.getRowByIndex(1);
110+
expect(addRow.addRow).toBeTrue();
111+
112+
});
113+
it('Should not be able to enter add row mode on Alt + Shift + plus key.', () => {
114+
GridFunctions.focusFirstCell(fixture);
115+
fixture.detectChanges();
116+
117+
UIInteractions.triggerEventHandlerKeyDown('+', gridContent, true, true, false);
118+
fixture.detectChanges();
119+
120+
const banner = GridFunctions.getRowEditingOverlay(fixture);
121+
expect(banner).toBeNull();
122+
expect(grid.getRowByIndex(1).addRow).toBeFalse();
123+
});
103124
it('Should not be able to enter add row mode when rowEditing is disabled', () => {
104125
grid.rowEditable = false;
105126
fixture.detectChanges();
@@ -157,5 +178,69 @@ describe('IgxGrid - Row Adding #grid', () => {
157178
expect(grid.pinnedRecords.length).toBe(1);
158179
expect(grid.unpinnedRecords[grid.unpinnedRecords.length - 1]).toBe(grid.data[grid.data.length - 1]);
159180
});
181+
it('should navigate to added row on snackbar button click.', async() => {
182+
const rows = grid.rowList.toArray();
183+
const dataCount = grid.data.length;
184+
rows[0].beginAddRow();
185+
fixture.detectChanges();
186+
187+
grid.endEdit(true);
188+
fixture.detectChanges();
189+
190+
// check row is in data
191+
expect(grid.data.length).toBe(dataCount + 1);
192+
193+
const addedRec = grid.data[grid.data.length - 1];
194+
195+
grid.addRowSnackbar.triggerAction();
196+
fixture.detectChanges();
197+
198+
await wait(100);
199+
fixture.detectChanges();
200+
201+
// check added row is rendered and is in view
202+
const row = grid.getRowByKey(addedRec[grid.primaryKey]);
203+
expect(row).not.toBeNull();
204+
const gridOffsets = grid.tbody.nativeElement.getBoundingClientRect();
205+
const rowOffsets = row.nativeElement.getBoundingClientRect();
206+
expect(rowOffsets.top >= gridOffsets.top && rowOffsets.bottom <= gridOffsets.bottom).toBeTruthy();
207+
});
208+
209+
it('should navigate to added row on snackbar button click when row is not in current view.', async() => {
210+
grid.paging = true;
211+
grid.perPage = 5;
212+
fixture.detectChanges();
213+
214+
const rows = grid.rowList.toArray();
215+
const dataCount = grid.data.length;
216+
217+
rows[0].beginAddRow();
218+
fixture.detectChanges();
219+
220+
grid.endEdit(true);
221+
fixture.detectChanges();
222+
223+
// check row is in data
224+
expect(grid.data.length).toBe(dataCount + 1);
225+
226+
const addedRec = grid.data[grid.data.length - 1];
227+
228+
grid.addRowSnackbar.triggerAction();
229+
fixture.detectChanges();
230+
231+
await wait(100);
232+
fixture.detectChanges();
233+
234+
// check page is correct
235+
expect(grid.page).toBe(5);
236+
237+
// check added row is rendered and is in view
238+
const row = grid.getRowByKey(addedRec[grid.primaryKey]);
239+
expect(row).not.toBeNull();
240+
const gridOffsets = grid.tbody.nativeElement.getBoundingClientRect();
241+
const rowOffsets = row.nativeElement.getBoundingClientRect();
242+
expect(rowOffsets.top >= gridOffsets.top && rowOffsets.bottom <= gridOffsets.bottom).toBeTruthy();
243+
});
244+
160245
});
161246
});

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,10 @@
210210
</div>
211211
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
212212
</div>
213+
214+
<div class="igx-grid__addrow-snackbar">
215+
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
216+
</div>
213217
</div>
214218

215219

@@ -232,9 +236,6 @@
232236
</div>
233237
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
234238
</div>
235-
<div class="igx-grid__addrow-snackbar">
236-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
237-
</div>
238239

239240
<div class="igx-grid__footer" #footer>
240241
<ng-content select="igx-grid-footer"></ng-content>

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,9 @@
169169
</div>
170170
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
171171
</div>
172+
<div class="igx-grid__addrow-snackbar">
173+
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
174+
</div>
172175
</div>
173176

174177

@@ -192,10 +195,6 @@
192195
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
193196
</div>
194197

195-
<div class="igx-grid__addrow-snackbar">
196-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
197-
</div>
198-
199198
<div class="igx-grid__footer" #footer>
200199
<ng-content select="igx-grid-footer"></ng-content>
201200
<ng-container *ngIf="paging && totalRecords">

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,9 @@
144144
</div>
145145
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
146146
</div>
147+
<div class="igx-grid__addrow-snackbar">
148+
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
149+
</div>
147150
</div>
148151

149152
<div class="igx-grid__tfoot" role="rowgroup" [style.height.px]='summariesHeight' tabindex="0" [attr.aria-activedescendant]="activeDescendant" (focus)="navigation.focusFirstCell(false)" (keydown)="navigation.summaryNav($event)" #tfoot>
@@ -165,10 +168,6 @@
165168
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
166169
</div>
167170

168-
<div class="igx-grid__addrow-snackbar">
169-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
170-
</div>
171-
172171
<div class="igx-grid__footer" #footer>
173172
<ng-content select="igx-grid-footer"></ng-content>
174173
<ng-container *ngIf="paging && totalRecords">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -436,7 +436,7 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy
436436
}
437437

438438
protected findRecordIndexInView(rec) {
439-
return this.dataView.findIndex(x => x.data === rec);
439+
return this.dataView.findIndex(x => x.data[this.primaryKey] === rec[this.primaryKey]);
440440
}
441441

442442
protected getUnpinnedIndexById(id) {

‎src/app/grid-add-row/grid-add-row.sample.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
#grid
44
[data]="data"
55
[width]="'800px'"
6+
[paging]="true"
67
[height]="'500px'"
78
[primaryKey]="'ID'"
89
(mouseleave)="onMouseLeave(actionstrip)"
@@ -17,6 +18,7 @@
1718
[width]="c.width"
1819
[pinned]="c.pinned"
1920
[hidden]="c.hidden"
21+
[groupable]='true'
2022
>
2123
</igx-column>
2224

0 commit comments

Comments
 (0)