Enhancement to issue #2117 - added generic approach with callback methods for submit disable/enable of attachment uploading.

app/assets/javascripts/app/controllers/_application_controller.coffee

@@ -182,11 +182,11 @@ class App.Controller extends Spine.Controller
   formParam: (form) ->
     App.ControllerForm.params(form)
 
-  formDisable: (form) ->
+  formDisable: (form, type) ->
-    App.ControllerForm.disable(form)
+    App.ControllerForm.disable(form, type)
 
-  formEnable: (form) ->
+  formEnable: (form, type) ->
-    App.ControllerForm.enable(form)
+    App.ControllerForm.enable(form, type)
 
   formValidate: (data) ->
     App.ControllerForm.validate(data)

app/assets/javascripts/app/controllers/_application_controller_form.coffee

@@ -330,7 +330,7 @@ class App.ControllerForm extends App.Controller
           bookmarkable: @bookmarkable
         )
       )
-      fullItem.find('.controls').prepend( item )
+      fullItem.find('.controls').prepend(item)
 
       # hide/show item
       if attribute.hide
@@ -632,48 +632,49 @@ class App.ControllerForm extends App.Controller
       App.Log.error 'ControllerForm', 'no form found!', form
     form
 
-  @disable: (form) ->
+  @disable: (form, type = 'form') ->
     lookupForm = @findForm(form)
 
-    if lookupForm
+    if lookupForm && type is 'form'
       if lookupForm.is('button, input, select, textarea, div, span')
+        console.log(2)
         App.Log.debug 'ControllerForm', 'disable item...', lookupForm
-        lookupForm.attr('readonly', true)
+        lookupForm.prop('readonly', true)
-        lookupForm.attr('disabled', true)
+        lookupForm.prop('disabled', true)
         return
       App.Log.debug 'ControllerForm', 'disable form...', lookupForm
 
       # set forms to read only during communication with backend
-      lookupForm.find('button, input, select, textarea').attr('readonly', true)
+      lookupForm.find('button, input, select, textarea').prop('readonly', true)
 
       # disable additionals submits
-      lookupForm.find('button').attr('disabled', true)
+      lookupForm.find('button').prop('disabled', true)
     else
       App.Log.debug 'ControllerForm', 'disable item...', form
-      form.attr('readonly', true)
+      form.prop('readonly', true)
-      form.attr('disabled', true)
+      form.prop('disabled', true)
 
-  @enable: (form) ->
+  @enable: (form, type = 'form') ->
 
     lookupForm = @findForm(form)
 
-    if lookupForm
+    if lookupForm && type is 'form'
       if lookupForm.is('button, input, select, textarea, div, span')
         App.Log.debug 'ControllerForm', 'disable item...', lookupForm
-        lookupForm.attr('readonly', false)
+        lookupForm.prop('readonly', false)
-        lookupForm.attr('disabled', false)
+        lookupForm.prop('disabled', false)
         return
       App.Log.debug 'ControllerForm', 'enable form...', lookupForm
 
       # enable fields again
-      lookupForm.find('button, input, select, textarea').attr('readonly', false)
+      lookupForm.find('button, input, select, textarea').prop('readonly', false)
 
       # enable submits again
-      lookupForm.find('button').attr('disabled', false)
+      lookupForm.find('button').prop('disabled', false)
     else
       App.Log.debug 'ControllerForm', 'enable item...', form
-      form.attr('readonly', false)
+      form.prop('readonly', false)
-      form.attr('disabled', false)
+      form.prop('disabled', false)
 
   @validate: (data) ->
 

app/assets/javascripts/app/controllers/_ui_element/richtext.coffee

@@ -73,19 +73,14 @@ class App.UiElement.richtext
               @attachmentPlaceholder.addClass('hide')
               @attachmentUpload.removeClass('hide')
               @cancelContainer.removeClass('hide')
-              # Disable the create ticket button during uploading
+              item.find('[contenteditable]').trigger('fileUploadStart')
-              $('.main .newTicket .page-content .js-submit')
-                .text(App.i18n.translateInline('Uploading'))
-                .addClass('is-disabled')
               App.Log.debug 'UiElement.richtext', 'upload start'
 
             onAborted: =>
               @attachmentPlaceholder.removeClass('hide')
               @attachmentUpload.addClass('hide')
               item.find('input').val('')
-              $('.main .newTicket .page-content .js-submit')
+              item.find('[contenteditable]').trigger('fileUploadStop', ['aborted'])
-                .text(App.i18n.translateInline('Create'))
-                .removeClass('is-disabled')
 
             # Called after received response from the server
             onCompleted: (response) =>
