Skip to content

Commit 1a27a04

Browse files
Atul-glo35265Atul-glo35265
committed
AC-12571:Navigating in the categories tree leads to errors in Redis - Making one ajax request on category expand click
1 parent 6f4805f commit 1a27a04

File tree

1 file changed

+61
-123
lines changed
  • app/code/Magento/Catalog/view/adminhtml/templates/catalog/category

1 file changed

+61
-123
lines changed

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

Lines changed: 61 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@
1818
</div>
1919
<div class="tree-actions">
2020
<?php if ($root):?>
21-
<a id="colapseAll" href="#"><?= $block->escapeHtml(__('Collapse All')) ?></a>
21+
<a id="colapseAll" href="#"><?= $escaper->escapeHtml(__('Collapse All')) ?></a>
2222
<span class="separator">|</span>
23-
<a id="expandAll" href="#"><?= $block->escapeHtml(__('Expand All')) ?></a>
23+
<a id="expandAll" href="#"><?= $escaper->escapeHtml(__('Expand All')) ?></a>
2424
<?php endif; ?>
2525
</div>
2626
<?php if ($root):?>
@@ -39,11 +39,11 @@
3939
</div>
4040
</div>
4141

42-
<div data-id="information-dialog-tree" class="messages">
43-
<div class="message message-notice">
44-
<div><?= $block->escapeHtml(__('This operation can take a long time')) ?></div>
42+
<div data-id="information-dialog-tree" class="messages">
43+
<div class="message message-notice">
44+
<div><?= $escaper->escapeHtml(__('This operation can take a long time')) ?></div>
45+
</div>
4546
</div>
46-
</div>
4747

