Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Refactoring of perform/set attributes in trigger and postmaster filter ui (now use clean template - not side effects regarding autocompletion and tags).

Browse source
This commit is contained in:
Martin Edenhofer 2018-07-11 09:40:23 +02:00
parent 370b1a2645
commit ae3e2141b1
7 changed files with 139 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
app/assets/javascripts/app/controllers/_ui_element/postmaster_set.coffee
View file

@ -72,10 +72,7 @@ class App.UiElement.postmaster_set
elements = {} elements = {}
for groupKey, groupMeta of groups for groupKey, groupMeta of groups
if !App[groupMeta.model] if groupMeta.model && App[groupMeta.model]
elements["#{groupKey}.email"] = { name: 'email', display: 'Email' }
else
for row in App[groupMeta.model].configure_attributes for row in App[groupMeta.model].configure_attributes
# ignore passwords and relations # ignore passwords and relations
@ -117,32 +114,39 @@ class App.UiElement.postmaster_set
[elements, groups] [elements, groups]
@placeholder: (elementFull, attribute, params = {}, groups) ->
item = $( App.view('generic/postmaster_set_row')( attribute: attribute ) )
selector = @buildAttributeSelector(elementFull, groups, attribute, item)
item.find('.js-attributeSelector').prepend(selector)
item
@render: (attribute, params = {}) -> @render: (attribute, params = {}) ->
[elements, groups] = @defaults() [elements, groups] = @defaults()
selector = @buildAttributeSelector(groups, attribute)
# scaffold of match elements # scaffold of match elements
item = $( App.view('generic/postmaster_set')( attribute: attribute ) ) item = $( App.view('generic/postmaster_set')( attribute: attribute ) )
item.find('.js-attributeSelector').prepend(selector)
# add filter # add filter
item.find('.js-add').bind('click', (e) -> item.on('click', '.js-add', (e) =>
element = $(e.target).closest('.js-filterElement') element = $(e.target).closest('.js-filterElement')
elementClone = element.clone(true) placeholder = @placeholder(item, attribute, params, groups)
element.after(elementClone) if element.get(0)
elementClone.find('.js-attributeSelector select').trigger('change') element.after(placeholder)
else
item.append(placeholder)
placeholder.find('.js-attributeSelector select').trigger('change')
) )
# remove filter # remove filter
item.find('.js-remove').bind('click', (e) => item.on('click', '.js-remove', (e) =>
return if $(e.currentTarget).hasClass('is-disabled')
$(e.target).closest('.js-filterElement').remove() $(e.target).closest('.js-filterElement').remove()
@rebuildAttributeSelectors(item) @rebuildAttributeSelectors(item)
) )
# change attribute selector # change attribute selector
item.find('.js-attributeSelector select').bind('change', (e) => item.on('change', '.js-attributeSelector select', (e) =>
key = $(e.target).find('option:selected').attr('value') key = $(e.target).find('option:selected').attr('value')
elementRow = $(e.target).closest('.js-filterElement') elementRow = $(e.target).closest('.js-filterElement')
groupAndAttribute = elementRow.find('.js-attributeSelector option:selected').attr('value') groupAndAttribute = elementRow.find('.js-attributeSelector option:selected').attr('value')
@ -152,27 +156,20 @@ class App.UiElement.postmaster_set
) )
# build inital params # build inital params
if !_.isEmpty(params[attribute.name]) if _.isEmpty(params[attribute.name])
item.append(@placeholder(item, attribute, params, groups))
return item
selectorExists = false
for key, meta of params[attribute.name] for key, meta of params[attribute.name]
selectorExists = true
operator = meta.operator operator = meta.operator
value = meta.value value = meta.value
# get selector rows # build and append
elementFirst = item.find('.js-filterElement').first() element = @placeholder(item, attribute, params, groups)
elementLast = item.find('.js-filterElement').last() @rebuildAttributeSelectors(item, element, key, attribute)
@buildValue(item, element, key, groups, value, operator, attribute)
# clone, rebuild and append item.append(element)
elementClone = elementFirst.clone(true)
@rebuildAttributeSelectors(item, elementClone, key, attribute)
@buildValue(item, elementClone, key, groups, value, operator, attribute)
elementLast.after(elementClone)
# remove first dummy row
if selectorExists
item.find('.js-filterElement').first().remove()
item item
@ -197,7 +194,15 @@ class App.UiElement.postmaster_set
item = App.UiElement[config.tag].render(config, {}) item = App.UiElement[config.tag].render(config, {})
elementRow.find('.js-value').html(item) elementRow.find('.js-value').html(item)
@buildAttributeSelector: (groups, attribute) -> @buildAttributeSelector: (elementFull, groups, attribute) ->
# find first possible attribute
selectedValue = ''
elementFull.find('.js-attributeSelector select option').each(->
if !selectedValue && !$(@).prop('disabled')
selectedValue = $(@).val()
)
selection = $('<select class="form-control"></select>') selection = $('<select class="form-control"></select>')
for groupKey, groupMeta of groups for groupKey, groupMeta of groups
displayName = App.i18n.translateInline(groupMeta.name) displayName = App.i18n.translateInline(groupMeta.name)
@ -205,7 +210,10 @@ class App.UiElement.postmaster_set
optgroup = selection.find("optgroup.js-#{groupKey}") optgroup = selection.find("optgroup.js-#{groupKey}")
for entry in groupMeta.options for entry in groupMeta.options
displayName = App.i18n.translateInline(entry.name) displayName = App.i18n.translateInline(entry.name)
optgroup.append("<option value=\"#{entry.value}\">#{displayName}</option>") selected = ''
if entry.value is selectedValue
selected = 'selected="selected"'
optgroup.append("<option value=\"#{entry.value}\" #{selected}>#{displayName}</option>")
selection selection
@rebuildAttributeSelectors: (elementFull, elementRow, key, attribute) -> @rebuildAttributeSelectors: (elementFull, elementRow, key, attribute) ->
@ -240,11 +248,11 @@ class App.UiElement.postmaster_set
selection = $("<select class=\"form-control\" name=\"#{name}\"></select>") selection = $("<select class=\"form-control\" name=\"#{name}\"></select>")
attributeConfig = elements[groupAndAttribute] attributeConfig = elements[groupAndAttribute]
if !attributeConfig.operator if !attributeConfig || !attributeConfig.operator
elementRow.find('.js-operator').addClass('hide') elementRow.find('.js-operator').addClass('hide')
else else
elementRow.find('.js-operator').removeClass('hide') elementRow.find('.js-operator').removeClass('hide')
if attributeConfig.operator if attributeConfig && attributeConfig.operator
for operator in attributeConfig.operator for operator in attributeConfig.operator
operatorName = App.i18n.translateInline(operator) operatorName = App.i18n.translateInline(operator)
selected = '' selected = ''

