Merge pull request #8430 from IgniteUI/grid-cell-edit-styling

zdrawku · web-flow · commit f2f67446417d · 2020-10-27T17:10:34.000+02:00
fix(grid): update transactionState rowEdit is canceled
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -187,7 +187,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
      * @memberof IgxGridCellComponent
      */
     get template(): TemplateRef<any> {
-        if (this.editMode || this.addMode) {
+        if (this.editMode) {
             const inlineEditorTemplate = this.column.inlineEditorTemplate;
             return inlineEditorTemplate ? inlineEditorTemplate : this.inlineEditorTemplate;
         }
@@ -366,12 +366,6 @@ 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.
      * Default value is `"gridcell"`.
diff --git a/projects/igniteui-angular/src/lib/grids/common/pipes.ts b/projects/igniteui-angular/src/lib/grids/common/pipes.ts
@@ -284,7 +284,7 @@ export class IgxStringReplacePipe implements PipeTransform {
 @Pipe({ name: 'transactionState' })
 export class IgxGridTransactionStatePipe implements PipeTransform {
 
-    transform(row_id: any, field: string, rowEditable: boolean, transactions: any, _: any, __: any) {
+    transform(row_id: any, field: string, rowEditable: boolean, transactions: any, _: any, __: any, ___: any) {
         if (rowEditable) {
             const rowCurrentState = transactions.getAggregatedValue(row_id, false);
             if (rowCurrentState) {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html
@@ -98,15 +98,14 @@
 <ng-template #cellTemplate let-col>
         <igx-grid-cell
         class="igx-grid__td igx-grid__td--fw"
-        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
+        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell:grid.crudService.row"
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         [class.igx-grid__td--pinned]="col.pinned"
         [class.igx-grid__td--number]="col.dataType === 'number'"
         [class.igx-grid__td--bool]="col.dataType === 'boolean'"
         [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
-        [editMode]="col.editable && crudService.isCellInEditByPos(index, col.index)"
-        [addMode]="col.editable && crudService.isInAddMode(index,col.index)"
+        [editMode]="col.editable && crudService.targetInEdit(index, col.index)"
         [column]="col"
         [formatter]="col.formatter"
         [row]="this"
@@ -135,13 +134,12 @@
         [class.igx-grid__td--pinned]="col.pinned"
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
-        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
+        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell:grid.crudService.row"
         [class.igx-grid__td--number]="col.dataType === 'number' && col.visibleIndex !== 0"
         [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [expanded]="expanded"
-        [editMode]="col.editable && crudService.isCellInEditByPos(index, col.index)"
-        [addMode]="col.editable && crudService.isInAddMode(index,col.index)"
+        [editMode]="col.editable && crudService.targetInEdit(index, col.index)"
         [column]="col"
         [formatter]="col.formatter"
         [row]="this"
@@ -166,14 +164,13 @@
 <ng-template #mrlCellTemplate let-col>
     <igx-grid-cell
         class="igx-grid__td igx-grid__td--fw"
-        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
+        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell:grid.crudService.row"
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         [class.igx-grid__td--pinned]="col.pinned"
         [class.igx-grid__td--number]="col.dataType === 'number'"
         [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
-        [editMode]="col.editable && crudService.isCellInEditByPos(index, col.index)"
-        [addMode]="col.editable && crudService.isInAddMode(index,col.index)"
+        [editMode]="col.editable && crudService.targetInEdit(index, col.index)"
         [column]="col"
         [style.-ms-grid-row-span]="col.gridRowSpan"
         [style.-ms-grid-column-span]="col.gridColumnSpan"
@@ -203,14 +200,14 @@
 <ng-template #mrlExpandableCellTemplate let-col>
     <igx-expandable-grid-cell
         class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
-        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
+        [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell:grid.crudService.row"
         [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
         [class.igx-grid__td--pinned]="col.pinned"
         [class.igx-grid__td--number]="col.dataType === 'number' && col.visibleIndex !== 0"
         [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
         [expanded]="expanded"
-        [editMode]="col.editable && crudService.isCellInEditByPos(index, col.index)"
+        [editMode]="col.editable && crudService.targetInEdit(index, col.index)"
         [column]="col"
         [style.-ms-grid-row-span]="col.gridRowSpan"
         [style.-ms-grid-column-span]="col.gridColumnSpan"
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html
@@ -49,14 +49,13 @@
     <ng-template igxGridFor let-col [igxGridForOf]="unpinnedColumns | igxNotGrouped" [igxForScrollContainer]="grid.parentVirtDir" let-colIndex="index" [igxForSizePropName]='"calcPixelWidth"' [igxForScrollOrientation]="'horizontal'" [igxForContainerSize]='grid.unpinnedWidth' [igxForTrackBy]='grid.trackColumnChanges' #igxDirRef>
         <igx-hierarchical-grid-cell
             class="igx-grid__td igx-grid__td--fw"
-            [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
+            [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell:grid.crudService.row"
             [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             [class.igx-grid__td--number]="col.dataType === 'number'"
             [class.igx-grid__td--bool]="col.dataType === 'boolean'"
             [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
             [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
-            [editMode]="col.editable && crudService.isCellInEditByPos(index, col.index)"
-            [addMode]="col.editable && crudService.isInAddMode(index,col.index)"
+            [editMode]="col.editable && crudService.targetInEdit(index, col.index)"
             [column]="col"
             [formatter]="col.formatter"
             [row]="this"
@@ -97,12 +96,12 @@
     <ng-template #pinnedCellsTemplate let-col>
         <igx-hierarchical-grid-cell *ngFor="let col of pinnedColumns | igxNotGrouped"
             class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
-            [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
+            [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell:grid.crudService.row"
             [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             [class.igx-grid__td--number]="col.dataType === 'number'"
             [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
             [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
-            [editMode]="col.editable && crudService.isCellInEditByPos(index, col.index)"
+            [editMode]="col.editable && crudService.targetInEdit(index, col.index)"
             [column]="col"
             [formatter]="col.formatter"
             [row]="this"
diff --git a/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts b/projects/igniteui-angular/src/lib/grids/selection/selection.service.ts
@@ -364,19 +364,13 @@ export class IgxGridCRUDService {
         }
     }
 
-    /** Returns whether a particular cell is in edit mode */
-    public isCellInEditByPos(rowIndex: number, columnIndex: number): boolean {
+    /** Returns whether the targeted cell is in edit mode */
+    public targetInEdit(rowIndex: number, columnIndex: number): boolean {
         if (!this.cell) {
             return false;
         }
-        return this.cell.column.index === columnIndex && this.cell.rowIndex === rowIndex;
-    }
-
-    public isInAddMode(rowIndex: number, columnIndex: number): boolean {
-        if (!this.cell) {
-            return false;
-        }
-        return this.cell.column.index === columnIndex && this.cell.rowIndex === rowIndex;
+        const res = this.cell.column.index === columnIndex && this.cell.rowIndex === rowIndex;
+        return res;
     }
 }
 
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html
@@ -26,13 +26,13 @@
     <ng-template #cellTemplate>
         <igx-grid-cell
             class="igx-grid__td igx-grid__td--fw"
-            [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
+            [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell:grid.crudService.row"
             [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             [class.igx-grid__td--number]="col.dataType === 'number'"
             [class.igx-grid__td--bool]="col.dataType === 'boolean'"
             [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
             [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
-            [editMode]="col.editable && crudService.isCellInEditByPos(index, col.index)"
+            [editMode]="col.editable && crudService.targetInEdit(index, col.index)"
             [column]="col"
             [formatter]="col.formatter"
             [row]="this"
@@ -49,22 +49,21 @@
             [active]="isCellActive(col.visibleIndex)"
             [cellSelectionMode]="grid.cellSelection"
             [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
-            [addMode]="col.editable && crudService.isInAddMode(index,col.index)"
             #treeCell>
         </igx-grid-cell>
     </ng-template>
     <ng-template #treeCellTemplate>
         <igx-tree-grid-cell
             class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell"
-            [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
+            [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell:grid.crudService.row"
             [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
             [class.igx-grid__td--number]="col.dataType === 'number' && col.visibleIndex !== 0"
             [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
             [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
             [level]="treeRow.level"
             [expanded]="treeRow.expanded"
             [showIndicator]="showIndicator"
-            [editMode]="col.editable && crudService.isCellInEditByPos(index, col.index)"
+            [editMode]="col.editable && crudService.targetInEdit(index, col.index)"
             [column]="col"
             [formatter]="col.formatter"
             [row]="this"
@@ -82,7 +81,6 @@
             [active]="isCellActive(col.visibleIndex)"
             [cellSelectionMode]="grid.cellSelection"
             [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
-            [addMode]="col.editable && crudService.isInAddMode(index,col.index)"
             #treeCell>
         </igx-tree-grid-cell>
     </ng-template>
@@ -110,12 +108,12 @@
         <ng-template #cellTemplate>
             <igx-grid-cell
                 class="igx-grid__td igx-grid__td--fw igx-grid__td--pinned"
-                [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
+                [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell:grid.crudService.row"
                 [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
                 [class.igx-grid__td--number]="col.dataType === 'number'"
                 [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
                 [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
-                [editMode]="col.editable && crudService.isCellInEditByPos(index, col.index)"
+                [editMode]="col.editable && crudService.targetInEdit(index, col.index)"
                 [column]="col"
                 [formatter]="col.formatter"
                 [row]="this"
@@ -141,15 +139,15 @@
         <ng-template #treeCellTemplate>
             <igx-tree-grid-cell
                 class="igx-grid__td igx-grid__td--fw igx-grid__td--tree-cell igx-grid__td--pinned"
-                [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell"
+                [class.igx-grid__td--edited]="rowID | transactionState:col.field:grid.rowEditable:grid.transactions:grid.pipeTrigger:grid.crudService.cell:grid.crudService.row"
                 [attr.aria-describedby]="gridID + '_' + col.field | igxStringReplace:'.':'_'"
                 [class.igx-grid__td--number]="col.dataType === 'number' && col.visibleIndex !== 0"
                 [ngClass]="col.cellClasses | igxCellStyleClasses:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
                 [ngStyle]="col.cellStyles | igxCellStyles:rowData[col.field]:rowData:col.field:viewIndex:grid.pipeTrigger"
                 [level]="treeRow.level"
                 [expanded]="treeRow.expanded"
                 [showIndicator]="showIndicator"
-                [editMode]="col.editable && crudService.isCellInEditByPos(index, col.index)"
+                [editMode]="col.editable && crudService.targetInEdit(index, col.index)"
                 [column]="col"
                 [formatter]="col.formatter"
                 [row]="this"

Original file line number	Diff line number	Diff line change
`@@ -364,19 +364,13 @@ export class IgxGridCRUDService {`
`364`	`364`	`}`
`365`	`365`	`}`
`366`	`366`
`367`		`- /** Returns whether a particular cell is in edit mode */`
`368`		`- public isCellInEditByPos(rowIndex: number, columnIndex: number): boolean {`
	`367`	`+ /** Returns whether the targeted cell is in edit mode */`
	`368`	`+ public targetInEdit(rowIndex: number, columnIndex: number): boolean {`
`369`	`369`	`if (!this.cell) {`
`370`	`370`	`return false;`
`371`	`371`	`}`
`372`		`- return this.cell.column.index === columnIndex && this.cell.rowIndex === rowIndex;`
`373`		`- }`
`374`		`-`
`375`		`- public isInAddMode(rowIndex: number, columnIndex: number): boolean {`
`376`		`- if (!this.cell) {`
`377`		`- return false;`
`378`		`- }`
`379`		`- return this.cell.column.index === columnIndex && this.cell.rowIndex === rowIndex;`
	`372`	`+ const res = this.cell.column.index === columnIndex && this.cell.rowIndex === rowIndex;`
	`373`	`+ return res;`
`380`	`374`	`}`
`381`	`375`	`}`
`382`	`376`