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

2018-07-11 09:40:23 +02:00 · 2018-07-11 09:40:23 +02:00 · ae3e2141b1
commit ae3e2141b1
parent 370b1a2645
7 changed files with 139 additions and 139 deletions
--- a/app/assets/javascripts/app/controllers/_ui_element/postmaster_set.coffee
+++ b/app/assets/javascripts/app/controllers/_ui_element/postmaster_set.coffee
@ -72,10 +72,7 @@ class App.UiElement.postmaster_set

    elements = {}
    for groupKey, groupMeta of groups
-      if !App[groupMeta.model]
-        elements["#{groupKey}.email"] = { name: 'email', display: 'Email' }
-      else
-
+      if groupMeta.model && App[groupMeta.model]
        for row in App[groupMeta.model].configure_attributes

          # ignore passwords and relations
@ -117,32 +114,39 @@ class App.UiElement.postmaster_set

    [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 = {}) ->

    [elements, groups] = @defaults()

-    selector = @buildAttributeSelector(groups, attribute)
-
    # scaffold of match elements
    item = $( App.view('generic/postmaster_set')( attribute: attribute ) )
-    item.find('.js-attributeSelector').prepend(selector)

    # add filter
-    item.find('.js-add').bind('click', (e) ->
+    item.on('click', '.js-add', (e) =>
      element = $(e.target).closest('.js-filterElement')
-      elementClone = element.clone(true)
-      element.after(elementClone)
-      elementClone.find('.js-attributeSelector select').trigger('change')
+      placeholder = @placeholder(item, attribute, params, groups)
+      if element.get(0)
+        element.after(placeholder)
+      else
+        item.append(placeholder)
+      placeholder.find('.js-attributeSelector select').trigger('change')
    )

    # 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()
      @rebuildAttributeSelectors(item)
    )

    # 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')
      elementRow = $(e.target).closest('.js-filterElement')
      groupAndAttribute = elementRow.find('.js-attributeSelector option:selected').attr('value')
@ -152,27 +156,20 @@ class App.UiElement.postmaster_set
    )

    # 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]
-        selectorExists = true
      operator = meta.operator
      value = meta.value

-        # get selector rows
-        elementFirst = item.find('.js-filterElement').first()
-        elementLast = item.find('.js-filterElement').last()
+      # build and append
+      element = @placeholder(item, attribute, params, groups)
+      @rebuildAttributeSelectors(item, element, key, attribute)
+      @buildValue(item, element, key, groups, value, operator, attribute)

-        # clone, rebuild and append
-        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.append(element)

    item

@ -197,7 +194,15 @@ class App.UiElement.postmaster_set
    item = App.UiElement[config.tag].render(config, {})
    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>')
    for groupKey, groupMeta of groups
      displayName = App.i18n.translateInline(groupMeta.name)
@ -205,7 +210,10 @@ class App.UiElement.postmaster_set
      optgroup = selection.find("optgroup.js-#{groupKey}")
      for entry in groupMeta.options
        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

  @rebuildAttributeSelectors: (elementFull, elementRow, key, attribute) ->
@ -240,11 +248,11 @@ class App.UiElement.postmaster_set
    selection = $("<select class=\"form-control\" name=\"#{name}\"></select>")
    attributeConfig = elements[groupAndAttribute]

-    if !attributeConfig.operator
+    if !attributeConfig || !attributeConfig.operator
      elementRow.find('.js-operator').addClass('hide')
    else
      elementRow.find('.js-operator').removeClass('hide')
-    if attributeConfig.operator
+    if attributeConfig && attributeConfig.operator
      for operator in attributeConfig.operator
        operatorName = App.i18n.translateInline(operator)
        selected = ''
--- a/app/assets/javascripts/app/controllers/_ui_element/ticket_perform_action.coffee
+++ b/app/assets/javascripts/app/controllers/_ui_element/ticket_perform_action.coffee
@ -16,7 +16,7 @@ class App.UiElement.ticket_perform_action
    # megre config
    elements = {}
    for groupKey, groupMeta of groups
-      if !App[groupMeta.model]
+      if !groupMeta.model || !App[groupMeta.model]
        elements["#{groupKey}.email"] = { name: 'email', display: 'Email' }
      else

@ -45,76 +45,40 @@ class App.UiElement.ticket_perform_action

    [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 = {}) ->

    [defaults, groups, elements] = @defaults(attribute)

-    selector = @buildAttributeSelector(groups, elements)
-
    # return item
    item = $( App.view('generic/ticket_perform_action/index')( attribute: attribute ) )
-    item.find('.js-attributeSelector').prepend(selector)

    # add filter
-    item.find('.js-add').bind('click', (e) =>
+    item.on('click', '.js-add', (e) =>
      element = $(e.target).closest('.js-filterElement')
-      elementClone = element.clone(true)
-      element.after(elementClone)
-      elementClone.find('.js-attributeSelector select').trigger('change')
+      placeholder = @placeholder(item, attribute, params, groups, elements)
+      if element.get(0)
+        element.after(placeholder)
+      else
+        item.append(placeholder)
+      placeholder.find('.js-attributeSelector select').trigger('change')
      @updateAttributeSelectors(item)
    )

    # 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()
      @updateAttributeSelectors(item)
    )

    # change attribute selector
-    item.find('.js-attributeSelector select').bind('change', (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) =>
+    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)
@ -128,9 +92,35 @@ class App.UiElement.ticket_perform_action
      @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

-  @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>')
    for groupKey, groupMeta of groups
      displayName = App.i18n.translateInline(groupMeta.name)
@ -141,7 +131,11 @@ class App.UiElement.ticket_perform_action
        if spacer[0] is groupKey
          attributeConfig = elements[elementKey]
          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

  @updateAttributeSelectors: (elementFull) ->
@ -191,11 +185,11 @@ class App.UiElement.ticket_perform_action

    selection = $("<select class=\"form-control\" name=\"#{name}\"></select>")
    attributeConfig = elements[groupAndAttribute]
-    if !attributeConfig.operator
+    if !attributeConfig || !attributeConfig.operator
      elementRow.find('.js-operator').addClass('hide')
    else
      elementRow.find('.js-operator').removeClass('hide')
-    if attributeConfig.operator
+    if attributeConfig && attributeConfig.operator
      for operator in attributeConfig.operator
        operatorName = App.i18n.translateInline(operator)
        selected = ''
--- a/app/assets/javascripts/app/views/generic/postmaster_set.jst.eco
+++ b/app/assets/javascripts/app/views/generic/postmaster_set.jst.eco
@ -1,26 +1 @@
-<div class="horizontal-filters">
-  <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>
+<div class="horizontal-filters"></div>
--- a/app/assets/javascripts/app/views/generic/postmaster_set_row.jst.eco
+++ b/app/assets/javascripts/app/views/generic/postmaster_set_row.jst.eco
@ -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>
--- a/app/assets/javascripts/app/views/generic/ticket_perform_action/index.jst.eco
+++ b/app/assets/javascripts/app/views/generic/ticket_perform_action/index.jst.eco
@ -1,21 +1 @@
-<div class="horizontal-filters">
-  <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>
+<div class="horizontal-filters"></div>
--- a/app/assets/javascripts/app/views/generic/ticket_perform_action/row.jst.eco
+++ b/app/assets/javascripts/app/views/generic/ticket_perform_action/row.jst.eco
@ -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>
--- a/public/assets/tests/form_extended.js
+++ b/public/assets/tests/form_extended.js
@ -564,7 +564,7 @@ test('form checks', function() {
  el.find('.js-attributeSelector').last().find('select').val('notification.email').trigger('change')
  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::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 test_params = {