Add DragDropService and update navigation menu to support nested drag and drop

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

Author: Copilot

eform-client/src/app/common/services/navigation-menu/index.ts

@@ -1 +1,2 @@
 export * from './navigation-menu.service';
+export * from './navigation-menu-drag-drop.service';

eform-client/src/app/common/services/navigation-menu/navigation-menu-drag-drop.service.ts

@@ -0,0 +1,59 @@
+import { Injectable, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { CdkDropList, CdkDragMove, CdkDragRelease } from '@angular/cdk/drag-drop';
+
+/**
+ * Service to handle nested drag and drop operations in navigation menu.
+ * Based on: https://stackoverflow.com/a/67337935/2144807
+ * 
+ * This service dynamically tracks which drop list is currently being hovered
+ * during drag operations, enabling nested drag and drop functionality that
+ * cdkDropListGroup doesn't support out of the box.
+ */
+@Injectable()
+export class NavigationMenuDragDropService {
+  dropLists: CdkDropList[] = [];
+  currentHoverDropListId?: string;
+
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
+  /**
+   * Register a drop list with the service
+   */
+  public register(dropList: CdkDropList) {
+    this.dropLists.push(dropList);
+  }
+
+  /**
+   * Track which drop list is currently under the pointer during drag
+   */
+  dragMoved(event: CdkDragMove<any>) {
+    const elementFromPoint = this.document.elementFromPoint(
+      event.pointerPosition.x, 
+      event.pointerPosition.y
+    );
+    
+    if (!elementFromPoint) {
+      this.currentHoverDropListId = undefined;
+      return;
+    }
+    
+    const dropList = elementFromPoint.classList.contains('cdk-drop-list')
+      ? elementFromPoint
+      : elementFromPoint.closest('.cdk-drop-list');
+    
+    if (!dropList) {
+      this.currentHoverDropListId = undefined;
+      return;
+    }
+    
+    this.currentHoverDropListId = dropList.id;
+  }
+
+  /**
+   * Clear hover state when drag is released
+   */
+  dragReleased(event: CdkDragRelease) {
+    this.currentHoverDropListId = undefined;
+  }
+}

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

@@ -19,7 +19,7 @@
   </div>
 </eform-new-subheader>
 
-<div class="d-flex flex-row align-items-start">
+<div class="d-flex flex-row align-items-start" cdkDropListGroup>
   <mat-accordion multi="true" displayMode="flat" class="mr-2">
     <mat-expansion-panel *ngFor="
           let menuTemplate of navigationMenuModel.menuTemplates;
@@ -42,6 +42,8 @@
               let itemIndex = index
             "
           cdkDrag
+          (cdkDragMoved)="onDragMoved($event)"
+          (cdkDragReleased)="onDragReleased($event)"
           [item]="menuTemplateItem"
           [itemIndex]="itemIndex"
           [templateIndex]="templateIndex"
@@ -69,6 +71,8 @@
               let firstLevelIndex = index"
               [hideToggle]="menuItem.type !== menuItemTypes.Dropdown"
               cdkDrag
+              (cdkDragMoved)="onDragMoved($event)"
+              (cdkDragReleased)="onDragReleased($event)"
               class="menu_item"
       >
         <mat-expansion-panel-header>
@@ -111,6 +115,8 @@
           >
             <app-navigation-menu-item
               cdkDrag
+              (cdkDragMoved)="onDragMoved($event)"
+              (cdkDragReleased)="onDragReleased($event)"
               (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.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
-import { CdkDragDrop, moveItemInArray, copyArrayItem, transferArrayItem } from '@angular/cdk/drag-drop';
+import { CdkDragDrop, moveItemInArray, copyArrayItem, transferArrayItem, CdkDragMove, CdkDragRelease } from '@angular/cdk/drag-drop';
 import {
   NavigationMenuItemIndexedModel,
   NavigationMenuItemModel,
@@ -10,6 +10,7 @@ import {
 import {
   NavigationMenuService,
   SecurityGroupsService,
+  NavigationMenuDragDropService,
 } from 'src/app/common/services';
 import {Subscription, take} from 'rxjs';
 import { AutoUnsubscribe } from 'ngx-auto-unsubscribe';
@@ -43,6 +44,7 @@ export class NavigationMenuPageComponent implements OnInit, OnDestroy {
   private dialog = inject(MatDialog);
   private overlay = inject(Overlay);
   private store = inject(Store);
+  private dragDropService = inject(NavigationMenuDragDropService);
 
 
   @ViewChild('resetMenuModal')
@@ -246,4 +248,18 @@ export class NavigationMenuPageComponent implements OnInit, OnDestroy {
     }).filter(name => name !== '');
   }
 
+  /**
+   * Handle drag move events to track hover state
+   */
+  onDragMoved(event: CdkDragMove<any>) {
+    this.dragDropService.dragMoved(event);
+  }
+
+  /**
+   * Handle drag release events to clear hover state
+   */
+  onDragReleased(event: CdkDragRelease) {
+    this.dragDropService.dragReleased(event);
+  }
+
 }

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

@@ -27,6 +27,7 @@ import {MatDialogModule} from '@angular/material/dialog';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MtxSelectModule} from '@ng-matero/extensions/select';
 import {MatInputModule} from '@angular/material/input';
+import { NavigationMenuDragDropService } from 'src/app/common/services';
 
 @NgModule({
   declarations: [
@@ -60,5 +61,8 @@ import {MatInputModule} from '@angular/material/input';
     MtxSelectModule,
     MatInputModule,
   ],
+  providers: [
+    NavigationMenuDragDropService
+  ],
 })
 export class NavigationMenuModule {}