[Bug] JS Errors on Bricks with many-to-many relation and specific con…

…figuration (#462) * Fix: drag and drop validation * Fix: drag and drop validation
pimcore · Jun 17, 2024 · 2347505 · 2347505
1 parent 8369674
commit 2347505
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 12 deletions.
diff --git a/public/js/pimcore/helpers.js b/public/js/pimcore/helpers.js
@@ -3359,15 +3359,32 @@ pimcore.helpers.treeDragDropValidate = function (node, oldParent, newParent) {
         if (disabledLayoutTypes.includes(newParent.data.editor.type)) {
             return false;
         }
+
+        return this.isComponentAsChildAllowed(newParent, node);
     }
 
-    if (newParent.data.root) {
+    if (newParent.data.root && node.data.type !== 'layout') {
         return false;
     }
 
     return true;
 };
 
+pimcore.helpers.isComponentAsChildAllowed = function (parentNode, childNode) {
+    const parentType = parentNode.data.editor.type;
+    const childType = childNode.data.editor.type;
+    const allowedChildren = pimcore.object.helpers.layout.getRawAllowedTypes();
+
+    if (allowedChildren[parentType] &&
+        allowedChildren[parentType].includes(childType) ||
+        (allowedChildren[parentType].includes('data') && childNode.data.type === 'data')
+    ) {
+        return true
+    }
+
+    return false;
+}
+
 /**
  * Building menu with priority
  * @param items

diff --git a/public/js/pimcore/object/helpers/layout.js b/public/js/pimcore/object/helpers/layout.js
@@ -23,20 +23,24 @@ pimcore.object.helpers.layout = {
      * specify which children a layout can have
      * @param source
     */
-    getAllowedTypes : function (source) {
-        var allowedTypes = {
-            accordion: ["panel","region","tabpanel","text","iframe"],
-            fieldset: ["data","text","iframe"],
-            fieldcontainer: ["data","text","iframe"],
-            panel: ["data","region","tabpanel","button","accordion","fieldset", "fieldcontainer","panel","text","html", "iframe"],
-            region: ["panel","accordion","tabpanel","text","localizedfields","iframe"],
-            tabpanel: ["panel", "region", "accordion","text","localizedfields","iframe", "tabpabel"],
+    getRawAllowedTypes : function () {
+        return {
+            accordion: ["panel", "region", "tabpanel", "text", "iframe"],
+            fieldset: ["data", "text", "iframe"],
+            fieldcontainer: ["data", "text", "iframe"],
+            panel: ["data", "region", "tabpanel", "button", "accordion", "fieldset", "fieldcontainer", "panel", "text", "html", "iframe"],
+            region: ["panel", "accordion", "tabpanel", "text", "localizedfields", "iframe"],
+            tabpanel: ["panel", "region", "accordion", "text", "localizedfields", "iframe", "tabpabel"],
             button: [],
             text: [],
-            root: ["panel","region","tabpanel","accordion","text","iframe", "button","fieldcontainer", "fieldset"],
-            localizedfields: ["panel","tabpanel","accordion","fieldset", "fieldcontainer", "text","region","button","iframe"],
-            block: ["panel","tabpanel","accordion","fieldset", "fieldcontainer", "text","region","button","iframe"]
+            root: ["panel", "region", "tabpanel", "accordion", "text", "iframe", "button", "fieldcontainer", "fieldset"],
+            localizedfields: ["panel", "tabpanel", "accordion", "fieldset", "fieldcontainer", "text", "region", "button", "iframe"],
+            block: ["panel", "tabpanel", "accordion", "fieldset", "fieldcontainer", "text", "region", "button", "iframe"]
         };
+    },
+
+    getAllowedTypes : function (source) {
+        const allowedTypes = this.getRawAllowedTypes();
 
         const prepareClassLayoutContextMenu = new CustomEvent(pimcore.events.prepareClassLayoutContextMenu, {
             detail: {