Merge pull request #8295 from IgniteUI/mkirova/refactor-grid-actions

chore(igxGridActions): Refactor and change expected Input to be the g…

Author: ChronosSF

projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts

@@ -4,16 +4,19 @@ import {
     Input,
     ViewChildren,
     QueryList,
-    DoCheck,
-    KeyValueDiffers,
     EventEmitter,
-    Output
+    Output,
+    IterableDiffers,
+    IterableDiffer,
+    DoCheck
 } from '@angular/core';
 import { IgxColumnComponent } from '../columns/column.component';
 import { ColumnDisplayOrder } from '../common/enums';
 import { IgxColumnActionsBaseDirective } from './column-actions-base.directive';
 import { IgxCheckboxComponent, IChangeCheckboxEventArgs } from '../../checkbox/checkbox.component';
 import { IColumnToggledEventArgs } from '../common/events';
+import { IgxGridBaseDirective } from '../grid-base.directive';
+import { DeprecateProperty } from '../../core/deprecateDecorators';
 
 let NEXT_ID = 0;
 /**
@@ -27,13 +30,11 @@ let NEXT_ID = 0;
     templateUrl: './column-actions.component.html'
 })
 export class IgxColumnActionsComponent implements DoCheck {
+    protected _differ: IterableDiffer<any> | null = null;
 
-
-    /* todo
-        <!-- (onColumnVisibilityChanged)="onVisibilityChanged($event)" -->
-    */
-
-    private _columnDifferMap = new Map<IgxColumnComponent, any>();
+    constructor (private differs: IterableDiffers) {
+        this._differ = this.differs.find([]).create(this.trackChanges);
+    }
 
     /**
      * @hidden @internal
@@ -45,36 +46,23 @@ export class IgxColumnActionsComponent implements DoCheck {
      */
     public filteredColumns: IgxColumnComponent[] = [];
 
-    /**
-     * @hidden @internal
-     */
-    private _columns: IgxColumnComponent[] = [];
     /**
      * Gets the grid columns to provide an action for.
+     * @deprecated
      * @example
      * ```typescript
      * let gridColumns = this.columnActions.columns;
      * ```
      */
+    @DeprecateProperty(`Deprecated. Use 'grid' input instead.`)
     @Input()
     public get columns() {
-        return this._columns;
+        return this.grid?.columns;
     }
