Skip to content

Commit 5a2037c

Browse files
authored
Merge pull request #9297 from magento-gl/AC-13229
[Arrows]:Update Coding Standard in CE and EE composer and Widget category tree is not rendered correctly
2 parents fd5cf3a + aa159dc commit 5a2037c

File tree

2 files changed

+63
-123
lines changed

2 files changed

+63
-123
lines changed

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

+57-117
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<?php
22
/**
3-
* Copyright © Magento, Inc. All rights reserved.
4-
* See COPYING.txt for license details.
3+
* Copyright 2015 Adobe
4+
* All Rights Reserved.
55
*/
66

77
/**
@@ -15,54 +15,36 @@
1515
<?php
1616
$isUseMassAction = $block->getUseMassaction() ? 1 : 0;
1717
$isAnchorOnly = $block->getIsAnchorOnly() ? 1 : 0;
18+
1819
$scriptString = <<<script
1920
2021
require(['jquery', 'jquery/jstree/jquery.jstree'], function($) {
2122
22-
let tree = $('#tree{$escaper->escapeJs($block->getId())}');
23-
let useMassAction = {$isUseMassAction};
24-
let isAnchorOnly = {$isAnchorOnly};
25-
let isAnchorArr = [];
23+
const tree = $('#tree{$block->escapeJs($block->getId())}');
24+
const useMassAction = {$isUseMassAction};
25+
const isAnchorOnly = {$isAnchorOnly};
2626
let checkedNodes = [];
27-
28-
function addLastNodeProperty(nodes) {
29-
return nodes.map(node => {
30-
return node.children
31-
? { ...node, children: addLastNodeProperty(node.children) }
32-
: { ...node, lastNode: true };
33-
});
34-
}
27+
let anchorNodes = [];
28+
let nonAnchorNodes = [];
3529
3630
function actionBasedOnIsAnchorOnly() {
37-
tree.jstree().get_json('#', { flat: true }).each((node, value) => {
38-
const attrId = node.a_attr.id;
39-
const rootNode = tree.jstree().get_node("#");
40-
const rootId = rootNode.children[0];
41-
42-
if (isAnchorOnly === 1) {
43-
if (1 === isAnchorArr[parseInt(node.id)]) {
44-
tree.jstree(true).enable_node(node);
45-
} else {
46-
tree.jstree(true).disable_node(node);
47-
}
48-
} else {
49-
if (0 === isAnchorArr[parseInt(node.id)]) {
50-
tree.jstree(true).enable_node(node);
51-
} else {
52-
tree.jstree(true).disable_node(node);
53-
}
54-
}
55-
});
31+
if (isAnchorOnly) {
32+
tree.jstree(true).disable_node(nonAnchorNodes);
33+
} else {
34+
tree.jstree(true).disable_node(anchorNodes);
35+
}
5636
}
5737
58-
function handleLoadedTree(e, data) {
38+
function handleLoadedNode(e, data) {
5939
const container = $(e.target).closest('div.chooser_container');
60-
checkedNodes = container.find('input[type="text"].entities').val().split(',').map(item => item.trim());
40+
if (container.find('input[type="text"].entities').val() !== '') {
41+
checkedNodes = container.find('input[type="text"].entities').val().split(',').map(item => item.trim());
42+
}
6143
62-
data.instance.get_json('#', { flat: true }).forEach(nodeId => {
63-
const node = data.instance.get_node(nodeId);
64-
getAnchorNodeIds(tree, node);
65-
});
44+
if (data.status) {
45+
tree.jstree(true).select_node(checkedNodes);
46+
actionBasedOnIsAnchorOnly();
47+
}
6648
}
6749
6850
function handleChange(e, data) {
@@ -72,18 +54,16 @@ require(['jquery', 'jquery/jstree/jquery.jstree'], function($) {
7254
7355
if (useMassAction) {
7456
const clickedNodeID = data.node.id;
75-
const currentCheckedNodes = data.instance.get_checked();
7657
7758
if (data.action === 'select_node' && !checkedNodes.includes(clickedNodeID)) {
78-
checkedNodes = currentCheckedNodes;
59+
checkedNodes.push(clickedNodeID);
7960
} else if (data.action === 'deselect_node') {
80-
checkedNodes = currentCheckedNodes.filter(nodeID => nodeID !== clickedNodeID);
61+
checkedNodes = checkedNodes.filter(nodeID => nodeID !== clickedNodeID);
8162
}
8263
8364
checkedNodes.sort((a, b) => a - b);
84-
8565
const container = $(e.target).closest('div.chooser_container');
86-
container.find('input[type="text"].entities').val(checkedNodes.join(', '));
66+
container.find('input[type="text"].entities').val(checkedNodes.join(','));
8767
} else {
8868
node = data.node;
8969
node.attributes = node.original;
@@ -92,94 +72,55 @@ require(['jquery', 'jquery/jstree/jquery.jstree'], function($) {
9272
}
9373
}
9474
95-
function getCheckedNodeIds(tree, node) {
96-
if (node.children_d && node.children_d.length > 0) {
97-
const selectChildrenNodes = node.children_d.filter(item => checkedNodes.includes(item));
98-
99-
if (selectChildrenNodes.length > 0) {
100-
tree.jstree(true).select_node(selectChildrenNodes);
75+
function updateChildrenKey(treeJson) {
76+
treeJson.forEach(node => {
77+
if (Array.isArray(node.children) && node.children.length === 0) {
78+
node.children = true;
79+
} else if (Array.isArray(node.children)) {
80+
updateChildrenKey(node.children);
10181
}
102-
}
103-
}
10482
105-
function addLastNodeFlag(treeData) {
106-
if (treeData.children) {
107-
treeData.children.forEach(child => addLastNodeFlag(child));
108-
} else {
109-
treeData.lastNode = true;
110-
}
111-
}
112-
113-
function getAnchorNodeIds(tree, node) {
114-
if (useMassAction) {
115-
isAnchorArr[parseInt(node.id)] = node.original.is_anchor;
116-
if (checkedNodes.includes(node.id)) {
117-
tree.jstree(true).select_node(node.id);
83+
if (node.is_anchor === 1) {
84+
anchorNodes.push(node.id);
85+
} else {
86+
nonAnchorNodes.push(node.id);
11887
}
119-
getCheckedNodeIds(tree, node);
120-
actionBasedOnIsAnchorOnly();
121-
}
88+
});
89+
return treeJson;
12290
}
12391
124-
function handleSuccessResponse(response, childNode, data) {
125-
if (response.length > 0) {
126-
response.forEach(newNode => {
127-
addLastNodeFlag(newNode);
128-
129-
// Create the new node and execute node callback
130-
data.instance.create_node(childNode, newNode, 'last', node => {
131-
if (useMassAction) {
132-
if ($.inArray(childNode.id, isAnchorArr) === -1) {
133-
getAnchorNodeIds(tree, childNode);
134-
}
135-
}
136-
});
137-
});
138-
}
139-
}
92+
var jstreeConfig = {
93+
core: {
94+
data: function (obj, callback) {
95+
if (obj.id != '#' && obj.children.length === 0) {
96+
let data = {
97+
id: obj.id,
98+
store: obj.original.store,
99+
node: obj.id,
100+
form_key: FORM_KEY
101+
};
140102
141-
function handleOpenNode(e, data) {
142-
let parentNode = data.node;
143-
if (parentNode && parentNode.children.length > 0) {
144-
parentNode.children.forEach(function(childId) {
145-
let childNode = data.instance.get_node(childId, false);
146-
if ($.inArray(childNode.id, isAnchorArr) === -1) {
147-
getAnchorNodeIds(tree, childNode);
148-
}
149-
// Check if the child node has no children (is not yet loaded)
150-
if (childNode.children && childNode.children.length === 0
151-
&& childNode.original && !childNode.original.lastNode) {
152103
$.ajax({
153-
url: '{$block->escapeJs($block->escapeUrl($block->getLoadTreeUrl()))}',
104+
url: '{$block->escapeJs($block->getLoadTreeUrl())}',
154105
type: "POST",
155-
data: {
156-
id: childNode.original.id,
157-
store: childNode.original.store,
158-
form_key: FORM_KEY
159-
},
106+
data: data,
160107
dataType: 'json',
161108
success: function (response) {
162-
handleSuccessResponse(response, childNode, data);
109+
response = updateChildrenKey(response);
110+
callback.call(this, response);
163111
},
164112
error: function (jqXHR, status, error) {
165-
console.log(status + ': ' + error + 'Response text:' + jqXHR.responseText);
113+
console.log(status + ': ' + error);
166114
}
167115
});
116+
} else {
117+
let defaultTree = updateChildrenKey({$block->getTreeJson()});
118+
callback.call(this, defaultTree);
168119
}
169-
})
170-
}
171-
else if ((parentNode.children.length === 0
172-
&& parentNode.original && parentNode.original.lastNode)) {
173-
getAnchorNodeIds(tree, parentNode);
174-
}
175-
}
176-
177-
var jstreeConfig = {
178-
core: {
179-
data: addLastNodeProperty({$block->getTreeJson()}),
120+
},
180121
check_callback: true
181122
},
182-
plugins: []
123+
plugins: ['dnd']
183124
};
184125
185126
if (useMassAction) {
@@ -192,11 +133,10 @@ require(['jquery', 'jquery/jstree/jquery.jstree'], function($) {
192133
tree.jstree(jstreeConfig);
193134
194135
if (useMassAction) {
195-
tree.on('loaded.jstree', (e, data) => handleLoadedTree(e, data));
136+
tree.on('load_node.jstree', (e, data) => handleLoadedNode(e, data));
196137
}
197138
198139
tree.on('changed.jstree', (e, data) => handleChange(e, data));
199-
tree.on('open_node.jstree', (e, data) => handleOpenNode(e, data));
200140
});
201141
202142
script;

composer.lock

+6-6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)