@@ -100,10 +95,7 @@ class App.UiElement.richtext
 
               renderFile(response.data)
               item.find('input').val('')
-              $('.main .newTicket .page-content .js-submit')
+              item.find('[contenteditable]').trigger('fileUploadStop', ['completed'])
-                .text(App.i18n.translateInline('Create'))
-                .removeClass('is-disabled')
-
               App.Log.debug 'UiElement.richtext', 'upload complete', response.data
 
             # Called during upload progress, first parameter

app/assets/javascripts/app/controllers/agent_ticket_create.coffee

@@ -310,6 +310,9 @@ class App.TicketCreate extends App.Controller
       form_id: @formId
       model:   App.TicketArticle
       screen:  'create_top'
+      events:
+        'fileUploadStart .richtext': => @submitDisable()
+        'fileUploadStop .richtext': => @submitEnable()
       params:  params
       taskKey: @taskKey
     )
@@ -506,7 +509,7 @@ class App.TicketCreate extends App.Controller
             return
 
     # disable form
-    @formDisable(e)
+    @submitDisable(e)
     ui = @
     ticket.save(
       done: ->
@@ -538,7 +541,7 @@ class App.TicketCreate extends App.Controller
 
       fail: (settings, details) ->
         ui.log 'errors', details
-        ui.formEnable(e)
+        ui.submitEnable(e)
         ui.notify(
           type:    'error'
           msg:     App.i18n.translateContent(details.error_human || details.error || 'Unable to create object!')
@@ -546,6 +549,18 @@ class App.TicketCreate extends App.Controller
         )
     )
 
+  submitDisable: (e) =>
+    if e
+      @formDisable(e)
+      return
+    @formDisable(@$('.js-submit'), 'button')
+
+  submitEnable: (e) =>
+    if e
+      @formEnable(e)
+      return
+    @formEnable(@$('.js-submit'), 'button')
+
 class Router extends App.ControllerPermanent
   requiredPermission: 'ticket.agent'
   constructor: (params) ->

app/assets/javascripts/app/controllers/customer_ticket_create.coffee

@@ -60,6 +60,9 @@ class Index extends App.ControllerContent
       form_id:        @form_id
       model:          App.TicketArticle
       screen:         'create_top'
+      events:
+        'fileUploadStart .richtext': => @submitDisable()
+        'fileUploadStop .richtext': => @submitEnable()
       filter:         @formMeta.filter
       formMeta:       @formMeta
       params:         defaults
@@ -177,7 +180,7 @@ class Index extends App.ControllerContent
     else
 
       # disable form
-      @formDisable(e)
+      @submitDisable(e)
       ui = @
       ticket.save(
         done: ->
@@ -187,7 +190,7 @@ class Index extends App.ControllerContent
 
         fail: (settings, details) ->
           ui.log 'errors', details
-          ui.formEnable(e)
+          ui.submitEnable(e)
           ui.notify(
             type:    'error'
             msg:     App.i18n.translateContent(details.error_human || details.error || 'Unable to create object!')
@@ -195,5 +198,17 @@ class Index extends App.ControllerContent
           )
       )
 
+  submitDisable: (e) =>
+    if e
+      @formDisable(e)
+      return
+    @formDisable(@$('.js-submit'), 'button')
+
+  submitEnable: (e) =>
+    if e
+      @formEnable(e)
+      return
+    @formEnable(@$('.js-submit'), 'button')
+
 App.Config.set('customer_ticket_new', Index, 'Routes')
 App.Config.set('CustomerTicketNew', { prio: 8003, parent: '#new', name: 'New Ticket', translate: true, target: '#customer_ticket_new', permission: ['ticket.customer'], setting: ['customer_ticket_create'], divider: true }, 'NavBarRight')

app/assets/javascripts/app/controllers/ticket_zoom.coffee

