Enhancement to issue #2117 - added generic approach with callback methods for submit disable/enable of attachment uploading.
This commit is contained in:
parent
0fd7dde63e
commit
902b5aca32
9 changed files with 139 additions and 92 deletions
|
@ -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)
|
||||
|
|
|
@ -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) ->
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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) ->
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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) ->
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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('<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').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)
|
||||
|
||||
});
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue