Skip to content

Commit 7c5b484

Browse files
bfederlebfederle
committed
CLOUDSTACK-3560: UI createForm: Support multiple dependsOn targets
Support passing list of dependsOn targets for form fields. This will trigger a change if any items specified in list are changed. Example: fieldA: {...}, fieldB: {...}, fieldC: { dependsOn: ['fieldA', 'fieldB'] }
1 parent e14f5d0 commit 7c5b484

1 file changed

Lines changed: 85 additions & 63 deletions

File tree

‎ui/scripts/ui/dialog.js‎

Lines changed: 85 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -37,18 +37,21 @@
3737
*/
3838
createForm: function(args) {
3939
var $formContainer = $('<div>').addClass('form-container');
40-
var $message = $('<span>').addClass('message').appendTo($formContainer).html(
41-
_l(args.form.desc)
42-
);
4340
var $form = $('<form>').appendTo($formContainer)
44-
.submit(function() {
45-
$(this).closest('.ui-dialog').find('button.ok').click();
46-
47-
return false;
48-
});
41+
.submit(function() {
42+
$(this).closest('.ui-dialog').find('button.ok').click();
4943

44+
return false;
45+
});
5046
var createLabel = _l(args.form.createLabel);
51-
var $submit = $('<input>')
47+
48+
// Description text
49+
$('<span>').addClass('message').prependTo($formContainer).html(
50+
_l(args.form.desc)
51+
);
52+
53+
// Submit button
54+
$('<input>')
5255
.attr({
5356
type: 'submit'
5457
})
@@ -58,7 +61,7 @@
5861
// Render fields and events
5962
var fields = $.map(args.form.fields, function(value, key) {
6063
return key;
61-
})
64+
});
6265

6366
var ret = function() {
6467
$('.overlay').remove();
@@ -127,10 +130,10 @@
127130
var field = args.form.fields[key];
128131

129132
var $formItem = $('<div>')
130-
.addClass('form-item')
131-
.attr({
132-
rel: key
133-
});
133+
.addClass('form-item')
134+
.attr({
135+
rel: key
136+
});
134137

135138
if (field.isHidden != null) {
136139
if (typeof(field.isHidden) == 'boolean' && field.isHidden == true)
@@ -143,31 +146,31 @@
143146

144147
//Handling Escape KeyPress events
145148
/* $('.ui-dialog').keypress(function(event) {
146-
if ( event.which == 27 ) {
147-
event.stopPropagation();
148-
}
149-
});
150-
151-
$(document).ready(function(){
152-
$('.ui-dialog').keydown(function(event) {
153-
if(event.keyCode == 27)
154-
{
155-
alert("you pressed the Escape key");
156-
event.preventdefault();
157-
}
158-
})
159-
});
160-
161-
$(':ui-dialog').dialog({
162-
closeOnEscape: false
163-
}); */
149+
if ( event.which == 27 ) {
150+
event.stopPropagation();
151+
}
152+
});
153+
154+
$(document).ready(function(){
155+
$('.ui-dialog').keydown(function(event) {
156+
if(event.keyCode == 27)
157+
{
158+
alert("you pressed the Escape key");
159+
event.preventdefault();
160+
}
161+
})
162+
});
163+
164+
$(':ui-dialog').dialog({
165+
closeOnEscape: false
166+
}); */
164167
// Label field
165168

166169
var $name = $('<div>').addClass('name')
167-
.appendTo($formItem)
168-
.append(
169-
$('<label>').html(_l(field.label) + ':')
170-
);
170+
.appendTo($formItem)
171+
.append(
172+
$('<label>').html(_l(field.label) + ':')
173+
);
171174

172175
// red asterisk
173176
var $astersikSpan = $('<span>').addClass('field-required').html('*');
@@ -186,15 +189,17 @@
186189

187190
// Input area
188191
var $value = $('<div>').addClass('value')
189-
.appendTo($formItem);
192+
.appendTo($formItem);
190193
var $input, $dependsOn, selectFn, selectArgs;
191194
var dependsOn = field.dependsOn;
192195

