feat(igxPivot): Add apis for insert/move/remove/toggle values in pivot.

Author: MKirova

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

@@ -640,6 +640,8 @@ export interface PivotGridType extends GridType {
     moveDimension(dimension: IPivotDimension, targetCollectionType: PivotDimensionType, index? : number);
     getDimensionsByType(dimension: PivotDimensionType);
     toggleDimension(dimension: IPivotDimension);
+    toggleValue(value: IPivotValue);
+    moveValue(value: IPivotValue, index?: number);
     dimensionsChange: EventEmitter<IDimensionsChange>;
     valuesChange: EventEmitter<IValuesChange>;
     pivotKeys: IPivotKeys;

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -1131,20 +1131,85 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         this.dimensionsChange.emit({ dimensions: collection, dimensionCollectionType: dimType });
     }
 
+    /**
+     * Inserts value at specified index or at the end.
+     *
+     * @example
+     * ```typescript
+     * this.grid.insertValueAt(value, 1);
+     * ```
+     * @param value The value definition that will be added.
+     * @param index The index in the collection at which to add.
+     * This parameter is optional. If not set it will add it to the end of the collection.
+     */
     public insertValueAt(value: IPivotValue, index?: number) {
-
+        if (!this.pivotConfiguration.values) {
+            this.pivotConfiguration.values = [];
+        }
+        const values = this.pivotConfiguration.values;
+        if (index !== undefined) {
+            values.splice(index, 0, value);
+        } else {
+            values.push(value);
+        }
+        this.setupColumns();
+        this.pipeTrigger++;
+        this.valuesChange.emit({ values });
     }
 
-    public moveValue(dimension: IPivotValue, index?: number) {
-
+    /**
+     * Move value from its currently at specified index or at the end.
+     *
+     * @example
+     * ```typescript
+     * this.grid.moveValue(value, 1);
+     * ```
+     * @param value The value that will be moved.
+     * @param index The index in the collection at which to add.
+     * This parameter is optional. If not set it will add it to the end of the collection.
+     */
+    public moveValue(value: IPivotValue, index?: number) {
+        // remove from old index
+        this.removeValue(value);
+        // add to new
+        this.insertValueAt(value, index);
     }
 
+    /**
+     * Removes value from collection.
+     * @remarks
+     * This is different than toggleValue that enabled/disables the value.
+     * This completely removes the specified value from the collection.
+     * @example
+     * ```typescript
+     * this.grid.removeValue(dimension);
+     * ```
+     * @param value The value to be removed.
+     */
     public removeValue(value: IPivotValue,) {
-
+        const values = this.pivotConfiguration.values;
+        const currentIndex = values.indexOf(value);
+        values.splice(currentIndex, 1);
+        this.setupColumns();
+        this.pipeTrigger++;
+        this.valuesChange.emit({ values });
     }
 
+    /**
+     * Toggles the value's enabled state on or off.
+     * @remarks
+     * The value remains in its current collection. This just changes its enabled state.
+     * @example
+     * ```typescript
+     * this.grid.toggleValue(value);
+     * ```
+     * @param value The value to be toggled.
+     */
     public toggleValue(value: IPivotValue) {
-
+        value.enabled = !value.enabled;
+        this.setupColumns();
+        this.pipeTrigger++;
+        this.valuesChange.emit({ values: this.pivotConfiguration.values });
     }
 
     public getDimensionsByType(dimension: PivotDimensionType) {

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts

@@ -270,10 +270,7 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     */
     public valueRemoved(event: IBaseChipEventArgs) {
         const value = this.grid.pivotConfiguration.values.find(x => x.member === event.owner.id || x.displayName === event.owner.id);
-        value.enabled = false;
-        this.grid.setupColumns();
-        this.grid.pipeTrigger++;
-        this.grid.valuesChange.emit({ values: this.grid.pivotConfiguration.values });
+        this.grid.toggleValue(value);
     }
 
     /**
@@ -429,18 +426,15 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent implem
     */
     public onValueDrop(event, area) {
         //values can only be reordered
-        const currentDim = this.grid.pivotConfiguration.values;
+        const values = this.grid.pivotConfiguration.values;
         const dragId = event.dragChip?.id || event.dragData?.chip.id;
         const chipsArray = area.chipsList.toArray();
         let chipIndex = chipsArray.indexOf(event.owner) !== -1 ? chipsArray.indexOf(event.owner) : chipsArray.length;
         chipIndex = this._dropPos === DropPosition.AfterDropTarget ? chipIndex + 1 : chipIndex;
-        const newDim = currentDim.find(x => x.member === dragId || x.displayName === dragId);
-        if (newDim) {
+        const value = values.find(x => x.member === dragId || x.displayName === dragId);
+        if (value) {
             const dragChipIndex = chipsArray.indexOf(event.dragChip || event.dragData.chip);
-            currentDim.splice(dragChipIndex, 1);
-            currentDim.splice(dragChipIndex >= chipIndex ? chipIndex : chipIndex - 1, 0, newDim);
-            this.grid.setupColumns();
-            this.grid.valuesChange.emit({ values: this.grid.pivotConfiguration.values });
+            this.grid.moveValue(value, dragChipIndex >= chipIndex ? chipIndex : chipIndex - 1);
         }
     }