Add row basic functionality

package.json

@@ -52,6 +52,7 @@
     "@angular/platform-browser": "^10.1.0",
     "@angular/platform-browser-dynamic": "^10.1.0",
     "@angular/router": "^10.1.0",
+    "@igniteui/material-icons-extended": "^2.3.0",
     "@types/hammerjs": "^2.0.36",
     "@types/source-map": "0.5.2",
     "classlist.js": "^1.1.20150312",
@@ -62,8 +63,8 @@
     "lodash.merge": "^4.6.2",
     "resize-observer-polyfill": "^1.5.1",
     "rxjs": "^6.6.3",
-    "tslib": "^2.0.0",
     "setimmediate": "^1.0.5",
+    "tslib": "^2.0.0",
     "web-animations-js": "^2.3.2",
     "zone.js": "~0.10.3"
   },

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-actions-base.directive.ts

@@ -1,13 +1,13 @@
 import { Directive, Inject } from '@angular/core';
 import { IgxActionStripComponent } from '../action-strip.component';
 import { IgxRowDirective } from '../../grids/public_api';
-import { IgxGridIconService } from '../../grids/common/grid-icon.service';
+import { IgxIconService } from '../../icon/icon.service';
 
 @Directive({
     selector: '[igxGridActionsBase]'
 })
 export class IgxGridActionsBaseDirective {
-    constructor(@Inject(IgxActionStripComponent) protected strip: IgxActionStripComponent, protected iconService: IgxGridIconService) { }
+    constructor(@Inject(IgxActionStripComponent) protected strip: IgxActionStripComponent, protected iconService: IgxIconService) { }
 
     /**
      * Getter to be used in template

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html

@@ -2,7 +2,10 @@
     <button igxButton="icon" [disabled]="disabled" igxRipple (click)="startEdit($event)">
         <igx-icon>edit</igx-icon>
     </button>
+    <button *ngIf="addRow" igxButton="icon" [disabled]="disabled" igxRipple (click)="addChild($event)">
+        <igx-icon fontSet="imx-icons" name="add-row"></igx-icon>
+    </button>
     <button igxButton="icon" [disabled]="disabled" class="igx-action-strip__delete" igxRipple (click)="deleteRow($event)">
-        <igx-icon >delete</igx-icon>
+        <igx-icon>delete</igx-icon>
     </button>
 </ng-container>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts

@@ -1,6 +1,7 @@
-import { Component, HostBinding } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import { IgxGridActionsBaseDirective } from './grid-actions-base.directive';
 import { showMessage } from '../../core/deprecateDecorators';
+import { addRow } from '@igniteui/material-icons-extended';
 
 @Component({
     selector: 'igx-grid-editing-actions',
@@ -18,6 +19,23 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
     public cssClass = 'igx-action-strip__editing-actions';
 
     private isMessageShown = false;
+    private _addRow = false;
+    private iconsRendered = false;
+
+    /**
+     * An input to enable/disable action strip row adding button
+     */
+    @Input()
+    public set addRow(value: boolean) {
+        this._addRow = value;
+    }
+    public get addRow(): boolean {
+        if (!this.iconsRendered) {
+            this.registerIcons();
+            this.iconsRendered = true;
+        }
+        return this._addRow;
+    }
 
     /**
      * Enter row or cell edit mode depending the grid rowEditable option
@@ -69,6 +87,23 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
         this.strip.hide();
     }
 
+    public addChild(event?): void {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (!this.isRow(this.strip.context)) {
+            return;
+        }
+        const context = this.strip.context;
+        const grid = context.grid;
+        if (!grid.rowEditable) {
+            console.warn('The grid must be in row edit mode to perform row adding!');
+            return;
+        }
+        grid.beginAddRowByIndex(context.rowID, context.index);
+        this.strip.hide();
+    }
+
     /**
      * Getter if the row is disabled
      * @hidden
@@ -80,4 +115,12 @@ export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective
         }
         return this.strip.context.disabled;
     }
+
+    /**
+     * @hidden
+     * @internal
+     */
+    private registerIcons() {
+        this.iconService.addSvgIconFromText(addRow.name, addRow.value, 'imx-icons');
+    }
 }

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html

