diff options
| -rw-r--r-- | web-ui/app/js/dispatchers/right_pane_dispatcher.js | 1 | ||||
| -rw-r--r-- | web-ui/app/js/mail_view/data/attachment_list.js | 52 | ||||
| -rw-r--r-- | web-ui/app/js/mail_view/ui/attachment_icon.js | 1 | ||||
| -rw-r--r-- | web-ui/app/js/mail_view/ui/attachment_list.js | 29 | ||||
| -rw-r--r-- | web-ui/app/js/mail_view/ui/compose_box.js | 7 | ||||
| -rw-r--r-- | web-ui/app/js/mail_view/ui/draft_box.js | 5 | ||||
| -rw-r--r-- | web-ui/app/js/mixins/with_mail_edit_base.js | 218 | ||||
| -rw-r--r-- | web-ui/app/templates/compose/compose_box.hbs | 22 | ||||
| -rw-r--r-- | web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js | 11 | ||||
| -rw-r--r-- | web-ui/test/spec/mail_view/data/attachment_list.spec.js | 35 | ||||
| -rw-r--r-- | web-ui/test/spec/mail_view/ui/attachment_list.spec.js | 28 | ||||
| -rw-r--r-- | web-ui/test/spec/mail_view/ui/draft_box.spec.js | 2 | ||||
| -rw-r--r-- | web-ui/test/test_data.js | 1 |
13 files changed, 163 insertions, 249 deletions
diff --git a/web-ui/app/js/dispatchers/right_pane_dispatcher.js b/web-ui/app/js/dispatchers/right_pane_dispatcher.js index 7fe4417b..870bcd92 100644 --- a/web-ui/app/js/dispatchers/right_pane_dispatcher.js +++ b/web-ui/app/js/dispatchers/right_pane_dispatcher.js @@ -60,7 +60,6 @@ define( this.openComposeBox = function() { var stage = this.reset(this.attr.composeBox); ComposeBox.attachTo(stage, {currentTag: this.attr.currentTag}); - this.trigger(document, events.mail.resetAttachments); }; this.openFeedbackBox = function() { diff --git a/web-ui/app/js/mail_view/data/attachment_list.js b/web-ui/app/js/mail_view/data/attachment_list.js deleted file mode 100644 index d1d07e0c..00000000 --- a/web-ui/app/js/mail_view/data/attachment_list.js +++ /dev/null @@ -1,52 +0,0 @@ -/* - * Copyright (c) 2015 ThoughtWorks, Inc. - * - * Pixelated is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as published by - * the Free Software Foundation, either version 3 of the License, or - * (at your option) any later version. - * - * Pixelated is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with Pixelated. If not, see <http://www.gnu.org/licenses/>. - */ - -define( - [ - 'page/events' - ], - - function (events) { - 'use strict'; - - function attachmentList() { - this.defaultAttrs({ - attachments: [] - }); - - this.addAttachment = function (event, data) { - this.attr.attachments.push(data); - }; - - this.resetAttachmentList = function () { - this.attr.attachments = []; - }; - - this.resetAll = function () { - this.resetAttachmentList(); - this.teardown(); - }; - - this.after('initialize', function () { - this.on(document, events.mail.appendAttachment, this.addAttachment); - this.on(document, events.mail.resetAttachments, this.resetAttachmentList); - this.on(document, events.mail.sent, this.resetAll); - }); - } - - return attachmentList; - });
\ No newline at end of file diff --git a/web-ui/app/js/mail_view/ui/attachment_icon.js b/web-ui/app/js/mail_view/ui/attachment_icon.js index 802087f8..b9028f2c 100644 --- a/web-ui/app/js/mail_view/ui/attachment_icon.js +++ b/web-ui/app/js/mail_view/ui/attachment_icon.js @@ -37,7 +37,6 @@ define( this.after('initialize', function () { if (features.isEnabled('attachment')) { this.render(); - $('.attachmentsAreaWrap').hide(); } this.on(this.$node, 'click', this.triggerUploadAttachment); }); diff --git a/web-ui/app/js/mail_view/ui/attachment_list.js b/web-ui/app/js/mail_view/ui/attachment_list.js index 60e6abad..32a48d0b 100644 --- a/web-ui/app/js/mail_view/ui/attachment_list.js +++ b/web-ui/app/js/mail_view/ui/attachment_list.js @@ -17,11 +17,10 @@ define( [ - 'flight/lib/component', 'page/events' ], - function (defineComponent, events) { + function (events) { 'use strict'; function attachmentList() { @@ -29,14 +28,19 @@ define( inputFileUpload: '#fileupload', attachmentListItem: '#attachment-list-item', progressBar: '#progress .progress-bar', - attachmentBaseUrl: '/attachment' + attachmentBaseUrl: '/attachment', + attachments: [] }); - this.showAttachment = function (event, data) { + this.showAttachment = function (ev, data) { this.trigger(document, events.mail.appendAttachment, data); this.renderAttachmentListView(data); }; + this.addAttachment = function (event, data) { + this.attr.attachments.push(data); + }; + this.renderAttachmentListView = function (data) { var currentHtml = this.select('attachmentListItem').html(); var item = this.buildAttachmentListItem(data); @@ -48,9 +52,9 @@ define( return (bytes / Math.pow(1024, e)).toFixed(2) + ' ' + ' KMGTP'.charAt(e) + 'b'; } - this.buildAttachmentListItem = function (data) { - return '<a href="' + this.attr.attachmentBaseUrl + '/' + data.attachment_id + '?filename=' + - data.filename + '&encoding=base64">' + data.filename + ' (' + humanReadable(data.filesize) + ')' + + this.buildAttachmentListItem = function (attachment) { + return '<a href="' + this.attr.attachmentBaseUrl + '/' + attachment.ident + '?filename=' + + attachment.name + '&encoding=' + attachment.encoding + '">' + attachment.name + ' (' + humanReadable(attachment.size) + ')' + '</a>'; }; @@ -74,20 +78,17 @@ define( } this.startUpload = function () { + addJqueryFileUploadConfig(this); this.select('inputFileUpload').click(); }; - this.resetAll = function () { - this.teardown(); - }; - this.after('initialize', function () { - addJqueryFileUploadConfig(this); this.on(document, events.mail.uploadedAttachment, this.showAttachment); this.on(document, events.mail.startUploadAttachment, this.startUpload); - this.on(document, events.mail.sent, this.resetAll); + //this.on(document, events.mail.sent, this.resetAll); + this.on(document, events.mail.appendAttachment, this.addAttachment); }); } - return defineComponent(attachmentList); + return attachmentList; });
\ No newline at end of file diff --git a/web-ui/app/js/mail_view/ui/compose_box.js b/web-ui/app/js/mail_view/ui/compose_box.js index 48a7c23f..101dc939 100644 --- a/web-ui/app/js/mail_view/ui/compose_box.js +++ b/web-ui/app/js/mail_view/ui/compose_box.js @@ -20,14 +20,13 @@ define( 'views/templates', 'mixins/with_mail_edit_base', 'page/events', - 'mail_view/data/mail_builder', - 'mail_view/data/attachment_list' + 'mail_view/data/mail_builder' ], - function (defineComponent, templates, withMailEditBase, events, mailBuilder, attachmentList) { + function (defineComponent, templates, withMailEditBase, events, mailBuilder) { 'use strict'; - return defineComponent(composeBox, withMailEditBase, attachmentList); + return defineComponent(composeBox, withMailEditBase); function composeBox() { diff --git a/web-ui/app/js/mail_view/ui/draft_box.js b/web-ui/app/js/mail_view/ui/draft_box.js index 675020cb..6a640d88 100644 --- a/web-ui/app/js/mail_view/ui/draft_box.js +++ b/web-ui/app/js/mail_view/ui/draft_box.js @@ -48,6 +48,7 @@ define( .cc(this.attr.recipientValues.cc) .bcc(this.attr.recipientValues.bcc) .body(this.select('bodyBox').val()) + .attachment(this.attr.attachments) .tag(tag); }; @@ -55,7 +56,6 @@ define( var mail = data.mail; var body = mail.textPlainBody; this.attr.ident = mail.ident; - this.render(templates.compose.box, { recipients: { to: mail.header.to, @@ -63,7 +63,8 @@ define( bcc: mail.header.bcc }, subject: mail.header.subject, - body: body + body: body, + attachments: mail.attachments }); this.enableFloatlabel('input.floatlabel'); diff --git a/web-ui/app/js/mixins/with_mail_edit_base.js b/web-ui/app/js/mixins/with_mail_edit_base.js index d0942d4e..d078c582 100644 --- a/web-ui/app/js/mixins/with_mail_edit_base.js +++ b/web-ui/app/js/mixins/with_mail_edit_base.js @@ -17,6 +17,7 @@ define( [ + 'flight/lib/compose', 'helpers/view_helper', 'mail_view/ui/recipients/recipients', 'mail_view/ui/draft_save_status', @@ -27,7 +28,7 @@ define( 'mail_view/ui/attachment_list', 'flight/lib/utils' ], - function (viewHelper, Recipients, DraftSaveStatus, events, i18n, SendButton, AttachmentIcon, AttachmentListUI, utils) { + function (compose, viewHelper, Recipients, DraftSaveStatus, events, i18n, SendButton, AttachmentIcon, attachmentList, utils) { 'use strict'; function withMailEditBase() { @@ -93,12 +94,12 @@ define( context.recipients = {to: [], cc: [], bcc: []}; } this.attr.recipientValues = context.recipients; + this.attr.attachments = context.attachments || []; this.attachRecipients(context); this.on(this.select('trashButton'), 'click', this.discardMail); SendButton.attachTo(this.select('sendButton')); AttachmentIcon.attachTo(this.select('attachmentButton')); - AttachmentListUI.attachTo(this.select('attachmentList')); this.warnSendButtonOfRecipients(); }; @@ -149,108 +150,113 @@ define( this.trigger(events.mail.send_failed); } }; - - this.buildAndSaveDraft = function () { - var mail = this.buildMail(); - this.saveDraft(mail); - }; - - this.recipientsUpdated = function (ev, data) { - this.attr.recipientValues[data.recipientsName] = data.newRecipients; - this.trigger(document, events.ui.mail.recipientsUpdated); - if (data.skipSaveDraft) { return; } - - var mail = this.buildMail(); - this.postponeSaveDraft(mail); - }; - - this.saveDraft = function (mail) { - this.cancelPostponedSaveDraft(); - this.trigger(document, events.mail.saveDraft, mail); - }; - - this.cancelPostponedSaveDraft = function() { - clearTimeout(this.attr.timeout); - }; - - this.postponeSaveDraft = function (mail) { - this.cancelPostponedSaveDraft(); - - this.attr.timeout = window.setTimeout(_.bind(function() { - this.saveDraft(mail); - }, this), this.attr.saveDraftInterval); - }; - - this.draftSaved = function(event, data) { - this.attr.ident = data.ident; - }; - - this.validateAnyRecipient = function () { - return !_.isEmpty(_.flatten(_.values(this.attr.recipientValues))); - }; - - function allRecipientsAreEmails(mail) { - var allRecipients = mail.header.to.concat(mail.header.cc).concat(mail.header.bcc); - return _.isEmpty(allRecipients) ? false : _.all(allRecipients, emailFormatChecker); - } - - function emailFormatChecker(email) { - var emailFormat = /[^\s@]+@[^\s@]+\.[^\s@]+$/; - return emailFormat.test(email); - } - - this.saveTag = function(ev, data) { - this.attr.currentTag = data.tag; - }; - - this.mailSent = function() { - this.trigger(document, events.ui.userAlerts.displayMessage, { message: 'Your message was sent!' }); - }; - - this.enableFloatlabel = function(element) { - var showClass = 'showfloatlabel'; - $(element).bind('keyup', function() { - var label = $(this).prev('label'); - if (this.value !== '') { - label.addClass(showClass); - $(this).addClass(showClass); - } else { - label.removeClass(showClass); - $(this).removeClass(showClass); - } - }); - }; - - this.toggleRecipientsArrows = function () { - $('#cc-bcc-collapse').toggleClass('fa-angle-down'); - $('#cc-bcc-collapse').toggleClass('fa-angle-up'); - }; - - this.before('initialize', function () { - if (!this.discardDraft){ - this.discardDraft = function () {}; - } - }); - - this.bindCollapse = function () { - this.on($('#cc-bcc-collapse'), 'click', this.toggleRecipientsArrows); - }; - - this.after('initialize', function () { - this.on(document, events.dispatchers.rightPane.clear, this.teardown); - this.on(document, events.ui.recipients.updated, this.recipientsUpdated); - this.on(document, events.mail.draftSaved, this.draftSaved); - this.on(document, events.mail.sent, this.mailSent); - - this.on(document, events.ui.mail.send, this.sendMail); - - this.on(document, events.ui.mail.discard, this.discardDraft); - this.on(document, events.ui.tag.selected, this.saveTag); - this.on(document, events.ui.tag.select, this.saveTag); - this.bindCollapse(); - }); - } - - return withMailEditBase; - }); + + this.buildAndSaveDraft = function () { + var mail = this.buildMail(); + this.saveDraft(mail); + }; + + this.recipientsUpdated = function (ev, data) { + this.attr.recipientValues[data.recipientsName] = data.newRecipients; + this.trigger(document, events.ui.mail.recipientsUpdated); + if (data.skipSaveDraft) { + return; + } + + var mail = this.buildMail(); + this.postponeSaveDraft(mail); + }; + + this.saveDraft = function (mail) { + this.cancelPostponedSaveDraft(); + this.trigger(document, events.mail.saveDraft, mail); + }; + + this.cancelPostponedSaveDraft = function () { + clearTimeout(this.attr.timeout); + }; + + this.postponeSaveDraft = function (mail) { + this.cancelPostponedSaveDraft(); + + this.attr.timeout = window.setTimeout(_.bind(function () { + this.saveDraft(mail); + }, this), this.attr.saveDraftInterval); + }; + + this.draftSaved = function (event, data) { + this.attr.ident = data.ident; + }; + + this.validateAnyRecipient = function () { + return !_.isEmpty(_.flatten(_.values(this.attr.recipientValues))); + }; + + function allRecipientsAreEmails(mail) { + var allRecipients = mail.header.to.concat(mail.header.cc).concat(mail.header.bcc); + return _.isEmpty(allRecipients) ? false : _.all(allRecipients, emailFormatChecker); + } + + function emailFormatChecker(email) { + var emailFormat = /[^\s@]+@[^\s@]+\.[^\s@]+$/; + return emailFormat.test(email); + } + + this.saveTag = function (ev, data) { + this.attr.currentTag = data.tag; + }; + + this.mailSent = function () { + this.trigger(document, events.ui.userAlerts.displayMessage, {message: 'Your message was sent!'}); + }; + + this.enableFloatlabel = function (element) { + var showClass = 'showfloatlabel'; + $(element).bind('keyup', function () { + var label = $(this).prev('label'); + if (this.value !== '') { + label.addClass(showClass); + $(this).addClass(showClass); + } else { + label.removeClass(showClass); + $(this).removeClass(showClass); + } + }); + }; + + this.toggleRecipientsArrows = function () { + $('#cc-bcc-collapse').toggleClass('fa-angle-down'); + $('#cc-bcc-collapse').toggleClass('fa-angle-up'); + }; + + this.before('initialize', function () { + if (!this.discardDraft) { + this.discardDraft = function () { + }; + } + }); + + this.bindCollapse = function () { + this.on($('#cc-bcc-collapse'), 'click', this.toggleRecipientsArrows); + }; + + this.after('initialize', function () { + this.on(document, events.dispatchers.rightPane.clear, this.teardown); + this.on(document, events.ui.recipients.updated, this.recipientsUpdated); + this.on(document, events.mail.draftSaved, this.draftSaved); + this.on(document, events.mail.sent, this.mailSent); + + this.on(document, events.ui.mail.send, this.sendMail); + + this.on(document, events.ui.mail.discard, this.discardDraft); + this.on(document, events.ui.tag.selected, this.saveTag); + this.on(document, events.ui.tag.select, this.saveTag); + this.bindCollapse(); + }); + + compose.mixin(this, [attachmentList]); + } + + return withMailEditBase; + }); diff --git a/web-ui/app/templates/compose/compose_box.hbs b/web-ui/app/templates/compose/compose_box.hbs index 1904e275..902221e0 100644 --- a/web-ui/app/templates/compose/compose_box.hbs +++ b/web-ui/app/templates/compose/compose_box.hbs @@ -24,20 +24,26 @@ <!-- The file input field used as target for the file upload widget --> <input id="fileupload" type="file" name="attachment"> </span> - <br> - <br> <!-- The global progress bar --> <div id="progress" class="progress"> <div class="progress-bar progress-bar-success"></div> </div> + <!-- The container for the uploaded files --> - <div class="attachmentsAreaWrap"> - <div class="attachmentsArea column large-12"> - <p><strong><i class="fa fa-paperclip"></i> Attachment(s):</strong></p> - <ul id="attachment-list-item"></ul> - </div> + <div class="attachmentsAreaWrap {{#unless attachments}}hide{{/unless}}"> + <div class="attachmentsArea column large-12"> + <p><strong><i class="fa fa-paperclip"></i> Attachment(s):</strong></p> + <ul id="attachment-list-item"> + {{#each attachments }} + <li> + <a href="/attachment/{{ this.ident }}?encoding={{ this.encoding }}&filename={{ this.name }}">{{ this.name }} ({{ this.size}}) + <i class="fa fa-arrow-down download-icon"></i></a> + </li> + {{/each }} + </ul> + </div> </div> - + <br> </div> diff --git a/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js b/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js index 89793183..9df1d557 100644 --- a/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js +++ b/web-ui/test/spec/dispatchers/right_pane_dispatcher.spec.js @@ -15,17 +15,6 @@ describeComponent('dispatchers/right_pane_dispatcher', function () { expect(composeBox.attachTo).toHaveBeenCalled(); }); - it('should trigger reset attachment list on open compose box event', function () { - var composeBox = require('mail_view/ui/compose_box'); - Pixelated.mockBloodhound(); - this.setupComponent(); - var triggerRestAttachment = spyOnEvent(document, Pixelated.events.mail.resetAttachments); - this.component.trigger(document, Pixelated.events.dispatchers.rightPane.openComposeBox); - - expect(triggerRestAttachment).toHaveBeenTriggeredOn(document); - }); - - describe('no message selected', function () { var noMessageSelectedPane; beforeEach(function () { diff --git a/web-ui/test/spec/mail_view/data/attachment_list.spec.js b/web-ui/test/spec/mail_view/data/attachment_list.spec.js deleted file mode 100644 index 45167e33..00000000 --- a/web-ui/test/spec/mail_view/data/attachment_list.spec.js +++ /dev/null @@ -1,35 +0,0 @@ -describeMixin('mail_view/data/attachment_list', function () { - 'use strict'; - - describe('initialization', function() { - beforeEach(function(){ - this.setupComponent(); - }); - - it('should add attachment to the list based on uploadedAttachment event', function () { - var stubAttachment = {attachment_id: 'faked'}; - $(document).trigger(Pixelated.events.mail.appendAttachment, stubAttachment); - expect(this.component.attr.attachments).toEqual([stubAttachment]); - - var anotherStubAttachment = {attachment_id: 'faked 2'}; - $(document).trigger(Pixelated.events.mail.appendAttachment, anotherStubAttachment); - expect(this.component.attr.attachments).toEqual([stubAttachment, anotherStubAttachment]); - }); - - it('should reset attachment list on compose', function () { - this.component.attr.attachments = ['some array']; - $(document).trigger(Pixelated.events.mail.resetAttachments); - - expect(this.component.attr.attachments).toEqual([]); - }); - - it('should reset attachment list and tear down when email sent', function () { - this.component.attr.attachments = ['some array']; - $(document).trigger(Pixelated.events.mail.sent); - - expect(this.component.attr.attachments).toEqual([]); - }); - - }); - -}); diff --git a/web-ui/test/spec/mail_view/ui/attachment_list.spec.js b/web-ui/test/spec/mail_view/ui/attachment_list.spec.js index 8bbc9f1a..ccede0d9 100644 --- a/web-ui/test/spec/mail_view/ui/attachment_list.spec.js +++ b/web-ui/test/spec/mail_view/ui/attachment_list.spec.js @@ -1,4 +1,4 @@ -describeComponent('mail_view/ui/attachment_list', function () { +describeMixin('mail_view/ui/attachment_list', function () { 'use strict'; describe('initialization', function () { @@ -8,9 +8,19 @@ describeComponent('mail_view/ui/attachment_list', function () { '</div>'); }); + it('should add attachment to the list based on uploadedAttachment event', function () { + var stubAttachment = {ident: 'faked'}; + $(document).trigger(Pixelated.events.mail.appendAttachment, stubAttachment); + expect(this.component.attr.attachments).toEqual([stubAttachment]); + + var anotherStubAttachment = {ident: 'faked 2'}; + $(document).trigger(Pixelated.events.mail.appendAttachment, anotherStubAttachment); + expect(this.component.attr.attachments).toEqual([stubAttachment, anotherStubAttachment]); + }); + it('should trigger add attachment event', function () { var triggerUploadAttachment = spyOnEvent(document, Pixelated.events.mail.appendAttachment); - var stubAttachment = {attachment_id: 'faked'}; + var stubAttachment = {ident: 'faked'}; $(document).trigger(Pixelated.events.mail.uploadedAttachment, stubAttachment); @@ -18,7 +28,7 @@ describeComponent('mail_view/ui/attachment_list', function () { }); it('should render attachment list view based on uploadedAttachment event', function () { - var stubAttachment = {attachment_id: 'faked', filename: 'haha.txt', filesize: 4500}; + var stubAttachment = {ident: 'faked', name: 'haha.txt', size: 4500, encoding: 'base64'}; $(document).trigger(Pixelated.events.mail.uploadedAttachment, stubAttachment); @@ -26,18 +36,8 @@ describeComponent('mail_view/ui/attachment_list', function () { expect(this.component.select('attachmentListItem').html()).toEqual(expected_li); }); - it('should tear down when email sent', function () { - var mockTearDown = spyOn(this.Component.prototype, 'resetAll'); - this.setupComponent('<div id="attachment-list">' + - '<ul id="attachment-list-item"></ul>' + - '</div>'); - $(document).trigger(Pixelated.events.mail.sent); - - expect(mockTearDown).toHaveBeenCalled(); - }); - xit('should start uploading attachments', function () { - var stubAttachment = {attachment_id: 'faked', filename: 'haha.txt', filesize: 4500}; + var stubAttachment = {ident: 'faked', name: 'haha.txt', size: 4500}; var mockAjax = spyOn($, 'ajax').and.callFake(function (params) {params.success(stubAttachment);}); var uploadedAttachment = spyOnEvent(document, Pixelated.events.mail.uploadedAttachment); var uploading = spyOnEvent(document, Pixelated.events.mail.uploadingAttachment); diff --git a/web-ui/test/spec/mail_view/ui/draft_box.spec.js b/web-ui/test/spec/mail_view/ui/draft_box.spec.js index 96880adf..f095f5e5 100644 --- a/web-ui/test/spec/mail_view/ui/draft_box.spec.js +++ b/web-ui/test/spec/mail_view/ui/draft_box.spec.js @@ -34,7 +34,7 @@ describeComponent('mail_view/ui/draft_box', function () { expect(this.component.render).toHaveBeenCalledWith(templates.compose.box, { recipients: { to: mail.header.to, cc: mail.header.cc, bcc: mail.header.bcc }, - subject: mail.header.subject, + subject: mail.header.subject, attachments: [], body: mail.textPlainBody }); }); diff --git a/web-ui/test/test_data.js b/web-ui/test/test_data.js index ea9458dc..e9388c2f 100644 --- a/web-ui/test/test_data.js +++ b/web-ui/test/test_data.js @@ -132,6 +132,7 @@ define(function() { tags:['textplain'], mailbox: ['inbox'], status:[], + attachments: [], textPlainBody: 'Hello Everyone', isSentMail: function() { return false; }, isDraftMail: function() { return false; }, |