Fix nested drag and drop by connecting all drop lists mutually

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

Author: Copilot

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

@@ -33,7 +33,7 @@
         class="dragula-template"
         cdkDropList
         [cdkDropListData]="menuTemplate.items"
-        [cdkDropListConnectedTo]="['actualMenuList'].concat(connectedDropdownIds)"
+        [cdkDropListConnectedTo]="allConnectedDropListIds"
         id="mainMenu"
       >
         <app-navigation-menu-template-item
@@ -61,7 +61,7 @@
       cdkDropList
       id="actualMenuList"
       [cdkDropListData]="navigationMenuModel.actualMenu"
-      [cdkDropListConnectedTo]="['mainMenu']"
+      [cdkDropListConnectedTo]="allConnectedDropListIds"
       (cdkDropListDropped)="dropMenuItem($event)"
       class="dragula-item">
       <mat-expansion-panel *ngFor="
@@ -100,7 +100,7 @@
           cdkDropList
           [id]="getDropdownId(firstLevelIndex)"
           [cdkDropListData]="menuItem.children"
-          [cdkDropListConnectedTo]="['mainMenu']"
+          [cdkDropListConnectedTo]="allConnectedDropListIds"
           (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

@@ -73,6 +73,10 @@ export class NavigationMenuPageComponent implements OnInit, OnDestroy {
       .filter(id => id !== null) as string[];
   }
 
+  get allConnectedDropListIds(): string[] {
+    return ['mainMenu', 'actualMenuList', ...this.connectedDropdownIds];
+  }
+
   constructor() {
   }