feat(filtering): add dragging & legend #5496

Author: tachojelev

Diff for: projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

@@ -1,4 +1,5 @@
 <article class="igx-excel-filter__secondary"
+         igxDrag [renderGhost]="false" [dragTolerance]="0" (dragMove)="dragMove($event)"
          (keydown)="onKeyDown($event)"
          [ngClass]="{
              'igx-excel-filter__secondary--cosy': grid.displayDensity === 'cosy',
@@ -8,6 +9,17 @@
         <h4 class="igx-typography__h6">
             Adv. Filtering
         </h4>
+        <div style="display: flex; margin-left: auto">
+            <div style="display: flex; margin-right: 25px">
+                <div style="width: 24px; height: 24px; background: lightblue; margin-right: 8px; border-radius: 4px;"></div>
+                and
+            </div>
+            <div style="display: flex; margin-right: 25px">
+                <div style="width: 24px; height: 24px; background: lightcoral; margin-right: 8px; border-radius: 4px;"></div>
+                or
+            </div>
+        </div>
+        <igx-icon igxDragHandle fontSet="material" style="cursor: move; user-select: none;">control_camera</igx-icon>        
     </header>
 
     <article #expressionsContainer class="igx-excel-filter__secondary-main" style="padding: 10px;">

Diff for: projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts

@@ -5,7 +5,7 @@ import { VerticalAlignment, HorizontalAlignment, Point } from '../../../services
 import { ConnectedPositioningStrategy } from '../../../services/overlay/position/connected-positioning-strategy';
 import { IgxFilteringService } from '../grid-filtering.service';
 import { IgxOverlayService } from '../../../services/overlay/overlay';
-import { IgxToggleDirective, CloseScrollStrategy, IButtonGroupEventArgs } from 'igniteui-angular';
+import { IgxToggleDirective, CloseScrollStrategy, IButtonGroupEventArgs, IDragBaseEventArgs } from 'igniteui-angular';
 import { IgxGridBaseComponent, IgxColumnComponent } from '../../grid';
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree';
 import { FilteringLogic, IFilteringExpression } from '../../../data-operations/filtering-expression.interface';
@@ -147,6 +147,27 @@ export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDes
         return this.filteringService.grid;
     }
 
+    public dragMove(dragArgs: IDragBaseEventArgs) {
+        const gridRect = this.grid.nativeElement.getBoundingClientRect();
+        const dialogRect = dragArgs.owner.element.nativeElement.getBoundingClientRect();
+
+        if (!(dialogRect.left >= gridRect.left && dialogRect.right <= gridRect.right &&
+              dialogRect.top >= gridRect.top && dialogRect.bottom <= gridRect.bottom)) {
+            // dragArgs.cancel = true; // waiting for implementation
+
+            const dragDialog = dragArgs.owner;
+            let newDialogX = dialogRect.left;
+            let newDialogY = dialogRect.top;
+
+            newDialogX = (dialogRect.left < gridRect.left) ? gridRect.left : newDialogX;
+            newDialogX = (dialogRect.right > gridRect.right) ? gridRect.right - dialogRect.width : newDialogX;
+            newDialogY = (dialogRect.top < gridRect.top) ? gridRect.top : newDialogY;
+            newDialogY = (dialogRect.bottom > gridRect.bottom) ? gridRect.bottom - dialogRect.height : newDialogY;
+
+            dragDialog.setLocation({pageX: newDialogX, pageY: newDialogY});
+        }
+    }
+
     public addCondition(parent: ExpressionGroupItem, afterExpression?: ExpressionItem) {
         this.cancelOperandAdd();