Listens to mails available events and count unread #564

- Considering unread all the mails that doesn't have the 'read' status
- Remove initial templates because title doesn't support html tags
  inside

6 files changed, 58 insertions, 21 deletions

diff --git a/web-ui/app/index.html b/web-ui/app/index.html
index f11b05f8..9ffeee82 100644
--- a/web-ui/app/index.html
+++ b/web-ui/app/index.html
@@ -6,7 +6,7 @@
       href="assets/images/Favicon.png">
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-<title><span id="unread-count-title"></span> $account_email - Pixelated Mail</title>
+<title>$account_email - Pixelated Mail</title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width">
 <link href="assets/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js
index 1ca10b50..e33ec723 100644
--- a/web-ui/app/js/page/default.js
+++ b/web-ui/app/js/page/default.js
@@ -128,7 +128,7 @@ define(
       feedback.attachTo('#feedback');
       feedbackSender.attachTo(document);
 
-      unreadCountTitle.attachTo('#unread-count-title');
+      unreadCountTitle.attachTo(document);
     }
 
     return initialize;
diff --git a/web-ui/app/js/page/unread_count_title.js b/web-ui/app/js/page/unread_count_title.js
index f60f5668..26daabec 100644
--- a/web-ui/app/js/page/unread_count_title.js
+++ b/web-ui/app/js/page/unread_count_title.js
@@ -19,21 +19,32 @@
 define(
   [
     'flight/lib/component',
-    'views/templates',
     'page/events',
   ],
 
-  function (defineComponent, templates, events) {
+  function (defineComponent, events) {
     'use strict';
-    
+
     return defineComponent(function () {
-      this.render = function () {
-        var unreadCountTitleHTML = templates.page.unreadCountTitle();
-        this.$node.html(unreadCountTitleHTML);
+      this.getTitleText = function () {
+        return document.title;
+      };
+
+      this.updateCount = function (ev, data) {
+        var unread = data.mails.filter(function (mail) {
+            return mail.status.indexOf('read') === -1;
+        }).length;
+
+        if (unread > 0) {
+            document.title = '(' + unread + ') - ' + this.rawTitle;
+        } else {
+            document.title = this.rawTitle;
+        }
       };
 
       this.after('initialize', function () {
-        this.render();
+        this.rawTitle = document.title;
+        this.on(document, events.mails.available, this.updateCount);
       });
 
     });
diff --git a/web-ui/app/js/views/templates.js b/web-ui/app/js/views/templates.js
index 99bffae9..e3b8d1f2 100644
--- a/web-ui/app/js/views/templates.js
+++ b/web-ui/app/js/views/templates.js
@@ -62,7 +62,6 @@ define(['hbs/templates'], function (templates) {
       userSettingsBox: window.Pixelated['app/templates/page/user_settings_box.hbs'],
       logout: window.Pixelated['app/templates/page/logout.hbs'],
       logoutShortcut: window.Pixelated['app/templates/page/logout_shortcut.hbs'],
-      unreadCountTitle: window.Pixelated['app/templates/page/unread_count_title.hbs'],
       version: window.Pixelated['app/templates/page/version.hbs']
     },
     feedback: {
diff --git a/web-ui/app/templates/page/unread_count_title.hbs b/web-ui/app/templates/page/unread_count_title.hbs
deleted file mode 100644
index 1ae379b6..00000000
--- a/web-ui/app/templates/page/unread_count_title.hbs
+++ /dev/null
@@ -1 +0,0 @@
-<span>(1)</span>
diff --git a/web-ui/test/spec/page/unread_count_title.spec.js b/web-ui/test/spec/page/unread_count_title.spec.js
index ce49c48b..0291c1db 100644
--- a/web-ui/test/spec/page/unread_count_title.spec.js
+++ b/web-ui/test/spec/page/unread_count_title.spec.js
@@ -1,21 +1,49 @@
 
 describeComponent('page/unread_count_title', function () {
   'use strict';
-  describe('title bar', function () {
+  describe('unread count on title bar', function () {
+
     beforeEach(function () {
-      this.setupComponent('<span></span>');
+      document.title = 'example@pixelated-project.org';
+      this.setupComponent();
+    });
+
+    it('listens to mails available event', function () {
+      this.component.trigger(Pixelated.events.mails.available, {mails: []});
+      expect(this.component.getTitleText()).toEqual('example@pixelated-project.org');
     });
 
-    it('should render template', function () {
-      expect(this.$node).toExist();
-      expect(this.$node.html()).toEqual('<span>(1)</span>');
+    it('only considers unread mails', function () {
+      var readMail = {'status': ['read']};
+      this.component.trigger(Pixelated.events.mails.available, {mails: [readMail]});
+      expect(this.component.getTitleText()).toEqual('example@pixelated-project.org');
     });
-    
-    it('should update count on mail read event', function () {
-      this.component.trigger(Pixelated.events.mails.read);
-        $(document).trigger(Pixelated.events.mail.read, { tags: ['someothertag'], mailbox: 'inbox' });
-      expect(this.$node.html()).toEqual('<span>(1)</span>');
+
+    it('update for one unread email', function () {
+      var mails = [{'status': ['read']}, {'status': []}];
+      this.component.trigger(Pixelated.events.mails.available, {mails: mails});
+      expect(this.component.getTitleText()).toEqual('(1) - example@pixelated-project.org');
+    });
+
+    it('update for more than one unread email', function () {
+      var mails = [{'status': ['read']}, {'status': []}, {'status': []}];
+      this.component.trigger(Pixelated.events.mails.available, {mails: mails});
+      expect(this.component.getTitleText()).toEqual('(2) - example@pixelated-project.org');
     });
 
+    it('update for more than one unread email', function () {
+      var mails = [{'status': ['read']}, {'status': []}, {'status': []}];
+      this.component.trigger(Pixelated.events.mails.available, {mails: mails});
+      expect(this.component.getTitleText()).toEqual('(2) - example@pixelated-project.org');
+    });
+
+    it('decreases unread count', function () {
+      document.title = '(2) - example@pixelated-project.org';
+      var mails = [{'status': ['read']}, {'status': ['read']}];
+      this.component.trigger(Pixelated.events.mails.available, {mails: mails});
+      expect(this.component.getTitleText()).toEqual('example@pixelated-project.org');
+    });
+
+
   });
 });