Migrate from dragula to Angular CDK drag-drop

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

Author: Copilot

eform-client/angular.json

@@ -27,7 +27,6 @@
             ],
             "tsConfig": "src/tsconfig.app.json",
             "allowedCommonJsDependencies": [
-              "dragula",
               "file-saver"
             ],
             "assets": [

eform-client/package.json

@@ -93,14 +93,12 @@
     "date-fns": "4.1.0",
     "date-fns-tz": "3.2.0",
     "dom-to-image": "2.6.0",
-    "dragula": "3.7.3",
     "file-saver": "2.0.5",
     "glob": "11.0.3",
     "hammerjs": "2.0.8",
     "luxon": "^3.7.2",
     "moment": "2.30.1",
     "ng-gallery": "^12.0.0",
-    "ng2-dragula": "^6.0.0",
     "ng2-file-upload": "^9.0.0",
     "ng2-pdf-viewer": "^10.3.4",
     "ngx-auto-unsubscribe": "3.0.1",
@@ -136,7 +134,6 @@
     "@angular/language-service": "20.3.9",
     "@types/chai": "^5.2.2",
     "@types/d3": "^7.4.3",
-    "@types/dragula": "^2.1.34",
     "@types/file-saver": "^2.0.7",
     "@types/jasmine": "^5.1.12",
     "@types/jest": "^30.0.0",

eform-client/src/app/app.module.ts

@@ -5,7 +5,6 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {GalleryModule} from 'ng-gallery';
 import {TranslateModule} from '@ngx-translate/core';
 import {LightboxModule} from 'ng-gallery/lightbox';
-import {DragulaModule} from 'ng2-dragula';
 // TODO fix ngx-mask
 //import {NgxMaskModule} from 'ngx-mask';
 import {ToastrModule} from 'ngx-toastr';
@@ -113,7 +112,6 @@ import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
       preventDuplicates: true,
       positionClass: 'toast-bottom-right',
     }),
-    DragulaModule.forRoot(),
     // TODO fix ngx-mask
     // NgxMaskModule.forRoot(),
     GalleryModule,

eform-client/src/app/common/modules/eform-shared/eform-shared.module.ts

@@ -28,7 +28,6 @@ import {
 } from 'src/app/common/pipes';
 import {EformTableHeadersComponent} from './components';
 import {RouterModule} from '@angular/router';
-import {DragulaModule} from 'ng2-dragula';
 import {MatSortModule} from '@angular/material/sort';
 import {MatPaginatorIntl, MatPaginatorModule} from '@angular/material/paginator';
 import {MatButtonModule} from '@angular/material/button';
@@ -52,7 +51,6 @@ import {MatChip} from "@angular/material/chips";
         NgSelectModule,
         FormsModule,
         RouterModule,
-        DragulaModule,
         MatSortModule,
         MatPaginatorModule,
         MatButtonModule,

eform-client/src/app/modules/advanced/advanced.module.ts

@@ -2,7 +2,6 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {TranslateModule} from '@ngx-translate/core';
-import {DragulaModule} from 'ng2-dragula';
 import {EformSharedModule} from '../../common/modules/eform-shared/eform-shared.module';
 import {NgSelectModule} from '@ng-select/ng-select';
 import {AdvancedRoutingModule} from './advanced.routing';
@@ -47,7 +46,6 @@ import {MatChipsModule} from '@angular/material/chips';
         EformSharedModule,
         NgSelectModule,
         FormsModule,
-        DragulaModule,
         EformImportedModule,
         ReactiveFormsModule,
         EformSharedTagsModule,

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

@@ -31,15 +31,17 @@
       </mat-expansion-panel-header>
       <div
         class="dragula-template"
-        dragula="MENU_ITEMS"
+        cdkDropList
+        [cdkDropListData]="menuTemplate.items"
+        [cdkDropListConnectedTo]="['actualMenuList']"
         id="mainMenu"
-        [(dragulaModel)]="menuTemplate.items"
       >
         <app-navigation-menu-template-item
           *ngFor="
               let menuTemplateItem of menuTemplate.items;
               let itemIndex = index
             "
+          cdkDrag
           [item]="menuTemplateItem"
           [itemIndex]="itemIndex"
           [templateIndex]="templateIndex"
