Init version of new form generator.
This commit is contained in:
Martin Edenhofer
parent
497b1846cc
commit
388437ef18
4 changed files with 495 additions and 69 deletions
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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' );
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue