refactor(query-builder): change how drag service is provided

Author: teodosiah

projects/igniteui-angular/src/lib/query-builder/query-builder-drag.service.ts

@@ -1,6 +1,6 @@
 import { filter, fromEvent, sampleTime, Subscription } from 'rxjs';
 import { IgxQueryBuilderTreeComponent } from './query-builder-tree.component';
-import { ElementRef, Inject, Injectable } from '@angular/core';
+import { ElementRef, Injectable } from '@angular/core';
 import { ExpressionGroupItem, ExpressionItem, ExpressionOperandItem, QueryBuilderSelectors } from './query-builder.common';
 import { IgxChipComponent } from '../chips/chip.component';
 
@@ -10,19 +10,12 @@ const Z_INDEX_TO_SET = 10010; //overlay z-index is 10005
 /** @hidden @internal */
 @Injectable()
 export class IgxQueryBuilderDragService {
-    constructor(
-        @Inject(IgxQueryBuilderTreeComponent)
-        private _queryBuilderTreeComponent: IgxQueryBuilderTreeComponent,
-        private _queryBuilderTreeComponentElRef: ElementRef,
-        @Inject(IgxQueryBuilderTreeComponent)
-        private _deleteExpression: (expressionItem: ExpressionItem) => void,
-        @Inject(IgxQueryBuilderTreeComponent)
-        private _focusChipAfterDrag: (index: number) => void,
-    ) { }
-
+    
     /** The ExpressionItem that's actually the drop ghost's content */
     public dropGhostExpression: ExpressionItem;
     public isKeyboardDrag: boolean;
+    private _queryBuilderTreeComponent: IgxQueryBuilderTreeComponent;
+    private _queryBuilderTreeComponentElRef: ElementRef;
     private _sourceExpressionItem: ExpressionItem;
     private _sourceElement: HTMLElement;
     private _targetExpressionItem: ExpressionItem;
@@ -51,6 +44,12 @@ export class IgxQueryBuilderDragService {
         return this._queryBuilderTreeComponentElRef.nativeElement.querySelector(`.${QueryBuilderSelectors.FILTER_TREE}`);
     }
 
+       
+    public register(tree: IgxQueryBuilderTreeComponent, el: ElementRef) {
+        this._queryBuilderTreeComponent = tree;
+        this._queryBuilderTreeComponentElRef = el;
+    }
+
     /** When chip is picked up for dragging
      * 
      * @param sourceDragElement The HTML element of the chip that's been dragged
@@ -179,10 +178,10 @@ export class IgxQueryBuilderDragService {
         const [dropLocationIndex, _] = this.countChipsBeforeDropLocation(this._queryBuilderTreeComponent.rootGroup);
 
         //Delete from old place
-        this._deleteExpression(this._sourceExpressionItem);
+        this._queryBuilderTreeComponent.deleteItem(this._sourceExpressionItem);
         this.dropGhostExpression = null;
 
-        this._focusChipAfterDrag(dropLocationIndex);
+        this._queryBuilderTreeComponent.focusChipAfterDrag(dropLocationIndex);
 
         this.resetDragAndDrop(true);
 

projects/igniteui-angular/src/lib/query-builder/query-builder-tree.component.ts

@@ -99,7 +99,10 @@ const DEFAULT_CHIP_FOCUS_DELAY = 50;
         IgxTooltipTargetDirective,
         NgClass,
         NgTemplateOutlet
-    ]
+    ],
+    providers: [
+        IgxQueryBuilderDragService
+    ],
 })
 export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     /**
@@ -531,11 +534,12 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
     }
 
     constructor(public cdr: ChangeDetectorRef,
+        public dragService: IgxQueryBuilderDragService,
         protected platform: PlatformUtil,
-        protected el: ElementRef,
         private elRef: ElementRef,
         @Inject(LOCALE_ID) protected _localeId: string) {
         this.locale = this.locale || this._localeId;
+        this.dragService.register(this, elRef);
     }
 
     /**
@@ -852,7 +856,10 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         }
     }
 
-    private deleteItem = (expressionItem: ExpressionItem, skipEmit: boolean = false) => {
+    /**
+     * @hidden @internal
+     */
+    public deleteItem = (expressionItem: ExpressionItem, skipEmit: boolean = false) => {
         if (!expressionItem.parent) {
             this.rootGroup = null;
             this.currentGroup = null;
@@ -1035,20 +1042,13 @@ export class IgxQueryBuilderTreeComponent implements AfterViewInit, OnDestroy {
         this.deleteItem(expressionItem);
     }
 
-    private focusChipAfterDrag = (index: number) => {
-        this._lastFocusedChipIndex = index;
-        this.focusEditedExpressionChip();
-    }
-
     /**
      * @hidden @internal
      */
-    public dragService: IgxQueryBuilderDragService = new IgxQueryBuilderDragService(
-        this,
-        this.el,
-        this.deleteItem,
-        this.focusChipAfterDrag);
-
+    public focusChipAfterDrag = (index: number) => {
+        this._lastFocusedChipIndex = index;
+        this.focusEditedExpressionChip();
+    }
     /**
      * @hidden @internal
      */