4848
<?= /* @noEscape */ $secureRenderer->renderStyleAsTag(
4949
'display: none;',
@@ -73,7 +73,7 @@
7373
treeInstance,
7474
script;
7575
$scriptString .= 'currentNodeId = ' . (int)$block->getCategoryId() . ',
76-
76+
defaultTree = '. $block->getTreeJson() .',
7777
defaultParams = {
7878
text: ' . /* @noEscape */ json_encode(htmlentities($root->getName())) . ',
7979
allowDrop: ' . ($root->getIsVisible() ? 'true' : 'false') . ',
@@ -93,6 +93,32 @@ script;
9393
*/
9494
treeDiv.jstree({
9595
core: {
96+
'data' : function (obj, callback) {
97+
if(obj.id != '#' && obj.children.length === 0){
98+
let data = {
99+
id: obj.id,
100+
store: defaultParams.store_id,
101+
form_key: FORM_KEY
102+
};
103+
104+
$.ajax({
105+
url: '{$block->escapeJs($block->getLoadTreeUrl())}',
106+
type: "POST",
107+
data: data,
108+
dataType: 'json',
109+
success: function (response) {
110+
TreeConfig.updateChildrenKey(response);
111+
callback.call(this, response);
112+
},
113+
error: function (jqXHR, status, error) {
114+
console.log(status + ': ' + error);
115+
}
116+
});
117+
}else{
118+
TreeConfig.updateChildrenKey(defaultTree);
119+
callback.call(this, defaultTree);
120+
}
121+
},
96122
check_callback: function (operation, node) {
97123
//Draggable false for root categories
98124
return !(operation === 'move_node' &&
@@ -102,57 +128,10 @@ script;
102128
plugins: ['dnd'],
103129
}).bind('move_node.jstree', function (e, data) {
104130
TreeConfig.categoryMove(data);
131+
}).bind('ready.jstree', function(e, data) {
132+
TreeConfig.selectNode(data);
105133
});
106-
107134
treeInstance = treeDiv.jstree(true);
108-
let root = treeInstance.get_node('#');
109-
this.buildCategoryTree(treeDiv, root, '{$block->getTreeJson()}', true);
110-
111-
let catId = treeInstance.get_node(defaultParams.category_id);
112-
if (catId) {
113-
currentNodeId = defaultParams.category_id;
114-
} else if (defaultParams.parent > 0 && defaultParams.category_id === 0) {
115-
currentNodeId = defaultParams.parent;
116-
}
117-
118-
// select and open child node
119-
if (defaultParams.expanded) {
120-
treeInstance.open_all();
121-
} else {
122-
let selectedNode = treeInstance.get_node(currentNodeId);
123-
treeInstance.select_node(selectedNode, true);
124-
125-
setTimeout(function () {
126-
treeInstance.open_node(selectedNode);
127-
}, 15);
128-
}
129-
},
130-
131-
buildCategoryTree: function(treeDiv, parent, config, firstLoad){
132-
if (!config) return;
133-
134-
if(firstLoad){
135-
config = $.parseJSON(config);
136-
}
137-
138-
for (let i = 0; i < config.length; i++) {
139-
let nodeConfig = config[i],
140-
newNode = {
141-
text: nodeConfig.text,
142-
id: nodeConfig.id,
143-
allowDrag: nodeConfig.allowDrag,
144-
allowDrop: nodeConfig.allowDrop,
145-
cls: nodeConfig.cls,
146-
store: nodeConfig.store,
147-
li_attr: { class: nodeConfig.cls}
148-
};
149-
150-
const parentTree = treeInstance.create_node(parent, newNode, 'last');
151-
152-
if (nodeConfig.children) {
153-
this.buildCategoryTree(treeDiv, parentTree, nodeConfig.children, false);
154-
}
155-
}
156135
},
157136
158137
categoryMove : function (obj){
@@ -237,10 +216,33 @@ script;
237216
treeDiv.on('changed.jstree', function (e, data) {
238217
TreeConfig.categoryClick(data);
239218
});
219+
},
240220
241-
treeDiv.on("open_node.jstree", function (e, data) {
242-
TreeConfig.handleOpenNode(data);
243-
});
221+
updateChildrenKey : function(treeJson) {
222+
treeJson.forEach(node => {
223+
if (Array.isArray(node.children) && node.children.length === 0) {
224+
node.children = true;
225+
} else if (Array.isArray(node.children)) {
226+
TreeConfig.updateChildrenKey(node.children);
227+
}
228+
});
229+
},
230+
231+
selectNode : function(data){
232+
if (defaultParams.expanded) {
233+
treeInstance.open_all();
234+
} else {
235+
let catId = treeInstance.get_node(defaultParams.category_id);
236+
if (catId) {
237+
currentNodeId = defaultParams.category_id;
238+
} else if (defaultParams.parent > 0 && defaultParams.category_id === 0) {
239+
currentNodeId = defaultParams.parent;
240+
}
241+
242+
let selectedNode = treeInstance.get_node(currentNodeId);
243+
treeInstance.select_node(selectedNode, true);
244+
treeInstance.open_node(selectedNode);
245+
}
244246
},
245247
246248
categoryClick : function(data){
@@ -257,63 +259,6 @@ script;
257259
}
258260
},
259261
260-
handleOpenNode : function(data){
261-
let parentNode = data.node;
262-
if (parentNode && parentNode.children.length > 0) {
263-
264-
parentNode.children.forEach(function(childId) {
265-
266-
let childNode = data.instance.get_node(childId, false);
267-
268-
// Check if the child node has no children (is not yet loaded)
269-
if (childNode.children && childNode.children.length === 0
270-
&& childNode.original && !childNode.original.lastNode) {
271-
272-
$.ajax({
273-
url: '{$block->escapeJs($block->escapeUrl($block->getLoadTreeUrl()))}',
274-
type: "POST",
275-
data: {
276-
id: childNode.original.id,
277-
store: childNode.original.store,
278-
form_key: FORM_KEY
279-
},
280-
dataType: 'json',
281-
success: function (response) {
282-
TreeConfig.handleSuccessResponse(response, childNode, data);
283-
},
284-
error: function (jqXHR, status, error) {
285-
console.log(status + ': ' + error);
286-
}
287-
});
288-
}
289-
});
290-
}
291-
},
292-
293-
handleSuccessResponse : function(response, childNode, data){
294-
if (response.length > 0) {
295-
response.forEach(newNode => {
296-
TreeConfig.addLastNodeFlag(newNode);
297-
298-
// Create the new node and execute node callback
299-
data.instance.create_node(childNode, newNode, 'last');
300-
});
301-
302-
// open all node if, expand all link clicked
303-
if(expandAll === true){
304-
data.instance.open_all();
305-
}
306-
}
307-
},
308-
309-
addLastNodeFlag : function(treeData) {
310-
if (treeData.children) {
311-
treeData.children.forEach(child => TreeConfig.addLastNodeFlag(child));
312-
} else {
313-
treeData.lastNode = true;
314-
}
315-
},
316-
317262
expandAll : function(){
318263
expandAll = true;
319264
treeInstance.open_all();
@@ -343,13 +288,6 @@ script;
343288
TreeConfig.categoryClick(data);
344289
});
345290
346-
/**
347-
* jstree handle open node
348-
*/
349-
treeDiv.on('open_node.jstree', function (e, data) {
350-
TreeConfig.handleOpenNode(data);
351-
});
352-
353291
/**
354292
* create default tree
355293
*/

0 commit comments

Comments
 (0)