AC-12692: Widget category tree is not rendered correctly

Author: Atul-glo35265

app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/widget/tree.phtml

@@ -8,10 +8,11 @@
 ?>
 
 <?php $_divId = 'tree' . $block->getId() ?>
-<div id="<?= $block->escapeHtmlAttr($_divId) ?>" class="tree"></div>
+<div id="<?= $escaper->escapeHtmlAttr($_divId) ?>" class="tree"></div>
 <?php
 $isUseMassAction = $block->getUseMassaction() ? 1 : 0;
 $isAnchorOnly = $block->getIsAnchorOnly() ? 1 : 0;
+
 $scriptString = <<<script
 
 require(['jquery', 'jquery/jstree/jquery.jstree'], function($) {
@@ -20,42 +21,27 @@ require(['jquery', 'jquery/jstree/jquery.jstree'], function($) {
     let useMassAction = {$isUseMassAction};
     let isAnchorOnly = {$isAnchorOnly};
     let checkedNodes = [];
-
-    function addLastNodeProperty(nodes) {
-        return nodes.map(node => {
-            return node.children
-                ? { ...node, children: addLastNodeProperty(node.children) }
-                : { ...node, lastNode: true };
-        });
-    }
+    let anchorNodes = [];
+    let nonAnchorNodes = [];
 
     function actionBasedOnIsAnchorOnly() {
-        tree.jstree().get_json('#', { flat: true }).each((node, value) => {
-            const attrId = node.a_attr.id;
-            const rootNode = tree.jstree().get_node("#");
-            const rootId = rootNode.children[0];
-
-            if (isAnchorOnly === 1 && node.id === rootId) {
-                tree.jstree(true).disable_node(node);
-            } else if (isAnchorOnly === 0 && node.id !== rootId) {
-                tree.jstree(true).disable_node(node);
-            }
-        });
+        if(isAnchorOnly){
+            tree.jstree(true).disable_node(nonAnchorNodes);
+        }else{
+            tree.jstree(true).disable_node(anchorNodes);
+        }
     }
 
-    function handleLoadedTree(e, data) {
+    function handleLoadedNode(e, data) {
         const container = $(e.target).closest('div.chooser_container');
-        checkedNodes = container.find('input[type="text"].entities').val().split(',').map(item => item.trim());
-
-        data.instance.get_json('#', { flat: true }).forEach(nodeId => {
-            const node = data.instance.get_node(nodeId);
-
-            if (checkedNodes.includes(node.id)) {
-                tree.jstree(true).select_node(node.id);
-            }
+        if(container.find('input[type="text"].entities').val() !== ''){
+            checkedNodes = container.find('input[type="text"].entities').val().split(',').map(item => item.trim());
+        }
 
+        if (data.status) {
+            tree.jstree(true).select_node(checkedNodes);
             actionBasedOnIsAnchorOnly();
-        });
+        }
     }
 
     function handleChange(e, data) {
@@ -65,18 +51,16 @@ require(['jquery', 'jquery/jstree/jquery.jstree'], function($) {
 
         if (useMassAction) {
             const clickedNodeID = data.node.id;
-            const currentCheckedNodes = data.instance.get_checked();
 
             if (data.action === 'select_node' && !checkedNodes.includes(clickedNodeID)) {
-                checkedNodes = currentCheckedNodes;
+                checkedNodes.push(clickedNodeID);
             } else if (data.action === 'deselect_node') {
-                checkedNodes = currentCheckedNodes.filter(nodeID => nodeID !== clickedNodeID);
+                checkedNodes = checkedNodes.filter(nodeID => nodeID !== clickedNodeID);
             }
 
             checkedNodes.sort((a, b) => a - b);
-
             const container = $(e.target).closest('div.chooser_container');
-            container.find('input[type="text"].entities').val(checkedNodes.join(', '));
+            container.find('input[type="text"].entities').val(checkedNodes.join(','));
         } else {
             node = data.node;
             node.attributes = node.original;
@@ -85,77 +69,56 @@ require(['jquery', 'jquery/jstree/jquery.jstree'], function($) {
         }
     }
 
-    function getCheckedNodeIds(tree, node) {
-        if (node.children_d && node.children_d.length > 0) {
-            const selectChildrenNodes = node.children_d.filter(item => checkedNodes.includes(item));
-
-            if (selectChildrenNodes.length > 0) {
-                tree.jstree(true).select_node(selectChildrenNodes);
+    function updateChildrenKey(treeJson) {
+        treeJson.forEach(node => {
+            if (Array.isArray(node.children) && node.children.length === 0) {
+                node.children = true;
+            } else if (Array.isArray(node.children)) {
+                updateChildrenKey(node.children);
             }
-        }
-    }
 
-    function addLastNodeFlag(treeData) {
-        if (treeData.children) {
-            treeData.children.forEach(child => addLastNodeFlag(child));
-        } else {
-            treeData.lastNode = true;
-        }
-    }
-
-    function handleSuccessResponse(response, childNode, data) {
-        if (response.length > 0) {
-            response.forEach(newNode => {
-                addLastNodeFlag(newNode);
-
-                // Create the new node and execute node callback
-                data.instance.create_node(childNode, newNode, 'last', node => {
-                    if (useMassAction) {
-                        if (checkedNodes.includes(node.id)) {
-                            tree.jstree(true).select_node(node.id);
-                        }
-                        getCheckedNodeIds(tree, node);
-                        actionBasedOnIsAnchorOnly();
-                    }
-                });
-            });
-        }
-    }
-
-    function handleOpenNode(e, data) {
-        let parentNode = data.node;
-
-        if (parentNode.children.length > 0) {
-            let childNode = data.instance.get_node(parentNode.children, false);
-
-            // Check if the child node has no children (is not yet loaded)
-            if (childNode.children && childNode.children.length === 0
-                && childNode.original && !childNode.original.lastNode) {
-                $.ajax({
-                    url: '{$block->escapeJs($block->escapeUrl($block->getLoadTreeUrl()))}',
-                    data: {
-                        id: childNode.original.id,
-                        store: childNode.original.store,
-                        form_key: FORM_KEY
-                    },
-                    dataType: 'json',
-                    success: function (response) {
-                        handleSuccessResponse(response, childNode, data);
-                    },
-                    error: function (jqXHR, status, error) {
-                        console.log(status + ': ' + error + 'Response text:' + jqXHR.responseText);
-                    }
-                });
+            if(node.is_anchor === 1){
+                anchorNodes.push(node.id);
+            }else{
+                nonAnchorNodes.push(node.id);
             }
-        }
+        });
+        return treeJson;
     }
 
     var jstreeConfig = {
         core: {
-            data: addLastNodeProperty({$block->getTreeJson()}),
+            data: function (obj, callback) {
+                if(obj.id != '#' && obj.children.length === 0){
+                    let data = {
+                        id: obj.id,
+                        store: obj.original.store,
+                        node: obj.id,
+                        form_key: FORM_KEY
+                    };
+
+                    $.ajax({
+                        url: '{$block->escapeJs($block->getLoadTreeUrl())}',
+                        type: "POST",
+                        data: data,
+                        dataType: 'json',
+                        success: function (response) {
+                            response = updateChildrenKey(response);
+                            callback.call(this, response);
+                        },
+                        error: function (jqXHR, status, error) {
+                            console.log(status + ': ' + error);
+                        }
+                    });
+
+                }else{
+                    let defaultTree = updateChildrenKey({$block->getTreeJson()});
+                    callback.call(this, defaultTree);
+                }
+            },
             check_callback: true
         },
-        plugins: []
+        plugins: ['dnd']
     };
 
     if (useMassAction) {
@@ -168,18 +131,17 @@ require(['jquery', 'jquery/jstree/jquery.jstree'], function($) {
     tree.jstree(jstreeConfig);
 
     if (useMassAction) {
-        tree.on('loaded.jstree', (e, data) => handleLoadedTree(e, data));
+        tree.on('load_node.jstree', (e, data) => handleLoadedNode(e, data));
     }
 
     tree.on('changed.jstree', (e, data) => handleChange(e, data));
-    tree.on('open_node.jstree', (e, data) => handleOpenNode(e, data));
 });
 
 script;
 ?>
 <?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
     'overflow-x: auto;',
-    '#tree' . $block->escapeJs($block->getId())
+    '#tree' . $escaper->escapeJs($block->getId())
 );
 ?>
 <?= /* @noEscape */ $secureRenderer->renderTag('script', [], $scriptString, false); ?>