Merge pull request #7279 from microting/copilot/fix-nested-drag-and-drop

Fix nested drag and drop in navigation menu dropdowns

Author: renemadsen

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.spec.ts

@@ -0,0 +1,112 @@
+import { TestBed } from '@angular/core/testing';
+import { DOCUMENT } from '@angular/common';
+import { NavigationMenuDragDropService } from './navigation-menu-drag-drop.service';
+import { CdkDragMove, CdkDragRelease } from '@angular/cdk/drag-drop';
+
+describe('NavigationMenuDragDropService', () => {
+  let service: NavigationMenuDragDropService;
+  let mockDocument: any;
+
+  beforeEach(() => {
+    mockDocument = {
+      elementFromPoint: jest.fn()
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        NavigationMenuDragDropService,
+        { provide: DOCUMENT, useValue: mockDocument }
+      ]
+    });
+    service = TestBed.inject(NavigationMenuDragDropService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should register drop lists', () => {
+    const mockDropList: any = { id: 'test-drop-list' };
+    service.register(mockDropList);
+    expect(service.dropLists).toContain(mockDropList);
+  });
+
+  it('should set currentHoverDropListId when dragging over a drop list', () => {
+    const mockElement = document.createElement('div');
+    mockElement.id = 'test-drop-list';
+    mockElement.classList.add('cdk-drop-list');
+    mockDocument.elementFromPoint.mockReturnValue(mockElement);
+
+    const mockEvent: Partial<CdkDragMove<any>> = {
+      pointerPosition: { x: 100, y: 100 }
+    };
+
+    service.dragMoved(mockEvent as CdkDragMove<any>);
+    expect(service.currentHoverDropListId).toBe('test-drop-list');
+  });
+
+  it('should clear currentHoverDropListId when element is not found', () => {
+    mockDocument.elementFromPoint.mockReturnValue(null);
+
+    const mockEvent: Partial<CdkDragMove<any>> = {
+      pointerPosition: { x: 100, y: 100 }
+    };
+
+    service.dragMoved(mockEvent as CdkDragMove<any>);
+    expect(service.currentHoverDropListId).toBeUndefined();
+  });
+
+  it('should clear currentHoverDropListId when drag is released', () => {
+    service.currentHoverDropListId = 'test-id';
+    const mockEvent: Partial<CdkDragRelease> = {};
+
+    service.dragReleased(mockEvent as CdkDragRelease);
+    expect(service.currentHoverDropListId).toBeUndefined();
+  });
+
+  it('should find closest drop list when element itself is not a drop list', () => {
+    const mockParentElement = document.createElement('div');
+    mockParentElement.id = 'parent-drop-list';
+    mockParentElement.classList.add('cdk-drop-list');
+
+    const mockChildElement = document.createElement('span');
+    mockParentElement.appendChild(mockChildElement);
+    mockChildElement.closest = jest.fn().mockReturnValue(mockParentElement);
+
+    mockDocument.elementFromPoint.mockReturnValue(mockChildElement);
+
+    const mockEvent: Partial<CdkDragMove<any>> = {
+      pointerPosition: { x: 100, y: 100 }
+    };
+
+    service.dragMoved(mockEvent as CdkDragMove<any>);
+    expect(service.currentHoverDropListId).toBe('parent-drop-list');
+  });
+
+  it('should allow drop when currentHoverDropListId is null', () => {
+    service.currentHoverDropListId = undefined;
+    const mockDrag: any = {};
+    const mockDrop: any = { id: 'test-drop-list' };
+
+    const result = service.isDropAllowed(mockDrag, mockDrop);
+    expect(result).toBe(true);
+  });
+
+  it('should allow drop when drop list id matches currentHoverDropListId', () => {
+    service.currentHoverDropListId = 'test-drop-list';
+    const mockDrag: any = {};
+    const mockDrop: any = { id: 'test-drop-list' };
+
+    const result = service.isDropAllowed(mockDrag, mockDrop);
+    expect(result).toBe(true);
+  });
+
+  it('should not allow drop when drop list id does not match currentHoverDropListId', () => {
+    service.currentHoverDropListId = 'other-drop-list';
+    const mockDrag: any = {};
+    const mockDrop: any = { id: 'test-drop-list' };
+
+    const result = service.isDropAllowed(mockDrag, mockDrop);
+    expect(result).toBe(false);
+  });
+});

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

@@ -0,0 +1,69 @@
+import { Injectable, Inject } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { CdkDropList, CdkDragMove, CdkDragRelease, CdkDrag } 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;
+  }
+
+  /**
+   * Determine if dropping is allowed based on the current hover state
+   */
+  isDropAllowed(drag: CdkDrag, drop: CdkDropList): boolean {
+    if (this.currentHoverDropListId == null) {
+      return true;
+    }
+    return drop.id === this.currentHoverDropListId;
+  }
+}

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;
@@ -33,7 +33,8 @@
         class="dragula-template"
         cdkDropList
         [cdkDropListData]="menuTemplate.items"