@@ -445,14 +445,16 @@ class App.TicketZoom extends App.Controller
       @form_id = @taskGet('article').form_id || App.ControllerForm.formId()
 
       @articleNew = new App.TicketZoomArticleNew(
-        ticket:    @ticket
+        ticket:                  @ticket
-        ticket_id: @ticket_id
+        ticket_id:               @ticket_id
-        el:        elLocal.find('.article-new')
+        el:                      elLocal.find('.article-new')
-        formMeta:  @formMeta
+        formMeta:                @formMeta
-        form_id:   @form_id
+        form_id:                 @form_id
-        defaults:  @taskGet('article')
+        defaults:                @taskGet('article')
-        taskKey:   @taskKey
+        taskKey:                 @taskKey
-        ui:        @
+        ui:                      @
+        callbackFileUploadStart: @submitDisable
+        callbackFileUploadStop:  @submitEnable
       )
 
       @highligher = new App.TicketZoomHighlighter(
@@ -738,16 +740,28 @@ class App.TicketZoom extends App.Controller
 
       resetButton.removeClass('hide')
 
+  submitDisable: (e) =>
+    if e
+      @formDisable(e)
+      return
+    @formDisable(@$('.js-submitDropdown'))
+
+  submitEnable: (e) =>
+    if e
+      @formEnable(e)
+      return
+    @formEnable(@$('.js-submitDropdown'))
+
   submit: (e, macro = {}) =>
     e.stopPropagation()
     e.preventDefault()
 
     # disable form
-    @formDisable(e)
+    @submitDisable(e)
 
     # validate new article
     if !@articleNew.validate()
-      @formEnable(e)
+      @submitEnable(e)
       return
 
     ticketParams = @formParam(@$('.edit'))
@@ -803,7 +817,7 @@ class App.TicketZoom extends App.Controller
         errors: errors
         screen: 'edit'
       )
-      @formEnable(e)
+      @submitEnable(e)
       @autosaveStart()
       return
 
@@ -819,7 +833,7 @@ class App.TicketZoom extends App.Controller
           errors: errors
           screen: 'edit'
         )
-        @formEnable(e)
+        @submitEnable(e)
         @autosaveStart()
         return
 
@@ -849,7 +863,7 @@ class App.TicketZoom extends App.Controller
       container: @el.closest('.content')
       ticket: ticket
       cancelCallback: =>
-        @formEnable(e)
+        @submitEnable(e)
       submitCallback: (params) =>
         if params.time_unit
           ticket.article.time_unit = params.time_unit
@@ -895,7 +909,7 @@ class App.TicketZoom extends App.Controller
 
         @autosaveStart()
         @muteTask()
-        @formEnable(e)
+        @submitEnable(e)
 
       error: (settings, details) =>
         error = undefined
@@ -909,7 +923,7 @@ class App.TicketZoom extends App.Controller
         @autosaveStart()
         @muteTask()
         @fetch()
-        @formEnable(e)
+        @submitEnable(e)
     )
 
   bookmark: (e) ->

app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee

@@ -179,7 +179,7 @@ class App.TicketZoomArticleNew extends App.Controller
       key:             'File'
       data:
         form_id: @form_id
