Add cdkDropListEnterPredicate and dynamic drop list connections for nested drag and drop

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

Author: Copilot

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

@@ -82,4 +82,31 @@ describe('NavigationMenuDragDropService', () => {
     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

@@ -1,6 +1,6 @@
 import { Injectable, Inject } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
-import { CdkDropList, CdkDragMove, CdkDragRelease } from '@angular/cdk/drag-drop';
+import { CdkDropList, CdkDragMove, CdkDragRelease, CdkDrag } from '@angular/cdk/drag-drop';
 
 /**
  * Service to handle nested drag and drop operations in navigation menu.
@@ -56,4 +56,14 @@ export class NavigationMenuDragDropService {
   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

@@ -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
@@ -63,7 +64,8 @@
       cdkDropList
       id="actualMenuList"
       [cdkDropListData]="navigationMenuModel.actualMenu"
-      [cdkDropListConnectedTo]="['mainMenu']"
+      [cdkDropListConnectedTo]="connectedLists"
+      [cdkDropListEnterPredicate]="allowDropPredicate"
       (cdkDropListDropped)="dropMenuItem($event)"
       class="dragula-item">
       <mat-expansion-panel *ngFor="
@@ -104,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;"

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, CdkDragMove, CdkDragRelease } 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,
@@ -35,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);
@@ -49,6 +49,7 @@ export class NavigationMenuPageComponent implements OnInit, OnDestroy {
 
   @ViewChild('resetMenuModal')
   resetMenuModal: NavigationMenuResetComponent;
+  @ViewChildren(CdkDropList) dropLists?: QueryList<CdkDropList>;
   securityGroups: CommonDictionaryModel[] = [];
   navigationMenuModel: NavigationMenuModel = new NavigationMenuModel();
 
@@ -75,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() {
   }
 
@@ -83,6 +98,15 @@ 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);
+      });
+    }
+  }
+
   getSecurityGroups() {
     this.securityGroupsSub$ = this.securityGroupsService
       .getSecurityGroupsDictionary()