@@ -1,14 +1,14 @@
 <ng-container *ngIf="isRowContext">
     <button *ngIf="inPinnedArea && pinnedTop" igxRipple igxButton="icon" (click)="scrollToRow($event)">
-        <igx-icon fontSet="pinning-actions-icons" name="jump_down"></igx-icon>
+        <igx-icon fontSet="imx-icons" name="jump-down"></igx-icon>
     </button>
     <button *ngIf="inPinnedArea && !pinnedTop" igxRipple igxButton="icon" (click)="scrollToRow($event)">
-        <igx-icon fontSet="pinning-actions-icons" name="jump_up"></igx-icon>
+        <igx-icon fontSet="imx-icons" name="jump-up"></igx-icon>
     </button>
     <button *ngIf="!pinned" igxRipple igxButton="icon" (click)="pin($event)">
-        <igx-icon fontSet="pinning-icons" name="pin"></igx-icon>
+        <igx-icon fontSet="imx-icons" name="pin-left"></igx-icon>
     </button>
     <button *ngIf="pinned" igxRipple igxButton="icon" (click)="unpin($event)">
-        <igx-icon fontSet="pinning-icons" name="unpin"></igx-icon>
+        <igx-icon fontSet="imx-icons" name="unpin-left"></igx-icon>
     </button>
-</ng-container>
+</ng-container>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts

