[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, 149 insertions, 0 deletions

diff --git a/addons/mail/static/src/components/activity/activity.xml b/addons/mail/static/src/components/activity/activity.xml
new file mode 100644
index 00000000000..22f4f9dddc7
--- /dev/null
+++ b/addons/mail/static/src/components/activity/activity.xml
@@ -0,0 +1,149 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.Activity" owl="1">
+        <div class="o_Activity">
+            <t t-if="activity">
+                <div class="o_Activity_sidebar">
+                    <div class="o_Activity_user">
+                        <t t-if="activity.assignee">
+                            <img class="o_Activity_userAvatar" t-attf-src="/web/image/res.users/{{ activity.assignee.id }}/image_128" t-att-alt="activity.assignee.nameOrDisplayName()"/>
+                        </t>
+                        <div class="o_Activity_iconContainer"
+                            t-att-class="{
+                                'bg-success-full': activity.state === 'planned',
+                                'bg-warning-full': activity.state === 'today',
+                                'bg-danger-full': activity.state === 'overdue',
+                            }"
+                        >
+                            <i class="o_Activity_icon fa" t-attf-class="{{ activity.icon }}"/>
+                        </div>
+                    </div>
+                </div>
+                <div class="o_Activity_core">
+                    <div class="o_Activity_info">
+                        <div class="o_Activity_dueDateText"
+                            t-att-class="{
+                                'o-default': activity.state === 'default',
+                                'o-overdue': activity.state === 'overdue',
+                                'o-planned': activity.state === 'planned',
+                                'o-today': activity.state === 'today',
+                            }"
+                        >
+                            <t t-esc="delayLabel"/>
+                        </div>
+                        <t t-if="activity.summary">
+                            <div class="o_Activity_summary">
+                                <t t-esc="summary"/>
+                            </div>
+                        </t>
+                        <t t-elif="activity.type">
+                            <div class="o_Activity_summary o_Activity_type">
+                                <t t-esc="activity.type.displayName"/>
+                            </div>
+                        </t>
+                        <t t-if="activity.assignee">
+                            <div class="o_Activity_userName">
+                                <t t-esc="assignedUserText"/>
+                            </div>
+                        </t>
+                        <a class="o_Activity_detailsButton btn btn-link" t-on-click="_onClickDetailsButton" role="button">
+                            <i class="fa fa-info-circle" role="img" title="Info"/>
+                        </a>
+                    </div>
+
+                    <div class="o_Activity_details" t-if="state.areDetailsVisible">
+                        <dl class="dl-horizontal">
+                            <t t-if="activity.type">
+                                <dt>Activity type</dt>
+                                <dd class="o_Activity_type">
+                                    <t t-esc="activity.type.displayName"/>
+                                </dd>
+                            </t>
+                            <t t-if="activity.creator">
+                                <dt>Created</dt>
+                                <dd class="o_Activity_detailsCreation">
+                                    <t t-esc="formattedCreateDatetime"/>
+                                    <img class="o_Activity_detailsUserAvatar o_Activity_detailsCreatorAvatar" t-attf-src="/web/image/res.users/{{ activity.creator.id }}/image_128" t-att-title="activity.creator.nameOrDisplayName()" t-att-alt="activity.creator.nameOrDisplayName()"/>
+                                    <span class="o_Activity_detailsCreator">
+                                        <t t-esc="activity.creator.nameOrDisplayName()"/>
+                                    </span>
+                                </dd>
+                            </t>
+                            <t t-if="activity.assignee">
+                                <dt>Assigned to</dt>
+                                <dd class="o_Activity_detailsAssignation">
+                                    <img class="o_Activity_detailsUserAvatar o_Activity_detailsAssignationUserAvatar" t-attf-src="/web/image/res.users/{{ activity.assignee.id }}/image_128" t-att-title="activity.assignee.nameOrDisplayName()" t-att-alt="activity.assignee.nameOrDisplayName()"/>
+                                    <t t-esc="activity.assignee.nameOrDisplayName()"/>
+                                </dd>
+                            </t>
+                            <dt>Due on</dt>
+                            <dd class="o_Activity_detailsDueDate">
+                                <span class="o_Activity_deadlineDateText"
+                                    t-att-class="{
+                                        'o-default': activity.state === 'default',
+                                        'o-overdue': activity.state === 'overdue',
+                                        'o-planned': activity.state === 'planned',
+                                        'o-today': activity.state === 'today',
+                                    }"
+                                >
+                                    <t t-esc="formattedDeadlineDate"/>
+                                </span>
+                            </dd>
+                        </dl>
+                    </div>
+
+                    <div class="o_Activity_note" t-if="activity.note">
+                        <t t-raw="activity.note"/>
+                    </div>
+
+                    <t t-if="activity.mailTemplates.length > 0">
+                        <div class="o_Activity_mailTemplates">
+                            <t t-foreach="activity.mailTemplates" t-as="mailTemplate" t-key="mailTemplate.localId">
+                                <MailTemplate
+                                    class="o_Activity_mailTemplate"
+                                    activityLocalId="activity.localId"
+                                    mailTemplateLocalId="mailTemplate.localId"
+                                />
+                            </t>
+                        </div>
+                    </t>
+
+                    <t t-if="activity.canWrite">
+                        <div name="tools" class="o_Activity_tools">
+                            <t t-if="activity.category !== 'upload_file'">
+                                <Popover position="'right'" title="MARK_DONE">
+                                    <button class="o_Activity_toolButton o_Activity_markDoneButton btn btn-link" t-att-title="MARK_DONE">
+                                        <i class="fa fa-check"/> Mark Done
+                                    </button>
+                                    <t t-set="opened">
+                                        <ActivityMarkDonePopover activityLocalId="props.activityLocalId"/>
+                                    </t>
+                                </Popover>
+                            </t>
+                            <t t-else="">
+                                <button class="o_Activity_toolButton o_Activity_uploadButton btn btn-link" t-on-click="_onClickUploadDocument">
+                                    <i class="fa fa-upload"/> Upload Document
+                                </button>
+                                <FileUploader
+                                    attachmentLocalIds="activity.attachments.map(attachment => attachment.localId)"
+                                    uploadId="activity.res_id"
+                                    uploadModel="activity.res_model"
+                                    t-on-o-attachment-created="_onAttachmentCreated"
+                                    t-ref="fileUploader"
+                                />
+                            </t>
+                            <button class="o_Activity_toolButton o_Activity_editButton btn btn-link" t-on-click="_onClickEdit">
+                                <i class="fa fa-pencil"/> Edit
+                            </button>
+                            <button class="o_Activity_toolButton o_Activity_cancelButton btn btn-link" t-on-click="_onClickCancel" >
+                                <i class="fa fa-times"/> Cancel
+                            </button>
+                        </div>
+                    </t>
+                </div>
+            </t>
+        </div>
+    </t>
+
+</templates>