Fix nested drag-drop in visual editor and add cdkDragHandle to all drag elements

Co-authored-by: renemadsen <[email protected]>

Author: Copilot

eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item/navigation-menu-item.component.html

@@ -1,6 +1,7 @@
 <mat-card class="mb-2 mt-2" id="menuItemTemplate">
   <mat-card-header class="py-2 d-flex align-items-center justify-content-start">
     <mat-icon
+      cdkDragHandle
       style="cursor: all-scroll"
       id="drag_handle{{firstLevelIndex}}_{{secondLevelIndex}}"
       class="md-36 dragula-handle align-middle"

eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-template-item/navigation-menu-template-item.component.html

@@ -1,6 +1,7 @@
 <mat-card class="mb-2 mt-2">
   <mat-card-header class="py-3 d-flex align-items-center justify-content-start">
     <mat-icon
+      cdkDragHandle
       id="dragHandle{{templateIndex}}_{{itemIndex}}"
       class="dragula-handle align-middle"
       style="cursor: all-scroll">

eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist/visual-editor-checklist.component.html

@@ -5,6 +5,7 @@
       <div class="d-flex justify-content-between align-items-center">
         <div style="display: flex; flex-grow: 2; align-items: center;">
           <mat-icon
+            cdkDragHandle
             class="dragula-handle align-middle"
             style="cursor: pointer"
             id="moveBtn"
@@ -63,9 +64,9 @@
     </mat-card-header>
     <div class="card-body">
       <div
-        dragula="FIELDS"
-        [dragulaModel]="checklist.fields"
-        (dragulaModelChange)="onNestedFieldPositionChanged($event)"
+        cdkDropList
+        [cdkDropListData]="checklist.fields"
+        (cdkDropListDropped)="dropNestedField($event)"
         id="fields_{{ checklistIndex }}"
         class="editor-fields"
       >
@@ -74,6 +75,7 @@
         </div>-->
         <app-visual-editor-field
           *ngFor="let field of checklist.fields; let fieldIndex = index"
+          cdkDrag
           [fieldIndex]="fieldIndex"
           [field]="field"
           [checklistRecursionIndexes]="checklistRecursionIndexes"

eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist/visual-editor-checklist.component.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import {
   EformVisualEditorFieldsDnDRecursionModel,
   EformVisualEditorFieldModel,
@@ -127,6 +128,13 @@ export class VisualEditorChecklistComponent implements OnInit, OnDestroy {
     });
   }
 
+  dropNestedField(event: CdkDragDrop<EformVisualEditorFieldModel[]>) {
+    if (event.previousIndex !== event.currentIndex) {
+      moveItemInArray(this.checklist.fields, event.previousIndex, event.currentIndex);
+      this.onNestedFieldPositionChanged(this.checklist.fields);
+    }
+  }
+
   onEditNestedField(fieldIndex: number, field: EformVisualEditorFieldModel) {
     this.editNestedField.emit({
       checklistRecursionIndexes: this.checklistRecursionIndexes,

eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field/visual-editor-field.component.html

@@ -11,6 +11,7 @@
     >
       <div style="display: flex; flex-grow: 6; align-items: center;">
         <mat-icon
+          cdkDragHandle
           class="dragula-handle align-middle"
           style="cursor: pointer"
           [id]="fieldIsNested ? 'moveNestedFieldBtn' : 'moveFieldBtn'"
@@ -92,13 +93,14 @@
       *ngIf="field.fieldType == fieldTypes.FieldGroup"
       class="field-group-container section-collapse pl-3 nested-fields"
       [ngClass]="{'p-1 pt-3' : !field.collapsed, 'collapsed' : field.collapsed}"
-      dragula="FIELDS"
-      [dragulaModel]="field.fields"
+      cdkDropList
+      [cdkDropListData]="field.fields"
       id="nestedFields"
-      (dragulaModelChange)="onFieldPositionChangedOnNestedField($event)"
+      (cdkDropListDropped)="dropNestedField($event)"
     >
       <app-visual-editor-field
         *ngFor="let nestedField of field.fields; let i = index"
+        cdkDrag
         [ngClass]="{'collapsed' : field.collapsed}"
         [field]="nestedField"
         [checklistRecursionIndexes]="checklistRecursionIndexes"

eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field/visual-editor-field.component.ts

@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import {
   EformFieldTypesEnum,
 } from 'src/app/common/const';
@@ -164,6 +165,13 @@ export class VisualEditorFieldComponent implements OnInit, OnDestroy {
     });
   }
 
+  dropNestedField(event: CdkDragDrop<EformVisualEditorFieldModel[]>) {
+    if (event.previousIndex !== event.currentIndex) {
+      moveItemInArray(this.field.fields, event.previousIndex, event.currentIndex);
+      this.onFieldPositionChangedOnNestedField(this.field.fields);
+    }
+  }
+
   get fieldTranslationAndType() {
     const type = this.fieldTypeTranslation(this.field.fieldType);
     let strForReturn = this.getTranslation;