Merge pull request #376 from pixelated-project/mail-item-refactor

Mail item refactor

17 files changed, 122 insertions, 77 deletions

diff --git a/web-ui/app/js/helpers/view_helper.js b/web-ui/app/js/helpers/view_helper.js
index a682ae5e..8d841cc7 100644
--- a/web-ui/app/js/helpers/view_helper.js
+++ b/web-ui/app/js/helpers/view_helper.js
@@ -83,15 +83,6 @@ define(
     return res;
   }
 
-  function getFormattedDate(date){
-    var today = createTodayDate();
-    if (date.getTime() > today.getTime()) {
-      return fixedSizeNumber(date.getHours(), 2) + ':' + fixedSizeNumber(date.getMinutes(), 2);
-    } else {
-      return '' + date.getFullYear() + '-' + fixedSizeNumber(date.getMonth() + 1, 2) + '-' + fixedSizeNumber(date.getDate(), 2);
-    }
-  }
-
   function createTodayDate() {
     var today = new Date();
     today.setHours(0);
@@ -120,11 +111,23 @@ define(
     return '\n\n' + prependFrom(mail) + mail.textPlainBody.replace(/^/mg, '> ');
   }
 
+  function formatDate(dateString) {
+    var date = new Date(dateString);
+    var today = createTodayDate();
+    if (date.getTime() > today.getTime()) {
+      return fixedSizeNumber(date.getHours(), 2) + ':' + fixedSizeNumber(date.getMinutes(), 2);
+    } else {
+      return '' + date.getFullYear() + '-' + fixedSizeNumber(date.getMonth() + 1, 2) + '-' + fixedSizeNumber(date.getDate(), 2);
+    }
+  }
+
+  Handlebars.registerHelper('formatDate', formatDate);
+  Handlebars.registerHelper('formatStatusClasses', formatStatusClasses);
+
   return {
     formatStatusClasses: formatStatusClasses,
     formatMailBody: formatMailBody,
     moveCaretToEndOfText: moveCaretToEndOfText,
-    getFormattedDate: getFormattedDate,
     quoteMail: quoteMail,
     i18n: i18n
   };
diff --git a/web-ui/app/js/mail_list/ui/mail_item_factory.js b/web-ui/app/js/mail_list/ui/mail_item_factory.js
index 3c815401..ddfa4c62 100644
--- a/web-ui/app/js/mail_list/ui/mail_item_factory.js
+++ b/web-ui/app/js/mail_list/ui/mail_item_factory.js
@@ -40,6 +40,7 @@ define(
       var mailItemContainer = $('<li>', { id: 'mail-' + mail.ident});
       nodeToAttachTo.append(mailItemContainer);
 
+      mail.currentTag = currentTag;
       var mailToCreate = MAIL_ITEM_TYPE[mail.mailbox] || GenericMailItem;
       mailToCreate.attachTo(mailItemContainer, {
         mail: mail,
diff --git a/web-ui/app/js/mail_list/ui/mail_items/draft_item.js b/web-ui/app/js/mail_list/ui/mail_items/draft_item.js
index fda6c3f8..57fbafd5 100644
--- a/web-ui/app/js/mail_list/ui/mail_items/draft_item.js
+++ b/web-ui/app/js/mail_list/ui/mail_items/draft_item.js
@@ -33,16 +33,14 @@ define(
         if (this.isOpeningOnANewTab(ev)) {
           return;
         }
-        this.trigger(document, events.dispatchers.rightPane.openDraft, { ident: this.attr.ident });
-        this.trigger(document, events.ui.mail.updateSelected, { ident: this.attr.ident });
-        this.trigger(document, events.router.pushState, { mailIdent: this.attr.ident });
+        this.trigger(document, events.dispatchers.rightPane.openDraft, { ident: this.attr.mail.ident });
+        this.trigger(document, events.ui.mail.updateSelected, { ident: this.attr.mail.ident });
+        this.trigger(document, events.router.pushState, { mailIdent: this.attr.mail.ident });
         ev.preventDefault(); // don't let the hashchange trigger a popstate
       };
 
       this.after('initialize', function () {
-        this.initializeAttributes();
         this.render();
-        this.attachListeners();
 
         if (this.attr.isChecked) {
           this.checkCheckbox();
diff --git a/web-ui/app/js/mail_list/ui/mail_items/generic_mail_item.js b/web-ui/app/js/mail_list/ui/mail_items/generic_mail_item.js
index b700eeeb..939f7e1b 100644
--- a/web-ui/app/js/mail_list/ui/mail_items/generic_mail_item.js
+++ b/web-ui/app/js/mail_list/ui/mail_items/generic_mail_item.js
@@ -38,14 +38,14 @@ define(
           updateMailStatusToRead.call(this);
           return;
         }
-        this.trigger(document, events.ui.mail.open, { ident: this.attr.ident });
-        this.trigger(document, events.router.pushState, { mailIdent: this.attr.ident });
+        this.trigger(document, events.ui.mail.open, { ident: this.attr.mail.ident });
+        this.trigger(document, events.router.pushState, { mailIdent: this.attr.mail.ident });
         ev.preventDefault(); // don't let the hashchange trigger a popstate
       };
 
       function updateMailStatusToRead() {
         if (!_.contains(this.attr.mail.status, this.status.READ)) {
-          var mail_read_data = { ident: this.attr.ident, tags: this.attr.tags, mailbox: this.attr.mailbox };
+          var mail_read_data = { ident: this.attr.mail.ident, tags: this.attr.mail.tags, mailbox: this.attr.mail.mailbox };
           this.trigger(document, events.mail.read, mail_read_data);
           this.attr.mail.status.push(this.status.READ);
           this.$node.addClass(viewHelpers.formatStatusClasses(this.attr.mail.status));
@@ -53,16 +53,16 @@ define(
       }
 
       this.openMail = function (ev, data) {
-        if (data.ident !== this.attr.ident) {
+        if (data.ident !== this.attr.mail.ident) {
           return;
         }
         updateMailStatusToRead.call(this);
 
-        this.trigger(document, events.ui.mail.updateSelected, { ident: this.attr.ident });
+        this.trigger(document, events.ui.mail.updateSelected, { ident: this.attr.mail.ident });
       };
 
       this.updateTags = function(ev, data) {
-        if(data.ident === this.attr.ident){
+        if(data.ident === this.attr.mail.ident){
           this.attr.tags = data.tags;
           if(!_.contains(this.attr.tags, this.attr.tag)) {
             this.teardown();
@@ -73,16 +73,13 @@ define(
       };
 
       this.deleteMail = function(ev, data) {
-        if(data.mail.ident === this.attr.ident){
+        if(data.mail.ident === this.attr.mail.ident){
           this.teardown();
         }
       };
 
       this.after('initialize', function () {
-        this.initializeAttributes();
-        this.attr.tagsForListView = _.without(this.attr.tags, this.attr.tag);
         this.render();
-        this.attachListeners();
 
         if (this.attr.isChecked) {
           this.checkCheckbox();
diff --git a/web-ui/app/js/mail_list/ui/mail_items/mail_item.js b/web-ui/app/js/mail_list/ui/mail_items/mail_item.js
index fe77b248..266db926 100644
--- a/web-ui/app/js/mail_list/ui/mail_items/mail_item.js
+++ b/web-ui/app/js/mail_list/ui/mail_items/mail_item.js
@@ -26,14 +26,10 @@ define(
 
   function mailItem() {
     this.updateSelected = function (ev, data) {
-      if (data.ident === this.attr.ident) { this.doSelect(); }
+      if (data.ident === this.attr.mail.ident) { this.doSelect(); }
       else { this.doUnselect(); }
     };
 
-    this.formattedDate = function (date) {
-      return viewHelper.getFormattedDate(new Date(date));
-    };
-
     this.isOpeningOnANewTab = function (ev) {
       return ev.metaKey || ev.ctrlKey || ev.which === 2;
     };
@@ -69,34 +65,22 @@ define(
     };
 
     this.render = function () {
-      this.attr.tagsForListView = _.without(this.attr.tags, this.attr.tag);
-      var mailItemHtml = templates.mails[this.attr.templateType](this.attr);
+      this.attr.mail.tagsForListView = _.without(this.attr.mail.tags, this.attr.tag);
+      var mailItemHtml = templates.mails[this.attr.templateType](this.attr.mail);
       this.$node.html(mailItemHtml);
-      this.$node.addClass(this.attr.statuses);
-      if(this.attr.selected) { this.doSelect(); }
+      this.$node.addClass(viewHelper.formatStatusClasses(this.attr.mail.status));
+      if (this.attr.selected) { this.doSelect(); }
       this.on(this.$node.find('a'), 'click', this.triggerOpenMail);
     };
 
-    this.initializeAttributes = function () {
-      var mail = this.attr.mail;
-      this.attr.ident = mail.ident;
-      this.attr.header = mail.header;
-      this.attr.ident = mail.ident;
-      this.attr.statuses = viewHelper.formatStatusClasses(mail.status);
-      this.attr.tags = mail.tags;
-      this.attr.attachments = mail.attachments;
-      this.attr.mailbox = mail.mailbox;
-      this.attr.header.formattedDate = this.formattedDate(mail.header.date);
-    };
-
-    this.attachListeners = function () {
+    this.after('initialize', function () {
       this.on(this.$node.find('input[type=checkbox]'), 'change', this.doMailChecked);
       this.on(document, events.ui.mails.cleanSelected, this.doUnselect);
       this.on(document, events.ui.tag.select, this.doUnselect);
       this.on(document, events.ui.tag.select, this.uncheckCheckbox);
       this.on(document, events.ui.mails.uncheckAll, this.uncheckCheckbox);
       this.on(document, events.ui.mails.checkAll, this.checkCheckbox);
-    };
+    });
   }
 
   return mailItem;
diff --git a/web-ui/app/js/mail_list/ui/mail_items/sent_item.js b/web-ui/app/js/mail_list/ui/mail_items/sent_item.js
index 3cfa25bd..9e511068 100644
--- a/web-ui/app/js/mail_list/ui/mail_items/sent_item.js
+++ b/web-ui/app/js/mail_list/ui/mail_items/sent_item.js
@@ -32,23 +32,20 @@ define(
         if (this.isOpeningOnANewTab(ev)) {
           return;
         }
-        this.trigger(document, events.ui.mail.open, { ident: this.attr.ident });
-        this.trigger(document, events.router.pushState, { mailIdent: this.attr.ident });
+        this.trigger(document, events.ui.mail.open, { ident: this.attr.mail.ident });
+        this.trigger(document, events.router.pushState, { mailIdent: this.attr.mail.ident });
         ev.preventDefault(); // don't let the hashchange trigger a popstate
       };
 
       this.openMail = function (ev, data) {
-        if (data.ident !== this.attr.ident) {
+        if (data.ident !== this.attr.mail.ident) {
           return;
         }
-        this.trigger(document, events.ui.mail.updateSelected, { ident: this.attr.ident });
+        this.trigger(document, events.ui.mail.updateSelected, { ident: this.attr.mail.ident });
       };
 
       this.after('initialize', function () {
-        this.initializeAttributes();
-        this.attr.tagsForListView = _.without(this.attr.tags, this.attr.tag);
         this.render();
-        this.attachListeners();
 
         if (this.attr.isChecked) {
           this.checkCheckbox();
diff --git a/web-ui/app/js/mail_view/ui/mail_view.js b/web-ui/app/js/mail_view/ui/mail_view.js
index 578dcbb9..71a67e5a 100644
--- a/web-ui/app/js/mail_view/ui/mail_view.js
+++ b/web-ui/app/js/mail_view/ui/mail_view.js
@@ -47,9 +47,6 @@ define(
       this.displayMail = function (event, data) {
         this.attr.mail = data.mail;
 
-        var date = new Date(data.mail.header.date);
-        data.mail.header.formattedDate = viewHelpers.getFormattedDate(date);
-
         var signed, encrypted;
 
         data.mail.security_casing = data.mail.security_casing || {};
diff --git a/web-ui/app/templates/mails/draft.hbs b/web-ui/app/templates/mails/draft.hbs
index 87862f34..c3d2fa5b 100644
--- a/web-ui/app/templates/mails/draft.hbs
+++ b/web-ui/app/templates/mails/draft.hbs
@@ -2,8 +2,8 @@
   <input type="checkbox"/>
 </span>
 <span>
-  <a href="/#/{{ tag }}/mail/{{ ident }}">
-    <span class="sent-date">{{ header.formattedDate }}</span>
+  <a href="/#/{{ currentTag }}/mail/{{ ident }}">
+    <span class="sent-date">{{ formatDate header.date }}</span>
 
     <div class="from">
       {{t 'to:'}}
diff --git a/web-ui/app/templates/mails/full_view.hbs b/web-ui/app/templates/mails/full_view.hbs
index 55d116d2..a5c41121 100644
--- a/web-ui/app/templates/mails/full_view.hbs
+++ b/web-ui/app/templates/mails/full_view.hbs
@@ -34,7 +34,7 @@
             {{{formatRecipients header}}}
         </div>
         <div class="recipients column large-2 text-right">
-            <span class="received-date">{{ header.formattedDate }}</span>
+            <span class="received-date">{{ formatDate header.date }}</span>
         </div>
         <div>
             <h3 class="subjectArea column large-10 no-padding">
diff --git a/web-ui/app/templates/mails/sent.hbs b/web-ui/app/templates/mails/sent.hbs
index e4b49b37..a0712124 100644
--- a/web-ui/app/templates/mails/sent.hbs
+++ b/web-ui/app/templates/mails/sent.hbs
@@ -2,8 +2,8 @@
   <input type="checkbox"/>
 </span>
 <span>
-  <a href="/#/{{ tag }}/mail/{{ ident }}">
-    <span class="sent-date">{{ header.formattedDate }}</span>
+  <a href="/#/{{ currentTag }}/mail/{{ ident }}">
+    <span class="sent-date">{{ formatDate header.date }}</span>
 
     <div class="from">
       {{t 'to:'}}
diff --git a/web-ui/app/templates/mails/single.hbs b/web-ui/app/templates/mails/single.hbs
index 90023713..47d600fb 100644
--- a/web-ui/app/templates/mails/single.hbs
+++ b/web-ui/app/templates/mails/single.hbs
@@ -2,8 +2,8 @@
   <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
 </span>
 <span>
-  <a href="/#/{{ tag }}/mail/{{ ident }}">
-    <span class="received-date">{{ header.formattedDate }}
+  <a href="/#/{{ currentTag }}/mail/{{ ident }}">
+    <span class="received-date">{{ formatDate header.date }}
       {{#if attachments}}
         <div class="attachment-indicator">
           <i class="fa fa-paperclip"></i>
diff --git a/web-ui/app/templates/mails/trash.hbs b/web-ui/app/templates/mails/trash.hbs
index a74c9606..4475aeb0 100644
--- a/web-ui/app/templates/mails/trash.hbs
+++ b/web-ui/app/templates/mails/trash.hbs
@@ -2,7 +2,7 @@
   <input type="checkbox" {{#if isChecked }}checked="true"{{/if}} />
 </span>
 <span>
-  <a href="/#/{{ tag }}/mail/{{ ident }}">
+  <a href="/#/{{ currentTag }}/mail/{{ ident }}">
     <span class="received-date">{{ header.formattedDate }}
       {{#if attachments}}
         <div class="attachment-indicator">
diff --git a/web-ui/test/spec/helpers/view_helper.spec.js b/web-ui/test/spec/helpers/view_helper.spec.js
index 920709b2..655ba181 100644
--- a/web-ui/test/spec/helpers/view_helper.spec.js
+++ b/web-ui/test/spec/helpers/view_helper.spec.js
@@ -25,25 +25,29 @@ define(['helpers/view_helper'], function (viewHelper) {
       });
     });
 
-    describe('getFormmattedDate', function() {
+    describe('formatDate', function() {
+      var template;
+      beforeEach(function () {
+        template = Handlebars.compile('{{formatDate date}}');
+      });
+
       it('formats correctly a Date for today', function() {
         var d = new Date();
-        var dtest = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 14, 2, 36);
-
-        var res = viewHelper.getFormattedDate(dtest);
+        var mailDate = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 14, 2, 36);
 
-        expect(res).toEqual('14:02');
+        var result = template({ date: mailDate.toISOString() });
 
+        expect(result).toEqual('14:02');
       });
 
       it('formats correctly a Date for a specific day', function() {
-        var dtest = new Date(2013, 2, 13, 7, 56, 1);
+        var mailDate = new Date(2013, 2, 13, 7, 56, 1);
 
-        var res = viewHelper.getFormattedDate(dtest);
+        var result = template({ date: mailDate.toISOString() });
 
         // This expectation is weird for the month - JS Dates have date numbers be zero-indexed, thus the discrepancy
         // Specifically, the 2 in the constructor DOES match the 3 in the expectation below.
-        expect(res).toEqual('2013-03-13');
+        expect(result).toEqual('2013-03-13');
       });
     });
 
diff --git a/web-ui/test/spec/mail_list/ui/mail_items/draft_item.spec.js b/web-ui/test/spec/mail_list/ui/mail_items/draft_item.spec.js
new file mode 100644
index 00000000..fbe285c6
--- /dev/null
+++ b/web-ui/test/spec/mail_list/ui/mail_items/draft_item.spec.js
@@ -0,0 +1,32 @@
+describeComponent('mail_list/ui/mail_items/draft_item', function () {
+  'use strict';
+
+  var mail;
+
+  beforeEach(function () {
+    mail = Pixelated.testData().parsedMail.draft;
+
+    this.setupComponent('<li></li>', {
+      mail: mail,
+      selected: false,
+      templateType: 'single'
+    });
+  });
+
+  it('should de-select the item if a new mail is composed', function () {
+    this.component.$node.addClass('selected');
+
+    $(document).trigger(Pixelated.events.ui.composeBox.newMessage);
+
+    expect(this.component.$node).not.toHaveClass('selected');
+  });
+
+  it('should trigger the openDraft event when clicked', function () {
+    var openDraftEvent = spyOnEvent(document, Pixelated.events.dispatchers.rightPane.openDraft);
+
+    this.$node.find('a').click();
+
+    expect(openDraftEvent).toHaveBeenTriggeredOnAndWith(document, { ident: 'B2432' });
+  });
+});
+
diff --git a/web-ui/test/spec/mail_list/ui/mail_items/generic_mail_item.spec.js b/web-ui/test/spec/mail_list/ui/mail_items/generic_mail_item.spec.js
index 88735302..87d38595 100644
--- a/web-ui/test/spec/mail_list/ui/mail_items/generic_mail_item.spec.js
+++ b/web-ui/test/spec/mail_list/ui/mail_items/generic_mail_item.spec.js
@@ -7,11 +7,11 @@ describeComponent('mail_list/ui/mail_items/generic_mail_item', function () {
     mail = Pixelated.testData().parsedMail.simpleTextPlain;
     mail.tags = [];
     mail.mailbox = 'inbox';
+    mail.currentTag = 'inbox';
 
     this.setupComponent('<li></li>', {
       mail: mail,
       selected: false,
-      tag: 'inbox',
       templateType: 'single'
     });
   });
diff --git a/web-ui/test/spec/mail_list/ui/mail_items/mail_item.spec.js b/web-ui/test/spec/mail_list/ui/mail_items/mail_item.spec.js
index b1ac3037..03f95e54 100644
--- a/web-ui/test/spec/mail_list/ui/mail_items/mail_item.spec.js
+++ b/web-ui/test/spec/mail_list/ui/mail_items/mail_item.spec.js
@@ -10,7 +10,6 @@ describeMixin('mail_list/ui/mail_items/mail_item', function () {
       selected: false,
       tag: 'inbox'
     });
-    this.component.attachListeners();
   });
 
   describe('mail checkbox', function () {
diff --git a/web-ui/test/test_data.js b/web-ui/test/test_data.js
index f09260c9..446fd7c6 100644
--- a/web-ui/test/test_data.js
+++ b/web-ui/test/test_data.js
@@ -170,6 +170,38 @@ define(function() {
     }
   };
 
+  var draftMail = {
+    status: [],
+    header: {'from': 'jed_waelchi@cummerata.info',
+      cc: [],
+      bcc: [],
+      to: [],
+      date: '2015-04-09T18:30:18.998999-03:00',
+      subject: 'bla'},
+    ident: 'B2432',
+    replying: {'single': 'jed_waelchi@cummerata.info',
+      all: {
+        'to-field': ['jed_waelchi@cummerata.info'],
+        'cc-field': []
+      }
+    },
+    attachments: [],
+    textPlainBody: 'bla',
+    tags: [],
+    htmlBody: null,
+    mailbox: 'drafts',
+    security_casing: {'locks': [],
+      imprints: [{'state': 'no_signature_information'}]
+    },
+    isSentMail: function() { return false; },
+    isDraftMail: function() { return false; },
+    replyToAddress: function() { return { to: ['jed_waelchi@cummerata.info'], cc: [] }; },
+    replyToAllAddress: function() { return { to: ['jed_waelchi@cummerata.info'], cc: [] }; },
+    isMailMultipartAlternative: function () { return false; },
+    availableBodyPartsContentType: function () { return []; },
+    getMailPartByContentType: function () { return; }
+  };
+
   var testData = {
     rawMail: {
       mail: rawMail,
@@ -182,7 +214,8 @@ define(function() {
     },
     parsedMail: {
       simpleTextPlain: simpleTextPlainMail,
-      html: htmlNoEncodingMail
+      html: htmlNoEncodingMail,
+      draft: draftMail
     }
   };