106
app/assets/javascripts/app/controllers/_ui_element/ticket_perform_action.coffee
View file

@ -16,7 +16,7 @@ class App.UiElement.ticket_perform_action
# megre config # megre config
elements = {} elements = {}
for groupKey, groupMeta of groups for groupKey, groupMeta of groups
if !App[groupMeta.model] if !groupMeta.model || !App[groupMeta.model]
elements["#{groupKey}.email"] = { name: 'email', display: 'Email' } elements["#{groupKey}.email"] = { name: 'email', display: 'Email' }
else else
@ -45,76 +45,40 @@ class App.UiElement.ticket_perform_action
[defaults, groups, elements] [defaults, groups, elements]
@placeholder: (elementFull, attribute, params, groups, elements) ->
item = $( App.view('generic/ticket_perform_action/row')( attribute: attribute ) )
selector = @buildAttributeSelector(elementFull, groups, elements)
item.find('.js-attributeSelector').prepend(selector)
item
@render: (attribute, params = {}) -> @render: (attribute, params = {}) ->
[defaults, groups, elements] = @defaults(attribute) [defaults, groups, elements] = @defaults(attribute)
selector = @buildAttributeSelector(groups, elements)
# return item # return item
item = $( App.view('generic/ticket_perform_action/index')( attribute: attribute ) ) item = $( App.view('generic/ticket_perform_action/index')( attribute: attribute ) )
item.find('.js-attributeSelector').prepend(selector)
# add filter # add filter
item.find('.js-add').bind('click', (e) => item.on('click', '.js-add', (e) =>
element = $(e.target).closest('.js-filterElement') element = $(e.target).closest('.js-filterElement')
elementClone = element.clone(true) placeholder = @placeholder(item, attribute, params, groups, elements)
element.after(elementClone) if element.get(0)
elementClone.find('.js-attributeSelector select').trigger('change') element.after(placeholder)
else
item.append(placeholder)
placeholder.find('.js-attributeSelector select').trigger('change')
@updateAttributeSelectors(item) @updateAttributeSelectors(item)
) )
# remove filter # remove filter
item.find('.js-remove').bind('click', (e) => item.on('click', '.js-remove', (e) =>
return if $(e.currentTarget).hasClass('is-disabled') return if $(e.currentTarget).hasClass('is-disabled')
$(e.target).closest('.js-filterElement').remove() $(e.target).closest('.js-filterElement').remove()
@updateAttributeSelectors(item) @updateAttributeSelectors(item)
) )
# change attribute selector # change attribute selector
item.find('.js-attributeSelector select').bind('change', (e) => item.on('change', '.js-attributeSelector select', (e) =>
elementRow = $(e.target).closest('.js-filterElement')
groupAndAttribute = elementRow.find('.js-attributeSelector option:selected').attr('value')
@rebuildAttributeSelectors(item, elementRow, groupAndAttribute, elements, {}, attribute)
@updateAttributeSelectors(item)
)
# build inital params
if !_.isEmpty(params[attribute.name])
selectorExists = false
for groupAndAttribute, meta of params[attribute.name]
selectorExists = true
# get selector rows
elementFirst = item.find('.js-filterElement').first()
elementLast = item.find('.js-filterElement').last()
# clone, rebuild and append
elementClone = elementFirst.clone(true)
@rebuildAttributeSelectors(item, elementClone, groupAndAttribute, elements, meta, attribute)
elementLast.after(elementClone)
# remove first dummy row
if selectorExists
item.find('.js-filterElement').first().remove()
else
for groupAndAttribute in defaults
# get selector rows
elementFirst = item.find('.js-filterElement').first()
elementLast = item.find('.js-filterElement').last()
# clone, rebuild and append
elementClone = elementFirst.clone(true)
@rebuildAttributeSelectors(item, elementClone, groupAndAttribute, elements, {}, attribute)
elementLast.after(elementClone)
item.find('.js-filterElement').first().remove()
# change attribute selector
item.find('.js-attributeSelector select').bind('change', (e) =>
elementRow = $(e.target).closest('.js-filterElement') elementRow = $(e.target).closest('.js-filterElement')
groupAndAttribute = elementRow.find('.js-attributeSelector option:selected').attr('value') groupAndAttribute = elementRow.find('.js-attributeSelector option:selected').attr('value')
@rebuildAttributeSelectors(item, elementRow, groupAndAttribute, elements, {}, attribute) @rebuildAttributeSelectors(item, elementRow, groupAndAttribute, elements, {}, attribute)
@ -128,9 +92,35 @@ class App.UiElement.ticket_perform_action
@buildOperator(item, elementRow, groupAndAttribute, elements, {}, attribute) @buildOperator(item, elementRow, groupAndAttribute, elements, {}, attribute)
) )
# build inital params
if _.isEmpty(params[attribute.name])
for groupAndAttribute in defaults
# build and append
element = @placeholder(item, attribute, params, groups, elements)
item.append(element)
@rebuildAttributeSelectors(item, element, groupAndAttribute, elements, {}, attribute)
return item
for groupAndAttribute, meta of params[attribute.name]
# build and append
element = @placeholder(item, attribute, params, groups, elements)
@rebuildAttributeSelectors(item, element, groupAndAttribute, elements, meta, attribute)
item.append(element)
item item
@buildAttributeSelector: (groups, elements) -> @buildAttributeSelector: (elementFull, groups, elements) ->
# find first possible attribute
selectedValue = ''
elementFull.find('.js-attributeSelector select option').each(->
if !selectedValue && !$(@).prop('disabled')
selectedValue = $(@).val()
)
selection = $('<select class="form-control"></select>') selection = $('<select class="form-control"></select>')
for groupKey, groupMeta of groups for groupKey, groupMeta of groups
displayName = App.i18n.translateInline(groupMeta.name) displayName = App.i18n.translateInline(groupMeta.name)
@ -141,7 +131,11 @@ class App.UiElement.ticket_perform_action
if spacer[0] is groupKey if spacer[0] is groupKey
attributeConfig = elements[elementKey] attributeConfig = elements[elementKey]
displayName = App.i18n.translateInline(attributeConfig.display) displayName = App.i18n.translateInline(attributeConfig.display)
optgroup.append("<option value=\"#{elementKey}\">#{displayName}</option>")
selected = ''
if elementKey is selectedValue
selected = 'selected="selected"'
optgroup.append("<option value=\"#{elementKey}\" #{selected}>#{displayName}</option>")
selection selection
@updateAttributeSelectors: (elementFull) -> @updateAttributeSelectors: (elementFull) ->
@ -191,11 +185,11 @@ class App.UiElement.ticket_perform_action
selection = $("<select class=\"form-control\" name=\"#{name}\"></select>") selection = $("<select class=\"form-control\" name=\"#{name}\"></select>")
attributeConfig = elements[groupAndAttribute] attributeConfig = elements[groupAndAttribute]
if !attributeConfig.operator if !attributeConfig || !attributeConfig.operator
elementRow.find('.js-operator').addClass('hide') elementRow.find('.js-operator').addClass('hide')
else else
elementRow.find('.js-operator').removeClass('hide') elementRow.find('.js-operator').removeClass('hide')
if attributeConfig.operator if attributeConfig && attributeConfig.operator
for operator in attributeConfig.operator for operator in attributeConfig.operator
operatorName = App.i18n.translateInline(operator) operatorName = App.i18n.translateInline(operator)
selected = '' selected = ''

