Skip to content

Commit b173877

Browse files
undefined-olhaundefined-olha
committed
MAGETWO-50412: [GITHUB] Issues with adding groups on attribute set creation page
1 parent c614b9c commit b173877

File tree

6 files changed

+158
-65
lines changed

6 files changed

+158
-65
lines changed

‎app/code/Magento/Catalog/view/adminhtml/templates/catalog/product/attribute/set/main.phtml

Lines changed: 60 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -53,9 +53,10 @@
5353
"jquery",
5454
"Magento_Ui/js/modal/prompt",
5555
"Magento_Ui/js/modal/alert",
56+
"Magento_Ui/js/modal/confirm",
5657
"extjs/ext-tree-checkbox",
5758
"prototype"
58-
], function(jQuery, prompt, alert){
59+
], function(jQuery, prompt, alert, confirm){
5960

6061
//<![CDATA[
6162
var allowDragAndDrop = <?php /* @escapeNotVerified */ echo($block->getIsReadOnly() ? 'false' : 'true'); ?>;
@@ -208,6 +209,8 @@
208209
},
209210

210211
submit : function() {
212+
var i, child, newNode;
213+
211214
if( TreePanels.root.firstChild == TreePanels.root.lastChild ) {
212215
return;
213216
}
@@ -220,23 +223,40 @@
220223
}
221224

