From ae3e2141b130db03e2414376d0895a8b4822a09e Mon Sep 17 00:00:00 2001
From: Martin Edenhofer <me@edenhofer.de>
Date: Wed, 11 Jul 2018 09:40:23 +0200
Subject: [PATCH] Refactoring of perform/set attributes in trigger and
 postmaster filter ui (now use clean template - not side effects regarding
 autocompletion and tags).

---
 .../_ui_element/postmaster_set.coffee         |  78 +++++++------
 .../_ui_element/ticket_perform_action.coffee  | 106 +++++++++---------
 .../app/views/generic/postmaster_set.jst.eco  |  27 +----
 .../views/generic/postmaster_set_row.jst.eco  |  24 ++++
 .../ticket_perform_action/index.jst.eco       |  22 +---
 .../generic/ticket_perform_action/row.jst.eco |  19 ++++
 public/assets/tests/form_extended.js          |   2 +-
 7 files changed, 139 insertions(+), 139 deletions(-)
 create mode 100644 app/assets/javascripts/app/views/generic/postmaster_set_row.jst.eco
 create mode 100644 app/assets/javascripts/app/views/generic/ticket_perform_action/row.jst.eco

diff --git a/app/assets/javascripts/app/controllers/_ui_element/postmaster_set.coffee b/app/assets/javascripts/app/controllers/_ui_element/postmaster_set.coffee
index 25e29568a..b3803ed49 100644
--- 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
+    for key, meta of params[attribute.name]
+      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 = ''
diff --git a/app/assets/javascripts/app/controllers/_ui_element/ticket_perform_action.coffee b/app/assets/javascripts/app/controllers/_ui_element/ticket_perform_action.coffee
index 8ca71006a..f9ac78d3e 100644
--- 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 = ''
diff --git a/app/assets/javascripts/app/views/generic/postmaster_set.jst.eco b/app/assets/javascripts/app/views/generic/postmaster_set.jst.eco
index 32f35019b..4016a6f48 100644
--- 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>
diff --git a/app/assets/javascripts/app/views/generic/postmaster_set_row.jst.eco b/app/assets/javascripts/app/views/generic/postmaster_set_row.jst.eco
new file mode 100644
index 000000000..a15c52daf
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git 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
index d2bb37cbd..2fb4b2817 100644
--- 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>
\ No newline at end of file
+<div class="horizontal-filters"></div>
\ No newline at end of file
diff --git 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
new file mode 100644
index 000000000..661b772f8
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/public/assets/tests/form_extended.js b/public/assets/tests/form_extended.js
index d8593dd1f..fa69b82e5 100644
--- 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 = {