@@ -39,8 +39,8 @@ describe('igxGridPinningActions #grid ', () => {
         let pinIcon, unpinIcon;
         actionStrip.show(grid.rowList.first);
         fixture.detectChanges();
-        pinIcon = fixture.debugElement.query(By.css(`igx-icon[name=pin]`));
-        unpinIcon = fixture.debugElement.query(By.css(`igx-icon[name=unpin]`));
+        pinIcon = fixture.debugElement.query(By.css(`igx-icon[name=pin-left]`));
+        unpinIcon = fixture.debugElement.query(By.css(`igx-icon[name=unpin-left]`));
         expect(unpinIcon).toBeNull();
         pinIcon.parent.triggerEventHandler('click', new Event('click'));
         actionStrip.hide();
@@ -49,8 +49,8 @@ describe('igxGridPinningActions #grid ', () => {
 
         actionStrip.show(grid.pinnedRows[0]);
         fixture.detectChanges();
-        pinIcon = fixture.debugElement.query(By.css(`igx-icon[name=pin]`));
-        unpinIcon = fixture.debugElement.query(By.css(`igx-icon[name=unpin]`));
+        pinIcon = fixture.debugElement.query(By.css(`igx-icon[name=pin-left]`));
+        unpinIcon = fixture.debugElement.query(By.css(`igx-icon[name=unpin-left]`));
         expect(pinIcon).toBe(null);
         unpinIcon.parent.triggerEventHandler('click', new Event('click'));
         actionStrip.hide();
@@ -65,7 +65,7 @@ describe('igxGridPinningActions #grid ', () => {
         actionStrip.show(grid.pinnedRows[0]);
         fixture.detectChanges();
 
-        const jumpIcon = fixture.debugElement.query(By.css(`igx-icon[name=jump_down]`));
+        const jumpIcon = fixture.debugElement.query(By.css(`igx-icon[name=jump-down]`));
         jumpIcon.parent.triggerEventHandler('click', new Event('click'));
         await wait();
         fixture.detectChanges();

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts

@@ -1,8 +1,6 @@
 import { Component, HostBinding } from '@angular/core';
 import { IgxGridActionsBaseDirective } from './grid-actions-base.directive';
-import { GridIconsFeature } from '../../grids/common/enums';
-import { PINNING_ACTIONS_ICONS_FONT_SET, PINNING_ACTIONS_ICONS, } from './grid-pinning-actions-icons';
-import { PINNING_ICONS_FONT_SET, PINNING_ICONS } from '../../grids/pinning/pinning-icons';
+import { pinLeft, unpinLeft, jumpDown, jumpUp } from '@igniteui/material-icons-extended';
 @Component({
     selector: 'igx-grid-pinning-actions',
     templateUrl: 'grid-pinning-actions.component.html',
@@ -119,8 +117,10 @@ export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective
         const context = this.strip.context;
         const grid = context.grid;
         if (grid) {
-            this.iconService.registerSVGIcons(GridIconsFeature.RowPinning, PINNING_ICONS, PINNING_ICONS_FONT_SET);
-            this.iconService.registerSVGIcons(GridIconsFeature.RowPinningActions, PINNING_ACTIONS_ICONS, PINNING_ACTIONS_ICONS_FONT_SET);
+            this.iconService.addSvgIconFromText(pinLeft.name, pinLeft.value, 'imx-icons');
+            this.iconService.addSvgIconFromText(unpinLeft.name, unpinLeft.value, 'imx-icons');
+            this.iconService.addSvgIconFromText(jumpDown.name, jumpDown.value, 'imx-icons');
+            this.iconService.addSvgIconFromText(jumpUp.name, jumpDown.value, 'imx-icons');
         }
     }
 }

projects/igniteui-angular/src/lib/core/i18n/grid-resources.ts

@@ -96,6 +96,8 @@ export interface IGridResourceStrings {
     igx_grid_pinning_check_all_label?: string;
     igx_grid_pinning_uncheck_all_label?: string;
     igx_grid_toolbar_actions_filter_prompt?: string;
+    igx_grid_snackbar_addrow_label?: string;
+    igx_grid_snackbar_addrow_actiontext?: string;
 }
 
 export const GridResourceStringsEN: IGridResourceStrings = {
@@ -195,5 +197,7 @@ export const GridResourceStringsEN: IGridResourceStrings = {
     igx_grid_hiding_uncheck_all_label: 'Show All',
     igx_grid_pinning_check_all_label: 'Pin All',
     igx_grid_pinning_uncheck_all_label: 'Unpin All',
-    igx_grid_toolbar_actions_filter_prompt: 'Filter columns list ...'
+    igx_grid_toolbar_actions_filter_prompt: 'Filter columns list ...',
+    igx_grid_snackbar_addrow_label: 'Row added',
+    igx_grid_snackbar_addrow_actiontext: 'SHOW'
 };

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -532,6 +532,10 @@
         @extend %igx-grid__row-editing-outlet !optional;
     }
 
+    @include e(grid-addrow-snackbar) {
+        @extend %igx-grid__addrow-snackbar !optional;
+    }
+
     @include e(filtering-cell) {
         @extend %igx-grid__filtering-cell !optional;
     }

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -2331,6 +2331,13 @@
         }
     }
 
+    %igx-grid__addrow-snackbar {
+        position: absolute;
+        z-index: 5;
+        left: 35%;
+        bottom: 25%;
+    }
+
     %igx-grid__filtering-cell {
         display: flex;
         align-items: center;

projects/igniteui-angular/src/lib/grids/api.service.ts

@@ -85,7 +85,8 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
             return -1;
         }
         const data = dataCollection ?? this.get_all_data(grid.transactions.enabled);
-        return grid.primaryKey ? data.findIndex(record => record[grid.primaryKey] === rowID) : data.indexOf(rowID);
+        return grid.primaryKey ? data.findIndex(record => record.recordRef ? record.recordRef[grid.primaryKey] === rowID
+            : record[grid.primaryKey] === rowID) : data.indexOf(rowID);
     }
 
     public get_row_by_key(rowSelector: any): IgxRowDirective<IgxGridBaseDirective & GridType> {
@@ -136,6 +137,24 @@ export class GridBaseAPIService <T extends IgxGridBaseDirective & GridType> {
         }
     }
 
+    public submit_add_value() {
+        const cell = this.grid.crudService.cell;
+        if (cell) {
+            this.update_add_cell(cell, cell.editValue);
+            this.escape_editMode();
+        }
+    }
+
+    public update_add_cell(cell: IgxCell, value: any) {
+        cell.editValue = value;
+
+        if (isEqual(cell.value, cell.editValue)) {
+            return;
+        }
+        const data = cell.rowData;
+        this.updateData(this.grid, cell.id.rowID, data, cell.rowData, reverseMapper(cell.column.field, cell.editValue));
+    }
+
     update_cell(cell: IgxCell, value: any) {
         cell.editValue = value;
         const args = cell.createEditEventArgs();

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

@@ -45,6 +45,19 @@
         >{{ value ? "check" : "close" }}</igx-icon
     >
 </ng-template>
+<ng-template #addRowCell let-cell="cell">
+    <div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
+    [cssClass]="highlightClass"
+    [activeCssClass]="activeHighlightClass"
+    [groupName]="gridID"
+    [value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
+    [row]="rowData"
+    [column]="this.column.field"
+    [containerClass]="'igx-grid__td-text'"
+    [metadata]="searchMetadata">{{
+        value ? value : column.header
+    }}</div>
+</ng-template>
 <ng-template #inlineEditor let-cell="cell">
     <ng-container *ngIf="column.dataType === 'string'">
         <igx-input-group displayDensity="compact">

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

@@ -178,6 +178,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * @memberof IgxGridCellComponent
      */
     get template(): TemplateRef<any> {
+        if (this.grid.rowEditable && this.row.addRow) {
+            return this.addMode ? this.inlineEditorTemplate : this.addRowCellTemplate;
+        }
         if (this.editMode) {
             const inlineEditorTemplate = this.column.inlineEditorTemplate;
             return inlineEditorTemplate ? inlineEditorTemplate : this.inlineEditorTemplate;
@@ -354,6 +357,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     @HostBinding('class.igx-grid__td--editing')
     editMode = false;
 
+    /**
+     * Returns whether the cell is in add mode
+     */
+    @Input()
+    addMode = false;
 
     /**
      * Sets/get the `role` property of the cell.
@@ -517,6 +525,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
     @ViewChild('inlineEditor', { read: TemplateRef, static: true })
     protected inlineEditorTemplate: TemplateRef<any>;
 
+    @ViewChild('addRowCell', { read: TemplateRef, static: true})
+    protected addRowCellTemplate: TemplateRef<any>;
+
     @ViewChild(IgxTextHighlightDirective, { read: IgxTextHighlightDirective })
     protected set highlight(value: IgxTextHighlightDirective) {
         this._highlight = value;
@@ -631,7 +642,12 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
 
         if (this.editable && editMode && !this.row.deleted) {
             if (editableCell) {
-                this.gridAPI.update_cell(editableCell, editableCell.editValue);
+                if (this.row.addRow) {
+                    this.gridAPI.update_add_cell(editableCell, editableCell.editValue);
+                    this.row.rowData = editableCell.rowData;
+                } else {
+                    this.gridAPI.update_cell(editableCell, editableCell.editValue);
+                }
                 /* This check is related with the following issue #6517:
                  * when edit cell that belongs to a column which is sorted and press tab,
                  * the next cell in edit mode is with wrong value /its context is not updated/;
@@ -790,6 +806,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
             // prevent double-tap to zoom on iOS
             (event as HammerInput).preventDefault();
         }
+        if (this.grid.rowEditable && this.row.addRow) {
+            this.crudService.begin(this);
+        }
         if (this.editable && !this.editMode && !this.row.deleted) {
             this.crudService.begin(this);
         }

projects/igniteui-angular/src/lib/grids/common/column.interface.ts

@@ -43,6 +43,6 @@ export interface ColumnType {
     topLevelParent?: ColumnType;
     parent?: ColumnType;
     hasLastPinnedChildColumn: boolean;
-
+    header: string;
     getGridTemplate(isRow: boolean, isIE: boolean): string;
 }