@@ -56,20 +58,24 @@
     <mat-accordion
       multi="true"
       displayMode="flat"
-      dragula="MENU_ITEMS"
-      class="dragula-item"
-      [dragulaModel]="navigationMenuModel.actualMenu"
-      (dragulaModelChange)="menuItemModelChange($event)">
+      cdkDropList
+      id="actualMenuList"
+      [cdkDropListData]="navigationMenuModel.actualMenu"
+      [cdkDropListConnectedTo]="['mainMenu']"
+      (cdkDropListDropped)="dropMenuItem($event)"
+      class="dragula-item">
       <mat-expansion-panel *ngFor="
               let menuItem of navigationMenuModel.actualMenu;
               let firstLevelIndex = index"
               [hideToggle]="menuItem.type !== menuItemTypes.Dropdown"
+              cdkDrag
               class="dragula-item"
               id="menuItems"
       >
         <mat-expansion-panel-header>
           <mat-panel-title>
             <mat-icon
+              cdkDragHandle
               class="dragula-handle align-middle"
               style="cursor: all-scroll">
               menu
@@ -94,16 +100,19 @@
         <div
           id="dropdownBody"
           class="dragula-dropdown"
-          dragula="MENU_ITEMS"
+          cdkDropList
+          [cdkDropListData]="menuItem.children"
+          [cdkDropListConnectedTo]="['mainMenu']"
+          (cdkDropListDropped)="dropMenuItemChild($event, firstLevelIndex)"
           *ngIf="menuItem.type === menuItemTypes.Dropdown"
-          [(dragulaModel)]="menuItem.children"
           style="min-height: 50px;"
         >
           <ng-container
             *ngFor="let menuItemChild of menuItem.children;
                       let secondLevelIndex = index"
           >
             <app-navigation-menu-item
+              cdkDrag
               (itemDelete)="onItemDelete($event, firstLevelIndex, secondLevelIndex)"
               (itemEdit)="onItemEdit($event, firstLevelIndex, secondLevelIndex)"
               [item]="menuItemChild"

eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-page/navigation-menu-page.component.scss

@@ -0,0 +1,19 @@
+.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;
+}

eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-page/navigation-menu-page.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
-import { DragulaService } from 'ng2-dragula';
+import { CdkDragDrop, moveItemInArray, copyArrayItem, transferArrayItem } from '@angular/cdk/drag-drop';
 import {
   NavigationMenuItemIndexedModel,
   NavigationMenuItemModel,
@@ -36,7 +36,6 @@ import {loadAppMenu, selectCurrentUserLocale} from 'src/app/state';
 })
 export class NavigationMenuPageComponent implements OnInit, OnDestroy {
   private authStore = inject(Store);
-  private dragulaService = inject(DragulaService);
   private navigationMenuService = inject(NavigationMenuService);
   private securityGroupsService = inject(SecurityGroupsService);
   private authStateService = inject(AuthStateService);
@@ -65,32 +64,6 @@ export class NavigationMenuPageComponent implements OnInit, OnDestroy {
   }
 
   constructor() {
-    const dragulaService = this.dragulaService;
-
-    dragulaService.createGroup('MENU_ITEMS', {
-      moves: (el, container, handle) => {
-        return handle.classList.contains('dragula-handle');
-      },
-      copy: (el, source) => {
-        return source.id === 'mainMenu' || source.id === 'pluginMenu';
-      },
-      copyItem: (data: NavigationMenuItemModel) => {
-        return { ...data, type: NavigationMenuItemTypeEnum.Link, isInternalLink: true, };
-      },
-      accepts: (el, target) => {
-        // To avoid dragging from right to left container
-        return (
-          (target.classList.contains('dragula-item') ||
-            (target.classList.contains('dragula-dropdown') &&
-              !el.classList.contains('dragula-dropdown'))) &&
-          target.id !== 'mainMenu' &&
-          target.id !== 'pluginMenu'
-        );
-      },
-    });
-    this.dragulaService.drop('MENU_ITEMS').subscribe(({ name }) => {
-      this.dragulaService.find(name).drake.cancel(true);
-    });
   }
 
   ngOnInit(): void {
@@ -133,8 +106,37 @@ export class NavigationMenuPageComponent implements OnInit, OnDestroy {
     ];
   }
 
+  dropMenuItem(event: CdkDragDrop<NavigationMenuItemModel[]>) {
+    if (event.previousContainer === event.container) {
+      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+    } else {
+      // Copy from template menu
+      const item = { 
+        ...event.previousContainer.data[event.previousIndex], 
+        type: NavigationMenuItemTypeEnum.Link, 
+        isInternalLink: true 
+      };
+      this.navigationMenuModel.actualMenu.splice(event.currentIndex, 0, item);
+    }
+    this.navigationMenuModel.actualMenu = [...this.navigationMenuModel.actualMenu];
+  }
+
+  dropMenuItemChild(event: CdkDragDrop<NavigationMenuItemModel[]>, parentIndex: number) {
+    if (event.previousContainer === event.container) {
+      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+    } else {
+      // Copy from template menu
+      const item = { 
+        ...event.previousContainer.data[event.previousIndex], 
+        type: NavigationMenuItemTypeEnum.Link, 
+        isInternalLink: true 
+      };
+      this.navigationMenuModel.actualMenu[parentIndex].children.splice(event.currentIndex, 0, item);
+    }
+    this.navigationMenuModel.actualMenu = [...this.navigationMenuModel.actualMenu];
+  }
+
   ngOnDestroy(): void {
-    this.dragulaService.destroy('MENU_ITEMS');
   }
 
   onItemDelete(
@@ -227,10 +229,6 @@ export class NavigationMenuPageComponent implements OnInit, OnDestroy {
     ).name;
   }
 
-  menuItemModelChange($event: any[]) {
-    this.navigationMenuModel.actualMenu = [...$event];
-  }
-
   getSecurityGroupNames(ids: number[]): string[] {
     return ids.map(id => {
       const group = this.securityGroups.find(g => g.id === id);

eform-client/src/app/modules/advanced/modules/navigation-menu/navigation-menu.module.ts

@@ -13,7 +13,7 @@ import {
 } from './components';
 import { NavigationMenuRouting } from './navigation-menu.routing';
 import { TranslateModule } from '@ngx-translate/core';
-import { DragulaModule } from 'ng2-dragula';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { EformSharedModule } from 'src/app/common/modules/eform-shared/eform-shared.module';
 import {MatCheckboxModule} from '@angular/material/checkbox';
@@ -44,7 +44,7 @@ import {MatInputModule} from '@angular/material/input';
     CommonModule,
     NavigationMenuRouting,
     TranslateModule,
-    DragulaModule,
+    DragDropModule,
     FormsModule,
     EformSharedModule,
     ReactiveFormsModule,

eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.html

@@ -74,16 +74,19 @@
     [ngClass]="{'collapsed' : isItemsCollapsed}"
   >
     <div
-      dragula="CHECK_LISTS"
+      cdkDropList
       id="editorChecklists"
-      (dragulaModelChange)="dragulaPositionChecklistChanged($event)"
-      [dragulaModel]="visualEditorTemplateModel.checkLists"
+      [cdkDropListData]="visualEditorTemplateModel.checkLists"
+      (cdkDropListDropped)="dropChecklist($event)"
+      class="cdk-drop-list"
     >
       <app-visual-editor-checklist
         *ngFor="
                   let checklist of visualEditorTemplateModel.checkLists;
                   let i = index
                 "
+        cdkDrag
+        [cdkDragDisabled]="!checklist.collapsed"
         [checklist]="checklist"
         [checklistRecursionIndexes]="[i]"
         [checklistIndex]="i"
@@ -109,17 +112,18 @@
                 !visualEditorTemplateModel.checkLists ||
                 visualEditorTemplateModel.checkLists.length == 0
               "
-      dragula="FIELDS"
+      cdkDropList
       id="editorFields"
-      class="editor-fields"
-      (dragulaModelChange)="dragulaPositionFieldChanged($event)"
-      [dragulaModel]="visualEditorTemplateModel.fields"
+      class="editor-fields cdk-drop-list"
+      [cdkDropListData]="visualEditorTemplateModel.fields"
+      (cdkDropListDropped)="dropField($event)"
     >
       <app-visual-editor-field
         *ngFor="
                   let field of visualEditorTemplateModel.fields;
                   let i = index
                 "
+        cdkDrag
         [field]="field"
         [fieldIndex]="i"
         id="field_{{ i }}"