From 902b5aca3244f7d555f28e3283988dab707bac87 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Mon, 23 Jul 2018 07:54:10 +0200 Subject: [PATCH] Enhancement to issue #2117 - added generic approach with callback methods for submit disable/enable of attachment uploading. --- .../_application_controller.coffee | 8 ++-- .../_application_controller_form.coffee | 35 ++++++++------- .../controllers/_ui_element/richtext.coffee | 14 ++---- .../controllers/agent_ticket_create.coffee | 19 +++++++- .../controllers/customer_ticket_create.coffee | 19 +++++++- .../app/controllers/ticket_zoom.coffee | 44 ++++++++++++------- .../ticket_zoom/article_new.coffee | 21 +++++---- public/assets/tests/form_find.js | 44 ++++++++++++++----- test/browser/agent_ticket_attachment_test.rb | 27 ++++-------- 9 files changed, 139 insertions(+), 92 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_application_controller.coffee b/app/assets/javascripts/app/controllers/_application_controller.coffee index 134919206..c2accd8cc 100644 --- a/app/assets/javascripts/app/controllers/_application_controller.coffee +++ b/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) -> - App.ControllerForm.disable(form) + formDisable: (form, type) -> + App.ControllerForm.disable(form, type) - formEnable: (form) -> - App.ControllerForm.enable(form) + formEnable: (form, type) -> + App.ControllerForm.enable(form, type) formValidate: (data) -> App.ControllerForm.validate(data) diff --git a/app/assets/javascripts/app/controllers/_application_controller_form.coffee b/app/assets/javascripts/app/controllers/_application_controller_form.coffee index ed8b58084..79f6ed2e8 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_form.coffee +++ b/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.attr('disabled', true) + lookupForm.prop('readonly', 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.attr('disabled', true) + form.prop('readonly', 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.attr('disabled', false) + lookupForm.prop('readonly', 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.attr('disabled', false) + form.prop('readonly', false) + form.prop('disabled', false) @validate: (data) -> diff --git a/app/assets/javascripts/app/controllers/_ui_element/richtext.coffee b/app/assets/javascripts/app/controllers/_ui_element/richtext.coffee index 262b742b2..b43483c31 100644 --- a/app/assets/javascripts/app/controllers/_ui_element/richtext.coffee +++ b/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 - $('.main .newTicket .page-content .js-submit') - .text(App.i18n.translateInline('Uploading')) - .addClass('is-disabled') + item.find('[contenteditable]').trigger('fileUploadStart') App.Log.debug 'UiElement.richtext', 'upload start' onAborted: => @attachmentPlaceholder.removeClass('hide') @attachmentUpload.addClass('hide') item.find('input').val('') - $('.main .newTicket .page-content .js-submit') - .text(App.i18n.translateInline('Create')) - .removeClass('is-disabled') + item.find('[contenteditable]').trigger('fileUploadStop', ['aborted']) # 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') - .text(App.i18n.translateInline('Create')) - .removeClass('is-disabled') - + item.find('[contenteditable]').trigger('fileUploadStop', ['completed']) App.Log.debug 'UiElement.richtext', 'upload complete', response.data # Called during upload progress, first parameter diff --git a/app/assets/javascripts/app/controllers/agent_ticket_create.coffee b/app/assets/javascripts/app/controllers/agent_ticket_create.coffee index 153b1bc4f..5c02b5bb0 100644 --- a/app/assets/javascripts/app/controllers/agent_ticket_create.coffee +++ b/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) -> diff --git a/app/assets/javascripts/app/controllers/customer_ticket_create.coffee b/app/assets/javascripts/app/controllers/customer_ticket_create.coffee index d3ab6240d..fb917fdb9 100644 --- a/app/assets/javascripts/app/controllers/customer_ticket_create.coffee +++ b/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') diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.coffee index 7683aee44..141e06537 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom.coffee +++ b/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_id: @ticket_id - el: elLocal.find('.article-new') - formMeta: @formMeta - form_id: @form_id - defaults: @taskGet('article') - taskKey: @taskKey - ui: @ + ticket: @ticket + ticket_id: @ticket_id + el: elLocal.find('.article-new') + formMeta: @formMeta + form_id: @form_id + defaults: @taskGet('article') + taskKey: @taskKey + 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) -> diff --git a/app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee b/app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee index 4f3416985..d24dc366d 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom/article_new.coffee +++ b/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') - .text(App.i18n.translateInline('Uploading')) - .addClass('is-disabled') + + if @callbackFileUploadStart + @callbackFileUploadStart() onAborted: => @attachmentPlaceholder.removeClass('hide') @attachmentUpload.addClass('hide') @$('.article-attachment input').val('') - $('.active .attributeBar .js-submit') - .text(App.i18n.translateInline('Update')) - .removeClass('is-disabled') + + if @callbackFileUploadStop + @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')) - .removeClass('is-disabled') + + if @callbackFileUploadStop + @callbackFileUploadStop() # Called during upload progress, first parameter # is decimal value from 0 to 100. diff --git a/public/assets/tests/form_find.js b/public/assets/tests/form_find.js index 8474dc541..697d398c9 100644 --- a/public/assets/tests/form_find.js +++ b/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').attr('disabled'), 'disabled') - equal($('#form3 .js-input').attr('readonly'), 'readonly') - equal($('#form3 .js-input').attr('disabled'), undefined) + equal($('#form3 .js-button').prop('readonly'), true) + equal($('#form3 .js-button').prop('disabled'), true) + equal($('#form3 .js-input').prop('readonly'), true) + equal($('#form3 .js-input').prop('disabled'), false) App.ControllerForm.enable($('#form3 .js-button')) - equal($('#form3 .js-button').attr('readonly'), undefined) - equal($('#form3 .js-button').attr('disabled'), undefined) - equal($('#form3 .js-input').attr('readonly'), undefined) - equal($('#form3 .js-input').attr('disabled'), undefined) + equal($('#form3 .js-button').prop('readonly'), false) + equal($('#form3 .js-button').prop('disabled'), false) + equal($('#form3 .js-input').prop('readonly'), false) + equal($('#form3 .js-input').prop('disabled'), false) + + $('#forms').append('

find form check by only disable button

') + 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('

find form check

') 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').attr('disabled'), 'disabled') + equal($('#form4 .js-button').prop('readonly'), true) + 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-input').attr('disabled'), undefined) + equal($('#form4 .js-button').prop('readonly'), false) + equal($('#form4 .js-button').prop('disabled'), false) + equal($('#form4 .js-input').prop('readonly'), false) + equal($('#form4 .js-input').prop('disabled'), false) }); diff --git a/test/browser/agent_ticket_attachment_test.rb b/test/browser/agent_ticket_attachment_test.rb index be0feb36d..c23a7864d 100644 --- a/test/browser/agent_ticket_attachment_test.rb +++ b/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( - css: '.js-submit.is-disabled', - value: 'Uploading', + exists( + css: '.content.active .js-submit:disabled', ) watch_for_disappear( - css: '.js-submit.is-disabled', - value: 'Uploading', + css: '.content.active .js-submit:disabled', ) - match( - css: '.js-submit', - value: 'Create', + exists( + css: '.content.active .js-submit', ) 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( - css: '.js-submit.is-disabled', - value: 'Uploading', + exists( + css: '.content.active .js-submit:disabled', ) watch_for_disappear( - css: '.js-submit.is-disabled', - value: 'Uploading', - ) - match( - css: '.js-submit', - value: 'Update', + css: '.content.active .js-submit:disabled', ) end end