Improved App.ControllerForm.params(), store field types in .data() and not longer in name of field. Also use values of disabled fields.

app/assets/javascripts/app/controllers/_application_controller_form.coffee

@@ -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')
+      if lookupForm.find('[name="' + item.name + '"]').hasClass('is-hidden') || lookupForm.find('div[data-name="' + item.name + '"]').hasClass('is-hidden')
-        delete param[key.name]
+        delete param[item.name]
         continue
 
       # collect all params, push it to an array if already exists
-      if param[key.name] isnt undefined
+      value = item.value.trim()
-        if typeof param[key.name] is 'string'
+      if item.type is 'boolean'
-          param[key.name] = [param[key.name], key.value.trim()]
+        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[key.name] = key.value.trim()
+          param[item.name].push value
+      else
+        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

app/assets/javascripts/app/controllers/_ui_element/active.coffee

@@ -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

app/assets/javascripts/app/controllers/_ui_element/boolean.coffee

@@ -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
+    item = $(App.view('generic/select')(attribute: attribute))
-    $(App.view('generic/select')(attribute: attribute))
+    item.find('select').data('field-type', 'boolean')
+    item

app/assets/javascripts/app/controllers/_ui_element/holiday_selector.coffee

@@ -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

app/assets/javascripts/app/controllers/_ui_element/integer.coffee

@@ -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

app/assets/javascripts/app/controllers/_ui_element/object_manager_attribute.coffee

@@ -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 = [

app/assets/javascripts/app/controllers/_ui_element/timer.coffee

@@ -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)
     )

app/assets/javascripts/app/views/calendar/holiday_selector.jst.eco

@@ -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>

app/assets/javascripts/app/views/calendar/holiday_selector_placeholder.jst.eco

@@ -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>

app/assets/javascripts/app/views/generic/input.jst.eco

@@ -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 %>

app/assets/javascripts/app/views/generic/select.jst.eco

@@ -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>

app/assets/javascripts/app/views/generic/timer.jst.eco

@@ -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>

app/assets/javascripts/app/views/layout_ref/local_modal.jst.eco

@@ -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>

app/assets/javascripts/app/views/layout_ref/primary_email.jst.eco

@@ -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>

app/assets/javascripts/app/views/object_manager/attribute/boolean.jst.eco

@@ -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>

app/assets/javascripts/app/views/object_manager/attribute/select.jst.eco

@@ -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>

app/assets/javascripts/app/views/object_manager/screens.jst.eco

@@ -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 %>

app/assets/javascripts/application.js

@@ -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();

public/assets/tests/form.js

@@ -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",