[IMP] website_mail : widgetize the Frontend Chatter. Prepare to include rating feature with posting mail.message

2 files changed, 63 insertions, 34 deletions

diff --git a/addons/website_mail/static/src/js/message_post.js b/addons/website_mail/static/src/js/message_post.js
index 177101bcce1..3ddb5e2ce90 100644
--- a/addons/website_mail/static/src/js/message_post.js
+++ b/addons/website_mail/static/src/js/message_post.js
@@ -1,49 +1,78 @@
-odoo.define('website_mail_post', function(require) {
+odoo.define('website_mail.thread', function(require) {
     'use strict';
-    require('website.website');
+
+    var web_editor_base = require('web_editor.base')
     var qweb = require('qweb');
     var ajax = require('web.ajax');
+    var Widget = require('web.Widget');
+
+    // load qweb template
     ajax.loadXML('/website_mail/static/src/xml/chatter_message.xml', qweb);
 
-    if(!$('.o_website_chatter_json').length) {
-        return $.Deferred().reject("DOM doesn't contain '.o_website_chatter_json'");
-    }
+    /**
+     * Widget WebsiteMailThread
+     *
+     * Widget sending message to the server, using json request. Used to not refresh all
+     * the page. Its DOM already exists on the page (The class of root element is
+     * '.o_website_mail_thread').
+     */
+    var WebsiteMailThread = Widget.extend({
+        events:{
+            "click .o_website_chatter_json": "on_click",
+        },
+        on_click: function(e){
+            var self = this;
+            e.preventDefault();
 
-    $('.o_website_chatter_json').on('click', function(ev) {
-        ev.preventDefault();
-        var $button = $(this);
-        var $form = $(this).parents().find('.o_website_chatter_form');
-        var action = $form.attr('action');
-        var data = getFormData($form);
-        data.message = data.message.replace(/\n/g,"<br/>");
-        if (data.message) {
-            $button.attr('disabled', true);
-            var button_bk = $button.html();
-            $button.prepend('<i class="fa fa-refresh fa-spin"></i> ');
-            ajax.jsonRpc(action, 'call', data).then(function (result) {
-                if (result) {
-                    $('.o_website_chatter_error').fadeOut();
-                    var msg = qweb.render('website_mail.thread_message', result);
-                    var elem = $(msg).hide().prependTo($('.o_website_comments'));
-                    elem.slideToggle();
-                    $form.find('textarea').val('');
-                } else {
-                    $('o_website_chatter_error').fadeIn();
-                }
-                $button.html(button_bk);
-                $button.attr('disabled', false);
-            });
-        }
+            var $button = this.$(e.currentTarget);
+            var $form = this.$('.o_website_chatter_form');
+            var $error = this.$('.o_website_chatter_error');
+            var action = $form.attr('action');
+            var data = this._get_form_data($form);
 
-        function getFormData($form){
+            data.message = data.message.replace(/\n/g,"<br/>");
+            if (data.message) {
+                // make the 'send' button loading
+                $button.attr('disabled', true);
+                var button_bk = $button.html();
+                $button.prepend('<i class="fa fa-refresh fa-spin"></i> ');
+                // post message, shw/hide error message and empty textarea
+                ajax.jsonRpc(action, 'call', data).then(function (result) {
+                    if (result) {
+                        $error.fadeOut();
+                        self.prepend_message(result);
+                        $form.find('textarea').val('');
+                    } else {
+                        $error.fadeIn();
+                    }
+                    $button.html(button_bk);
+                    $button.attr('disabled', false);
+                });
+            }
+        },
+        prepend_message: function(message_data){
+            var msg = qweb.render('website_mail.thread_message', message_data);
+            var elem = $(msg).hide().prependTo(this.$('.o_website_comments'));
+            elem.slideToggle();
+            return elem;
+        },
+        _get_form_data: function($form){
             var unindexed_array = $form.serializeArray();
             var indexed_array = {};
-
             $.map(unindexed_array, function(n, i){
                 indexed_array[n.name] = n.value;
             });
-
             return indexed_array;
+        },
+    });
+
+    web_editor_base.ready().then(function(){
+        if($('.o_website_mail_thread').length) {
+            var mail_thread = new WebsiteMailThread($('body')).setElement($('.o_website_mail_thread'));
         }
     });
+
+    return {
+        WebsiteMailThread: WebsiteMailThread,
+    }
 });
diff --git a/addons/website_mail/static/src/xml/chatter_message.xml b/addons/website_mail/static/src/xml/chatter_message.xml
index dec459c0f18..92da37b78c1 100644
--- a/addons/website_mail/static/src/xml/chatter_message.xml
+++ b/addons/website_mail/static/src/xml/chatter_message.xml
@@ -1,6 +1,6 @@
 <templates id="template" xml:space="preserve">
     <t t-name="website_mail.thread_message">
-        <li class="media">
+        <li class="media" t-att-id="'message-' + id">
             <div class="media-body">
                 <img class="media-object pull-left" t-att-src="image_url" style="width: 50px; margin-right: 10px;"/>
                 <div class="media-body">