27
app/assets/javascripts/app/views/generic/postmaster_set.jst.eco
View file

@ -1,26 +1 @@
<div class="horizontal-filters"> <div class="horizontal-filters"></div>
<div class="horizontal-filter js-filterElement">
<div class="horizontal-filter-body">
<div class="controls">
<div class="u-positionOrigin js-attributeSelector">
<%- @Icon('arrow-down', 'dropdown-arrow') %>
</div>
</div>
<div class="controls">
<div class="u-positionOrigin js-operator">
<select></select>
<%- @Icon('arrow-down') %>
</div>
</div>
<div class="controls js-value"></div>
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove js-remove" title="<%- @T('Remote') %>">
<%- @Icon('minus-small') %>
</div>
<div class="filter-control filter-control-add js-add" title="<%- @T('Add') %>">
<%- @Icon('plus-small') %>
</div>
</div>
</div>
</div>

24
app/assets/javascripts/app/views/generic/postmaster_set_row.jst.eco Normal file
View file

@ -0,0 +1,24 @@
<div class="horizontal-filter js-filterElement">
<div class="horizontal-filter-body">
<div class="controls">
<div class="u-positionOrigin js-attributeSelector">
<%- @Icon('arrow-down', 'dropdown-arrow') %>
</div>
</div>
<div class="controls">
<div class="u-positionOrigin js-operator">
<select></select>
<%- @Icon('arrow-down') %>
</div>
</div>
<div class="controls js-value"></div>
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove js-remove" title="<%- @T('Remote') %>">
<%- @Icon('minus-small') %>
</div>
<div class="filter-control filter-control-add js-add" title="<%- @T('Add') %>">
<%- @Icon('plus-small') %>
</div>
</div>
</div>