193196
// Depends on fields
194197
if (field.dependsOn) {
195198
$formItem.attr('depends-on', dependsOn);
196199
$dependsOn = $form.find('input, select').filter(function() {
197-
return $(this).attr('name') === dependsOn;
200+
return $.isArray(dependsOn) ?
201+
$.inArray($(this).attr('name'), dependsOn) > -1 :
202+
$(this).attr('name') === dependsOn;
198203
});
199204

200205
if ($dependsOn.is('[type=checkbox]')) {
@@ -214,7 +219,7 @@
214219
}
215220
});
216221
} else if (($target.is(':unchecked') && !isReverse) ||
217-
($target.is(':checked') && isReverse)) {
222+
($target.is(':checked') && isReverse)) {
218223
$dependent.hide();
219224
}
220225

@@ -253,9 +258,9 @@
253258
description = this.description;
254259

255260
var $option = $('<option>')
256-
.appendTo($input)
257-
.val(_s(id))
258-
.html(_s(description));
261+
.appendTo($input)
262+
.val(_s(id))
263+
.html(_s(description));
259264
});
260265

261266
if (field.defaultValue) {
@@ -290,25 +295,42 @@
290295

291296
if (dependsOn) {
292297
$dependsOn = $input.closest('form').find('input, select').filter(function() {
293-
return $(this).attr('name') === dependsOn;
298+
return $.isArray(dependsOn) ?
299+
$.inArray($(this).attr('name'), dependsOn) > -1 :
300+
$(this).attr('name') === dependsOn;
294301
});
295302

296-
$dependsOn.bind('change', function(event) {
297-
var $target = $(this);
303+
// Reload selects linked to in dependsOn
304+
$dependsOn.each(function() {
305+
var $targetDependsOn = $(this);
298306

299-
if (!$dependsOn.is('select')) return true;
307+
$targetDependsOn.bind('change', function(event) {
308+
var formData = cloudStack.serializeForm($form);
309+
var dependsOnLoaded;
300310

301-
var dependsOnArgs = {};
311+
// Make sure all data is loaded to pass to select fn
312+
dependsOnLoaded = $.inArray(
313+
true, $dependsOn.map(function(index, item) { return $(item).find('option').size() ? true : false; })
314+
) > -1;
302315

303-
$input.find('option').remove();
316+
if (!dependsOnLoaded) {
317+
return false;
318+
}
304319

305-
if (!$target.children().size()) return true;
320+
var $target = $(this);
306321

307-
dependsOnArgs[dependsOn] = $target.val();
322+
if (!$target.is('select')) {
323+
return true;
324+
}
308325

309-
selectFn($.extend(selectArgs, dependsOnArgs));
326+
$input.find('option').remove();
310327

311-
return true;
328+
// Re-execute select
329+
selectFn($.extend(selectArgs, formData, {
330+
data: formData
331+
}));
332+
return true;
333+
});
312334
});
313335

314336
if (!$dependsOn.is('select')) {
@@ -325,17 +347,17 @@
325347
$.each(field.multiArray, function(itemKey, itemValue) {
326348
$input.append(
327349
$('<div>').addClass('item')
328-
.append(
329-
$.merge(
330-
$('<div>').addClass('name').html(_l(itemValue.label)),
331-
$('<div>').addClass('value').append(
332-
$('<input>').attr({
333-
name: itemKey,
334-
type: 'checkbox'
335-
}).appendTo($value)
350+
.append(
351+
$.merge(
352+
$('<div>').addClass('name').html(_l(itemValue.label)),
353+
$('<div>').addClass('value').append(
354+
$('<input>').attr({
355+
name: itemKey,
356+
type: 'checkbox'
357+
}).appendTo($value)
358+
)
336359
)
337360
)
338-
)
339361
);
340362
});
341363

@@ -479,8 +501,8 @@
479501

480502

481503
/* $input.blur(function() {
482-
console.log('tooltip remove->' + $input.attr('name'));
483-
});*/
504+
console.log('tooltip remove->' + $input.attr('name'));
505+
});*/
484506
});
485507

486508

0 commit comments

Comments
 (0)