-      maxSimultaneousUploads: 1,
+      maxSimultaneousUploads: 1
       onFileAdded:            (file) =>
 
         file.on(
@@ -188,18 +188,17 @@ class App.TicketZoomArticleNew extends App.Controller
             @attachmentPlaceholder.addClass('hide')
             @attachmentUpload.removeClass('hide')
             @cancelContainer.removeClass('hide')
-            # Disable the update ticket button during uploading
+
-            $('.active .attributeBar .js-submit')
+            if @callbackFileUploadStart
-              .text(App.i18n.translateInline('Uploading'))
+              @callbackFileUploadStart()
-              .addClass('is-disabled')
 
           onAborted: =>
             @attachmentPlaceholder.removeClass('hide')
             @attachmentUpload.addClass('hide')
             @$('.article-attachment input').val('')
-            $('.active .attributeBar .js-submit')
+
-              .text(App.i18n.translateInline('Update'))
+            if @callbackFileUploadStop
-              .removeClass('is-disabled')
+              @callbackFileUploadStop()
 
           # Called after received response from the server
           onCompleted: (response) =>
@@ -216,9 +215,9 @@ class App.TicketZoomArticleNew extends App.Controller
 
             @renderAttachment(response.data)
             @$('.article-attachment input').val('')
-            $('.active .attributeBar .js-submit')
+
-              .text(App.i18n.translateInline('Update'))
+            if @callbackFileUploadStop
-              .removeClass('is-disabled')
+              @callbackFileUploadStop()
 
           # Called during upload progress, first parameter
           # is decimal value from 0 to 100.

public/assets/tests/form_find.js

@@ -14,26 +14,46 @@ test( "find form check", function() {
   var form3 = App.ControllerForm.findForm($('#form3 .js-button'))
   equal(form3.is('form'), true)
   App.ControllerForm.disable($('#form3 .js-button'))
-  equal($('#form3 .js-button').attr('readonly'), 'readonly')
+  equal($('#form3 .js-button').prop('readonly'), true)
-  equal($('#form3 .js-button').attr('disabled'), 'disabled')
+  equal($('#form3 .js-button').prop('disabled'), true)
-  equal($('#form3 .js-input').attr('readonly'), 'readonly')
+  equal($('#form3 .js-input').prop('readonly'), true)
-  equal($('#form3 .js-input').attr('disabled'), undefined)
+  equal($('#form3 .js-input').prop('disabled'), false)
 
   App.ControllerForm.enable($('#form3 .js-button'))
-  equal($('#form3 .js-button').attr('readonly'), undefined)
+  equal($('#form3 .js-button').prop('readonly'), false)
-  equal($('#form3 .js-button').attr('disabled'), undefined)
+  equal($('#form3 .js-button').prop('disabled'), false)
-  equal($('#form3 .js-input').attr('readonly'), undefined)
+  equal($('#form3 .js-input').prop('readonly'), false)
-  equal($('#form3 .js-input').attr('disabled'), undefined)
+  equal($('#form3 .js-input').prop('disabled'), false)
+
+  $('#forms').append('<hr><h1>find form check by only disable button</h1><form id="form31"><input class="js-input" value="test 123"><button class="js-button">text</button></form>')
+  var form31 = App.ControllerForm.findForm($('#form31 .js-button'))
+
+  App.ControllerForm.disable($('#form31 .js-button'), 'button')
+
+  equal($('#form31 .js-button').prop('readonly'), true)
+  equal($('#form31 .js-button').prop('disabled'), true)
+  equal($('#form31 .js-input').prop('readonly'), false)
+  equal($('#form31 .js-input').prop('disabled'), false)
+
+  App.ControllerForm.enable($('#form31 .js-button'))
+  equal($('#form31 .js-button').prop('readonly'), false)
+  equal($('#form31 .js-button').prop('disabled'), false)
+  equal($('#form31 .js-input').prop('readonly'), false)
+  equal($('#form31 .js-input').prop('disabled'), false)
 
   $('#forms').append('<hr><h1>find form check</h1><div id="form4"><input class="js-input" value="test 123"><button class="js-button">text</button></div>')
   var form4 = App.ControllerForm.findForm($('#form4 .js-button'))
   equal(form4.is('form'), false)
   App.ControllerForm.disable($('#form4 .js-button'))
-  equal($('#form4 .js-button').attr('readonly'), 'readonly')
+  equal($('#form4 .js-button').prop('readonly'), true)
-  equal($('#form4 .js-button').attr('disabled'), 'disabled')
+  equal($('#form4 .js-button').prop('disabled'), true)
+  equal($('#form4 .js-input').prop('readonly'), false)
+  equal($('#form4 .js-input').prop('disabled'), false)
 
   App.ControllerForm.enable($('#form4 .js-button'))
-  equal($('#form4 .js-input').attr('readonly'), undefined)
+  equal($('#form4 .js-button').prop('readonly'), false)
-  equal($('#form4 .js-input').attr('disabled'), undefined)
+  equal($('#form4 .js-button').prop('disabled'), false)
+  equal($('#form4 .js-input').prop('readonly'), false)
+  equal($('#form4 .js-input').prop('disabled'), false)
 
 });

test/browser/agent_ticket_attachment_test.rb

@@ -332,20 +332,17 @@ class AgentTicketAttachmentTest < TestCase
       files: [Rails.root.join('test', 'data', 'upload', 'upload2.jpg')],
       no_sleep: true,
     )
-    match(
+    exists(
-      css:   '.js-submit.is-disabled',
+      css: '.content.active .js-submit:disabled',
-      value: 'Uploading',
     )
     watch_for_disappear(
-      css:   '.js-submit.is-disabled',
+      css: '.content.active .js-submit:disabled',
-      value: 'Uploading',
     )
-    match(
+    exists(
-      css:   '.js-submit',
+      css: '.content.active .js-submit',
-      value: 'Create',
     )
     click(
-      css: '.active .js-submit',
+      css: '.content.active .js-submit',
     )
     sleep 2
 
@@ -361,17 +358,11 @@ class AgentTicketAttachmentTest < TestCase
       files: [Rails.root.join('test', 'data', 'upload', 'upload2.jpg')],
       no_sleep: true,
     )
-    match(
+    exists(
-      css:   '.js-submit.is-disabled',
+      css: '.content.active .js-submit:disabled',
-      value: 'Uploading',
     )
     watch_for_disappear(
-      css:   '.js-submit.is-disabled',
+      css: '.content.active .js-submit:disabled',
-      value: 'Uploading',
-    )
-    match(
-      css:   '.js-submit',
-      value: 'Update',
     )
   end
 end