-        [cdkDropListConnectedTo]="['actualMenuList'].concat(connectedDropdownIds)"
+        [cdkDropListConnectedTo]="connectedLists"
+        [cdkDropListEnterPredicate]="allowDropPredicate"
         id="mainMenu"
       >
         <app-navigation-menu-template-item
@@ -42,6 +43,8 @@
               let itemIndex = index
             "
           cdkDrag
+          (cdkDragMoved)="onDragMoved($event)"
+          (cdkDragReleased)="onDragReleased($event)"
           [item]="menuTemplateItem"
           [itemIndex]="itemIndex"
           [templateIndex]="templateIndex"
@@ -61,14 +64,17 @@
       cdkDropList
       id="actualMenuList"
       [cdkDropListData]="navigationMenuModel.actualMenu"
-      [cdkDropListConnectedTo]="['mainMenu']"
+      [cdkDropListConnectedTo]="connectedLists"
+      [cdkDropListEnterPredicate]="allowDropPredicate"
       (cdkDropListDropped)="dropMenuItem($event)"
       class="dragula-item">
       <mat-expansion-panel *ngFor="
               let menuItem of navigationMenuModel.actualMenu;
               let firstLevelIndex = index"
               [hideToggle]="menuItem.type !== menuItemTypes.Dropdown"
               cdkDrag
+              (cdkDragMoved)="onDragMoved($event)"
+              (cdkDragReleased)="onDragReleased($event)"
               class="menu_item"
       >
         <mat-expansion-panel-header>
@@ -100,7 +106,8 @@
           cdkDropList
           [id]="getDropdownId(firstLevelIndex)"
           [cdkDropListData]="menuItem.children"
-          [cdkDropListConnectedTo]="['mainMenu']"
+          [cdkDropListConnectedTo]="connectedLists"
+          [cdkDropListEnterPredicate]="allowDropPredicate"
           (cdkDropListDropped)="dropMenuItemChild($event, firstLevelIndex)"
           *ngIf="menuItem.type === menuItemTypes.Dropdown"
           style="min-height: 50px;"
@@ -111,6 +118,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 { Component, OnDestroy, OnInit, ViewChild, inject, AfterViewInit, ViewChildren, QueryList } from '@angular/core';
+import { CdkDragDrop, moveItemInArray, copyArrayItem, transferArrayItem, CdkDragMove, CdkDragRelease, CdkDropList, CdkDrag } 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';
@@ -34,7 +35,7 @@ import {loadAppMenu, selectCurrentUserLocale} from 'src/app/state';
     styleUrls: ['./navigation-menu-page.component.scss'],
     standalone: false
 })
-export class NavigationMenuPageComponent implements OnInit, OnDestroy {
+export class NavigationMenuPageComponent implements OnInit, OnDestroy, AfterViewInit {
   private authStore = inject(Store);
   private navigationMenuService = inject(NavigationMenuService);
   private securityGroupsService = inject(SecurityGroupsService);
@@ -43,10 +44,12 @@ export class NavigationMenuPageComponent implements OnInit, OnDestroy {
   private dialog = inject(MatDialog);
   private overlay = inject(Overlay);
   private store = inject(Store);
+  private dragDropService = inject(NavigationMenuDragDropService);
 
 
   @ViewChild('resetMenuModal')
   resetMenuModal: NavigationMenuResetComponent;
+  @ViewChildren(CdkDropList) dropLists?: QueryList<CdkDropList>;
   securityGroups: CommonDictionaryModel[] = [];
   navigationMenuModel: NavigationMenuModel = new NavigationMenuModel();
 
@@ -73,6 +76,20 @@ export class NavigationMenuPageComponent implements OnInit, OnDestroy {
       .filter(id => id !== null) as string[];
   }
 
+  /**
+   * Predicate function to determine if dropping is allowed
+   */
+  allowDropPredicate = (drag: CdkDrag, drop: CdkDropList): boolean => {
+    return this.dragDropService.isDropAllowed(drag, drop);
+  };
+
+  /**
+   * Get all connected drop lists from the service
+   */
+  get connectedLists(): CdkDropList[] {
+    return this.dragDropService.dropLists;
+  }
+
   constructor() {
   }
 
@@ -81,6 +98,24 @@ export class NavigationMenuPageComponent implements OnInit, OnDestroy {
     this.getSecurityGroups();
   }
 
+  ngAfterViewInit(): void {
+    // Register all drop lists with the service after view initialization
+    if (this.dropLists) {
+      this.dropLists.forEach(dropList => {
+        this.dragDropService.register(dropList);
+      });
+      
+      // Subscribe to changes in drop lists (for dynamically added dropdowns)
+      this.dropLists.changes.subscribe(() => {
+        // Clear and re-register all drop lists when the list changes
+        this.dragDropService.dropLists = [];
+        this.dropLists?.forEach(dropList => {
+          this.dragDropService.register(dropList);
+        });
+      });
+    }
+  }
+
   getSecurityGroups() {
     this.securityGroupsSub$ = this.securityGroupsService
       .getSecurityGroupsDictionary()
@@ -246,4 +281,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 {}