[REF] mail: first part of the chat refactoring (client side)

Joint work with ged

3 files changed, 344 insertions, 0 deletions

diff --git a/addons/mail/static/src/xml/chatter.xml b/addons/mail/static/src/xml/chatter.xml
new file mode 100644
index 00000000000..51b0fc78eed
--- /dev/null
+++ b/addons/mail/static/src/xml/chatter.xml
@@ -0,0 +1,165 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates>
+
+    <!--
+        Chatter composer
+    -->
+    <t t-name="mail.chatter.ChatComposer" t-extend="mail.ChatComposer">
+        <!-- Insert information before the composer -->
+        <t t-jquery=".o_composer" t-operation="before">
+            <!-- Internal note composer -->
+            <t t-if="widget.options.is_log">
+                <span class="o_chatter_composer_info">
+                    Log an internal note which will not be sent to followers, but which can be read
+                    by users accessing this document.
+                </span>
+                <!-- Internal subtypes -->
+                <div t-att-class="'o_chatter_composer_subtypes ' +
+                    (widget.options.internal_subtypes.length &lt;= 1 ? ' hide' : '')">
+                    <label>Activity</label>
+                    <select class="o_chatter_composer_subtype_select">
+                        <t t-foreach="widget.options.internal_subtypes" t-as="subtype">
+                            <option t-att-value="subtype['id']"><t t-raw="subtype['name']"/></option>
+                        </t>
+                    </select>
+                </div>
+            </t>
+            <!-- New message composer -->
+            <t t-if="!widget.options.is_log">
+                <!-- Text for followers -->
+                <span class="o_chatter_composer_info">
+                    To: Followers of
+                    <t t-if="widget.options.record_name">
+                        <t t-raw="'&quot;' + widget.options.record_name + '&quot;'"/>
+                    </t>
+                    <t t-if="!widget.options.record_name">
+                        this document
+                    </t>
+                </span>
+                <!-- List of followers -->
+                <div class="o_composer_suggested_partners">
+                    <t t-foreach='widget.suggested_partners' t-as='recipient'>
+                        <div t-attf-title="Add as recipient and follower (reason: #{recipient.reason})">
+                            <input type="checkbox"
+                                   t-att-checked="recipient.checked ? 'checked' : undefined"
+                                   t-att-data-fullname="recipient.full_name"/>
+                            <t t-esc="recipient.name"/>
+                            <t t-if="recipient.email_address">(<t t-esc="recipient.email_address"/>)</t>
+                            <t t-if="!recipient.email_address">(no email address)</t>
+                        </div>
+                    </t>
+                </div>
+            </t>
+        </t>
+
+        <!-- Replace the input by a textarea -->
+        <t t-jquery=".o_composer_input" t-operation="replace">
+            <textarea class="o_composer_input" placeholder="Write something"/>
+        </t>
+
+        <!-- Add a button to open the full composer dialog -->
+        <t t-jquery=".o_composer_buttons" t-operation="append">
+            <button class="btn btn-sm btn-icon fa fa-pencil-square-o o_composer_button_full_composer" type="button"/>
+        </t>
+    </t>
+
+    <!--
+        Chatter main div
+    -->
+    <t t-name="mail.Chatter">
+        <div class="o_chatter">
+            <div class="o_chatter_topbar">
+                <button type="button" class="btn btn-sm btn-primary o_chatter_button_new_message" title="Send a message">
+                    New message
+                </button>
+                <button t-if="widget.options.display_log_button" class="btn btn-sm btn-link o_chatter_button_log_note" title="Log a note. Followers will not be notified.">
+                    Log an internal note
+                </button>
+            </div>
+        </div>
+    </t>
+
+    <!--
+        Followers: main buttons
+        Template used to display the followers, the actions and the subtypes in a record.
+    -->
+    <t t-name="mail.Followers">
+        <div class="o_followers">
+            <div t-attf-class="o_followers_title_box">
+                <button t-attf-class="btn btn-sm btn-default dropdown-toggle"
+                        data-toggle="dropdown" aria-expanded="false">
+                    <span class="o_followers_count"/>
+                    <span class="caret"/>
+                </button>
+                <ul class="dropdown-menu o_followers_list" role="menu"></ul>
+            </div>
+            <div class="o_followers_actions">
+                <div t-attf-class="btn-group btn-group-sm o_subtypes_list">
+                    <button class="btn btn-sm btn-primary o_followers_follow_button o_followers_notfollow">
+                        <span class="o_follow">Follow</span>
+                        <span class="fa fa-times o_followers_unfollow"/>
+                        <span class="o_followers_unfollow"> Unfollow</span>
+                        <span class="fa fa-check o_followers_following"/>
+                        <span class="o_followers_following"> Following</span>
+                    </button><button t-attf-class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                        <span class="caret"/>
+                    </button>
+                    <ul class="dropdown-menu" role="menu"/>
+                </div>
+            </div>
+        </div>
+    </t>
+
+    <!--
+        Followers: Partner
+        Template used to display a partner following the record
+    -->
+    <t t-name="mail.Followers.partner">
+        <li class='o_partner'>
+            <img t-att-src="record.avatar_url"/>
+            <a class="o_mail_redirect"
+               t-attf-href="#"
+               t-att-title="record.name"
+               t-att-data-oe-model="record.res_model"
+               t-att-data-oe-id="record.res_id"><t t-esc="record.name"/></a>
+            <i t-if="record.is_editable and (widget.records_length &gt; 1)"
+               class="fa fa-pencil o_edit_subtype hide" title="Edit subscription"
+               t-att-data-id="record.id"
+               t-att-data-oe-id="record.res_id"
+               t-att-data-oe-model="record.res_model"/>
+            <i t-if="widget.view_is_editable" class="fa fa-remove o_remove_follower"
+               title="Remove this follower"/>
+        </li>
+    </t>
+
+    <!--
+        Followers: 'Add followers' and 'Add channels' buttons
+    -->
+    <t t-name="mail.Followers.add_more">
+        <t t-if="widget.view_is_editable">
+            <li class="o_add_follower">
+                <a href="#"> Add Followers </a>
+            </li>
+            <li class="o_add_follower_channel">
+                <a href="#"> Add Channels </a>
+            </li>
+            <li t-if="widget.followers.length > 0" class="divider"/>
+        </t>
+    </t>
+
+    <!--
+        Followers: Subtype
+        Template used to display message subtypes of a follower subscription
+    -->
+    <t t-name="mail.Followers.subtype">
+        <li class="o_subtype">
+            <input type="checkbox" t-att-checked="record.followed"
+                   t-att-id="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')"
+                   t-att-data-id="record.id" t-att-name="record.name" class="o_subtype_checkbox"/>
+            <span t-att-for="'input_mail_followers_subtype_'+record.id+(dialog ? '_in_dialog': '')">
+                <t t-raw="record.name"/>
+            </span>
+        </li>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/xml/composer.xml b/addons/mail/static/src/xml/composer.xml
new file mode 100644
index 00000000000..39e0b5afdc2
--- /dev/null
+++ b/addons/mail/static/src/xml/composer.xml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+     <div t-name="mail.ChatComposer" class="o_chat_composer">
+        <div class="o_composer">
+            <div class="dropup o_composer_mention_dropdown"/>
+            <input type="text" class="o_composer_input" placeholder="Write something"/>
+            <div class="btn-group o_composer_buttons">
+                <button class="btn btn-sm btn-primary o_composer_button_send" type="button">Send</button> 
+                <button class="btn btn-sm btn-icon fa fa-smile-o o_composer_button_emoji" type="button" data-toggle="popover"/>
+                <button class="btn btn-sm btn-icon fa fa-paperclip o_composer_button_add_attachment" type="button"/>
+            </div>
+        </div>
+        <div class="o_composer_mentioned_partners"/>
+        <div class="o_composer_attachments_list"/>
+
+        <span class="hide">
+            <t t-call="HiddenInputFile">
+                <t t-set="fileupload_id" t-value="widget.fileupload_id"/>
+                <t t-set="fileupload_action" t-translation="off">/web/binary/upload_attachment</t>
+                <input type="hidden" name="model" value="mail.compose.message"/>
+                <input type="hidden" name="id" value="0"/>
+                <input type="hidden" name="session_id" t-att-value="widget.session.session_id"/>
+            </t>
+        </span>
+        <span class="o_composer_emoji"></span>
+    </div>
+
+    <t t-name="mail.ChatComposer.emojis">
+        <t t-foreach="emojis" t-as="emoji">
+            <span t-att-data-emoji="emoji.source" class="o_mail_emoji" t-att-title="emoji.description">
+                <t t-raw="emoji.substitution"/>
+            </span>
+        </t>
+    </t>
+
+    <t t-name="mail.ChatComposer.MentionMenu">
+        <ul class="dropdown-menu" aria-labelledby="dropdownMailMentionMenu">
+            <t t-foreach="partners" t-as="partner">
+                <li t-att-class="'o_mention_proposition ' + (partner_index === 0 ? 'active' : '')"
+                    t-att-data-partner-id="partner.id">
+                    <a href="#">
+                        <t t-esc="partner.name"/> <t t-if="partner.email">(<t t-esc="partner.email"/>)</t>
+                    </a>
+                </li>
+            </t>
+        </ul>
+    </t>
+
+    <t t-name="mail.ChatComposer.MentionTags">
+        <t t-if="partners.length">Mention(s): </t>
+        <t t-foreach="partners" t-as="partner">
+            <span class="badge"><t t-esc="partner.name"/></span>
+        </t>
+    </t>
+
+</templates>
diff --git a/addons/mail/static/src/xml/thread.xml b/addons/mail/static/src/xml/thread.xml
new file mode 100644
index 00000000000..28717bc70a3
--- /dev/null
+++ b/addons/mail/static/src/xml/thread.xml
@@ -0,0 +1,122 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ChatThread">
+        <t t-if="messages.length">
+            <t t-if="options.display_load_more &amp;&amp; options.display_order == ORDER.ASC"
+               t-call="mail.ChatThread.LoadMore"/>
+            <t t-call="mail.ChatThread.Content"/>
+            <t t-if="options.display_load_more &amp;&amp; options.display_order == ORDER.DESC"
+               t-call="mail.ChatThread.LoadMore"/>
+        </t>
+        <t t-if="!messages.length &amp;&amp; options.no_content_helper">
+            <div class="o_chat_help_message">
+                <t t-raw="options.no_content_helper"/>
+            </div>
+        </t>
+    </t>
+
+    <t t-name="mail.ChatThread.Content">
+        <t t-set="current_day" t-value="0"/>
+        <t t-foreach="messages" t-as="message">
+            <div t-if="current_day != message.date.split(' ')[0]" class="o_thread_date_separator">
+                <span class="o_thread_date">
+                    <t t-raw="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('LL')"/>
+                </span>
+                <t t-set="current_day" t-value="message.date.split(' ')[0]"/>
+            </div>
+
+            <t t-call="mail.ChatThread.Message"/>
+        </t>
+    </t>
+
+    <t t-name="mail.ChatThread.Message">
+        <div class="o_thread_message" t-att-data-message-id="message.id">
+            <div t-if="options.display_avatar" class="o_thread_message_avatar">
+                <img t-if="message.avatar_src" t-att-src="message.avatar_src" class="o_thread_message_avatar_img"/>
+            </div>
+            <div class="o_thread_message_core">
+                <span class="pull-right">
+                    <i t-if="message.is_needaction &amp;&amp; options.display_needactions" class="fa fa-check o_thread_message_needaction" t-att-data-message-id="message.id" t-att-title="_t('Mark as Done')"/>
+                    <i t-att-class="'fa fa-lg o_thread_message_star ' + (message.is_starred ? 'fa-star' : 'fa-star-o')" t-att-data-message-id="message.id" t-att-title="_t('Mark as Todo')"/>
+                </span>
+                <p class="text-muted">
+                    <t t-if="message.is_note">
+                        Note by
+                    </t>
+                    <t t-if="message.author_id &amp;&amp; message.author_id[1]">
+                        <strong class="o_mail_redirect" data-oe-model="res.partner" t-att-data-oe-id="message.author_id[0]"><t t-esc="message.author_id[1]"/></strong>
+                    </t>
+                    <t t-if="!message.author_id || !message.author_id[1]">
+                        <strong class="o_mail_redirect"><t t-esc="message.displayed_author"/></strong>
+                    </t>
+
+                    <small t-att-title="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('LLL')">
+                        - <t t-esc="moment(message.date, 'YYYY-MM-DD hh:mm:ss').format('hh:mm')"/>
+                    </small>
+                    <t t-if="message.model &amp;&amp; (message.model != 'mail.channel') &amp;&amp; options.display_document_link">
+                        on <a class="o_mail_redirect" href="#" t-att-data-oe-model="message.model" t-att-data-oe-id="message.res_id"><t t-esc="message.record_name"/></a>
+                    </t>
+                </p>
+                <t t-if="message.tracking_value_ids &amp;&amp; message.tracking_value_ids.length &gt; 0">
+                    <t t-call="mail.ChatThread.MessageTracking"/>
+                </t>
+                <div t-if="message.subject" class="o_mail_subject">Subject: <t t-esc="message.subject"/></div>
+                <t t-if="!(message.tracking_value_ids &amp;&amp; message.tracking_value_ids.length &gt; 0)">
+                    <t t-raw="message.body"/>
+                </t>
+                <t t-foreach="message.attachment_ids" t-as="attachment">
+                    <t t-call="mail.Attachment"/>
+                </t>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="mail.ChatThread.MessageTracking">
+        <ul class="o_mail_thread_message_tracking">
+            <t t-foreach='message.tracking_value_ids' t-as='value'>
+                <li>
+                    <t t-esc="value.changed_field"/>:
+                    <t t-if="value.old_value">
+                        <span> <t t-esc="value.old_value"/> </span>
+                        <span class="fa fa-long-arrow-right"/>
+                    </t>
+                    <span> <t t-esc="value.new_value"/> </span>
+                </li>
+            </t>
+        </ul>
+    </t>
+
+    <t t-name="mail.ChatComposer.Attachments">
+        <div class="o_attachments">
+            <t t-foreach="attachments" t-as='attachment'>
+                <t t-call="mail.Attachment">
+                     <t t-set="editable" t-value="true"/>
+                </t>
+            </t>
+        </div>
+    </t>
+
+    <t t-name="mail.Attachment">
+        <div t-attf-class="o_attachment #{attachment.upload ? 'o_attachment_uploading' : ''}" t-att-title="attachment.name">
+            <a class="o_image" t-att-href='attachment.url' target="_blank" t-att-data-mimetype="attachment.mimetype" t-attf-data-src="/web/image/#{attachment.id}/100x80">
+                <span class='o_attachment_name'><t t-raw='attachment.name'/></span>
+            </a>
+            <t t-if="editable">
+                <div class="o_attachment_delete">
+                    <i class='fa fa-times-circle' title="Delete this attachment" t-att-data-id="attachment.id"/>
+                </div>
+                <div class="o_attachment_progress_bar">
+                    Uploading
+                </div>
+            </t>
+        </div>
+    </t>
+
+     <t t-name="mail.ChatThread.LoadMore">
+        <div t-if="!all_messages_loaded" class="o_thread_show_more">
+            <button class="btn btn-sm btn-link">-------- Show more messages --------</button>
+        </div>
+    </t>
+
+</templates>