22
app/assets/javascripts/app/views/generic/ticket_perform_action/index.jst.eco
View file

@ -1,21 +1 @@
<div class="horizontal-filters"> <div class="horizontal-filters"></div>
<div class="horizontal-filter js-filterElement">
<div class="horizontal-filter-body">
<div class="controls">
<div class="u-positionOrigin js-attributeSelector">
<%- @Icon('arrow-down', 'dropdown-arrow') %>
</div>
</div>
<div class="js-setAttribute"></div>
<div class="js-setNotification flex"></div>
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove js-remove" title="<%- @Ti('Remote') %>">
<%- @Icon('minus-small') %>
</div>
<div class="filter-control filter-control-add js-add" title="<%- @Ti('Add') %>">
<%- @Icon('plus-small') %>
</div>
</div>
</div>
</div>

19
app/assets/javascripts/app/views/generic/ticket_perform_action/row.jst.eco Normal file
View file

@ -0,0 +1,19 @@
<div class="horizontal-filter js-filterElement">
<div class="horizontal-filter-body">
<div class="controls">
<div class="u-positionOrigin js-attributeSelector">
<%- @Icon('arrow-down', 'dropdown-arrow') %>
</div>
</div>
<div class="js-setAttribute"></div>
<div class="js-setNotification flex"></div>
</div>
<div class="filter-controls">
<div class="filter-control filter-control-remove js-remove" title="<%- @Ti('Remote') %>">
<%- @Icon('minus-small') %>
</div>
<div class="filter-control filter-control-add js-add" title="<%- @Ti('Add') %>">
<%- @Icon('plus-small') %>
</div>
</div>
</div>

2
public/assets/tests/form_extended.js
View file

@ -564,7 +564,7 @@ test('form checks', function() {
el.find('.js-attributeSelector').last().find('select').val('notification.email').trigger('change') el.find('.js-attributeSelector').last().find('select').val('notification.email').trigger('change')
el.find('[name="executions::notification.email::subject"]').val('some subject') el.find('[name="executions::notification.email::subject"]').val('some subject')
el.find('[data-name="executions::notification.email::body"]').html('lala') el.find('[data-name="executions::notification.email::body"]').html('lala')
el.find('[data-name="executions::notification.email::recipient"] .js-option[data-value="ticket_owner"]').click() el.find('[data-name="executions::notification.email::recipient"] .js-select.js-option[data-value="ticket_owner"]').click()
var params = App.ControllerForm.params(el) var params = App.ControllerForm.params(el)
var test_params = { var test_params = {