Add reorder for values as well.

Author: MKirova

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

@@ -17,12 +17,12 @@
         <igx-chips-area #colArea
         (dropped)="onDimDrop($event, colArea, 1)"
         igxDrop
-        (igxDragEnter)="onAreaDragEnter($event, colArea)"
+        (igxDragEnter)="onAreaDragEnter($event, colArea, 1)"
         (igxDragLeave)="onAreaDragLeave($event, colArea)"
         >
             <igx-chip *ngFor="let col of grid.columnDimensions" [draggable]="'true'" [id]="col.fieldName"
              [removable]="true" (remove)="columnRemoved($event)"
-             (dragEnter)="onDimDragEnter($event)"
+             (dragEnter)="onDimDragEnter($event, 1)"
              (dragLeave)="onDimDragLeave($event)"
              (dragDrop)="onDimDrop($event, colArea, 1)"
              >
@@ -33,8 +33,16 @@
         </igx-chips-area>
 
          <!-- Value area -->
-         <igx-chips-area>
-            <igx-chip *ngFor="let value of grid.values" [draggable]="'true'" [id]="value.member" [removable]="true" (remove)="valueRemoved($event)">
+         <igx-chips-area #valueArea
+         (dropped)="onValueDrop($event, valueArea)"
+         igxDrop
+         (igxDragEnter)="onAreaDragEnter($event, valueArea)"
+         (igxDragLeave)="onAreaDragLeave($event, valueArea)"
+         >
+            <igx-chip *ngFor="let value of grid.values" [draggable]="'true'" [id]="value.member" [removable]="true" (remove)="valueRemoved($event)"
+            (dragEnter)="onDimDragEnter($event)"
+            (dragLeave)="onDimDragLeave($event)"
+            (dragDrop)="onValueDrop($event, valueArea)">
                 <igx-icon igxPrefix>functions</igx-icon>
                 {{value.member}}
             </igx-chip>
@@ -54,12 +62,12 @@
                  <igx-chips-area #rowArea 
                  (dropped)="onDimDrop($event, rowArea, 0)"
                  igxDrop
-                 (igxDragEnter)="onAreaDragEnter($event, rowArea)"
+                 (igxDragEnter)="onAreaDragEnter($event, rowArea, 0)"
                  (igxDragLeave)="onAreaDragLeave($event, rowArea)"
                  >
                     <igx-chip *ngFor="let row of grid.rowDimensions" [draggable]="'true'" [id]="row.fieldName"
                      [removable]="true" (remove)="rowRemoved($event)"
-                     (dragEnter)="onDimDragEnter($event)"
+                     (dragEnter)="onDimDragEnter($event, 0)"
                      (dragLeave)="onDimDragLeave($event)"
                      (dragDrop)="onDimDrop($event, rowArea, 0)"
                      >

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

@@ -55,10 +55,10 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         this.grid.pipeTrigger++;
     }
 
-    public onDimDragEnter(event) {
-        const isValue = this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id);
-        if (isValue) {
-            // cannot drag value in dimensions
+    public onDimDragEnter(event, dimension: PivotDimensionType) {
+        const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === event.dragChip.id) : null;
+        if (typeMismatch) {
+            // cannot drag between dimensions and value
             return;
         }
         event.owner.nativeElement.style.borderLeft = '1px solid red';
@@ -67,11 +67,11 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         event.owner.nativeElement.style.borderLeft = '';
     }
 
-    public onAreaDragEnter(event, area) {
+    public onAreaDragEnter(event, area, dimension: PivotDimensionType) {
         const dragId = event.detail.owner.element.nativeElement.parentElement.id;
-        const isValue = this.grid.pivotConfiguration.values.find(x => x.member === dragId);
-        if (isValue) {
-            // cannot drag value in dimensions
+        const typeMismatch = dimension !== undefined ? this.grid.pivotConfiguration.values.find(x => x.member === dragId) : null;
+        if (typeMismatch) {
+            // cannot drag between dimensions and value
             return;
         }
         const lastElem = area.chipsList.last.nativeElement;
@@ -87,6 +87,20 @@ export class IgxPivotHeaderRowComponent extends IgxGridHeaderRowComponent {
         });
     }
 
+    public onValueDrop(event, area) {
+        //values can only be reordered
+        const currentDim = this.grid.pivotConfiguration.values;
+        const dragId = event.dragChip?.id || event.dragData?.chip.id;
+        const chipsArray = area.chipsList.toArray();
+        const chipIndex = chipsArray.indexOf(event.owner) !== -1 ? chipsArray.indexOf(event.owner) : chipsArray.length;
+        const newDim = currentDim.find(x => x.member === dragId);
+        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();
+    }
+
     public onDimDrop(event, area, dimension: PivotDimensionType) {
         const dragId = event.dragChip?.id || event.dragData?.chip.id;
         const currentDim = dimension === PivotDimensionType.Row ? this.grid.pivotConfiguration.rows :