diff --git a/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee b/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee index 8e1042fdf..fa2c94695 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee +++ b/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] diff --git a/app/assets/javascripts/app/controllers/agent_ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/agent_ticket_zoom.js.coffee index 281735b4c..17f3772db 100644 --- a/app/assets/javascripts/app/controllers/agent_ticket_zoom.js.coffee +++ b/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 diff --git a/app/views/tests/index.html.erb b/app/views/tests/index.html.erb index 525f6454e..53fa63853 100644 --- a/app/views/tests/index.html.erb +++ b/app/views/tests/index.html.erb @@ -13,3 +13,12 @@ body {
+ +
+
+
+ +
+
+ + diff --git a/public/assets/tests/tests.js b/public/assets/tests/tests.js index 6d54abea5..444b179ae 100644 --- a/public/assets/tests/tests.js +++ b/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() { }) } }); -} \ No newline at end of file +} + +// form +test( "form elements check", function() { +// deepEqual( item, test.value, 'group set/get tests' ); + $('#forms').append('

form elements check

') + var el = $('#form1') + var defaults = { + input2: '123abc', + password2: 'pw1234', + textarea2: 'lalu 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', 'check password2 value') + equal( el.find('[name="password2_confirm"]').val(), 'pw1234', '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 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('

form params check

') + var el = $('#form2') + var defaults = { + input2: '123abc', + password2: 'pw1234', + textarea2: 'lalu 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', 'check password2 value') + equal( el.find('[name="password2_confirm"]').val(), 'pw1234', '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 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('

form defaults + params check

') + var el = $('#form3') + var defaults = { + input1: '', + password2: 'pw1234', + textarea2: 'lalu 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', 'check password2 value') + equal( el.find('[name="password2_confirm"]').val(), 'pw1234', '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 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('

form dependend fields check

') + 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' ); +}); +