222225
if( editSet.currentNode && editSet.currentNode.attributes.cls == 'folder' ) {
223-
TreePanels.root.removeChild(editSet.currentNode);
224-
for( i in editSet.currentNode.childNodes ) {
225-
if( editSet.currentNode.childNodes[i].id ) {
226-
child = editSet.currentNode.childNodes[i];
227-
newNode = new Ext.tree.TreeNode(child.attributes);
228-
229-
if( child.attributes.is_user_defined == 1 ) {
230-
TreePanels.root2.appendChild(newNode);
226+
confirm({
227+
title: "<?php /* @escapeNotVerified */ echo __('Delete Group') ?>",
228+
content: '<?php echo $block->escapeJs(__('Are you sure you want to delete this group?')) ?>',
229+
actions: {
230+
confirm: function () {
231+
TreePanels.root.removeChild(editSet.currentNode);
232+
233+
for( i in editSet.currentNode.childNodes ) {
234+
if( editSet.currentNode.childNodes[i].id ) {
235+
child = editSet.currentNode.childNodes[i];
236+
newNode = new Ext.tree.TreeNode(child.attributes);
237+
238+
if( child.attributes.is_user_defined == 1 ) {
239+
TreePanels.root2.appendChild(newNode);
240+
}
241+
}
242+
}
243+
244+
editSet.req.removeGroups[editSet.currentNode.id] = editSet.currentNode.id;
245+
editSet.currentNode = false;
231246
}
232247
}
233-
}
234-
editSet.req.removeGroups[editSet.currentNode.id] = editSet.currentNode.id;
235-
editSet.currentNode = false;
248+
});
236249
}
237250
},
238251

239252
SystemNodesExists : function(currentNode) {
253+
if (!currentNode) {
254+
alert({
255+
content: '<?php echo $block->escapeJs(__('Please select a node.')) ?>'
256+
});
257+
return;
258+
}
259+
240260
for (i in currentNode.childNodes) {
241261
if (currentNode.childNodes[i].id) {
242262
child = editSet.currentNode.childNodes[i];
@@ -253,31 +273,40 @@
253273

254274
addGroup : function() {
255275
prompt({
276+
title: "<?php /* @escapeNotVerified */ echo __('Add New Group') ?>",
256277
content: "<?php /* @escapeNotVerified */ echo __('Please enter a new group name.') ?>",
257278
value: "",
279+
validation: true,
280+
validationRules: ['required-entry'],
281+
attributesForm: {
282+
novalidate: 'novalidate',
283+
action: ''
284+
},
285+
attributesField: {
286+
name: 'name',
287+
'data-validate': '{required:true}',
288+
maxlength: '255'
289+
},
258290
actions: {
259291
confirm: function (group_name) {
260292
group_name = group_name.strip();
261-
if( group_name == '' ) {
262-
self.addGroup();
263-
} else if( group_name != false && group_name != null && group_name != '' ) {
264293

265-
if (!editSet.validateGroupName(group_name, 0)) {
266-
return;
267-
}
268-
269-
var newNode = new Ext.tree.TreeNode({
270-
text : group_name.escapeHTML(),
271-
cls : 'folder',
272-
allowDrop : true,
273-
allowDrag : true
274-
});
275-
TreePanels.root.appendChild(newNode);
276-
newNode.addListener('beforemove', editSet.groupBeforeMove);
277-
newNode.addListener('beforeinsert', editSet.groupBeforeInsert);
278-
newNode.addListener('beforeappend', editSet.groupBeforeInsert);
279-
newNode.addListener('click', editSet.register);
294+
if (!editSet.validateGroupName(group_name, 0)) {
295+
return;
280296
}
297+
298+
var newNode = new Ext.tree.TreeNode({
299+
text : group_name.escapeHTML(),
300+
cls : 'folder',
301+
allowDrop : true,
302+
allowDrag : true
303+
});
304+
305+
TreePanels.root.appendChild(newNode);
306+
newNode.addListener('beforemove', editSet.groupBeforeMove);
307+
newNode.addListener('beforeinsert', editSet.groupBeforeInsert);
308+
newNode.addListener('beforeappend', editSet.groupBeforeInsert);
309+
newNode.addListener('click', editSet.register);
281310
}
282311
}
283312
});
@@ -302,7 +331,7 @@
302331
}
303332
for (var i=0; i < TreePanels.root.childNodes.length; i++) {
304333
if (TreePanels.root.childNodes[i].text.toLowerCase() == name.toLowerCase() && TreePanels.root.childNodes[i].id != exceptNodeId) {
305-
errorText = '<?php /* @escapeNotVerified */ echo __('An attribute group named "/name/" already exists".') ?>';
334+
errorText = '<?php /* @escapeNotVerified */ echo __('An attribute group named "/name/" already exists.') ?>';
306335
alert({
307336
content: errorText.replace("/name/",name)
308337
});

‎app/code/Magento/Ui/view/adminhtml/web/templates/modal/modal-prompt-content.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!--
2+
/**
3+
* Copyright © 2016 Magento. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
-->
7+
<form <%= formAttr %>>
8+
<fieldset class="admin__fieldset">
9+
<div class="admin__field admin__field-wide">
10+
<% if(data.label){ %>
11+
<label for="prompt-field-<%- data.id %>" class="admin__field-label">
12+
<span><%= data.label %></span>
13+
</label>
14+
<% } %>
15+
<div class="admin__field-control">
16+
<input type="text" data-role="prompt-field" id="prompt-field-<%- data.id %>" class="admin__control-text" <%= inputAttr %>/>
17+
</div>
18+
</div>
19+
</fieldset>
20+
</form>

‎app/code/Magento/Ui/view/base/web/js/modal/modal.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ define([
4242
*/
4343
$.widget('mage.modal', {
4444
options: {
45+
id: null,
4546
type: 'popup',
4647
title: '',
4748
subTitle: '',
@@ -121,6 +122,7 @@ define([
121122
'closeModal'
122123
);
123124

125+
this.options.id = this.uuid;
124126
this.options.transitionEvent = transitionEvent;
125127
this._createWrapper();
126128
this._renderModal();

‎app/code/Magento/Ui/view/base/web/js/modal/prompt.js

Lines changed: 55 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,24 @@
66
define([
77
'jquery',
88
'underscore',
9+
'mage/template',
10+
'text!ui/template/modal/modal-prompt-content.html',
911
'jquery/ui',
1012
'Magento_Ui/js/modal/modal',
1113
'mage/translate'
12-
], function ($, _) {
14+
], function ($, _, template, promptContentTmpl) {
1315
'use strict';
1416

1517
$.widget('mage.prompt', $.mage.modal, {
1618
options: {
1719
modalClass: 'prompt',
18-
promptField: '[data-role="promptField"]',
20+
promptContentTmpl: promptContentTmpl,
21+
promptField: '[data-role="prompt-field"]',
1922
attributesForm: {},
2023
attributesField: {},
2124
value: '',
25+
validation: false,
26+
validationRules: [],
2227
actions: {
2328

2429
/**
@@ -64,61 +69,73 @@ define([
6469
*/
6570
_create: function () {
6671
this.options.focus = this.options.promptField;
72+
this.options.validation = this.options.validation && this.options.validationRules.length;
6773
this._super();
68-
this.modal.find(this.options.modalContent).append(this.getFieldTemplate());
74+
this.modal.find(this.options.modalContent).append(this.getFormTemplate());
6975
this.modal.find(this.options.modalCloseBtn).off().on('click', _.bind(this.closeModal, this, false));
76+
77+
if (this.options.validation) {
78+
this.setValidationClasses();
79+
}
80+
7081
this.openModal();
7182
},
7283

7384
/**
74-
* Field template getter.
85+
* Form template getter.
7586
*
76-
* @returns {Object} Field template
87+
* @returns {Object} Form template.
7788
*/
78-
getFieldTemplate: function () {
79-
var input = '<input data-role="promptField" id="prompt-field" class="admin__control-text" type="text"/>',
80-
form = '<form/>',
81-
wrapper = '<div class="prompt-message"/>',
82-
$wrapper = $(wrapper),
83-
$form = $(form),
84-
$input = $(input),
89+
getFormTemplate: function () {
90+
var formTemplate,
91+
formAttr = '',
92+
inputAttr = '',
8593
attributeName;
8694

87-
for (attributeName in this.options.attributesField) {
88-
if (this.options.attributesField.hasOwnProperty(attributeName)) {
89-
$input.attr(attributeName, this.options.attributesField[attributeName]);
95+
for (attributeName in this.options.attributesForm) {
96+
if (this.options.attributesForm.hasOwnProperty(attributeName)) {
97+
formAttr = formAttr + ' ' + attributeName + '="' +
98+
this.options.attributesForm[attributeName] + '"';
9099
}
91100
}
92101

93-
for (attributeName in this.options.attributesForm) {
94-
if (this.options.attributesForm.hasOwnProperty(attributeName)) {
95-
$form.attr(attributeName, this.options.attributesForm[attributeName]);
102+
for (attributeName in this.options.attributesField) {
103+
if (this.options.attributesField.hasOwnProperty(attributeName)) {
104+
inputAttr = inputAttr + ' ' + attributeName + '="' +
105+
this.options.attributesField[attributeName] + '"';
96106
}
97107
}
98108

99-
$form.append($input);
109+
formTemplate = $(template(this.options.promptContentTmpl, {
110+
data: this.options,
111+
formAttr: formAttr,
112+
inputAttr: inputAttr
113+
}));
100114

101-
return $wrapper.append($form);
115+
return formTemplate;
102116
},
103117

104118
/**
105-
* Compile template and append to wrapper.
119+
* Remove widget
106120
*/
107-
_renderModal: function () {
108-
this._super();
109-
110-
if (this.options.label) {
111-
this.element.append(this.options.label);
112-
}
121+
_remove: function () {
122+
this.modal.remove();
123+
},
113124

114-
this.element.wrap('<label for="prompt-field"></label>');
125+
/**
126+
* Validate prompt field
127+
*/
128+
validate: function () {
129+
return $.validator.validateSingleElement(this.options.promptField);
115130
},
116131

117132
/**
118-
* Remove widget
133+
* Add validation classes to prompt field
119134
*/
120-
_remove: function () {
121-
this.modal.remove();
135+
setValidationClasses: function () {
136+
this.modal.find(this.options.promptField).attr('class', $.proxy(function (i, val) {
137+
return val + ' ' + this.options.validationRules.join(' ');
138+
}, this));
122139
},
123140

124141
/**
@@ -136,11 +153,16 @@ define([
136153
var value;
137154

138155
if (result) {
156+
if (this.options.validation && !this.validate()) {
157+
return;
158+
}
159+
139160
value = this.modal.find(this.options.promptField).val();
140-
this.options.actions.confirm(value);
161+
this.options.actions.confirm.call(this, value);
141162
} else {
142163
this.options.actions.cancel.call(this, result);
143164
}
165+
144166
this.options.actions.always();
145167
this.element.bind('promptclosed', _.bind(this._remove, this));
146168

@@ -149,6 +171,6 @@ define([
149171
});
150172

151173
return function (config) {
152-
return $('<div></div>').html(config.content).prompt(config);
174+
return $('<div class="prompt-message"></div>').html(config.content).prompt(config);
153175
};
154176
});

‎app/code/Magento/Ui/view/base/web/templates/modal/modal-prompt-content.html

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!--
2+
/**
3+
* Copyright © 2016 Magento. All rights reserved.
4+
* See COPYING.txt for license details.
5+
*/
6+
-->
7+
<form <%= formAttr %>>
8+
<fieldset class="fieldset">
9+
<div class="field">
10+
<% if(data.label){ %>
11+
<label for="prompt-field-<%- data.id %>" class="label">
12+
<span><%= data.label %></span>
13+
</label>
14+
<% } %>
15+
<div class="control">
16+
<input type="text" data-role="prompt-field" id="prompt-field-<%- data.id %>" class="input-text" <%= inputAttr %>/>
17+
</div>
18+
</div>
19+
</fieldset>
20+
</form>

‎app/design/adminhtml/Magento/backend/web/css/source/components/_modals_extend.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
.modal-popup {
7070
&.prompt {
7171
.prompt-message {
72-
padding: @modal-prompt-message__padding 0;
72+
padding-bottom: @modal-prompt-message__padding;
7373

7474
input {
7575
width: 100%;

0 commit comments

Comments
 (0)