fix: incorrect drag / drop for steps in aggregation pipeline (#1978)

* Improvement: started to fix aggregation configurations

* remove monaco editor

---------

Co-authored-by: Antoine Hurard <[email protected]>

Author: RenzoPrats

libs/shared/src/lib/components/navbar/navbar.component.html

@@ -135,7 +135,11 @@
             <a
               class="group flex flex-row gap-x-3 text-sm leading-6 items-center font-semibold"
             >
-              <ui-icon variant="grey" [icon]="item.icon"></ui-icon>
+              <ui-icon
+                variant="grey"
+                [icon]="item.icon"
+                [fontFamily]="item.fontFamily"
+              ></ui-icon>
               <div class="pl-2">{{ item.name }}</div>
             </a>
           </li>

libs/shared/src/lib/components/ui/aggregation-builder/pipeline/pipeline.component.html

@@ -1,24 +1,45 @@
-<cdk-accordion cdkDropList (cdkDropListDropped)="drop($event)">
+<cdk-accordion
+  cdkDropList
+  (cdkDropListDropped)="drop($event)"
+  cdkDropListOrientation="vertical"
+>
   <ui-expansion-panel
-    cdkDrag
     *ngFor="let stageForm of pipelineForm.controls; let index = index"
     [index]="index"
     class="bg-white"
+    cdkDrag
+    [cdkDragDisabled]="!dragEnabled"
   >
     <ng-container ngProjectAs="title">
-      {{
-        'components.aggregationBuilder.stages.' + stageForm.value.type
-          | translate
-      }}
-      <ui-icon
-        icon="info_outline"
-        variant="grey"
-        [size]="18"
-        [uiTooltip]="
-          'components.aggregationBuilder.tooltip.' + stageForm.value.type
-            | translate
-        "
-      ></ui-icon>
+      <div class="flex items-center">
+        <p>
+          {{
+            'components.aggregationBuilder.stages.' + stageForm.value.type
+              | translate
+          }}
+        </p>
+        <ui-icon
+          class="ml-0.5"
+          icon="info_outline"
+          variant="grey"
+          [size]="18"
+          [uiTooltip]="
+            'components.aggregationBuilder.tooltip.' + stageForm.value.type
+              | translate
+          "
+        ></ui-icon>
+        <ui-button
+          (mouseenter)="dragEnabled = true"
+          cdkDragHandle
+          (mouseleave)="dragEnabled = false"
+          [isIcon]="true"
+          variant="grey"
+          icon="drag_indicator"
+          class="nav-item-handle"
+          [uiTooltip]="'models.page.tooltip.drag' | translate"
+        >
+        </ui-button>
+      </div>
     </ng-container>
     <ng-container [ngSwitch]="stageForm.value.type">
       <ng-container *ngSwitchCase="stageType.FILTER">
@@ -55,11 +76,12 @@
         <div uiFormFieldDirective>
           <label>{{ 'common.input.rawJson' | translate }}</label>
           <ui-textarea
+            #monacoEditor
+            class="!h-full"
             [formControl]="$any(stageForm).controls.form.controls.raw"
             [minRows]="4"
             [maxRows]="20"
-          >
-          </ui-textarea>
+          ></ui-textarea>
         </div>
       </ng-container>
     </ng-container>
@@ -74,6 +96,7 @@
     </div>
   </ui-expansion-panel>
 </cdk-accordion>
+
 <div class="flex justify-center">
   <ui-button
     icon="add"

libs/shared/src/lib/components/ui/aggregation-builder/pipeline/pipeline.component.scss

@@ -13,3 +13,7 @@
   padding: 16px 8px 16px 24px;
   margin-top: 1em;
 }
+
+.cdk-drag-preview {
+  display: block;
+}

libs/shared/src/lib/components/ui/aggregation-builder/pipeline/pipeline.component.ts

@@ -22,7 +22,6 @@ export class PipelineComponent extends UnsubscribeComponent implements OnInit {
   public stageType = PipelineStage;
   /** Array to hold the list of stages. */
   public stageList: string[] = Object.values(PipelineStage);
-
   /** Input decorator for fields$. */
   @Input() public fields$!: Observable<any[]>;
   /** Input decorator for metaFields$. */
@@ -33,7 +32,8 @@ export class PipelineComponent extends UnsubscribeComponent implements OnInit {
   public initialFields: any[] = [];
   /** Array to hold the fields per stage. */
   public fieldsPerStage: any[] = [];
-
+  /** Enabled drag behavior, needed to set the drag on run time so cdkDragHandle directive works in the table */
+  public dragEnabled = false;
   /** Input decorator for pipelineForm. */
   @Input() pipelineForm!: UntypedFormArray;
 
@@ -110,6 +110,7 @@ export class PipelineComponent extends UnsubscribeComponent implements OnInit {
    * @param event positions to move.
    */
   drop(event: CdkDragDrop<string[]>) {
+    console.log('drop');
     const temp = this.pipelineForm.at(event.previousIndex);
 
     this.pipelineForm.removeAt(event.previousIndex);

libs/shared/src/lib/components/ui/tagbox/tagbox.component.html

@@ -1,15 +1,16 @@
 <div class="flex-1 pb-4">
-  <div class="flex">
+  <div class="flex items-center">
     <label class="block text-sm font-medium leading-6 text-gray-900">{{
       label
     }}</label>
     <ui-icon
-      class="cursor-pointer ml-2"
+      class="cursor-help ml-2"
       icon="info"
       variant="grey"
       [uiTooltip]="
         'components.aggregationBuilder.tooltip.selectedFields' | translate
       "
+      uiTooltipPosition="right"
     ></ui-icon>
   </div>
   <ng-container *ngIf="showInput">

libs/ui/src/lib/expansion-panel/expansion-panel.module.ts

@@ -2,13 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ExpansionPanelComponent } from './expansion-panel.component';
 import { CdkAccordionModule } from '@angular/cdk/accordion';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 /**
  * UI Expansion Panel module
  */
 @NgModule({
   declarations: [ExpansionPanelComponent],
-  imports: [CommonModule, CdkAccordionModule],
+  imports: [CommonModule, CdkAccordionModule, DragDropModule],
   exports: [ExpansionPanelComponent, CdkAccordionModule],
 })
 export class ExpansionPanelModule {}