[REF] mail, *: refactor messaging with OWL

This commit is a significant rewriting of client-side discuss, chatter,
chat window, and messaging menu using OWL. The behavior should be broadly
the same, with some slight functional changes here and there.

From a technical standpoint, the code of messaging is mainly organized in 2
main groups of modules:

- models, which are logical entities that depict the client-side state of
  messaging as a whole.
- components, which are in charge of displaying information from models.

This refactoring also introduces new JS guidelines regarding folder structure
(/static) and naming rules for JS modules.

Community PR: https://github.com/odoo/odoo/pull/39023
Enterprise PR: https://github.com/odoo/enterprise/pull/6249

Task-1914207

This PR is a collaborative work by Alexandre, Julien, Sébastien and Xavier,
with the precious help of Lucas to speed it up towards the end.

closes odoo/odoo#39023

Related: odoo/enterprise#6249
Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
Co-authored-by: Alexandre Kühn <aku@odoo.com>
Co-authored-by: Julien Giannone <jgi@odoo.com>
Co-authored-by: Lucas Perais <lpe@odoo.com>
Co-authored-by: Sébastien Theys <seb@odoo.com>
Co-authored-by: Xavier Dubuc <xdu@odoo.com>

3 files changed, 146 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/activity_box/activity_box.js b/addons/mail/static/src/components/activity_box/activity_box.js
new file mode 100644
index 00000000000..bfc624bea19
--- /dev/null
+++ b/addons/mail/static/src/components/activity_box/activity_box.js
@@ -0,0 +1,60 @@
+odoo.define('mail/static/src/components/activity_box/activity_box.js', function (require) {
+'use strict';
+
+const components = {
+    Activity: require('mail/static/src/components/activity/activity.js'),
+};
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const { Component } = owl;
+
+class ActivityBox extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        useStore(props => {
+            const chatter = this.env.models['mail.chatter'].get(props.chatterLocalId);
+            return {
+                chatter: chatter ? chatter.__state : undefined,
+            };
+        });
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {Chatter}
+     */
+    get chatter() {
+        return this.env.models['mail.chatter'].get(this.props.chatterLocalId);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _onClickTitle() {
+        this.chatter.toggleActivityBoxVisibility();
+    }
+
+}
+
+Object.assign(ActivityBox, {
+    components,
+    props: {
+        chatterLocalId: String,
+    },
+    template: 'mail.ActivityBox',
+});
+
+return ActivityBox;
+
+});
diff --git a/addons/mail/static/src/components/activity_box/activity_box.scss b/addons/mail/static/src/components/activity_box/activity_box.scss
new file mode 100644
index 00000000000..056f624c04f
--- /dev/null
+++ b/addons/mail/static/src/components/activity_box/activity_box.scss
@@ -0,0 +1,41 @@
+// ------------------------------------------------------------------
+// Layout
+// ------------------------------------------------------------------
+
+.o_ActivityBox_title {
+    display: flex;
+    align-items: center;
+    flex: 0 0 auto;
+    margin-top: map-get($spacers, 4);
+    margin-bottom: map-get($spacers, 4);
+}
+
+.o_ActivityBox_titleBadge {
+    padding: map-get($spacers, 0) map-get($spacers, 2);
+}
+
+.o_ActivityBox_titleLine {
+    flex: 1 1 auto;
+    width: auto;
+}
+
+.o_ActivityBox_titleText {
+    padding: map-get($spacers, 0) map-get($spacers, 3);
+}
+
+// ------------------------------------------------------------------
+// Style
+// ------------------------------------------------------------------
+
+.o_ActivityBox_title {
+    font-weight: bold;
+}
+
+.o_ActivityBox_titleBadge {
+    font-size: 11px;
+}
+
+.o_ActivityBox_titleLine {
+    border-color: gray('400');
+    border-style: dashed;
+}
diff --git a/addons/mail/static/src/components/activity_box/activity_box.xml b/addons/mail/static/src/components/activity_box/activity_box.xml
new file mode 100644
index 00000000000..2538ac9a462
--- /dev/null
+++ b/addons/mail/static/src/components/activity_box/activity_box.xml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.ActivityBox" owl="1">
+        <div class="o_ActivityBox">
+            <t t-if="chatter">
+                <a role="button" class="o_ActivityBox_title btn" t-on-click="_onClickTitle">
+                    <hr class="o_ActivityBox_titleLine" />
+                    <span class="o_ActivityBox_titleText">
+                        <i class="fa fa-fw" t-att-class="chatter.isActivityBoxVisible ? 'fa-caret-right' : 'fa-caret-down'"/>
+                        Planned activities
+                    </span>
+                    <t t-if="!chatter.isActivityBoxVisible">
+                        <span class="o_ActivityBox_titleBadges">
+                            <t t-if="chatter.overdueActivities.length > 0">
+                                <span class="o_ActivityBox_titleBadge badge rounded-circle badge-danger">
+                                    <t t-esc="chatter.overdueActivities.length"/>
+                                </span>
+                            </t>
+                            <t t-if="chatter.todayActivities.length > 0">
+                                <span class="o_ActivityBox_titleBadge badge rounded-circle badge-warning">
+                                    <t t-esc="chatter.todayActivities.length"/>
+                                </span>
+                            </t>
+                            <t t-if="chatter.futureActivities.length > 0">
+                                <span class="o_ActivityBox_titleBadge badge rounded-circle badge-success">
+                                    <t t-esc="chatter.futureActivities.length"/>
+                                </span>
+                            </t>
+                        </span>
+                    </t>
+                    <hr class="o_ActivityBox_titleLine" />
+                </a>
+                <t t-if="chatter.isActivityBoxVisible">
+                    <div class="o_ActivityList">
+                        <t t-foreach="chatter.activities" t-as="activity" t-key="activity.localId">
+                            <Activity class="o_ActivityBox_activity" activityLocalId="activity.localId"/>
+                        </t>
+                    </div>
+                </t>
+            </t>
+        </div>
+    </t>
+
+</templates>