Improved App.ControllerForm.params(), store field types in .data() and not longer in name of field. Also use values of disabled fields.
This commit is contained in:
Martin Edenhofer
parent
c24b4031fc
commit
da754d5d25
19 changed files with 124 additions and 71 deletions
|
|
@ -406,39 +406,43 @@ class App.ControllerForm extends App.Controller
|
|||
param[name] = $(element).ceg()
|
||||
|
||||
# get form elements
|
||||
array = lookupForm.serializeArray()
|
||||
array = lookupForm.serializeArrayWithType()
|
||||
|
||||
# array to names
|
||||
for key in array
|
||||
for item in array
|
||||
|
||||
# check if item is-hidden and should not be used
|
||||
if lookupForm.find('[name="' + key.name + '"]').hasClass('is-hidden') || lookupForm.find('div[data-name="' + key.name + '"]').hasClass('is-hidden')
|
||||
delete param[key.name]
|
||||
if lookupForm.find('[name="' + item.name + '"]').hasClass('is-hidden') || lookupForm.find('div[data-name="' + item.name + '"]').hasClass('is-hidden')
|
||||
delete param[item.name]
|
||||
continue
|
||||
|
||||
# collect all params, push it to an array if already exists
|
||||
if param[key.name] isnt undefined
|
||||
if typeof param[key.name] is 'string'
|
||||
param[key.name] = [param[key.name], key.value.trim()]
|
||||
value = item.value.trim()
|
||||
if item.type is 'boolean'
|
||||
if value is ''
|
||||
value = undefined
|
||||
else if value is 'true'
|
||||
value = true
|
||||
else if value is 'false'
|
||||
value = false
|
||||
if item.type is 'integer'
|
||||
if value is ''
|
||||
value = undefined
|
||||
else
|
||||
param[key.name].push key.value.trim()
|
||||
value = parseInt(value)
|
||||
if param[item.name] isnt undefined
|
||||
if typeof param[item.name] is 'string'
|
||||
param[item.name] = [param[item.name], value]
|
||||
else
|
||||
param[item.name].push value
|
||||
else
|
||||
param[key.name] = key.value.trim()
|
||||
param[item.name] = value
|
||||
|
||||
# data type conversion
|
||||
for key of param
|
||||
|
||||
# get boolean
|
||||
if key.substr(0,9) is '{boolean}'
|
||||
newKey = key.substr(9, key.length)
|
||||
if param[key] && param[key].toString() is 'true'
|
||||
param[newKey] = true
|
||||
else
|
||||
param[newKey] = false
|
||||
delete param[key]
|
||||
|
||||
# get {date}
|
||||
else if key.substr(0,6) is '{date}'
|
||||
if key.substr(0,6) is '{date}'
|
||||
newKey = key.substr(6, key.length)
|
||||
if lookupForm.find("[data-name=\"#{newKey}\"]").hasClass('is-hidden')
|
||||
param[newKey] = null
|
||||
|
|
|
|||
|
|
@ -12,10 +12,6 @@ class App.UiElement.active extends App.UiElement.ApplicationUiElement
|
|||
{ name: 'inactive', value: false }
|
||||
]
|
||||
|
||||
# set data type
|
||||
if attribute.name
|
||||
attribute.name = '{boolean}' + attribute.name
|
||||
|
||||
# build options list based on config
|
||||
@getConfigOptionList(attribute, params)
|
||||
|
||||
|
|
@ -26,4 +22,6 @@ class App.UiElement.active extends App.UiElement.ApplicationUiElement
|
|||
@selectedOptions(attribute, params)
|
||||
|
||||
# return item
|
||||
$( App.view('generic/select')( attribute: attribute ) )
|
||||
item = $( App.view('generic/select')(attribute: attribute) )
|
||||
item.find('select').data('field-type', 'boolean')
|
||||
item
|
||||
|
|
@ -10,10 +10,6 @@ class App.UiElement.boolean extends App.UiElement.ApplicationUiElement
|
|||
]
|
||||
attribute.translate = true
|
||||
|
||||
# set data type
|
||||
if attribute.name
|
||||
attribute.name = '{boolean}' + attribute.name
|
||||
|
||||
# build options list based on config
|
||||
@getConfigOptionList(attribute, params)
|
||||
|
||||
|
|
@ -23,5 +19,6 @@ class App.UiElement.boolean extends App.UiElement.ApplicationUiElement
|
|||
# finde selected/checked item of list
|
||||
@selectedOptions(attribute, params)
|
||||
|
||||
# return item
|
||||
$(App.view('generic/select')(attribute: attribute))
|
||||
item = $(App.view('generic/select')(attribute: attribute))
|
||||
item.find('select').data('field-type', 'boolean')
|
||||
item
|
||||
|
|
@ -12,6 +12,8 @@ class App.UiElement.holiday_selector
|
|||
|
||||
item = $( App.view('calendar/holiday_selector')( attribute: attribute, days: days_new ) )
|
||||
|
||||
item.find('.js-boolean').data('field-type', 'boolean')
|
||||
|
||||
# add date picker
|
||||
attributeDatepicket =
|
||||
name: "#{attribute.name}_date"
|
||||
|
|
@ -68,9 +70,10 @@ class App.UiElement.holiday_selector
|
|||
placeholderDate: date
|
||||
placeholderSummary: summary
|
||||
nameSummary: "public_holidays::#{date}::summary"
|
||||
nameActive: "{boolean}public_holidays::#{date}::active"
|
||||
nameActive: "public_holidays::#{date}::active"
|
||||
)
|
||||
item.find('.settings-list-controlRow').before(template)
|
||||
item.find('.js-boolean').data('field-type', 'boolean')
|
||||
)
|
||||
|
||||
item
|
||||
|
|
|
|||
|
|
@ -3,4 +3,6 @@ class App.UiElement.integer
|
|||
@render: (attribute) ->
|
||||
attribute.type = 'number'
|
||||
attribute.step = '1'
|
||||
$( App.view('generic/input')( attribute: attribute ) )
|
||||
item = $( App.view('generic/input')(attribute: attribute) )
|
||||
item.find('select').data('field-type', 'integer')
|
||||
item
|
||||
|
|
@ -22,7 +22,6 @@ class App.UiElement.object_manager_attribute extends App.UiElement.ApplicationUi
|
|||
select: 'Select'
|
||||
boolean: 'Boolean'
|
||||
integer: 'Integer'
|
||||
autocompletion: 'Autocompletion (AJAX remote URL)'
|
||||
|
||||
configureAttributes = [
|
||||
{ name: attribute.name, display: '', tag: 'select', null: false, options: options, translate: true, default: 'input', disabled: attribute.disabled },
|
||||
|
|
@ -37,7 +36,7 @@ class App.UiElement.object_manager_attribute extends App.UiElement.ApplicationUi
|
|||
params: params
|
||||
)
|
||||
item.find('.js-dataType').html(dataType.form)
|
||||
|
||||
item.find('.js-boolean').data('field-type', 'boolean')
|
||||
item
|
||||
|
||||
@dataScreens: (attribute, localParams, params) ->
|
||||
|
|
@ -130,12 +129,14 @@ class App.UiElement.object_manager_attribute extends App.UiElement.ApplicationUi
|
|||
init = false
|
||||
if params && !params.id
|
||||
init = true
|
||||
$(App.view('object_manager/screens')(
|
||||
item = $(App.view('object_manager/screens')(
|
||||
attribute: attribute
|
||||
data: objects[object]
|
||||
params: params
|
||||
init: init
|
||||
))
|
||||
item.find('.js-boolean').data('field-type', 'boolean')
|
||||
item
|
||||
|
||||
@input: (item, localParams, params) ->
|
||||
configureAttributes = [
|
||||
|
|
@ -284,11 +285,36 @@ class App.UiElement.object_manager_attribute extends App.UiElement.ApplicationUi
|
|||
addRow.find('.js-value').val('')
|
||||
addRow.find('.js-selected').prop('checked', false)
|
||||
)
|
||||
item.on('change', '.js-key', (e) ->
|
||||
key = $(e.target).val()
|
||||
valueField = $(e.target).closest('tr').find('.js-value[name]')
|
||||
valueField.attr('name', "data_option::options::#{key}")
|
||||
)
|
||||
item.on('click', '.js-remove', (e) ->
|
||||
$(e.target).closest('tr').remove()
|
||||
)
|
||||
lastSelected = undefined
|
||||
item.on('click', '.js-selected', (e) ->
|
||||
checked = $(e.target).prop('checked')
|
||||
value = $(e.target).attr('value')
|
||||
if checked && lastSelected && lastSelected is value
|
||||
$(e.target).prop('checked', false)
|
||||
lastSelected = false
|
||||
return
|
||||
lastSelected = value
|
||||
)
|
||||
|
||||
@boolean: (item, localParams, params) ->
|
||||
lastSelected = undefined
|
||||
item.on('click', '.js-selected', (e) ->
|
||||
checked = $(e.target).prop('checked')
|
||||
value = $(e.target).attr('value')
|
||||
if checked && lastSelected && lastSelected is value
|
||||
$(e.target).prop('checked', false)
|
||||
lastSelected = false
|
||||
return
|
||||
lastSelected = value
|
||||
)
|
||||
|
||||
@autocompletion: (item, localParams, params) ->
|
||||
configureAttributes = [
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ class App.UiElement.timer
|
|||
0: true
|
||||
|
||||
timer = $( App.view('generic/timer')( attribute: attribute, days: days, hours: hours, minutes: minutes ) )
|
||||
|
||||
timer.find('.js-boolean').data('field-type', 'boolean')
|
||||
timer.find('.select-value').bind('click', (e) =>
|
||||
@select(e)
|
||||
)
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
<tr <% if !meta.active: %>class="is-inactive"<% end %> data-date="<%= day %>">
|
||||
<td class="u-positionOrigin">
|
||||
<label class="checkbox-replacement checkbox-replacement--fullscreen">
|
||||
<input type="checkbox" <% if meta.active: %>checked<% end %> class="js-active" name="{boolean}public_holidays::<%= day %>::active" value="true">
|
||||
<input type="checkbox" <% if meta.active: %>checked<% end %> class="js-active js-boolean" name="public_holidays::<%= day %>::active" value="true">
|
||||
<%- @Icon('checkbox', 'icon-unchecked') %>
|
||||
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<tr class="" data-date="<%= @placeholderDate %>">
|
||||
<td>
|
||||
<label class="checkbox-replacement">
|
||||
<input type="checkbox" checked class="js-active" name="<%= @nameActive %>" value="true">
|
||||
<input type="checkbox" checked class="js-active js-boolean" name="<%= @nameActive %>" value="true">
|
||||
<%- @Icon('checkbox', 'icon-unchecked') %>
|
||||
<%- @Icon('checkbox-checked', 'icon-checked') %>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -1,4 +1 @@
|
|||
<input id="<%= @attribute.id %>" type="<%= @attribute.type %>" name="<%= @attribute.name %>" value="<%= @attribute.value %>" class="form-control <%= @attribute.class %>" <% if @attribute.placeholder: %>placeholder="<%- @Ti(@attribute.placeholder) %>"<% end %> <%= @attribute.required %> <%= @attribute.autofocus %> <%- @attribute.autocapitalize %> <%- @attribute.autocomplete %> <% if @attribute.min isnt undefined: %> min="<%= @attribute.min %>"<% end %><% if @attribute.max isnt undefined: %> max="<%= @attribute.max %>"<% end %><% if @attribute.step: %> step="<%= @attribute.step %>"<% end %><% if @attribute.disabled: %> disabled<% end %>/>
|
||||
<% if @attribute.disabled: %>
|
||||
<input type="hidden" name="<%= @attribute.name %>" value="<%= @attribute.value %>">
|
||||
<% end %>
|
||||
<input id="<%= @attribute.id %>" type="<%= @attribute.type %>" name="<%= @attribute.name %>" value="<%= @attribute.value %>" class="form-control <%= @attribute.class %>" <% if @attribute.placeholder: %>placeholder="<%- @Ti(@attribute.placeholder) %>"<% end %> <%= @attribute.required %> <%= @attribute.autofocus %> <%- @attribute.autocapitalize %> <%- @attribute.autocomplete %> <% if @attribute.min isnt undefined: %> min="<%= @attribute.min %>"<% end %><% if @attribute.max isnt undefined: %> max="<%= @attribute.max %>"<% end %><% if @attribute.step: %> step="<%= @attribute.step %>"<% end %><% if @attribute.disabled: %> disabled<% end %>/>
|
||||
|
|
@ -9,13 +9,4 @@
|
|||
<% if not @attribute.multiple: %>
|
||||
<%- @Icon('arrow-down') %>
|
||||
<% end %>
|
||||
<% if @attribute.disabled: %>
|
||||
<% if @attribute.options: %>
|
||||
<% for row in @attribute.options: %>
|
||||
<% if row.selected: %>
|
||||
<input type="hidden" name="<%= @attribute.name %>" value="<%= row.value %>">
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,21 +6,21 @@
|
|||
<div class="select-box-header"><%- @T('Day') %></div>
|
||||
<% for day, dayLong of @days: %>
|
||||
<div data-type="day" class="select-value <% if @attribute.value.days[day]: %>is-selected<% end %>" data-value="<%- day %>"><%- @T(dayLong) %></div>
|
||||
<input type="hidden" name="{boolean}<%= @attribute.name %>::days::<%- day %>" value="<% if @attribute.value.days[day]: %>true<% else: %>false<% end %>">
|
||||
<input type="hidden" class="js-boolean" name="<%= @attribute.name %>::days::<%- day %>" value="<% if @attribute.value.days[day]: %>true<% else: %>false<% end %>">
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="select-box select-box--four js-hour">
|
||||
<div data-type="hour" class="select-box-header"><%- @T('Hour') %></div>
|
||||
<% for hour, hourLong of @hours: %>
|
||||
<div data-type="hour" class="select-value <% if @attribute.value.hours[hour]: %>is-selected<% end %>" data-value="<%- hour %>"><%- hourLong %></div>
|
||||
<input type="hidden" name="{boolean}<%= @attribute.name %>::hours::<%- hour %>" value="<% if @attribute.value.hours[hour]: %>true<% else: %>false<% end %>">
|
||||
<input type="hidden" class="js-boolean" name="<%= @attribute.name %>::hours::<%- hour %>" value="<% if @attribute.value.hours[hour]: %>true<% else: %>false<% end %>">
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="select-box select-box--vertical js-minute">
|
||||
<div data-type="minute" class="select-box-header"><%- @T('Minute') %></div>
|
||||
<% for minute, minuteLong of @minutes: %>
|
||||
<div data-type="minute" class="select-value <% if @attribute.value.minutes[minute]: %>is-selected<% end %>" data-value="<%- minute %>"><%- minuteLong %></div>
|
||||
<input type="hidden" name="{boolean}<%= @attribute.name %>::minutes::<%- minute %>" value="<% if @attribute.value.minutes[minute]: %>true<% else: %>false<% end %>">
|
||||
<input type="hidden" class="js-boolean" name="<%= @attribute.name %>::minutes::<%- minute %>" value="<% if @attribute.value.minutes[minute]: %>true<% else: %>false<% end %>">
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -273,9 +273,9 @@
|
|||
<select id="User_968887_active" class="form-control" name="active" required="">
|
||||
|
||||
|
||||
<option value="{boolean}::true" selected="">active</option>
|
||||
<option value="true" selected="">active</option>
|
||||
|
||||
<option value="{boolean}::false">inactive</option>
|
||||
<option value="false">inactive</option>
|
||||
|
||||
|
||||
</select>
|
||||
|
|
|
|||
|
|
@ -366,7 +366,7 @@
|
|||
|
||||
<div class="controls">
|
||||
<div class="u-positionOrigin">
|
||||
<select class="form-control" id="User_510389_vip" name="{boolean}vip">
|
||||
<select class="form-control" id="User_510389_vip" name="vip">
|
||||
<option selected value="false">
|
||||
no
|
||||
</option>
|
||||
|
|
@ -424,7 +424,7 @@
|
|||
|
||||
<div class="controls">
|
||||
<div class="u-positionOrigin">
|
||||
<select class="form-control" id="User_510389_active" name="{boolean}active" required="">
|
||||
<select class="form-control" id="User_510389_active" name="active" required="">
|
||||
<option selected value="true">
|
||||
active
|
||||
</option>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
<div>
|
||||
<div class="js-selectDefault"></div>
|
||||
<div class="js-selectOption"></div>
|
||||
|
||||
<table class="settings-list" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
@ -14,16 +11,16 @@
|
|||
<td class="settings-list-control-cell">
|
||||
true
|
||||
<td class="settings-list-control-cell">
|
||||
<input class="form-control form-control--small js-summary" type="text" name="summary" value="<%= @display %>" placeholder="<%- @T('yes') %>" required/>
|
||||
<input class="form-control form-control--small js-valueTrue" type="text" value="<% if @params.data_option && @params.data_option.options: %><%= @params.data_option.options[true] %><% end %>" name="data_option::options::true" placeholder="<%- @T('yes') %>" required/>
|
||||
<td class="settings-list-row-control">
|
||||
<input class="" type="radio" />
|
||||
<input class="js-selected js-boolean" type="radio" name="data_option::default" value="true" <% if @params.data_option && @params.data_option.default is true: %>checked<% end %>/>
|
||||
<tr>
|
||||
<td class="settings-list-control-cell">
|
||||
false
|
||||
<td class="settings-list-control-cell">
|
||||
<input class="form-control form-control--small js-summary" type="text" name="summary" value="<%= @display %>" placeholder="<%- @T('no') %>" required/>
|
||||
<input class="form-control form-control--small js-valueFalse" type="text" value="<% if @params.data_option && @params.data_option.options: %><%= @params.data_option.options[false] %><% end %>" name="data_option::options::false" placeholder="<%- @T('no') %>" required/>
|
||||
<td class="settings-list-row-control">
|
||||
<input class="" type="radio" />
|
||||
<input class="js-selected js-boolean" type="radio" name="data_option::default" value="false" <% if @params.data_option && @params.data_option.default is false: %>checked<% end %>/>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,4 @@
|
|||
<div>
|
||||
<div class="js-selectDefault"></div>
|
||||
<div class="js-selectOption"></div>
|
||||
|
||||
<table class="settings-list js-Table" style="width: 100%;">
|
||||
<thead>
|
||||
<tr>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
<%= screen %>
|
||||
<td class="settings-list-row-control">
|
||||
<% for key, defaultValue of options: %>
|
||||
<%- @T(key) %>: <input name="{boolean}screens::<%= screen %>::<%= role %>::<%= key %>" type="checkbox" <% if (@init && defaultValue is true) || (@params && @params.screens && @params.screens[screen] && @params.screens[screen][role] && @params.screens[screen][role][key] is true) : %>checked<% end %> value="true">
|
||||
<%- @T(key) %>: <input class="js-boolean" name="screens::<%= screen %>::<%= role %>::<%= key %>" type="checkbox" <% if (@init && defaultValue is true) || (@params && @params.screens && @params.screens[screen] && @params.screens[screen][role] && @params.screens[screen][role][key] is true) : %>checked<% end %> value="true">
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -203,6 +203,47 @@ jQuery.fn.removeAttrs = function(regex) {
|
|||
});
|
||||
};
|
||||
|
||||
// based on jquery serializeArray
|
||||
// changes
|
||||
// - set type based on data('field-type')
|
||||
// - also catch [disabled] params
|
||||
jQuery.fn.extend( {
|
||||
serializeArrayWithType: function() {
|
||||
var r20 = /%20/g,
|
||||
rbracket = /\[\]$/,
|
||||
rCRLF = /\r?\n/g,
|
||||
rsubmitterTypes = /^(?:submit|button|image|reset|file)$/i,
|
||||
rsubmittable = /^(?:input|select|textarea|keygen)/i;
|
||||
var rcheckableType = ( /^(?:checkbox|radio)$/i );
|
||||
return this.map( function() {
|
||||
|
||||
// Can add propHook for "elements" to filter or add form elements
|
||||
var elements = jQuery.prop( this, "elements" );
|
||||
return elements ? jQuery.makeArray( elements ) : this;
|
||||
} )
|
||||
.filter( function() {
|
||||
var type = this.type;
|
||||
|
||||
return this.name &&
|
||||
rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
|
||||
( this.checked || !rcheckableType.test( type ) );
|
||||
} )
|
||||
.map( function( i, elem ) {
|
||||
var $elem = jQuery( this );
|
||||
var val = $elem.val();
|
||||
var type = $elem.data('field-type');
|
||||
|
||||
return val == null ?
|
||||
null :
|
||||
jQuery.isArray( val ) ?
|
||||
jQuery.map( val, function( val ) {
|
||||
return { name: elem.name, value: val.replace( rCRLF, "\r\n" ), type: type };
|
||||
} ) :
|
||||
{ name: elem.name, value: val.replace( rCRLF, "\r\n" ), type: type };
|
||||
} ).get();
|
||||
}
|
||||
} );
|
||||
|
||||
// start application
|
||||
jQuery(function(){
|
||||
new App.Run();
|
||||
|
|
|
|||
|
|
@ -862,7 +862,7 @@ test("form required_if + shown_if", function() {
|
|||
equal(el.find('[name="input4"]').is(":visible"), false, 'check visible attribute of input4 ')
|
||||
|
||||
|
||||
el.find('[name="{boolean}active"]').val('false').trigger('change')
|
||||
el.find('[name="active"]').val('false').trigger('change')
|
||||
test_params = {
|
||||
input1: "some not used default33",
|
||||
active: false,
|
||||
|
|
@ -875,7 +875,7 @@ test("form required_if + shown_if", function() {
|
|||
equal(el.find('[name="input4"]').is(":visible"), false, 'check visible attribute of input4')
|
||||
|
||||
|
||||
el.find('[name="{boolean}active"]').val('true').trigger('change')
|
||||
el.find('[name="active"]').val('true').trigger('change')
|
||||
test_params = {
|
||||
input1: "some not used default33",
|
||||
input2: "some name66",
|
||||
|
|
|
|||
Loading…
Reference in a new issue