Merge pull request #8093 from IgniteUI/mdragnev/add-row-feat

Add row basic functionality

Author: ChronosSF

package-lock.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"
   },

package.json

@@ -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-actions-base.directive.ts

@@ -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.html

@@ -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-editing-actions.component.ts

@@ -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-icons.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.html

@@ -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/action-strip/grid-actions/grid-pinning-actions.component.spec.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'
 };