Reverting more dnd changes.

renemadsen · renemadsen · commit da141dfae4b1 · 2025-11-13T07:14:19.000+01:00
diff --git a/eform-client/cypress/e2e/NavigationMenu.page.ts b/eform-client/cypress/e2e/NavigationMenu.page.ts
@@ -8,31 +8,26 @@ export class NavigationMenuPage {
 
   // Template controls
   public collapseTemplates(index: number) {
-    cy.get('.menuTemplate').eq(index).find('.mat-expansion-indicator').click();
+    cy.get('#menuTemplate').eq(index).find('.mat-expansion-indicator').click();
     cy.wait(2000); // Wait for menu to open/close
   }
 
   // Menu Items
   public getMenuItems() {
-    return cy.get('.menu_item');
+    return cy.get('#menuItems');
   }
 
   public getMenuItemsCount() {
-    return cy.get('.menu_item').its('length');
+    return cy.get('#menuItems').its('length');
   }
 
   // Create operations
   public createMenuItemFromTemplate(templateIndex: number) {
     const dragHandle = cy.get(`#dragHandle0_${templateIndex}`);
     const target = cy.get('mat-card > mat-accordion').first();
-
-    dragHandle
-      .trigger('mousedown', { button: 0, bubbles: true })
-      .trigger('mousemove', { pageX: 10, pageY: 0 });
-
-    target
-      .trigger('mousemove', { position: 'top' })
-      .trigger('mouseup', { button: 0, bubbles: true });
+    
+    dragHandle.trigger('mousedown', { which: 1 });
+    target.trigger('mousemove', 'top').trigger('mouseup', { force: true });
   }
 
   public createCustomLink(data: { securityGroups?: string[]; link: string; translations: string[] }) {
@@ -77,7 +72,7 @@ export class NavigationMenuPage {
 
   // Edit operations
   public openEditMenuItem(index: number) {
-    cy.get('.menu_item').eq(index).find('#editBtn').click();
+    cy.get('#menuItems').eq(index).find('#editBtn').click();
     cy.get('#editItemSaveBtn').should('be.visible');
   }
 
@@ -157,14 +152,14 @@ export class NavigationMenuPage {
 
   // Delete operations
   public deleteElementFromMenuItems(index: number) {
-    cy.get('.menu_item').eq(index).find('#deleteBtn').scrollIntoView().click();
+    cy.get('#menuItems').eq(index).find('#deleteBtn').scrollIntoView().click();
     cy.wait(500);
     cy.get('#menuItemDeleteBtn').should('be.visible').click();
   }
 
   public deleteElementFromDropdown(dropdownIndex: number, itemIndex: number) {
-    cy.get('.menu_item').eq(dropdownIndex)
-      .find('.dropdownBody>*').eq(itemIndex)
+    cy.get('#menuItems').eq(dropdownIndex)
+      .find('#dropdownBody>*').eq(itemIndex)
       .find('#deleteBtn').scrollIntoView().click();
     cy.wait(500);
     cy.get('#menuItemDeleteBtn').should('be.visible').click();
@@ -175,27 +170,22 @@ export class NavigationMenuPage {
 
   // Dropdown operations
   public collapseMenuItemDropdown(index: number) {
-    cy.get('.menu_item').eq(index).find('.mat-expansion-indicator').click();
+    cy.get('#menuItems').eq(index).find('.mat-expansion-indicator').click();
   }
 
   public getDropdownBodyChilds(dropdownIndex: number) {
-    return cy.get('.menu_item').eq(dropdownIndex).find('.dropdownBody>*');
+    return cy.get('#menuItems').eq(dropdownIndex).find('#dropdownBody>*');
   }
 
   public dragTemplateOnElementInCreatedDropdown(templateIndex: number, dropdownIndex: number) {
     this.collapseTemplates(0);
-
+    
     const dragHandle = cy.get(`#dragHandle0_${templateIndex}`);
-    const dropdownBody = cy.get('.dropdownBody').eq(dropdownIndex);//.find('.dropdownBody');
-
-    dragHandle
-      .trigger('mousedown', { button: 0, bubbles: true })
-      .trigger('mousemove', { pageX: 10, pageY: 0 });
-
-    dropdownBody
-      .trigger('mousemove', { position: 'center' })
-      .trigger('mouseup', { button: 0, bubbles: true });
+    const dropdownBody = cy.get('#menuItems').eq(dropdownIndex).find('#dropdownBody');
 
+    dragHandle.trigger('mousedown', { which: 1 });
+    dropdownBody.trigger('mousemove').trigger('mouseup', { force: true });
+    
     cy.wait(500);
     this.collapseTemplates(0);
   }
@@ -205,10 +195,10 @@ export class NavigationMenuPage {
     indexDropdownInMenu: number;
     translations_array: string[];
   }) {
-    cy.get('.menu_item').eq(data.indexDropdownInMenu)
-      .find('.dropdownBody>*').eq(data.indexChildDropdown)
+    cy.get('#menuItems').eq(data.indexDropdownInMenu)
+      .find('#dropdownBody>*').eq(data.indexChildDropdown)
       .find('#editBtn').click();
-
+    
     cy.get('#editItemSaveBtn').should('be.visible');
 
     data.translations_array.forEach((translation, idx) => {
@@ -228,14 +218,9 @@ export class NavigationMenuPage {
     fromHandle.scrollIntoView();
     cy.wait(2000);
 
-    fromHandle
-      .trigger('mousedown', { button: 0, bubbles: true })
-      .trigger('mousemove', { pageX: 10, pageY: 0 });
-
-    toHandle
-      .trigger('mousemove', { position: 'center' })
-      .trigger('mouseup', { button: 0, bubbles: true });
-
+    fromHandle.trigger('mousedown', { which: 1, force: true });
+    toHandle.trigger('mousemove', { force: true });
+    toHandle.trigger('mouseup', { force: true });
     cy.wait(2000);
   }
 
@@ -273,18 +258,14 @@ export class NavigationMenuPage {
   }
 
   public resetMenu() {
-    // cy.wait(1100);
-    // cy.wait(1200);
-    // cy.wait(1400);
+    cy.wait(1100);
+    cy.wait(1200);
+    cy.wait(1400);
     cy.get('#resetBtn').scrollIntoView().click();
     cy.wait(500);
-    cy.intercept('POST', '**/api/navigation-menu/reset').as('resetMenu');
-    cy.intercept('GET', '**/api/navigation-menu').as('getMenuAfterReset');
     cy.get('#deleteWorkerDeleteBtn').should('be.visible').click();
-    cy.wait('@resetMenu', { timeout: 30000 });
-    cy.wait('@getMenuAfterReset', { timeout: 30000 });
     // Note: Tests should intercept POST /api/navigation-menu/reset and wait for it instead
-    // cy.wait(500);
+    cy.wait(500);
   }
 
   // Helper methods - DEPRECATED: Use API intercepts in tests instead
diff --git a/eform-client/cypress/e2e/c/subheader.spec.cy.ts b/eform-client/cypress/e2e/c/subheader.spec.cy.ts
@@ -15,12 +15,8 @@ describe('Subheader test', function () {
     cy.wait('@loadMenu', { timeout: 30000 });
     
     cy.get('#mat-expansion-panel-header-2 > .mat-expansion-indicator').click();
-    cy.get('#dragHandle0_0')
-      .trigger('mousedown', { button: 0, bubbles: true })
-      .trigger('mousemove', { pageX: 10, pageY: 0 });
-    cy.get('mat-card > mat-accordion')
-      .trigger('mousemove', { position: 'top' })
-      .trigger('mouseup', { button: 0, bubbles: true });
+    cy.get('#dragHandle0_0').trigger('mousedown', {which: 1});
+    cy.get('mat-card > mat-accordion').trigger('mousemove', 'top').trigger('mouseup', {force: true});
     cy.get('#mat-expansion-panel-header-2 > .mat-expansion-indicator').click();
     
     cy.intercept('POST', '**/api/navigation-menu').as('saveMenu');
diff --git a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom/navigation-menu-custom.component.html b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom/navigation-menu-custom.component.html
@@ -1,4 +1,4 @@
-<mat-expansion-panel class="mt-2" class="menuTemplate">
+<mat-expansion-panel class="mt-2" id="menuTemplate">
   <mat-expansion-panel-header>
     <mat-panel-title>
       {{ 'Custom' | translate }}
diff --git a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-page/navigation-menu-page.component.scss b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-page/navigation-menu-page.component.scss
@@ -1,19 +0,0 @@
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.dragula-dropdown {
-  min-height: 50px;
-}
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist/visual-editor-checklist.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist/visual-editor-checklist.component.html
@@ -63,9 +63,9 @@
     </mat-card-header>
     <div class="card-body">
       <div
-        cdkDropList
-        [cdkDropListData]="checklist.fields"
-        (cdkDropListDropped)="dropNestedField($event)"
+        dragula="FIELDS"
+        [dragulaModel]="checklist.fields"
+        (dragulaModelChange)="onNestedFieldPositionChanged($event)"
         id="fields_{{ checklistIndex }}"
         class="editor-fields"
       >
@@ -74,7 +74,6 @@
         </div>-->
         <app-visual-editor-field
           *ngFor="let field of checklist.fields; let fieldIndex = index"
-          cdkDrag
           [fieldIndex]="fieldIndex"
           [field]="field"
           [checklistRecursionIndexes]="checklistRecursionIndexes"
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist/visual-editor-checklist.component.ts b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist/visual-editor-checklist.component.ts
@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, inject } from '@angular/core';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import {
   EformVisualEditorFieldsDnDRecursionModel,
   EformVisualEditorFieldModel,
@@ -128,14 +127,6 @@ export class VisualEditorChecklistComponent implements OnInit, OnDestroy {
     });
   }
 
-  dropNestedField(event: CdkDragDrop<EformVisualEditorFieldModel[]>) {
-    if (event.previousIndex !== event.currentIndex) {
-      moveItemInArray(this.checklist.fields, event.previousIndex, event.currentIndex);
-      this.checklist.fields = [...this.checklist.fields]; // Create new reference for change detection
-      this.onNestedFieldPositionChanged(this.checklist.fields);
-    }
-  }
-
   onEditNestedField(fieldIndex: number, field: EformVisualEditorFieldModel) {
     this.editNestedField.emit({
       checklistRecursionIndexes: this.checklistRecursionIndexes,
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field-modal/visual-editor-field-modal.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field-modal/visual-editor-field-modal.component.html
@@ -85,10 +85,9 @@ <h3 mat-dialog-title>{{ (isFieldSelected ? 'Edit field' : 'New field') | transla
               />
             </mat-form-field>
             <formatting-text-editor
-              contenteditable="true"
               [(value)]="translation.description"
               [placeholder]="'Description' | translate"
-              id="fieldDescriptionTranslation_{{ translationIndex }}"
+              id="newFieldDescriptionTranslation_{{ translationIndex }}"
             >
             </formatting-text-editor>
           </div>
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field/visual-editor-field.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field/visual-editor-field.component.html
@@ -13,7 +13,7 @@
         <mat-icon
           class="dragula-handle align-middle"
           style="cursor: pointer"
-          [id]="fieldIsNested ? 'moveNestedFieldBtn'+fieldIndex : 'moveFieldBtn'+fieldIndex"
+          [id]="fieldIsNested ? 'moveNestedFieldBtn' : 'moveFieldBtn'"
         >
           menu
         </mat-icon>
@@ -92,14 +92,13 @@
       *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}"
-      cdkDropList
-      [cdkDropListData]="field.fields"
+      dragula="FIELDS"
+      [dragulaModel]="field.fields"
       id="nestedFields"
-      (cdkDropListDropped)="dropNestedField($event)"
+      (dragulaModelChange)="onFieldPositionChangedOnNestedField($event)"
     >
       <app-visual-editor-field
         *ngFor="let nestedField of field.fields; let i = index"
-        cdkDrag
         [ngClass]="{'collapsed' : field.collapsed}"
         [field]="nestedField"
         [checklistRecursionIndexes]="checklistRecursionIndexes"
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field/visual-editor-field.component.ts b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field/visual-editor-field.component.ts
@@ -1,5 +1,4 @@
 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';
@@ -165,14 +164,6 @@ export class VisualEditorFieldComponent implements OnInit, OnDestroy {
     });
   }
 
-  dropNestedField(event: CdkDragDrop<EformVisualEditorFieldModel[]>) {
-    if (event.previousIndex !== event.currentIndex) {
-      moveItemInArray(this.field.fields, event.previousIndex, event.currentIndex);
-      this.field.fields = [...this.field.fields]; // Create new reference for change detection
-      this.onFieldPositionChangedOnNestedField(this.field.fields);
-    }
-  }
-
   get fieldTranslationAndType() {
     const type = this.fieldTypeTranslation(this.field.fieldType);
     let strForReturn = this.getTranslation;
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.html
@@ -94,6 +94,7 @@
         (addNewNestedField)="showFieldModal($event)"
         (deleteNestedField)="showDeleteFieldModal($event)"
         (editNestedField)="showFieldModal($event)"
+        [ngClass]="{ 'no-drag': !checklist.collapsed }"
         (nestedFieldPositionChanged)="
                   onNestedFieldPositionChanged($event)
                 "
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.scss b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.scss
@@ -6,23 +6,3 @@
     max-height: 0 !important;
   }
 }
-
-.cdk-drop-list {
-  min-height: 20px;
-}
-
-.cdk-drag-preview {
-  box-sizing: border-box;
-  border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
-}
-
-.cdk-drag-animating {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
-
-.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder) {
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
-}
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.ts b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.ts
@@ -45,6 +45,7 @@ import {Store} from '@ngrx/store';
     standalone: false
 })
 export class EformVisualEditorContainerComponent implements OnInit, OnDestroy {
+  private dragulaService = inject(DragulaService);
   private tagsService = inject(EformTagService);
   private visualEditorService = inject(EformVisualEditorService);
   private router = inject(Router);
@@ -56,7 +57,6 @@ export class EformVisualEditorContainerComponent implements OnInit, OnDestroy {
   private reportService = inject(EformDocxReportService);
   private appSettingsStateService = inject(AppSettingsStateService);
   private translationService = inject(TranslationService);
-  private dragulaService = inject(DragulaService);
 
   @ViewChild('tagsModal') tagsModal: EformsTagsComponent;
 
@@ -93,14 +93,27 @@ export class EformVisualEditorContainerComponent implements OnInit, OnDestroy {
           handle.classList.contains('dragula-handle') && handle.id === 'moveBtn'
         );
       },
+      accepts: (el, target) => {
+        return target.id === 'editorChecklists' && el.id.includes('checkList_');
+      },
     });
-
     this.dragulaService.createGroup('FIELDS', {
       moves: (el, container, handle) => {
         return (
+          (handle.id === 'moveFieldBtn' || handle.id === 'moveNestedFieldBtn') &&
           handle.classList.contains('dragula-handle')
         );
       },
+      accepts: (el, target) => {
+        if (el.classList.contains('field-group')) {
+          return (
+            !target.classList.contains('field-group-container')
+            || target.classList.contains('editor-fields')
+          );
+        }
+        return target.classList.contains('editor-fields')
+          || target.classList.contains('nested-fields');
+      },
     });
   }
 
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-header/eform-visual-editor-header.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-header/eform-visual-editor-header.component.html
@@ -45,7 +45,6 @@ <h4>
                 />
               </mat-form-field>
               <formatting-text-editor
-                contenteditable="true"
                 [(value)]="translation.description"
                 [placeholder]="'Description' | translate"
                 id="mainCheckListDescriptionTranslation_{{ translation.languageId }}"

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<mat-expansion-panel class="mt-2" class="menuTemplate">`
	`1`	`+<mat-expansion-panel class="mt-2" id="menuTemplate">`
`2`	`2`	`<mat-expansion-panel-header>`
`3`	`3`	`<mat-panel-title>`
`4`	`4`	`{{ 'Custom' \| translate }}`
Original file line number	Diff line number	Diff line change
`@@ -94,6 +94,7 @@`
`94`	`94`	`(addNewNestedField)="showFieldModal($event)"`
`95`	`95`	`(deleteNestedField)="showDeleteFieldModal($event)"`
`96`	`96`	`(editNestedField)="showFieldModal($event)"`
	`97`	`+ [ngClass]="{ 'no-drag': !checklist.collapsed }"`
`97`	`98`	`(nestedFieldPositionChanged)="`
`98`	`99`	`onNestedFieldPositionChanged($event)`
`99`	`100`	`"`