-    /**
-     * Sets the grid columns to provide an action for.
-     * @example
-     * ```html
-     * <igx-column-actions [columns]="grid.columns"></igx-column-actions>
-     * ```
-     */
-    public set columns(value: IgxColumnComponent[]) {
-        if (value) {
-            this._columns = value;
-            this._columnDifferMap.clear();
-            this._columns.forEach(col => {
-                this._columnDifferMap.set(col, this._differs.find(col).create());
-            });
-            this._pipeTrigger++;
+
+    public set columns(value) {
+        if (value && value.length > 0) {
+            this.grid = value[0].grid;
         }
     }
 
@@ -328,11 +316,14 @@ export class IgxColumnActionsComponent implements DoCheck {
     }
 
     /**
-     * @hidden @internal
+     * Gets/Sets the grid to provide column actions for.
+     * @example
+     * ```typescript
+     * let grid = this.columnActions.grid;
+     * ```
      */
-    public get grid() {
-        return this.actionableColumns[0]?.grid ?? null;
-    }
+    @Input()
+    public grid: IgxGridBaseDirective;
 
     /**
      * @hidden @internal
@@ -365,19 +356,24 @@ export class IgxColumnActionsComponent implements DoCheck {
     }
 
     /**
-     * @hidden
+     * @hidden @internal
      */
-    ngDoCheck() {
-        for (const [col, colDiffer] of this._columnDifferMap) {
-            const colDiffers = colDiffer.diff(col);
-            if (colDiffers) {
+    public trackChanges = (index, col) => {
+        return col.field + '_' + this.actionsDirective.actionEnabledColumnsFilter(col, index, []);
+    }
+
+    /**
+     * @hidden @internal
+     */
+    public ngDoCheck() {
+        if (this._differ) {
+            const changes = this._differ.diff(this.columns);
+            if (changes) {
                 this._pipeTrigger++;
             }
         }
     }
 
-    constructor(private _differs: KeyValueDiffers) { }
-
     /**
      * Unchecks all columns and performs the appropriate action.
      * @example

projects/igniteui-angular/src/lib/grids/common/pipes.ts

@@ -262,6 +262,9 @@ export class IgxColumnActionEnabledPipe implements PipeTransform {
         actionFilter: (value: IgxColumnComponent, index: number, array: IgxColumnComponent[]) => boolean,
         pipeTrigger: number
     ): IgxColumnComponent[] {
+        if (!collection) {
+            return collection;
+        }
         let copy = collection.slice(0);
         if (copy.length && copy[0].grid.hasColumnLayouts) {
             copy = copy.filter(c => c.columnLayout);
@@ -284,6 +287,9 @@ export class IgxFilterActionColumnsPipe implements PipeTransform {
     constructor(@Inject(IgxColumnActionsComponent) protected columnActions: IgxColumnActionsComponent) { }
 
     public transform(collection: IgxColumnComponent[], filterCriteria: string, pipeTrigger: number): IgxColumnComponent[] {
+        if (!collection) {
+            return collection;
+        }
         let copy = collection.slice(0);
         if (filterCriteria && filterCriteria.length > 0) {
             const filterFunc = (c) => {

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

@@ -34,7 +34,7 @@
         <igx-drop-down #columnHidingDropdown (onClosing)="onClosingColumnHiding($event)">
             <igx-column-actions
                 igxColumnHiding
-                [columns]="grid.columns"
+                [grid]="grid"
                 [title]="grid.columnHidingTitle"
                 [filterColumnsPrompt]="filterColumnsPrompt"
                 [columnsAreaMaxHeight]="defaultDropDownsMaxHeight">
@@ -56,7 +56,7 @@
         <igx-drop-down #columnPinningDropdown (onClosing)="onClosingColumnPinning($event)">
             <igx-column-actions
                 igxColumnPinning
-                [columns]="grid.columns"
+                [grid]="grid"
                 [title]="grid.columnPinningTitle"
                 [filterColumnsPrompt]="filterColumnsPrompt"
                 [columnsAreaMaxHeight]="defaultDropDownsMaxHeight">

projects/igniteui-angular/src/lib/test-utils/grid-base-components.spec.ts

@@ -120,7 +120,7 @@ export class GridWithToolbarComponent extends GridWithSizeComponent {
 
 @Component({
     template: `<div>
-    <igx-column-actions igxColumnHiding [columns]="grid.columns" *ngIf="showInline" [hideFilter]="hideFilter"></igx-column-actions>
+    <igx-column-actions igxColumnHiding [grid]="grid" *ngIf="showInline" [hideFilter]="hideFilter"></igx-column-actions>
     ${ GridTemplateStrings.declareGrid(` #grid [height]="height" [width]="width"`, ``, ColumnDefinitions.productHidable) }
     </div>`
 })
@@ -150,7 +150,7 @@ export class ColumnHidingTestComponent extends GridWithSizeComponent implements
 
 @Component({
     template: `<div>
-    <igx-column-actions igxColumnHiding [columns]="grid.columns" *ngIf="showInline"></igx-column-actions>
+    <igx-column-actions igxColumnHiding [grid]="grid" *ngIf="showInline"></igx-column-actions>
     ${ GridTemplateStrings.declareGrid(` #grid [height]="height" [width]="width"`, ``, ColumnDefinitions.contactInfoGroupableColumns) }
     </div>`
 })
@@ -162,7 +162,7 @@ export class ColumnGroupsHidingTestComponent extends ColumnHidingTestComponent {
 
 @Component({
     template: `<div>
-        <igx-column-actions igxColumnPinning [columns]="grid.columns" *ngIf="showInline" [hideFilter]="hideFilter"></igx-column-actions>
+        <igx-column-actions igxColumnPinning [grid]="grid" *ngIf="showInline" [hideFilter]="hideFilter"></igx-column-actions>
         ${GridTemplateStrings.declareGrid(`#grid [height]="height" [width]="width"`, ``, ColumnDefinitions.productFilterable)}
     </div>`
 })
@@ -210,7 +210,7 @@ export class ColumnPinningWithTemplateTestComponent extends ColumnPinningTestCom
 
 @Component({
     template: `<div>
-    <igx-column-actions igxColumnPinning [columns]="grid.columns" *ngIf="showInline"></igx-column-actions>
+    <igx-column-actions igxColumnPinning [grid]="grid" *ngIf="showInline"></igx-column-actions>
     ${ GridTemplateStrings.declareGrid(` #grid [height]="height" `, ``, ColumnDefinitions.contactInfoGroupableColumns) }
     </div>`
 })

src/app/grid-column-actions/grid-column-actions.sample.html

@@ -1,5 +1,5 @@
 <div class="wrapper">
-    <igx-grid #grid1 [data]="data" [width]="'800px'" [height]="'500px'">
+    <igx-grid #grid1 [data]="data" [width]="'800px'" [height]="'500px'" [showToolbar]="true"  [columnHiding] = "true">
         <igx-column-group header="General Information" title="General Company Information" >
             <igx-column [field]='"Missing"' [groupable]='true'></igx-column>
         </igx-column-group>
@@ -14,7 +14,7 @@ <h4>Hiding Action</h4>
             <div class="button-sample">
                 <igx-column-actions
                 igxColumnHiding
-                [columns]="grid1.columns"
+                [grid]="grid1"
                 [title]="grid1.columnHidingTitle"
                 (onColumnToggled)="columnToggled($event)">
                 </igx-column-actions>
@@ -26,7 +26,7 @@ <h4>Pinning Action</h4>
                 <div class="button-sample">
                     <igx-column-actions
                     igxColumnPinning
-                    [columns]="grid1.columns">
+                    [grid]="grid1">
                     </igx-column-actions>
                 </div>
         </article>
@@ -37,7 +37,7 @@ <h4>Custom Group Action</h4>
                 <igx-column-actions
                 appColumnGrouping
                 [indentation]='100'
-                [columns]="grid1.columns"
+                [grid]="grid1"
                 >
                 </igx-column-actions>
             </div>