Init version of new form generator.

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

@@ -6,10 +6,14 @@ class App.ControllerForm extends App.Controller
 
     if !@form
       @form = @formGen()
-#    @log 'form', @form
     if @el
       @el.prepend( @form )
 
+    # trigger change to rebuild shown/hidden item and update sub selections
+    @form.find('input').trigger('change')
+    @form.find('textarea').trigger('change')
+    @form.find('select').trigger('change')
+
   html: =>
     @form.html()
 
@@ -32,7 +36,7 @@ class App.ControllerForm extends App.Controller
         # if password, add confirm password item
         if attribute.type is 'password'
 
-          # get existing value, if exists
+          # set selected value passed on current params
           if @params
             if attribute.name of @params
               attribute.value = @params[attribute.name]
@@ -155,7 +159,11 @@ class App.ControllerForm extends App.Controller
     else
       attribute.autocomplete = 'autocomplete="' + attribute.autocomplete + '"'
 
-    # set value
+    # set default values
+    if attribute.value is undefined && 'default' of attribute
+      attribute.value = attribute.default
+
+    # set params value
     if @params
 
       # check if we have a references
@@ -163,15 +171,10 @@ class App.ControllerForm extends App.Controller
       if parts[0] && parts[1]
         if @params[ parts[0] ] && @params[ parts[0] ][ parts[1] ]
           attribute.value = @params[ parts[0] ][ parts[1] ]
-      else
-        attribute.value = @params[ attribute.name ]
 
-    # set default value
-    else
-      if 'default' of attribute
-        attribute.value = attribute.default
-      else
-        attribute.value = ''
+      # set params value to default
+      if attribute.name of @params
+        attribute.value = @params[attribute.name]
 
     App.Log.log 'ControllerForm', 'debug', 'formGenItem-before', attribute
 
@@ -994,17 +997,65 @@ class App.ControllerForm extends App.Controller
             form.find('[name="' + toChangeAttribute + '"]').replaceWith( newElement )
     )
 
+    # bind dependency
+    if @dependency
+      for action in @dependency
+
+        # bind on element if name is matching
+        if action.bind && action.bind.name is attribute.name
+          ui = @
+          do (action, attribute) ->
+            item.bind('change', ->
+              value = $(@).val()
+
+              # lookup relation if needed
+              if action.bind.relation
+                data = App[action.bind.relation].find( value )
+                value = data.name
+
+              # check if value is used in condition
+              if _.contains( action.bind.value, value )
+                if action.change.action is 'hide'
+                  ui._hide(action.change.name)
+                else
+                  ui._show(action.change.name)
+            )
+
     if !attribute.display
+
+      # hide/show item
+      #if attribute.hide
+      #  @._hide(attribute.name)
+
       return item
     else
