Skip to content

Commit 8ffa969

Browse files
simeonoffsimeonoff
authored
Merge branch 'master' into simeonoff/action-strip-sassdoc
2 parents 1a5c16f + b95934d commit 8ffa969

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
}
@@ -5881,9 +5882,9 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
58815882
/**
58825883
* @hidden @internal
58835884
*/
5884-
public showSnackbarFor(id: number) {
5885-
this.addRowSnackbar.actionText = id === -1 ? '' : this.snackbarActionText;
5886-
this.lastAddedRowId = id;
5885+
public showSnackbarFor(index: number) {
5886+
this.addRowSnackbar.actionText = index === -1 ? '' : this.snackbarActionText;
5887+
this.lastAddedRowIndex = index;
58875888
this.addRowSnackbar.show();
58885889
}
58895890

@@ -6559,9 +6560,10 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
65596560
if (commit) {
65606561
this.onRowAdded.pipe(first()).subscribe(rowData => {
65616562
// A check whether the row is in the current view
6562-
const index = this.findRecordIndexInView(rowData);
6563-
const shouldScroll = this.navigation.shouldPerformVerticalScroll(index, 0);
6564-
const showIndex = shouldScroll ? index : -1;
6563+
const viewIndex = this.findRecordIndexInView(rowData);
6564+
const dataIndex = this.filteredSortedData.findIndex(data => data[this.primaryKey] === rowData[this.primaryKey]);
6565+
const isInView = viewIndex !== -1 && !this.navigation.shouldPerformVerticalScroll(viewIndex, 0);
6566+
const showIndex = isInView ? -1 : dataIndex;
65656567
this.showSnackbarFor(showIndex);
65666568
});
65676569
this.gridAPI.submit_add_value();
@@ -6594,7 +6596,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
65946596
}
65956597

65966598
protected findRecordIndexInView(rec) {
6597-
return this.dataView.findIndex(data => data === rec);
6599+
return this.dataView.findIndex(data => data[this.primaryKey] === rec[this.primaryKey]);
65986600
}
65996601

66006602
/**

‎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

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

111+
});
112+
it('Should not be able to enter add row mode on Alt + Shift + plus key.', () => {
113+
GridFunctions.focusFirstCell(fixture);
114+
fixture.detectChanges();
115+
116+
UIInteractions.triggerEventHandlerKeyDown('+', gridContent, true, true, false);
117+
fixture.detectChanges();
118+
119+
const banner = GridFunctions.getRowEditingOverlay(fixture);
120+
expect(banner).toBeNull();
121+
expect(grid.getRowByIndex(1).addRow).toBeFalse();
122+
});
102123
it('Should not be able to enter add row mode when rowEditing is disabled', () => {
103124
grid.rowEditable = false;
104125
fixture.detectChanges();
@@ -111,5 +132,69 @@ describe('IgxGrid - Row Adding #grid', () => {
111132
expect(grid.getRowByIndex(1).addRow).toBeFalse();
112133
});
113134

135+
it('should navigate to added row on snackbar button click.', async() => {
136+
const rows = grid.rowList.toArray();
137+
const dataCount = grid.data.length;
138+
rows[0].beginAddRow();
139+
fixture.detectChanges();
140+
141+
grid.endEdit(true);
142+
fixture.detectChanges();
143+
144+
// check row is in data
145+
expect(grid.data.length).toBe(dataCount + 1);
146+
147+
const addedRec = grid.data[grid.data.length - 1];
148+
149+
grid.addRowSnackbar.triggerAction();
150+
fixture.detectChanges();
151+
152+
await wait(100);
153+
fixture.detectChanges();
154+
155+
// check added row is rendered and is in view
156+
const row = grid.getRowByKey(addedRec[grid.primaryKey]);
157+
expect(row).not.toBeNull();
158+
const gridOffsets = grid.tbody.nativeElement.getBoundingClientRect();
159+
const rowOffsets = row.nativeElement.getBoundingClientRect();
160+
expect(rowOffsets.top >= gridOffsets.top && rowOffsets.bottom <= gridOffsets.bottom).toBeTruthy();
161+
});
162+
163+
it('should navigate to added row on snackbar button click when row is not in current view.', async() => {
164+
grid.paging = true;
165+
grid.perPage = 5;
166+
fixture.detectChanges();
167+
168+
const rows = grid.rowList.toArray();
169+
const dataCount = grid.data.length;
170+
171+
rows[0].beginAddRow();
172+
fixture.detectChanges();
173+
174+
grid.endEdit(true);
175+
fixture.detectChanges();
176+
177+
// check row is in data
178+
expect(grid.data.length).toBe(dataCount + 1);
179+
180+
const addedRec = grid.data[grid.data.length - 1];
181+
182+
grid.addRowSnackbar.triggerAction();
183+
fixture.detectChanges();
184+
185+
await wait(100);
186+
fixture.detectChanges();
187+
188+
// check page is correct
189+
expect(grid.page).toBe(5);
190+
191+
// check added row is rendered and is in view
192+
const row = grid.getRowByKey(addedRec[grid.primaryKey]);
193+
expect(row).not.toBeNull();
194+
const gridOffsets = grid.tbody.nativeElement.getBoundingClientRect();
195+
const rowOffsets = row.nativeElement.getBoundingClientRect();
196+
expect(rowOffsets.top >= gridOffsets.top && rowOffsets.bottom <= gridOffsets.bottom).toBeTruthy();
197+
});
198+
114199
});
115200
});

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

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

214218

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

238239
<div class="igx-grid__footer" #footer>
239240
<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
@@ -168,6 +168,9 @@
168168
</div>
169169
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
170170
</div>
171+
<div class="igx-grid__addrow-snackbar">
172+
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
173+
</div>
171174
</div>
172175

173176

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

194-
<div class="igx-grid__addrow-snackbar">
195-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
196-
</div>
197-
198197
<div class="igx-grid__footer" #footer>
199198
<ng-content select="igx-grid-footer"></ng-content>
200199
<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
@@ -143,6 +143,9 @@
143143
</div>
144144
<div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
145145
</div>
146+
<div class="igx-grid__addrow-snackbar">
147+
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
148+
</div>
146149
</div>
147150

148151
<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>
@@ -164,10 +167,6 @@
164167
<div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
165168
</div>
166169

167-
<div class="igx-grid__addrow-snackbar">
168-
<igx-snackbar #addRowSnackbar [actionText]="snackbarActionText" [displayTime]='snackbarDisplayTime'>{{snackbarLabel}}</igx-snackbar>
169-
</div>
170-
171170
<div class="igx-grid__footer" #footer>
172171
<ng-content select="igx-grid-footer"></ng-content>
173172
<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
private cloneMap(mapIn: Map<any, boolean>): Map<any, boolean> {

‎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)