From cbe1f78e42a9d5499917d8939a2e661cd77aeb0d Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Tue, 7 Oct 2014 08:05:10 +0200 Subject: [PATCH] Added working file upload. --- .../_application_controller_form.js.coffee | 15 +- .../controllers/agent_ticket_create.js.coffee | 19 ++- .../app/controllers/ticket_zoom.js.coffee | 138 +++++++++--------- .../javascripts/app/lib/base/html5Upload.js | 34 ++++- .../app/views/agent_ticket_create.jst.eco | 1 + .../app/views/generic/attachment_item.jst.eco | 4 +- .../app/views/generic/richtext.jst.eco | 4 +- .../app/views/ticket_zoom/attachment.jst.eco | 7 - .../app/views/ticket_zoom/edit.jst.eco | 1 + app/assets/stylesheets/zzz.css.erb | 3 +- 10 files changed, 130 insertions(+), 96 deletions(-) delete mode 100644 app/assets/javascripts/app/views/ticket_zoom/attachment.jst.eco diff --git a/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee b/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee index 9ae7997cb..b679e9ff1 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_form.js.coffee @@ -717,7 +717,7 @@ class App.ControllerForm extends App.Controller renderAttachment = (file) => item.find('.attachments').append( App.view('generic/attachment_item')( fileName: file.filename - fileSize: @humanFileSize(file.size) + fileSize: @humanFileSize( file.size ) store_id: file.store_id )) item.on( @@ -748,8 +748,9 @@ class App.ControllerForm extends App.Controller @attachmentsHolder = item.find('.attachments') html5Upload.initialize( uploadUrl: App.Config.get('api_path') + '/ticket_attachment_upload', - dropContainer: item.find( ".attachmentPlaceholder" ).get(0), - inputField: item.find( "input" ).get(0), + dropContainer: item.get(0), + dropContainer1: item.find('.dropArea').get(0), + inputField: item.find( 'input' ).get(0), key: 'File', data: { form_id: @form_id }, maxSimultaneousUploads: 2, @@ -774,9 +775,9 @@ class App.ControllerForm extends App.Controller # Called during upload progress, first parameter # is decimal value from 0 to 100. onProgress: (progress, fileSize, uploadedBytes) => - @progressBar.width(progress + "%") - @progressText.text(progress) - console.log('uploadProgress ', progress) + @progressBar.width(parseInt(progress) + "%") + @progressText.text(parseInt(progress)) + console.log('uploadProgress ', parseInt(progress)) ) ) @@ -805,7 +806,7 @@ class App.ControllerForm extends App.Controller if @el.find('#' + fileUploaderId )[0] @el.find('#' + fileUploaderId ).fineUploader( request: - endpoint: App.Config.get('api_path') + '/ticket_attachment_new' + endpoint: App.Config.get('api_path') + '/ticket_attachment_upload' params: form_id: @form_id text: diff --git a/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee b/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee index a4e562c1f..7d3228398 100644 --- a/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee +++ b/app/assets/javascripts/app/controllers/agent_ticket_create.js.coffee @@ -15,7 +15,6 @@ class App.TicketCreate extends App.Controller return if !@authenticate() # set title - @form_id = App.ControllerForm.formId() @form_meta = undefined # define default type @@ -177,12 +176,6 @@ class App.TicketCreate extends App.Controller render: (template = {}) -> - @html App.view('agent_ticket_create')( - head: 'New Ticket' - agent: @isRole('Agent') - admin: @isRole('Admin') - ) - # get params params = {} if template && !_.isEmpty( template.options ) @@ -190,6 +183,18 @@ class App.TicketCreate extends App.Controller else if App.TaskManager.get(@task_key) && !_.isEmpty( App.TaskManager.get(@task_key).state ) params = App.TaskManager.get(@task_key).state + if params['form_id'] + @form_id = params['form_id'] + else + @form_id = App.ControllerForm.formId() + + @html App.view('agent_ticket_create')( + head: 'New Ticket' + agent: @isRole('Agent') + admin: @isRole('Admin') + form_id: @form_id + ) + formChanges = (params, attribute, attributes, classname, form, ui) => if @form_meta.dependencies && @form_meta.dependencies[attribute.name] dependency = @form_meta.dependencies[attribute.name][ parseInt(params[attribute.name]) ] diff --git a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee index b188360df..c0dde5a8c 100644 --- a/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee +++ b/app/assets/javascripts/app/controllers/ticket_zoom.js.coffee @@ -160,11 +160,15 @@ class App.TicketZoom extends App.Controller el: @el.find('.ticket-meta') ) + @form_id = App.ControllerForm.formId() + + new Edit( ticket: @ticket el: @el.find('.ticket-edit') #el: @el.find('.edit') form_meta: @form_meta + form_id: @form_id defaults: @taskGet('article') ui: @ ) @@ -586,6 +590,7 @@ class App.TicketZoom extends App.Controller # submit changes ticket.save( done: (r) => + @renderDone = false # reset form after save @taskReset() @@ -709,10 +714,10 @@ class Edit extends App.Controller 'submit .recipient-list form': 'add_recipient' 'focus .js-textarea': 'open_textarea' 'input .js-textarea': 'detect_empty_textarea' - 'dragenter': 'onDragenter' - 'dragleave': 'onDragleave' - 'drop': 'onFileDrop' - 'change input[type=file]': 'onFilePick' + #'dragenter': 'onDragenter' + #'dragleave': 'onDragleave' + #'drop': 'onFileDrop' + #'change input[type=file]': 'onFilePick' constructor: -> super @@ -798,7 +803,40 @@ class Edit extends App.Controller maxlength: 2500 }) - @form_id = App.ControllerForm.formId() + html5Upload.initialize( + uploadUrl: App.Config.get('api_path') + '/ticket_attachment_upload', + dropContainer: @$('.article-attachment').get(0), + #dropContainer1: @$('.dropArea').get(0), + inputField: @$('.article-attachment input').get(0), + key: 'File', + data: { form_id: @form_id }, + maxSimultaneousUploads: 2, + onFileAdded: (file) => + + @attachmentPlaceholder.addClass('hide') + @attachmentUpload.removeClass('hide') + + file.on( + # Called after received response from the server + onCompleted: (response) => + + response = JSON.parse(response) + @attachments.push response.data + + @attachmentPlaceholder.removeClass('hide') + @attachmentUpload.addClass('hide') + + @renderAttachment(response.data) + console.log('upload complete', response.data ) + + # Called during upload progress, first parameter + # is decimal value from 0 to 100. + onProgress: (progress, fileSize, uploadedBytes) => + @progressBar.width(parseInt(progress) + "%") + @progressText.text(parseInt(progress)) + console.log('uploadProgress ', parseInt(progress)) + ) + ) # show text module UI if !@isRole('Customer') @@ -1014,75 +1052,37 @@ class Edit extends App.Controller @open_textarea() if @dragEventCounter is 0 @dragEventCounter++ - @ticketEdit.addClass('is-dropTarget') + @ticketEdit.parent().addClass('is-dropTarget') onDragleave: (event) => @dragEventCounter-- - @ticketEdit.removeClass('is-dropTarget') if @dragEventCounter is 0 - - onFileDrop: (event) => - event.preventDefault() - event.stopPropagation() - files = event.originalEvent.dataTransfer.files - @ticketEdit.removeClass('is-dropTarget') - - @queueUpload(files) - - onFilePick: (event) => - @open_textarea() - @queueUpload(event.target.files) - - queueUpload: (files) -> - @uploadQueue ?= [] - - # add files - for file in files - @uploadQueue.push(file) - - @workOfUploadQueue() - - workOfUploadQueue: => - if !@uploadQueue.length - return - - file = @uploadQueue.shift() - # console.log "working of", file, "from", @uploadQueue - @fakeUpload file.name, file.size, @workOfUploadQueue - - humanFileSize: (size) => - i = Math.floor( Math.log(size) / Math.log(1024) ) - return ( size / Math.pow(1024, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i] - - updateUploadProgress: (progress) => - @progressBar.width(progress + "%") - @progressText.text(progress) - - if progress is 100 - @attachmentPlaceholder.removeClass('hide') - @attachmentUpload.addClass('hide') - - fakeUpload: (fileName, fileSize, callback) -> - @attachmentPlaceholder.addClass('hide') - @attachmentUpload.removeClass('hide') - - progress = 0; - duration = fileSize / 1024 - - for i in [0..100] - setTimeout @updateUploadProgress, i*duration/100 , i - - setTimeout (=> - callback() - @renderAttachment(fileName, fileSize) - ), duration - - renderAttachment: (fileName, fileSize) => - @attachments.push([fileName, fileSize]) - @attachmentsHolder.append App.view('ticket_zoom/attachment') - fileName: fileName - fileSize: @humanFileSize(fileSize) + @ticketEdit.parent().removeClass('is-dropTarget') if @dragEventCounter is 0 + renderAttachment: (file) => + @attachmentsHolder.append App.view('generic/attachment_item') + fileName: file.filename + fileSize: @humanFileSize( file.size ) + store_id: file.store_id + @attachmentsHolder.on( + 'click' + "[data-id=#{file.store_id}]", (e) => + @attachments = _.filter( + @attachments, + (item) -> + return if item.id isnt file.store_id + item + ) + store_id = $(e.currentTarget).data('id') + App.Ajax.request( + type: 'DELETE' + url: App.Config.get('api_path') + '/ticket_attachment_upload' + data: JSON.stringify( { store_id: store_id } ), + processData: false + success: (data, status, xhr) => + ) + $(e.currentTarget).closest('.attachment').empty() + ) reset: (e) => e.preventDefault() diff --git a/app/assets/javascripts/app/lib/base/html5Upload.js b/app/assets/javascripts/app/lib/base/html5Upload.js index b180493cd..6331c4395 100644 --- a/app/assets/javascripts/app/lib/base/html5Upload.js +++ b/app/assets/javascripts/app/lib/base/html5Upload.js @@ -11,6 +11,7 @@ function UploadManager(options) { var self = this; self.dropContainer = options.dropContainer; + self.dropContainer1 = options.dropContainer1; self.inputField = options.inputField; self.uploadsQueue = []; self.activeUploads = 0; @@ -67,20 +68,51 @@ console.log('Initializing upload manager'); var manager = this, dropContainer = manager.dropContainer, + dropContainer1 = manager.dropContainer1, inputField = manager.inputField, + inCounter = 0, cancelEvent = function (e) { e.preventDefault(); e.stopPropagation(); + console.log('in', inCounter) + if ( !$(dropContainer).closest('.richtext').hasClass('is-dropTarget') ) { + inCounter++ + } + if ( inCounter === 1 ) { + $(dropContainer).closest('.richtext').addClass('is-dropTarget') + } + }; + leaveEvent = function (e) { + e.preventDefault(); + e.stopPropagation(); + console.log('out', inCounter) + if ( $(dropContainer).closest('.richtext').hasClass('is-dropTarget') ) { + inCounter-- + } + if ( inCounter === 0 ) { + $(dropContainer).closest('.richtext').removeClass('is-dropTarget') + } }; if (dropContainer) { + manager.on(dropContainer, 'dragleave', leaveEvent); manager.on(dropContainer, 'dragover', cancelEvent); manager.on(dropContainer, 'dragenter', cancelEvent); manager.on(dropContainer, 'drop', function (e) { - cancelEvent(e); + leaveEvent(e); manager.processFiles(e.dataTransfer.files); }); } + if (dropContainer1) { + manager.on(dropContainer1, 'dragleave', leaveEvent); + manager.on(dropContainer1, 'dragover', cancelEvent); + manager.on(dropContainer1, 'dragenter', cancelEvent); + manager.on(dropContainer1, 'drop', function (e) { + leaveEvent(e); + manager.processFiles(e.dataTransfer.files); + }); + } + if (inputField) { manager.on(inputField, 'change', function () { diff --git a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco index 60cfa3b53..5f4dee536 100644 --- a/app/assets/javascripts/app/views/agent_ticket_create.jst.eco +++ b/app/assets/javascripts/app/views/agent_ticket_create.jst.eco @@ -26,6 +26,7 @@
+
diff --git a/app/assets/javascripts/app/views/generic/attachment_item.jst.eco b/app/assets/javascripts/app/views/generic/attachment_item.jst.eco index b673ca4af..223d52a6a 100644 --- a/app/assets/javascripts/app/views/generic/attachment_item.jst.eco +++ b/app/assets/javascripts/app/views/generic/attachment_item.jst.eco @@ -1,6 +1,6 @@
-
<%- @fileName %>
-
<%- @fileSize %>
+
<%= @fileName %>
+
<%= @fileSize %>
<%- @T('Delete File') %>
diff --git a/app/assets/javascripts/app/views/generic/richtext.jst.eco b/app/assets/javascripts/app/views/generic/richtext.jst.eco index 4722d928b..37e8b308f 100644 --- a/app/assets/javascripts/app/views/generic/richtext.jst.eco +++ b/app/assets/javascripts/app/views/generic/richtext.jst.eco @@ -1,3 +1,3 @@ -
-
<%= @attribute.value %>
+
+
<%= @attribute.value %>
\ No newline at end of file diff --git a/app/assets/javascripts/app/views/ticket_zoom/attachment.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/attachment.jst.eco deleted file mode 100644 index 6d853379f..000000000 --- a/app/assets/javascripts/app/views/ticket_zoom/attachment.jst.eco +++ /dev/null @@ -1,7 +0,0 @@ -
-
<%- @fileName %>
-
<%- @fileSize %>
-
-
<%- @T('Delete File') %> -
-
\ No newline at end of file diff --git a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco index 2ae15abb3..eab485ee0 100644 --- a/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco +++ b/app/assets/javascripts/app/views/ticket_zoom/edit.jst.eco @@ -1,6 +1,7 @@ +
<%- App.User.fullLocal( @S('id') ).avatar(false, 'right', 'zIndex-5') %> diff --git a/app/assets/stylesheets/zzz.css.erb b/app/assets/stylesheets/zzz.css.erb index 9681fa836..a59ff1031 100644 --- a/app/assets/stylesheets/zzz.css.erb +++ b/app/assets/stylesheets/zzz.css.erb @@ -444,6 +444,7 @@ label { .form-group .controls .richtext { position: relative; + height: auto; } .form-group .help-message { @@ -2676,7 +2677,7 @@ footer { display: none; } - .ticket-edit.is-dropTarget .dropArea { + .is-dropTarget .dropArea { display: block; }