-      a = $(
+      fullItem = $(
         App.view('generic/attribute')(
           attribute: attribute,
           item:      '',
         )
       )
-      a.find('.controls').prepend( item )
-      return a
+      fullItem.find('.controls').prepend( item )
+
+      # hide/show item
+      if attribute.hide
+        @._hide(attribute.name, fullItem)
+
+      return fullItem
+
+  _show: (name, el = @el) ->
+    if !_.isArray(name)
+      name = [name]
+    for key in name
+      el.find('[name="' + key + '"]').parents('.control-group').removeClass('hide')
+      el.find('[name="' + key + '"]').removeClass('is-hidden')
+
+  _hide: (name, el = @el) ->
+    if !_.isArray(name)
+      name = [name]
+    for key in name
+      el.find('[name="' + key + '"]').parents('.control-group').addClass('hide')
+      el.find('[name="' + key + '"]').addClass('is-hidden')
 
   # sort attribute.options
   _sortOptions: (attribute) ->
@@ -1203,7 +1254,15 @@ class App.ControllerForm extends App.Controller
       App.Log.log 'ControllerForm', 'error', 'no form found!', form
 
     array = form.serializeArray()
+
+    # 1:1 and boolean params
     for key in array
+
+      # check if item is-hidden and should not be used
+      if form.find('[name="' + key.name + '"]').hasClass('is-hidden')
+        continue
+
+      # collect all other params
       if param[key.name]
         if typeof param[key.name] is 'string'
           param[key.name] = [ param[key.name], key.value]

app/assets/javascripts/app/controllers/agent_ticket_zoom.js.coffee

@@ -163,36 +163,35 @@ class App.TicketZoom extends App.Controller
     for article in @articles
       new Article( article: article )
 
-    defaults = @form_state || {}
 
     @configure_attributes_ticket = [
-      { name: 'ticket_state_id',    display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', filter: @edit_form, translate: true, class: 'span2', item_class: 'pull-left', default: defaults['ticket_state_id'] },
-      { name: 'ticket_priority_id', display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', filter: @edit_form, translate: true, class: 'span2', item_class: 'pull-left', default: defaults['ticket_priority_id'] },
-      { name: 'group_id',           display: 'Group',    tag: 'select',   multiple: false, null: true, relation: 'Group', filter: @edit_form, class: 'span2', item_class: 'pull-left', default: defaults['group_id']  },
-      { name: 'owner_id',           display: 'Owner',    tag: 'select',   multiple: false, null: true, relation: 'User', filter: @edit_form, nulloption: true, class: 'span2', item_class: 'pull-left', default: defaults['owner_id'] },
+      { name: 'ticket_state_id',    display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', filter: @edit_form, translate: true, class: 'span2', item_class: 'pull-left' },
+      { name: 'ticket_priority_id', display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', filter: @edit_form, translate: true, class: 'span2', item_class: 'pull-left' },
+      { name: 'group_id',           display: 'Group',    tag: 'select',   multiple: false, null: true, relation: 'Group', filter: @edit_form, class: 'span2', item_class: 'pull-left'  },
+      { name: 'owner_id',           display: 'Owner',    tag: 'select',   multiple: false, null: true, relation: 'User', filter: @edit_form, nulloption: true, class: 'span2', item_class: 'pull-left' },
     ]
     if @isRole('Customer')
       @configure_attributes_ticket = [
-        { name: 'ticket_state_id',    display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', filter: @edit_form, translate: true, class: 'span2', item_class: 'pull-left', default: defaults['ticket_state_id'] },
-        { name: 'ticket_priority_id', display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', filter: @edit_form, translate: true, class: 'span2', item_class: 'pull-left', default: defaults['ticket_priority_id'] },
+        { name: 'ticket_state_id',    display: 'State',    tag: 'select',   multiple: false, null: true, relation: 'TicketState', filter: @edit_form, translate: true, class: 'span2', item_class: 'pull-left' },
+        { name: 'ticket_priority_id', display: 'Priority', tag: 'select',   multiple: false, null: true, relation: 'TicketPriority', filter: @edit_form, translate: true, class: 'span2', item_class: 'pull-left' },
       ]
 
     @configure_attributes_article = [
-      { name: 'ticket_article_type_id',   display: 'Type',        tag: 'select',   multiple: false, null: true, relation: 'TicketArticleType', filter: @edit_form, default: '9', translate: true, class: 'medium', item_class: '', default: defaults['ticket_article_type_id'] },
-      { name: 'to',                       display: 'To',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide', default: defaults['to'] },
-      { name: 'cc',                       display: 'Cc',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide', default: defaults['cc'] },
-      { name: 'subject',                  display: 'Subject',     tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide', default: defaults['subject'] },
-      { name: 'in_reply_to',              display: 'In Reply to', tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide', default: defaults['in_reply_to'] },
-      { name: 'body',                     display: 'Text',        tag: 'textarea', rows: 6,  limit: 100, null: true, class: 'span7', item_class: '', upload: true, default: defaults['body']  },
-      { name: 'internal',                 display: 'Visability',  tag: 'select',   default: false,  null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: '', default: defaults['internal'] },
+      { name: 'ticket_article_type_id',   display: 'Type',        tag: 'select',   multiple: false, null: true, relation: 'TicketArticleType', filter: @edit_form, default: '9', translate: true, class: 'medium' },
+      { name: 'to',                       display: 'To',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', hide: true },
+      { name: 'cc',                       display: 'Cc',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', hide: true },
+#      { name: 'subject',                  display: 'Subject',     tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', hide: true },
+      { name: 'in_reply_to',              display: 'In Reply to', tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide' },
+      { name: 'body',                     display: 'Text',        tag: 'textarea', rows: 6,  limit: 100, null: true, class: 'span7', item_class: '', upload: true },
+      { name: 'internal',                 display: 'Visability',  tag: 'select',   null: true, options: { true: 'internal', false: 'public' }, class: 'medium', item_class: '', default: false },
     ]
     if @isRole('Customer')
       @configure_attributes_article = [
-        { name: 'to',                       display: 'To',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide', default: defaults['to'] },
-        { name: 'cc',                       display: 'Cc',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide', default: defaults['cc'] },
-        { name: 'subject',                  display: 'Subject',     tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide', default: defaults['subject'] },
-        { name: 'in_reply_to',              display: 'In Reply to', tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide', default: defaults['in_reply_to'] },
-        { name: 'body',                     display: 'Text',        tag: 'textarea', rows: 6,  limit: 100, null: true, class: 'span7', item_class: '', upload: true, default: defaults['body']  },
+        { name: 'to',                       display: 'To',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', hide: true },
+        { name: 'cc',                       display: 'Cc',          tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', hide: true },
+#        { name: 'subject',                  display: 'Subject',     tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', hide: true },
+        { name: 'in_reply_to',              display: 'In Reply to', tag: 'input',    type: 'text', limit: 100, null: true, class: 'span7', item_class: 'hide' },
+        { name: 'body',                     display: 'Text',        tag: 'textarea', rows: 6,  limit: 100, null: true, class: 'span7', item_class: '', upload: true },
       ]
 
     @html App.view('agent_ticket_zoom')(
@@ -202,13 +201,14 @@ class App.TicketZoom extends App.Controller
       isCustomer: @isRole('Customer')
     )
 
+    defaults = @form_state || @ticket
     new App.ControllerForm(
       el:        @el.find('[data-id="form-ticket-update"]')
       form_id:   @form_id
       model:
         configure_attributes: @configure_attributes_ticket
         className:            'update_ticket_' + @ticket.id
-      params:    @ticket
+      params:    defaults
       form_data: @edit_form
     )
 
@@ -219,6 +219,31 @@ class App.TicketZoom extends App.Controller
         configure_attributes: @configure_attributes_article
         className:            'update_ticket_' + @ticket.id
       form_data: @edit_form
+      params:    defaults
+      dependency: [
+        {
+          bind: {
+            name:     'ticket_article_type_id'
+            relation: 'TicketArticleType'
+            value:    ["email"]
+          },
+          change: {
+            action: 'show'
+            name: ['to', 'cc'],
+          },
+        },
+        {
+          bind: {
+            name:     'ticket_article_type_id'
+            relation: 'TicketArticleType'
+            value:    ['note', 'twitter status', 'twitter direct-message']
+          },
+          change: {
+            action: 'hide'
+            name: ['to', 'cc'],
+          },
+        },
+      ]
     )
 
     @el.find('textarea').elastic()
@@ -318,36 +343,9 @@ class App.TicketZoom extends App.Controller
     @form_update_execute(article_type)
 
   form_update_execute: (article_type) =>
-    if article_type.name is 'twitter status'
-
-      # hide to
-      @el.find('[name="to"]').parents('.control-group').addClass('hide')
-      @el.find('[name="cc"]').parents('.control-group').addClass('hide')
-      @el.find('[name="subject"]').parents('.control-group').addClass('hide')
-
-    else if article_type.name is 'twitter direct-message'
-
-      # show
-      @el.find('[name="to"]').parents('.control-group').removeClass('hide')
-      @el.find('[name="cc"]').parents('.control-group').addClass('hide')
-      @el.find('[name="subject"]').parents('.control-group').addClass('hide')
-
-    else if article_type.name is 'note'
-
-      # hide to
-      @el.find('[name="to"]').parents('.control-group').addClass('hide')
-      @el.find('[name="cc"]').parents('.control-group').addClass('hide')
-      @el.find('[name="subject"]').parents('.control-group').addClass('hide')
-
-    else if article_type.name is 'email'
-
-      # show
-      @el.find('[name="to"]').parents('.control-group').removeClass('hide')
-      @el.find('[name="cc"]').parents('.control-group').removeClass('hide')
-#      @el.find('[name="subject"]').parents('.control-group').removeClass('hide')
 
       # add signature
-      if !@signature_used && @signature && @signature.body
+      if !@form_state && !@signature_used && @signature && @signature.body
         @signature_used = true
         body = @el.find('[name="body"]').val() || ''
         body = body + "\n" + @signature.body

app/views/tests/index.html.erb

@@ -13,3 +13,12 @@ body {
 </script>
 
 <div id="qunit"></div>
+
+<div>
+  <form class="form-stacked pull-left">
+    <div id="forms"></div>
+    <button type="submit" class="btn btn-primary submit">Submit</button>
+  </form>
+</div>
+
+

public/assets/tests/tests.js

@@ -410,12 +410,6 @@ test( "config", function() {
   });
 });
 
-// form
-/*
-test( "form", function() {
-
-});
-*/
 
 // auth
 App.Auth.login({
@@ -455,4 +449,370 @@ var authWithSession = function() {
       })
     }
   });
-}
+}
+
+// form
+test( "form elements check", function() {
+//    deepEqual( item, test.value, 'group set/get tests' );
+  $('#forms').append('<hr><h1>form elements check</h1><form id="form1"></form>')
+  var el = $('#form1')
+  var defaults = {
+    input2: '123abc',
+    password2: 'pw1234<l>',
+    textarea2: 'lalu <l> lalu',
+    select1: false,
+    select2: true,
+    selectmulti1: false,
+    selectmulti2: [ false, true ],
+    selectmultioption1: false,
+    selectmultioption2: [ false, true ]
+  }
+  new App.ControllerForm({
+    el:        el,
+    model:     {
+      configure_attributes: [
+        { name: 'input1', display: 'Input1', tag: 'input', type: 'text', limit: 100, null: true, default: defaults['input1'] },
+        { name: 'input2', display: 'Input2', tag: 'input', type: 'text', limit: 100, null: false, default: defaults['input2'] },
+        { name: 'password1', display: 'Password1', tag: 'input', type: 'password', limit: 100, null: true, default: defaults['password1'] },
+        { name: 'password2', display: 'Password2', tag: 'input', type: 'password', limit: 100, null: false, default: defaults['password2'] },
+        { name: 'textarea1', display: 'Textarea1', tag: 'textarea', rows: 6, limit: 100, null: true, upload: true, default: defaults['textarea1']  },
+        { name: 'textarea2', display: 'Textarea2', tag: 'textarea', rows: 6, limit: 100, null: false, upload: true, default: defaults['textarea2']  },
+        { name: 'select1', display: 'Select1', tag: 'select', null: true, options: { true: 'internal', false: 'public' }, default: defaults['select1'] },
+        { name: 'select2', display: 'Select2', tag: 'select', null: false, options: { true: 'internal', false: 'public' }, default: defaults['select2'] },
+        { name: 'selectmulti1', display: 'SelectMulti1', tag: 'select', null: true, multiple: true, options: { true: 'internal', false: 'public' }, default: defaults['selectmulti1'] },
+        { name: 'selectmulti2', display: 'SelectMulti2', tag: 'select', null: false, multiple: true, options: { true: 'internal', false: 'public' }, default: defaults['selectmulti2'] },
+        { name: 'selectmultioption1', display: 'SelectMultiOption1', tag: 'select', null: true, multiple: true, options: [{ value: true, name: 'internal' }, { value: false, name: 'public' }], default: defaults['selectmultioption1'] },
+        { name: 'selectmultioption2', display: 'SelectMultiOption2', tag: 'select', null: false, multiple: true, options: [{ value: true, name: 'A' }, { value: 1, name: 'B'}, { value: false, name: 'C' }], default: defaults['selectmultioption2'] },
+
+      ]
+    },
+    autofocus: true
+  });
+  equal( el.find('[name="input1"]').val(), '', 'check input1 value')
+  equal( el.find('[name="input1"]').prop('required'), false, 'check input1 required')
+//  equal( el.find('[name="input1"]').is(":focus"), true, 'check input1 focus')
+
+  equal( el.find('[name="input2"]').val(), '123abc', 'check input2 value')
+  equal( el.find('[name="input2"]').prop('required'), true, 'check input2 required')
+  equal( el.find('[name="input2"]').is(":focus"), false, 'check input2 focus')
+
+  equal( el.find('[name="password1"]').val(), '', 'check password1 value')
+  equal( el.find('[name="password1_confirm"]').val(), '', 'check password1 value')
+  equal( el.find('[name="password1"]').prop('required'), false, 'check password1 required')
+  equal( el.find('[name="password1"]').is(":focus"), false, 'check password1 focus')
+
+  equal( el.find('[name="password2"]').val(), 'pw1234<l>', 'check password2 value')
+  equal( el.find('[name="password2_confirm"]').val(), 'pw1234<l>', 'check password2 value')
+  equal( el.find('[name="password2"]').prop('required'), true, 'check password2 required')
+  equal( el.find('[name="password2"]').is(":focus"), false, 'check password2 focus')
+
+  equal( el.find('[name="textarea1"]').val(), '', 'check textarea1 value')
+  equal( el.find('[name="textarea1"]').prop('required'), false, 'check textarea1 required')
+  equal( el.find('[name="textarea1"]').is(":focus"), false, 'check textarea1 focus')
+
+  equal( el.find('[name="textarea2"]').val(), 'lalu <l> lalu', 'check textarea2 value')
+  equal( el.find('[name="textarea2"]').prop('required'), true, 'check textarea2 required')
+  equal( el.find('[name="textarea2"]').is(":focus"), false, 'check textarea2 focus')
+
+  equal( el.find('[name="select1"]').val(), 'false', 'check select1 value')
+  equal( el.find('[name="select1"]').prop('required'), false, 'check select1 required')
+  equal( el.find('[name="select1"]').is(":focus"), false, 'check select1 focus')
+
+  equal( el.find('[name="select2"]').val(), 'true', 'check select2 value')
+  equal( el.find('[name="select2"]').prop('required'), true, 'check select2 required')
+  equal( el.find('[name="select2"]').is(":focus"), false, 'check select2 focus')
+
+  equal( el.find('[name="selectmulti1"]').val(), 'false', 'check selectmulti1 value')
+  equal( el.find('[name="selectmulti1"]').prop('required'), false, 'check selectmulti1 required')
+  equal( el.find('[name="selectmulti1"]').is(":focus"), false, 'check selectmulti1 focus')
+
+  equal( el.find('[name="selectmulti2"]').val()[0], 'true', 'check selectmulti2 value')
+  equal( el.find('[name="selectmulti2"]').val()[1], 'false', 'check selectmulti2 value')
+  equal( el.find('[name="selectmulti2"]').prop('required'), true, 'check selectmulti2 required')
+  equal( el.find('[name="selectmulti2"]').is(":focus"), false, 'check selectmulti2 focus')
+
+});
+
+test( "form params check", function() {
+//    deepEqual( item, test.value, 'group set/get tests' );
+
+  $('#forms').append('<hr><h1>form params check</h1><form id="form2"></form>')
+  var el = $('#form2')
+  var defaults = {
+    input2: '123abc',
+    password2: 'pw1234<l>',
+    textarea2: 'lalu <l> lalu',
+    select1: false,
+    select2: true,
+    selectmulti1: false,
+    selectmulti2: [ false, true ],
+    selectmultioption1: false,
+    selectmultioption2: [ false, true ]
+  }
+  new App.ControllerForm({
+    el:        el,
+    model:     {
+      configure_attributes: [
+        { name: 'input1', display: 'Input1', tag: 'input', type: 'text', limit: 100, null: true },
+        { name: 'input2', display: 'Input2', tag: 'input', type: 'text', limit: 100, null: false },
+        { name: 'password1', display: 'Password1', tag: 'input', type: 'password', limit: 100, null: true },
+        { name: 'password2', display: 'Password2', tag: 'input', type: 'password', limit: 100, null: false },
+        { name: 'textarea1', display: 'Textarea1', tag: 'textarea', rows: 6, limit: 100, null: true, upload: true },
+        { name: 'textarea2', display: 'Textarea2', tag: 'textarea', rows: 6, limit: 100, null: false, upload: true },
+        { name: 'select1', display: 'Select1', tag: 'select', null: true, options: { true: 'internal', false: 'public' } },
+        { name: 'select2', display: 'Select2', tag: 'select', null: false, options: { true: 'internal', false: 'public' } },
+        { name: 'selectmulti1', display: 'SelectMulti1', tag: 'select', null: true, multiple: true, options: { true: 'internal', false: 'public' } },
+        { name: 'selectmulti2', display: 'SelectMulti2', tag: 'select', null: false, multiple: true, options: { true: 'internal', false: 'public' } },
+        { name: 'selectmultioption1', display: 'SelectMultiOption1', tag: 'select', null: true, multiple: true, options: [{ value: true, name: 'internal' }, { value: false, name: 'public' }] },
+        { name: 'selectmultioption2', display: 'SelectMultiOption2', tag: 'select', null: false, multiple: true, options: [{ value: true, name: 'A' }, { value: 1, name: 'B'}, { value: false, name: 'C' }] },
+
+      ],
+    },
+    params: defaults,
+    autofocus: true
+  });
+  equal( el.find('[name="input1"]').val(), '', 'check input1 value')
+  equal( el.find('[name="input1"]').prop('required'), false, 'check input1 required')
+//  equal( el.find('[name="input1"]').is(":focus"), true, 'check input1 focus')
+
+  equal( el.find('[name="input2"]').val(), '123abc', 'check input2 value')
+  equal( el.find('[name="input2"]').prop('required'), true, 'check input2 required')
+  equal( el.find('[name="input2"]').is(":focus"), false, 'check input2 focus')
+
+  equal( el.find('[name="password1"]').val(), '', 'check password1 value')
+  equal( el.find('[name="password1_confirm"]').val(), '', 'check password1 value')
+  equal( el.find('[name="password1"]').prop('required'), false, 'check password1 required')
+  equal( el.find('[name="password1"]').is(":focus"), false, 'check password1 focus')
+
+  equal( el.find('[name="password2"]').val(), 'pw1234<l>', 'check password2 value')
+  equal( el.find('[name="password2_confirm"]').val(), 'pw1234<l>', 'check password2 value')
+  equal( el.find('[name="password2"]').prop('required'), true, 'check password2 required')
+  equal( el.find('[name="password2"]').is(":focus"), false, 'check password2 focus')
+
+  equal( el.find('[name="textarea1"]').val(), '', 'check textarea1 value')
+  equal( el.find('[name="textarea1"]').prop('required'), false, 'check textarea1 required')
+  equal( el.find('[name="textarea1"]').is(":focus"), false, 'check textarea1 focus')
+
+  equal( el.find('[name="textarea2"]').val(), 'lalu <l> lalu', 'check textarea2 value')
+  equal( el.find('[name="textarea2"]').prop('required'), true, 'check textarea2 required')
+  equal( el.find('[name="textarea2"]').is(":focus"), false, 'check textarea2 focus')
+
+  equal( el.find('[name="select1"]').val(), 'false', 'check select1 value')
+  equal( el.find('[name="select1"]').prop('required'), false, 'check select1 required')
+  equal( el.find('[name="select1"]').is(":focus"), false, 'check select1 focus')
+
+  equal( el.find('[name="select2"]').val(), 'true', 'check select2 value')
+  equal( el.find('[name="select2"]').prop('required'), true, 'check select2 required')
+  equal( el.find('[name="select2"]').is(":focus"), false, 'check select2 focus')
+
+  equal( el.find('[name="selectmulti1"]').val(), 'false', 'check selectmulti1 value')
+  equal( el.find('[name="selectmulti1"]').prop('required'), false, 'check selectmulti1 required')
+  equal( el.find('[name="selectmulti1"]').is(":focus"), false, 'check selectmulti1 focus')
+
+  equal( el.find('[name="selectmulti2"]').val()[0], 'true', 'check selectmulti2 value')
+  equal( el.find('[name="selectmulti2"]').val()[1], 'false', 'check selectmulti2 value')
+  equal( el.find('[name="selectmulti2"]').prop('required'), true, 'check selectmulti2 required')
+  equal( el.find('[name="selectmulti2"]').is(":focus"), false, 'check selectmulti2 focus')
+
+});
+
+test( "form defaults + params check", function() {
+//    deepEqual( item, test.value, 'group set/get tests' );
+
+// mix default and params -> check it -> add note
+// test auto completion
+// show/hide fields base on field values -> bind changed event
+// form validation
+// form params check
+
+// add signature only if form_state is empty
+  $('#forms').append('<hr><h1>form defaults + params check</h1><form id="form3"></form>')
+  var el = $('#form3')
+  var defaults = {
+    input1: '',
+    password2: 'pw1234<l>',
+    textarea2: 'lalu <l> lalu',
+    select2: false,
+    selectmulti2: [ false, true ],
+    selectmultioption1: false,
+  }
+  new App.ControllerForm({
+    el:        el,
+    model:     {
+      configure_attributes: [
+        { name: 'input1', display: 'Input1', tag: 'input', type: 'text', limit: 100, null: true, default: 'some not used default' },
+        { name: 'input2', display: 'Input2', tag: 'input', type: 'text', limit: 100, null: true, default: 'some used default' },
+        { name: 'password1', display: 'Password1', tag: 'input', type: 'password', limit: 100, null: false, default: 'some used pass' },
+        { name: 'password2', display: 'Password2', tag: 'input', type: 'password', limit: 100, null: false, default: 'some not used pass' },
+        { name: 'textarea1', display: 'Textarea1', tag: 'textarea', rows: 6, limit: 100, null: false, upload: true, default: 'some used text' },
+        { name: 'textarea2', display: 'Textarea2', tag: 'textarea', rows: 6, limit: 100, null: false, upload: true, default: 'some not used text' },
+        { name: 'select1', display: 'Select1', tag: 'select', null: true, options: { true: 'internal', false: 'public' }, default: false},
+        { name: 'select2', display: 'Select2', tag: 'select', null: true, options: { true: 'internal', false: 'public' }, default: true },
+        { name: 'selectmulti2', display: 'SelectMulti2', tag: 'select', null: false, multiple: true, options: { true: 'internal', false: 'public' }, default: [] },
+        { name: 'selectmultioption1', display: 'SelectMultiOption1', tag: 'select', null: true, multiple: true, options: [{ value: true, name: 'internal' }, { value: false, name: 'public' }], default: true },
+      ],
+    },
+    params: defaults,
+    autofocus: true
+  });
+  equal( el.find('[name="input1"]').val(), '', 'check input1 value')
+  equal( el.find('[name="input1"]').prop('required'), false, 'check input1 required')
+//  equal( el.find('[name="input1"]').is(":focus"), true, 'check input1 focus')
+  equal( el.find('[name="input2"]').val(), 'some used default', 'check input2 value')
+  equal( el.find('[name="input2"]').prop('required'), false, 'check input2 required')
+
+  equal( el.find('[name="password1"]').val(), 'some used pass', 'check password1 value')
+  equal( el.find('[name="password1_confirm"]').val(), 'some used pass', 'check password1 value')
+  equal( el.find('[name="password1"]').prop('required'), true, 'check password1 required')
+  equal( el.find('[name="password1"]').is(":focus"), false, 'check password1 focus')
+
+  equal( el.find('[name="password2"]').val(), 'pw1234<l>', 'check password2 value')
+  equal( el.find('[name="password2_confirm"]').val(), 'pw1234<l>', 'check password2 value')
+  equal( el.find('[name="password2"]').prop('required'), true, 'check password2 required')
+  equal( el.find('[name="password2"]').is(":focus"), false, 'check password2 focus')
+
+  equal( el.find('[name="textarea1"]').val(), 'some used text', 'check textarea1 value')
+  equal( el.find('[name="textarea1"]').prop('required'), true, 'check textarea1 required')
+  equal( el.find('[name="textarea1"]').is(":focus"), false, 'check textarea1 focus')
+
+  equal( el.find('[name="textarea2"]').val(), 'lalu <l> lalu', 'check textarea2 value')
+  equal( el.find('[name="textarea2"]').prop('required'), true, 'check textarea2 required')
+  equal( el.find('[name="textarea2"]').is(":focus"), false, 'check textarea2 focus')
+
+  equal( el.find('[name="select1"]').val(), 'false', 'check select1 value')
+  equal( el.find('[name="select1"]').prop('required'), false, 'check select1 required')
+  equal( el.find('[name="select1"]').is(":focus"), false, 'check select1 focus')
+
+  equal( el.find('[name="select2"]').val(), 'false', 'check select2 value')
+  equal( el.find('[name="select2"]').prop('required'), false, 'check select2 required')
+  equal( el.find('[name="select2"]').is(":focus"), false, 'check select2 focus')
+
+  equal( el.find('[name="selectmulti2"]').val()[0], 'true', 'check selectmulti2 value')
+  equal( el.find('[name="selectmulti2"]').val()[1], 'false', 'check selectmulti2 value')
+  equal( el.find('[name="selectmulti2"]').prop('required'), true, 'check selectmulti2 required')
+  equal( el.find('[name="selectmulti2"]').is(":focus"), false, 'check selectmulti2 focus')
+
+});
+
+test( "form dependend fields check", function() {
+//    deepEqual( item, test.value, 'group set/get tests' );
+
+// mix default and params -> check it -> add note
+// test auto completion
+// show/hide fields base on field values -> bind changed event
+// form validation
+// form params check
+
+// add signature only if form_state is empty
+  $('#forms').append('<hr><h1>form dependend fields check</h1><form id="form4"></form>')
+  var el = $('#form4')
+  var defaults = {
+    input1: '',
+    select2: false,
+    selectmulti2: [ false, true ],
+    selectmultioption1: false,
+  }
+  new App.ControllerForm({
+    el:        el,
+    model:     {
+      configure_attributes: [
+        { name: 'input1', display: 'Input1', tag: 'input', type: 'text', limit: 100, null: true, default: 'some not used default' },
+        { name: 'input2', display: 'Input2', tag: 'input', type: 'text', limit: 100, null: true, default: 'some used default' },
+        { name: 'input3', display: 'Input3', tag: 'input', type: 'text', limit: 100, null: true, hide: true, default: 'some used default' },
+        { name: 'select1', display: 'Select1', tag: 'select', null: true, options: { true: 'internal', false: 'public' }, default: false},
+        { name: 'select2', display: 'Select2', tag: 'select', null: true, options: { true: 'internal', false: 'public' }, default: true },
+        { name: 'selectmulti2', display: 'SelectMulti2', tag: 'select', null: false, multiple: true, options: { true: 'internal', false: 'public' }, default: [] },
+        { name: 'selectmultioption1', display: 'SelectMultiOption1', tag: 'select', null: true, multiple: true, options: [{ value: true, name: 'internal' }, { value: false, name: 'public' }], default: true },
+      ],
+    },
+    params: defaults,
+    dependency: [
+      {
+        bind: {
+          name: 'select1',
+          value: ["true"]
+        },
+        change: {
+          name: 'input2',
+          action: 'hide'
+        },
+      },
+      {
+        bind: {
+          name: 'select1',
+          value: ["false"]
+        },
+        change: {
+          name: 'input2',
+          action: 'show'
+        },
+      },
+      {
+        bind: {
+          name: 'select1',
+          value: ["true"]
+        },
+        change: {
+          name: 'input3',
+          action: 'show'
+        },
+      },
+      {
+        bind: {
+          name: 'select1',
+          value: ["false"]
+        },
+        change: {
+          name: 'input3',
+          action: 'hide'
+        },
+      }
+    ],
+    autofocus: true
+  });
+  equal( el.find('[name="input1"]').val(), '', 'check input1 value')
+  equal( el.find('[name="input1"]').prop('required'), false, 'check input1 required')
+//  equal( el.find('[name="input1"]').is(":focus"), true, 'check input1 focus')
+  equal( el.find('[name="input2"]').val(), 'some used default', 'check input2 value')
+  equal( el.find('[name="input2"]').prop('required'), false, 'check input2 required')
+
+  equal( el.find('[name="input3"]').val(), 'some used default', 'check input3 value')
+  equal( el.find('[name="input3"]').prop('required'), false, 'check input3 required')
+
+  equal( el.find('[name="select1"]').val(), 'false', 'check select1 value')
+  equal( el.find('[name="select1"]').prop('required'), false, 'check select1 required')
+  equal( el.find('[name="select1"]').is(":focus"), false, 'check select1 focus')
+
+  equal( el.find('[name="select2"]').val(), 'false', 'check select2 value')
+  equal( el.find('[name="select2"]').prop('required'), false, 'check select2 required')
+  equal( el.find('[name="select2"]').is(":focus"), false, 'check select2 focus')
+
+  equal( el.find('[name="selectmulti2"]').val()[0], 'true', 'check selectmulti2 value')
+  equal( el.find('[name="selectmulti2"]').val()[1], 'false', 'check selectmulti2 value')
+  equal( el.find('[name="selectmulti2"]').prop('required'), true, 'check selectmulti2 required')
+  equal( el.find('[name="selectmulti2"]').is(":focus"), false, 'check selectmulti2 focus')
+
+  var params = App.ControllerForm.params( el )
+  var test_params = {
+    input1: "",
+    input2: "some used default",
+    select1: "false",
+    select2: "false",
+    selectmulti2: [ "true", "false" ],
+    selectmultioption1: "false"
+  }
+  deepEqual( params, test_params, 'form param check' );
+  el.find('[name="select1"]').val('true')
+  el.find('[name="select1"]').trigger('change')
+  params = App.ControllerForm.params( el )
+  test_params = {
+    input1: "",
+    input3: "some used default",
+    select1: "true",
+    select2: "false",
+    selectmulti2: [ "true", "false" ],
+    selectmultioption1: "false"
+  }
+  deepEqual( params, test_params, 'form param check' );
+});
+