Add no mails availabe message to middle pane

- Issue #503

7 files changed, 113 insertions, 2 deletions

diff --git a/web-ui/app/js/dispatchers/middle_pane_dispatcher.js b/web-ui/app/js/dispatchers/middle_pane_dispatcher.js
index f988454c..59263af2 100644
--- a/web-ui/app/js/dispatchers/middle_pane_dispatcher.js
+++ b/web-ui/app/js/dispatchers/middle_pane_dispatcher.js
@@ -14,14 +14,25 @@
  * 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(['flight/lib/component', 'page/events', 'helpers/triggering'], function(defineComponent, events, triggering) {
+define(['flight/lib/component', 'page/events', 'helpers/triggering', 'mail_view/ui/no_mails_available_pane'], function(defineComponent, events, triggering, NoMailsAvailablePane) {
   'use strict';
 
   return defineComponent(function() {
     this.defaultAttrs({
-      middlePane: '#middle-pane'
+      middlePane: '#middle-pane',
+      noMailsAvailablePane: 'no-mails-available-pane'
     });
 
+    this.createChildDiv = function (component_id) {
+      var child_div = $('<div>', {id: component_id});
+      this.select('middlePane').append(child_div);
+      return child_div;
+    };
+
+    this.resetChildDiv = function() {
+      this.select('middlePane').empty();
+    };
+
     this.refreshMailList =  function (ev, data) {
       this.trigger(document, events.ui.mails.fetchByTag, data);
     };
@@ -40,10 +51,21 @@ define(['flight/lib/component', 'page/events', 'helpers/triggering'], function(d
         this.select('middlePane').css({height: (vh - top) + 'px'});
     };
 
+    this.onMailsChange = function (ev, data) {
+      if (data.mails.length > 0) {
+        NoMailsAvailablePane.teardownAll();
+        this.resetChildDiv();
+      } else {
+        var child_div = this.createChildDiv(this.attr.noMailsAvailablePane);
+        NoMailsAvailablePane.attachTo(child_div);
+      }
+    };
+
     this.after('initialize', function () {
       this.on(document, events.dispatchers.middlePane.refreshMailList, this.refreshMailList);
       this.on(document, events.dispatchers.middlePane.cleanSelected, this.cleanSelected);
       this.on(document, events.dispatchers.middlePane.resetScroll, this.resetScroll);
+      this.on(document, events.mails.available, this.onMailsChange);
 
       this.updateMiddlePaneHeight();
       $(window).on('resize', this.updateMiddlePaneHeight.bind(this));
diff --git a/web-ui/app/js/mail_view/ui/no_mails_available_pane.js b/web-ui/app/js/mail_view/ui/no_mails_available_pane.js
new file mode 100644
index 00000000..edcaade0
--- /dev/null
+++ b/web-ui/app/js/mail_view/ui/no_mails_available_pane.js
@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2014 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(
+  [
+    'flight/lib/component',
+    'views/templates',
+    'mixins/with_hide_and_show',
+    'page/events'
+  ],
+
+  function(defineComponent, templates, withHideAndShow, events) {
+    'use strict';
+
+    //return defineComponent(noMailsAvailablePane, withHideAndShow);
+    return defineComponent(noMailsAvailablePane);
+
+    function noMailsAvailablePane() {
+
+      this.render = function() {
+        this.$node.html(templates.noMailsAvailable());
+      };
+
+      this.after('initialize', function () {
+        this.render();
+
+        // this.on(document, events.dispatchers.middlePane.clear, this.teardown);
+      });
+    }
+  }
+);
diff --git a/web-ui/app/js/page/default.js b/web-ui/app/js/page/default.js
index 1189d1ad..c3d39cd3 100644
--- a/web-ui/app/js/page/default.js
+++ b/web-ui/app/js/page/default.js
@@ -21,6 +21,7 @@ define(
     'user_alerts/ui/user_alerts',
     'mail_list/ui/mail_list',
     'mail_view/ui/no_message_selected_pane',
+    'mail_view/ui/no_mails_available_pane',
     'mail_view/ui/mail_view',
     'mail_view/ui/mail_actions',
     'mail_view/ui/reply_section',
@@ -55,6 +56,7 @@ define(
     userAlerts,
     mailList,
     noMessageSelectedPane,
+    noMailsAvailablePane,
     mailView,
     mailViewActions,
     replyButton,
diff --git a/web-ui/app/js/views/templates.js b/web-ui/app/js/views/templates.js
index 61fb0486..80752e8e 100644
--- a/web-ui/app/js/views/templates.js
+++ b/web-ui/app/js/views/templates.js
@@ -53,6 +53,7 @@ define(['hbs/templates'], function (templates) {
       paginationTrigger: window.Pixelated['app/templates/mail_actions/pagination_trigger.hbs']
     },
     noMessageSelected: window.Pixelated['app/templates/compose/no_message_selected.hbs'],
+    noMailsAvailable: window.Pixelated['app/templates/compose/no_mails_available.hbs'],
     search: {
       trigger: window.Pixelated['app/templates/search/search_trigger.hbs']
     },
diff --git a/web-ui/app/templates/compose/no_mails_available.hbs b/web-ui/app/templates/compose/no_mails_available.hbs
new file mode 100644
index 00000000..a3ec46b3
--- /dev/null
+++ b/web-ui/app/templates/compose/no_mails_available.hbs
@@ -0,0 +1,3 @@
+<div class="scene">
+  <div class="text">{{t 'NO MAILS AVAILABLE'}}.</div>
+</div>
diff --git a/web-ui/test/spec/dispatchers/middle_pane_dispatchers.spec.js b/web-ui/test/spec/dispatchers/middle_pane_dispatchers.spec.js
index 997c51f2..265e1d4f 100644
--- a/web-ui/test/spec/dispatchers/middle_pane_dispatchers.spec.js
+++ b/web-ui/test/spec/dispatchers/middle_pane_dispatchers.spec.js
@@ -22,4 +22,30 @@ describeComponent('dispatchers/middle_pane_dispatcher', function () {
     this.component.trigger(document, Pixelated.events.dispatchers.middlePane.resetScroll);
     expect(this.component.select('middlePane').scrollTop()).toEqual(0);
   });
+
+  describe('no emails available', function () {
+    var noMailsAvailablePane;
+    beforeEach(function () {
+      noMailsAvailablePane = require('mail_view/ui/no_mails_available_pane');
+      spyOn(noMailsAvailablePane, 'attachTo');
+      spyOn(noMailsAvailablePane, 'teardownAll');
+    });
+
+    it('should listen to no mails available event and show noMailsAvailablePane', function () {
+        var mail_list = { mails: []};
+        this.component.trigger(document, Pixelated.events.mails.available, mail_list);
+
+        expect(noMailsAvailablePane.attachTo).toHaveBeenCalled();
+    });
+
+    it('should tbd', function () {
+        var pretend_to_be_a_mail = {};
+        var mail_list = { mails: [pretend_to_be_a_mail]};
+        this.component.trigger(document, Pixelated.events.mails.available, mail_list);
+
+        expect(noMailsAvailablePane.attachTo).not.toHaveBeenCalled();
+        expect(noMailsAvailablePane.teardownAll).toHaveBeenCalled();
+    });
+
+  });
 });
diff --git a/web-ui/test/spec/mail_view/ui/no_mails_available_pane.spec.js b/web-ui/test/spec/mail_view/ui/no_mails_available_pane.spec.js
new file mode 100644
index 00000000..da19cf2e
--- /dev/null
+++ b/web-ui/test/spec/mail_view/ui/no_mails_available_pane.spec.js
@@ -0,0 +1,13 @@
+describeComponent('mail_view/ui/no_mails_available_pane', function () {
+    'use strict';
+
+    describe('after initialization', function () {
+        beforeEach(function () {
+            this.setupComponent();
+        });
+
+        it('renders template', function () {
+            expect(this.$node.html()).toMatch('<div class="text">NO MAILS AVAILABLE.</div>');
+        });
+    });
+});