[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>

1 files changed, 177 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/activity/activity.js b/addons/mail/static/src/components/activity/activity.js
new file mode 100644
index 00000000000..6c70f876160
--- /dev/null
+++ b/addons/mail/static/src/components/activity/activity.js
@@ -0,0 +1,177 @@
+odoo.define('mail/static/src/components/activity/activity.js', function (require) {
+'use strict';
+
+const components = {
+    ActivityMarkDonePopover: require('mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js'),
+    FileUploader: require('mail/static/src/components/file_uploader/file_uploader.js'),
+    MailTemplate: require('mail/static/src/components/mail_template/mail_template.js'),
+};
+const useStore = require('mail/static/src/component_hooks/use_store/use_store.js');
+
+const {
+    auto_str_to_date,
+    getLangDateFormat,
+    getLangDatetimeFormat,
+} = require('web.time');
+
+const { Component, useState } = owl;
+const { useRef } = owl.hooks;
+
+class Activity extends Component {
+
+    /**
+     * @override
+     */
+    constructor(...args) {
+        super(...args);
+        this.state = useState({
+            areDetailsVisible: false,
+        });
+        useStore(props => {
+            const activity = this.env.models['mail.activity'].get(props.activityLocalId);
+            return {
+                activity: activity ? activity.__state : undefined,
+                assigneeNameOrDisplayName: (
+                    activity &&
+                    activity.assignee &&
+                    activity.assignee.nameOrDisplayName()
+                ),
+            };
+        });
+        /**
+         * Reference of the file uploader.
+         * Useful to programmatically prompts the browser file uploader.
+         */
+        this._fileUploaderRef = useRef('fileUploader');
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {mail.activity}
+     */
+    get activity() {
+        return this.env.models['mail.activity'].get(this.props.activityLocalId);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get assignedUserText() {
+        return _.str.sprintf(this.env._t("for %s"), this.activity.assignee.nameOrDisplayName());
+    }
+
+    /**
+     * @returns {string}
+     */
+    get delayLabel() {
+        const today = moment().startOf('day');
+        const momentDeadlineDate = moment(auto_str_to_date(this.activity.dateDeadline));
+        // true means no rounding
+        const diff = momentDeadlineDate.diff(today, 'days', true);
+        if (diff === 0) {
+            return this.env._t("Today:");
+        } else if (diff === -1) {
+            return this.env._t("Yesterday:");
+        } else if (diff < 0) {
+            return _.str.sprintf(this.env._t("%d days overdue:"), Math.abs(diff));
+        } else if (diff === 1) {
+            return this.env._t("Tomorrow:");
+        } else {
+            return _.str.sprintf(this.env._t("Due in %d days:"), Math.abs(diff));
+        }
+    }
+
+    /**
+     * @returns {string}
+     */
+    get formattedCreateDatetime() {
+        const momentCreateDate = moment(auto_str_to_date(this.activity.dateCreate));
+        const datetimeFormat = getLangDatetimeFormat();
+        return momentCreateDate.format(datetimeFormat);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get formattedDeadlineDate() {
+        const momentDeadlineDate = moment(auto_str_to_date(this.activity.dateDeadline));
+        const datetimeFormat = getLangDateFormat();
+        return momentDeadlineDate.format(datetimeFormat);
+    }
+
+    /**
+     * @returns {string}
+     */
+    get MARK_DONE() {
+        return this.env._t("Mark Done");
+    }
+
+    /**
+     * @returns {string}
+     */
+    get summary() {
+        return _.str.sprintf(this.env._t("“%s”"), this.activity.summary);
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {CustomEvent} ev
+     * @param {Object} ev.detail
+     * @param {mail.attachment} ev.detail.attachment
+     */
+    _onAttachmentCreated(ev) {
+        this.activity.markAsDone({ attachments: [ev.detail.attachment] });
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickCancel(ev) {
+        ev.preventDefault();
+        this.activity.deleteServerRecord();
+    }
+
+    /**
+     * @private
+     */
+    _onClickDetailsButton() {
+        this.state.areDetailsVisible = !this.state.areDetailsVisible;
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickEdit(ev) {
+        this.activity.edit();
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClickUploadDocument(ev) {
+        this._fileUploaderRef.comp.openBrowserFileUploader();
+    }
+
+}
+
+Object.assign(Activity, {
+    components,
+    props: {
+        activityLocalId: String,
+    },
+    template: 'mail.Activity',
+});
+
+return Activity;
+
+});