refactor mail item mixin creation and rendering

11 files changed, 33 insertions, 52 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..4c4b2524 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
@@ -40,9 +40,7 @@ define(
       };
 
       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..efcb6cf9 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,7 +26,7 @@ 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(); }
     };
 
@@ -69,34 +69,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.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..6ab990dd 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
@@ -45,10 +45,7 @@ define(
       };
 
       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>