diff options
| author | stephanchrst <stephanchrst@gmail.com> | 2022-05-10 21:51:50 +0700 |
|---|---|---|
| committer | stephanchrst <stephanchrst@gmail.com> | 2022-05-10 21:51:50 +0700 |
| commit | 3751379f1e9a4c215fb6eb898b4ccc67659b9ace (patch) | |
| tree | a44932296ef4a9b71d5f010906253d8c53727726 /addons/mail/static/src/components | |
| parent | 0a15094050bfde69a06d6eff798e9a8ddf2b8c21 (diff) | |
initial commit 2
Diffstat (limited to 'addons/mail/static/src/components')
207 files changed, 40950 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 00000000..1ee7ecf3 --- /dev/null +++ b/addons/mail/static/src/components/activity/activity.js @@ -0,0 +1,199 @@ +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 useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.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); + useShouldUpdateBasedOnProps(); + 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 + */ + _onClick(ev) { + if ( + ev.target.tagName === 'A' && + ev.target.dataset.oeId && + ev.target.dataset.oeModel + ) { + this.env.messaging.openProfile({ + id: Number(ev.target.dataset.oeId), + model: ev.target.dataset.oeModel, + }); + // avoid following dummy href + ev.preventDefault(); + } + } + + /** + * @private + * @param {MouseEvent} ev + */ + async _onClickCancel(ev) { + ev.preventDefault(); + await this.activity.deleteServerRecord(); + this.trigger('reload', { keepChanges: true }); + } + + /** + * @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; + +}); diff --git a/addons/mail/static/src/components/activity/activity.scss b/addons/mail/static/src/components/activity/activity.scss new file mode 100644 index 00000000..64a0ceac --- /dev/null +++ b/addons/mail/static/src/components/activity/activity.scss @@ -0,0 +1,186 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_Activity { + display: flex; + flex: 0 0 auto; + padding: map-get($spacers, 2); +} + +.o_Activity_detailsUserAvatar { + margin-inline-end: map-get($spacers, 2); + object-fit: cover; + height: 18px; + width: 18px; +} + +.o_Activity_dueDateText, .o_Activity_summary { + margin-inline-end: map-get($spacers, 2); +} + +.o_Activity_iconContainer { + @include o-position-absolute($top: auto, $left: auto, $bottom: -5px, $right: -5px); + display: flex; + align-items: center; + justify-content: center; + width: 25px; + height: 25px; + border-width: 2px; +} + +.o_Activity_info { + display: flex; + align-items: baseline; +} + +.o_Activity_note p { + margin-bottom: 0; +} + +.o_Activity_sidebar { + display: flex; + flex: 0 0 36px; + margin-right: map-get($spacers, 3); + justify-content: center; +} + +.o_Activity_toolButton { + padding-top: map-get($spacers, 0); +} + +.o_Activity_tools { + display: flex; +} + +.o_Activity_user { + height: 36px; + margin-left: map-get($spacers, 2); + margin-right: map-get($spacers, 2); + position: relative; + width: 36px; +} + +.o_Activity_userAvatar { + height: map-get($sizes, 100); + width: map-get($sizes, 100); +} + +// From python template +.o_mail_note_title { + margin-top: map-get($spacers, 2); +} + +.o_mail_note_title + div p { + margin-bottom: 0; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +$o-mail-activity-default-color: gray('300') !default; +$o-mail-activity-overdue-color: darken(theme-color('danger'), 10%) !default; +$o-mail-activity-planned-color: darken(theme-color('success'), 10%) !default; +$o-mail-activity-today-color: darken(theme-color('warning'), 10%) !default; + + +.o_Activity_deadlineDateText { + &.o-default { + color: $o-mail-activity-default-color; + } + + &.o-overdue { + color: $o-mail-activity-overdue-color; + } + + &.o-planned { + color: $o-mail-activity-planned-color; + } + + &.o-today { + color: $o-mail-activity-today-color; + } +} + +.o_Activity_details { + color: gray('500'); +} + +.o_Activity_detailsCreatorAvatar { + margin-inline-start: map-get($spacers, 2); +} + +.o_Activity_detailsUserAvatar { + border-radius: 50%; +} + +.o_Activity_dueDateText { + font-weight: bolder; + + &.o-default { + color: $o-mail-activity-default-color; + } + + &.o-overdue { + color: $o-mail-activity-overdue-color; + } + + &.o-planned { + color: $o-mail-activity-planned-color; + } + + &.o-today { + color: $o-mail-activity-today-color; + } +} + +/* Needed specifity to counter default bootstrap style */ +a:not([href]):not([tabindex]).o_Activity_detailsButton { + background: transparent; + opacity: 0.5; + color: gray('500'); + + &:hover { + opacity: 1; + color: gray('600'); + } +} + +.o_Activity_detailsCreator { + font-weight: bold; +} + +.o_Activity_iconContainer { + color: white; + border-color: white; + border-radius: 100%; + border-style: solid; +} + +.o_Activity_sidebar { + font-size: smaller; +} + +.o_Activity_summary { + font-weight: bolder; + color: gray('900'); +} + +.o_Activity_toolButton { + opacity: 0.5; + color: gray('500'); + + &:hover { + opacity: 1; + color: gray('600'); + } +} + +.o_Activity_userAvatar { + border-radius: 50%; +} + +.o_Activity_userName { + color: gray('500'); +} 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 00000000..e5e9832c --- /dev/null +++ b/addons/mail/static/src/components/activity/activity.xml @@ -0,0 +1,153 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.Activity" owl="1"> + <div class="o_Activity" t-on-click="_onClick"> + <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> + + <t t-if="state.areDetailsVisible"> + <div class="o_Activity_details"> + <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> + </t> + + <t t-if="activity.note"> + <div class="o_Activity_note"> + <t t-raw="activity.note"/> + </div> + </t> + + <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.thread.id" + uploadModel="activity.thread.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> diff --git a/addons/mail/static/src/components/activity/activity_tests.js b/addons/mail/static/src/components/activity/activity_tests.js new file mode 100644 index 00000000..1c260f07 --- /dev/null +++ b/addons/mail/static/src/components/activity/activity_tests.js @@ -0,0 +1,1157 @@ +odoo.define('mail/static/src/components/activity/activity_tests.js', function (require) { +'use strict'; + +const components = { + Activity: require('mail/static/src/components/activity/activity.js'), +}; + +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const Bus = require('web.Bus'); +const { date_to_str } = require('web.time'); + +const { Component, tags: { xml } } = owl; + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('activity', {}, function () { +QUnit.module('activity_tests.js', { + beforeEach() { + beforeEach(this); + + this.createActivityComponent = async function (activity) { + await createRootComponent(this, components.Activity, { + props: { activityLocalId: activity.localId }, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('activity simplest layout', async function (assert) { + assert.expect(12); + + await this.start(); + const activity = this.env.models['mail.activity'].create({ + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_sidebar').length, + 1, + "should have activity sidebar" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_core').length, + 1, + "should have activity core" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_user').length, + 1, + "should have activity user" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_info').length, + 1, + "should have activity info" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_note').length, + 0, + "should not have activity note" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_details').length, + 0, + "should not have activity details" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_mailTemplates').length, + 0, + "should not have activity mail templates" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_editButton').length, + 0, + "should not have activity Edit button" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_cancelButton').length, + 0, + "should not have activity Cancel button" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_markDoneButton').length, + 0, + "should not have activity Mark as Done button" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_uploadButton').length, + 0, + "should not have activity Upload button" + ); +}); + +QUnit.test('activity with note layout', async function (assert) { + assert.expect(3); + + await this.start(); + const activity = this.env.models['mail.activity'].create({ + id: 12, + note: 'There is no good or bad note', + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_note').length, + 1, + "should have activity note" + ); + assert.strictEqual( + document.querySelector('.o_Activity_note').textContent, + "There is no good or bad note", + "activity note should be 'There is no good or bad note'" + ); +}); + +QUnit.test('activity info layout when planned after tomorrow', async function (assert) { + assert.expect(4); + + await this.start(); + const today = new Date(); + const fiveDaysFromNow = new Date(); + fiveDaysFromNow.setDate(today.getDate() + 5); + const activity = this.env.models['mail.activity'].create({ + dateDeadline: date_to_str(fiveDaysFromNow), + id: 12, + state: 'planned', + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_dueDateText').length, + 1, + "should have activity delay" + ); + assert.ok( + document.querySelector('.o_Activity_dueDateText').classList.contains('o-planned'), + "activity delay should have the right color modifier class (planned)" + ); + assert.strictEqual( + document.querySelector('.o_Activity_dueDateText').textContent, + "Due in 5 days:", + "activity delay should have 'Due in 5 days:' as label" + ); +}); + +QUnit.test('activity info layout when planned tomorrow', async function (assert) { + assert.expect(4); + + await this.start(); + const today = new Date(); + const tomorrow = new Date(); + tomorrow.setDate(today.getDate() + 1); + const activity = this.env.models['mail.activity'].create({ + dateDeadline: date_to_str(tomorrow), + id: 12, + state: 'planned', + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_dueDateText').length, + 1, + "should have activity delay" + ); + assert.ok( + document.querySelector('.o_Activity_dueDateText').classList.contains('o-planned'), + "activity delay should have the right color modifier class (planned)" + ); + assert.strictEqual( + document.querySelector('.o_Activity_dueDateText').textContent, + 'Tomorrow:', + "activity delay should have 'Tomorrow:' as label" + ); +}); + +QUnit.test('activity info layout when planned today', async function (assert) { + assert.expect(4); + + await this.start(); + const today = new Date(); + const activity = this.env.models['mail.activity'].create({ + dateDeadline: date_to_str(today), + id: 12, + state: 'today', + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_dueDateText').length, + 1, + "should have activity delay" + ); + assert.ok( + document.querySelector('.o_Activity_dueDateText').classList.contains('o-today'), + "activity delay should have the right color modifier class (today)" + ); + assert.strictEqual( + document.querySelector('.o_Activity_dueDateText').textContent, + "Today:", + "activity delay should have 'Today:' as label" + ); +}); + +QUnit.test('activity info layout when planned yesterday', async function (assert) { + assert.expect(4); + + await this.start(); + const today = new Date(); + const yesterday = new Date(); + yesterday.setDate(today.getDate() - 1); + const activity = this.env.models['mail.activity'].create({ + dateDeadline: date_to_str(yesterday), + id: 12, + state: 'overdue', + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_dueDateText').length, + 1, + "should have activity delay" + ); + assert.ok( + document.querySelector('.o_Activity_dueDateText').classList.contains('o-overdue'), + "activity delay should have the right color modifier class (overdue)" + ); + assert.strictEqual( + document.querySelector('.o_Activity_dueDateText').textContent, + "Yesterday:", + "activity delay should have 'Yesterday:' as label" + ); +}); + +QUnit.test('activity info layout when planned before yesterday', async function (assert) { + assert.expect(4); + + await this.start(); + const today = new Date(); + const fiveDaysBeforeNow = new Date(); + fiveDaysBeforeNow.setDate(today.getDate() - 5); + const activity = this.env.models['mail.activity'].create({ + dateDeadline: date_to_str(fiveDaysBeforeNow), + id: 12, + state: 'overdue', + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_dueDateText').length, + 1, + "should have activity delay" + ); + assert.ok( + document.querySelector('.o_Activity_dueDateText').classList.contains('o-overdue'), + "activity delay should have the right color modifier class (overdue)" + ); + assert.strictEqual( + document.querySelector('.o_Activity_dueDateText').textContent, + "5 days overdue:", + "activity delay should have '5 days overdue:' as label" + ); +}); + +QUnit.test('activity with a summary layout', async function (assert) { + assert.expect(4); + + await this.start(); + const activity = this.env.models['mail.activity'].create({ + id: 12, + summary: 'test summary', + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_summary').length, + 1, + "should have activity summary" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_type').length, + 0, + "should not have the activity type as summary" + ); + assert.strictEqual( + document.querySelector('.o_Activity_summary').textContent.trim(), + "“test summary”", + "should have the specific activity summary in activity summary" + ); +}); + +QUnit.test('activity without summary layout', async function (assert) { + assert.expect(5); + + await this.start(); + const activity = this.env.models['mail.activity'].create({ + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + type: [['insert', { id: 1, displayName: "Fake type" }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_type').length, + 1, + "activity details should have an activity type section" + ); + assert.strictEqual( + document.querySelector('.o_Activity_type').textContent.trim(), + "Fake type", + "activity details should have the activity type display name in type section" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_summary.o_Activity_type').length, + 1, + "should have activity type as summary" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_summary:not(.o_Activity_type)').length, + 0, + "should not have a specific summary" + ); +}); + +QUnit.test('activity details toggle', async function (assert) { + assert.expect(5); + + await this.start(); + const today = new Date(); + const tomorrow = new Date(); + tomorrow.setDate(today.getDate() + 1); + const activity = this.env.models['mail.activity'].create({ + creator: [['insert', { id: 1, display_name: "Admin" }]], + dateCreate: date_to_str(today), + dateDeadline: date_to_str(tomorrow), + id: 12, + state: 'planned', + thread: [['insert', { id: 42, model: 'res.partner' }]], + type: [['insert', { id: 1, displayName: "Fake type" }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_details').length, + 0, + "activity details should not be visible by default" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_detailsButton').length, + 1, + "activity should have a details button" + ); + + await afterNextRender(() => + document.querySelector('.o_Activity_detailsButton').click() + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_details').length, + 1, + "activity details should be visible after clicking on details button" + ); + + await afterNextRender(() => + document.querySelector('.o_Activity_detailsButton').click() + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_details').length, + 0, + "activity details should no longer be visible after clicking again on details button" + ); +}); + +QUnit.test('activity details layout', async function (assert) { + assert.expect(11); + + await this.start(); + const today = new Date(); + const tomorrow = new Date(); + tomorrow.setDate(today.getDate() + 1); + const activity = this.env.models['mail.activity'].create({ + assignee: [['insert', { id: 10, display_name: "Pauvre pomme" }]], + creator: [['insert', { id: 1, display_name: "Admin" }]], + dateCreate: date_to_str(today), + dateDeadline: date_to_str(tomorrow), + id: 12, + state: 'planned', + thread: [['insert', { id: 42, model: 'res.partner' }]], + type: [['insert', { id: 1, displayName: "Fake type" }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_userAvatar').length, + 1, + "should have activity user avatar" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_detailsButton').length, + 1, + "activity should have a details button" + ); + + await afterNextRender(() => + document.querySelector('.o_Activity_detailsButton').click() + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_details').length, + 1, + "activity details should be visible after clicking on details button" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_details .o_Activity_type').length, + 1, + "activity details should have type" + ); + assert.strictEqual( + document.querySelector('.o_Activity_details .o_Activity_type').textContent, + "Fake type", + "activity details type should be 'Fake type'" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_detailsCreation').length, + 1, + "activity details should have creation date " + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_detailsCreator').length, + 1, + "activity details should have creator" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_detailsAssignation').length, + 1, + "activity details should have assignation information" + ); + assert.strictEqual( + document.querySelector('.o_Activity_detailsAssignation').textContent.indexOf('Pauvre pomme'), + 0, + "activity details assignation information should contain creator display name" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_detailsAssignationUserAvatar').length, + 1, + "activity details should have user avatar" + ); +}); + +QUnit.test('activity with mail template layout', async function (assert) { + assert.expect(8); + + await this.start(); + const activity = this.env.models['mail.activity'].create({ + id: 12, + mailTemplates: [['insert', { id: 1, name: "Dummy mail template" }]], + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_sidebar').length, + 1, + "should have activity sidebar" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_mailTemplates').length, + 1, + "should have activity mail templates" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_mailTemplate').length, + 1, + "should have activity mail template" + ); + assert.strictEqual( + document.querySelectorAll('.o_MailTemplate_name').length, + 1, + "should have activity mail template name" + ); + assert.strictEqual( + document.querySelector('.o_MailTemplate_name').textContent, + "Dummy mail template", + "should have activity mail template name" + ); + assert.strictEqual( + document.querySelectorAll('.o_MailTemplate_preview').length, + 1, + "should have activity mail template name preview button" + ); + assert.strictEqual( + document.querySelectorAll('.o_MailTemplate_send').length, + 1, + "should have activity mail template name send button" + ); +}); + +QUnit.test('activity with mail template: preview mail', async function (assert) { + assert.expect(10); + + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('do_action'); + assert.strictEqual( + payload.action.context.default_res_id, + 42, + 'Action should have the activity res id as default res id in context' + ); + assert.strictEqual( + payload.action.context.default_model, + 'res.partner', + 'Action should have the activity res model as default model in context' + ); + assert.ok( + payload.action.context.default_use_template, + 'Action should have true as default use_template in context' + ); + assert.strictEqual( + payload.action.context.default_template_id, + 1, + 'Action should have the selected mail template id as default template id in context' + ); + assert.strictEqual( + payload.action.type, + "ir.actions.act_window", + 'Action should be of type "ir.actions.act_window"' + ); + assert.strictEqual( + payload.action.res_model, + "mail.compose.message", + 'Action should have "mail.compose.message" as res_model' + ); + }); + + await this.start({ env: { bus } }); + const activity = this.env.models['mail.activity'].create({ + id: 12, + mailTemplates: [['insert', { + id: 1, + name: "Dummy mail template", + }]], + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_MailTemplate_preview').length, + 1, + "should have activity mail template name preview button" + ); + + document.querySelector('.o_MailTemplate_preview').click(); + assert.verifySteps( + ['do_action'], + "should have called 'compose email' action correctly" + ); +}); + +QUnit.test('activity with mail template: send mail', async function (assert) { + assert.expect(7); + + await this.start({ + async mockRPC(route, args) { + if (args.method === 'activity_send_mail') { + assert.step('activity_send_mail'); + assert.strictEqual(args.args[0].length, 1); + assert.strictEqual(args.args[0][0], 42); + assert.strictEqual(args.args[1], 1); + return; + } else { + return this._super(...arguments); + } + }, + }); + const activity = this.env.models['mail.activity'].create({ + id: 12, + mailTemplates: [['insert', { + id: 1, + name: "Dummy mail template", + }]], + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_MailTemplate_send').length, + 1, + "should have activity mail template name send button" + ); + + document.querySelector('.o_MailTemplate_send').click(); + assert.verifySteps( + ['activity_send_mail'], + "should have called activity_send_mail rpc" + ); +}); + +QUnit.test('activity upload document is available', async function (assert) { + assert.expect(3); + + await this.start(); + const today = new Date(); + const tomorrow = new Date(); + tomorrow.setDate(today.getDate() + 1); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + category: 'upload_file', + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_uploadButton').length, + 1, + "should have activity upload button" + ); + assert.strictEqual( + document.querySelectorAll('.o_FileUploader').length, + 1, + "should have a file uploader" + ); +}); + +QUnit.test('activity click on mark as done', async function (assert) { + assert.expect(4); + + await this.start(); + const today = new Date(); + const tomorrow = new Date(); + tomorrow.setDate(today.getDate() + 1); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + category: 'not_upload_file', + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_markDoneButton').length, + 1, + "should have activity Mark as Done button" + ); + + await afterNextRender(() => { + document.querySelector('.o_Activity_markDoneButton').click(); + }); + assert.strictEqual( + document.querySelectorAll('.o_ActivityMarkDonePopover').length, + 1, + "should have opened the mark done popover" + ); + + await afterNextRender(() => { + document.querySelector('.o_Activity_markDoneButton').click(); + }); + assert.strictEqual( + document.querySelectorAll('.o_ActivityMarkDonePopover').length, + 0, + "should have closed the mark done popover" + ); +}); + +QUnit.test('activity mark as done popover should focus feedback input on open [REQUIRE FOCUS]', async function (assert) { + assert.expect(3); + + await this.start(); + const today = new Date(); + const tomorrow = new Date(); + tomorrow.setDate(today.getDate() + 1); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + category: 'not_upload_file', + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + + assert.containsOnce( + document.body, + '.o_Activity', + "should have activity component" + ); + assert.containsOnce( + document.body, + '.o_Activity_markDoneButton', + "should have activity Mark as Done button" + ); + + await afterNextRender(() => { + document.querySelector('.o_Activity_markDoneButton').click(); + }); + assert.strictEqual( + document.querySelector('.o_ActivityMarkDonePopover_feedback'), + document.activeElement, + "the popover textarea should have the focus" + ); +}); + +QUnit.test('activity click on edit', async function (assert) { + assert.expect(9); + + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('do_action'); + assert.strictEqual( + payload.action.context.default_res_id, + 42, + 'Action should have the activity res id as default res id in context' + ); + assert.strictEqual( + payload.action.context.default_res_model, + 'res.partner', + 'Action should have the activity res model as default res model in context' + ); + assert.strictEqual( + payload.action.type, + "ir.actions.act_window", + 'Action should be of type "ir.actions.act_window"' + ); + assert.strictEqual( + payload.action.res_model, + "mail.activity", + 'Action should have "mail.activity" as res_model' + ); + assert.strictEqual( + payload.action.res_id, + 12, + 'Action should have activity id as res_id' + ); + }); + + await this.start({ env: { bus } }); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + id: 12, + mailTemplates: [['insert', { id: 1, name: "Dummy mail template" }]], + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_editButton').length, + 1, + "should have activity edit button" + ); + + document.querySelector('.o_Activity_editButton').click(); + assert.verifySteps( + ['do_action'], + "should have called 'schedule activity' action correctly" + ); +}); + +QUnit.test('activity edition', async function (assert) { + assert.expect(14); + + this.data['mail.activity'].records.push({ + can_write: true, + icon: 'fa-times', + id: 12, + res_id: 42, + res_model: 'res.partner', + }); + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('do_action'); + assert.strictEqual( + payload.action.context.default_res_id, + 42, + 'Action should have the activity res id as default res id in context' + ); + assert.strictEqual( + payload.action.context.default_res_model, + 'res.partner', + 'Action should have the activity res model as default res model in context' + ); + assert.strictEqual( + payload.action.type, + 'ir.actions.act_window', + 'Action should be of type "ir.actions.act_window"' + ); + assert.strictEqual( + payload.action.res_model, + 'mail.activity', + 'Action should have "mail.activity" as res_model' + ); + assert.strictEqual( + payload.action.res_id, + 12, + 'Action should have activity id as res_id' + ); + this.data['mail.activity'].records[0].icon = 'fa-check'; + payload.options.on_close(); + }); + + await this.start({ env: { bus } }); + const activity = this.env.models['mail.activity'].insert( + this.env.models['mail.activity'].convertData( + this.data['mail.activity'].records[0] + ) + ); + await this.createActivityComponent(activity); + + assert.containsOnce( + document.body, + '.o_Activity', + "should have activity component" + ); + assert.containsOnce( + document.body, + '.o_Activity_editButton', + "should have activity edit button" + ); + assert.containsOnce( + document.body, + '.o_Activity_icon', + "should have activity icon" + ); + assert.containsOnce( + document.body, + '.o_Activity_icon.fa-times', + "should have initial activity icon" + ); + assert.containsNone( + document.body, + '.o_Activity_icon.fa-check', + "should not have new activity icon when not edited yet" + ); + + await afterNextRender(() => { + document.querySelector('.o_Activity_editButton').click(); + }); + assert.verifySteps( + ['do_action'], + "should have called 'schedule activity' action correctly" + ); + assert.containsNone( + document.body, + '.o_Activity_icon.fa-times', + "should no more have initial activity icon once edited" + ); + assert.containsOnce( + document.body, + '.o_Activity_icon.fa-check', + "should now have new activity icon once edited" + ); +}); + +QUnit.test('activity click on cancel', async function (assert) { + assert.expect(7); + + await this.start({ + async mockRPC(route, args) { + if (route === '/web/dataset/call_kw/mail.activity/unlink') { + assert.step('unlink'); + assert.strictEqual(args.args[0].length, 1); + assert.strictEqual(args.args[0][0], 12); + return; + } else { + return this._super(...arguments); + } + }, + }); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + id: 12, + mailTemplates: [['insert', { + id: 1, + name: "Dummy mail template", + }]], + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + + // Create a parent component to surround the Activity component in order to be able + // to check that activity component has been destroyed + class ParentComponent extends Component { + constructor(...args) { + super(... args); + useStore(props => { + const activity = this.env.models['mail.activity'].get(props.activityLocalId); + return { + activity: activity ? activity.__state : undefined, + }; + }); + } + + /** + * @returns {mail.activity} + */ + get activity() { + return this.env.models['mail.activity'].get(this.props.activityLocalId); + } + } + ParentComponent.env = this.env; + Object.assign(ParentComponent, { + components, + props: { activityLocalId: String }, + template: xml` + <div> + <p>parent</p> + <t t-if="activity"> + <Activity activityLocalId="activity.localId"/> + </t> + </div> + `, + }); + await createRootComponent(this, ParentComponent, { + props: { activityLocalId: activity.localId }, + target: this.widget.el, + }); + + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 1, + "should have activity component" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity_cancelButton').length, + 1, + "should have activity cancel button" + ); + + await afterNextRender(() => + document.querySelector('.o_Activity_cancelButton').click() + ); + assert.verifySteps( + ['unlink'], + "should have called unlink rpc after clicking on cancel" + ); + assert.strictEqual( + document.querySelectorAll('.o_Activity').length, + 0, + "should no longer display activity after clicking on cancel" + ); +}); + +QUnit.test('activity mark done popover close on ESCAPE', async function (assert) { + // This test is not in activity_mark_done_popover_tests.js as it requires the activity mark done + // component to have a parent in order to allow testing interactions the popover. + assert.expect(2); + + await this.start(); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + category: 'not_upload_file', + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + + await this.createActivityComponent(activity); + await afterNextRender(() => { + document.querySelector('.o_Activity_markDoneButton').click(); + }); + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover', + "Popover component should be present" + ); + + await afterNextRender(() => { + const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" }); + document.querySelector(`.o_ActivityMarkDonePopover`).dispatchEvent(ev); + }); + assert.containsNone( + document.body, + '.o_ActivityMarkDonePopover', + "ESCAPE pressed should have closed the mark done popover" + ); +}); + +QUnit.test('activity mark done popover click on discard', async function (assert) { + // This test is not in activity_mark_done_popover_tests.js as it requires the activity mark done + // component to have a parent in order to allow testing interactions the popover. + assert.expect(3); + + await this.start(); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + category: 'not_upload_file', + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + await afterNextRender(() => { + document.querySelector('.o_Activity_markDoneButton').click(); + }); + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover', + "Popover component should be present" + ); + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover_discardButton', + "Popover component should contain the discard button" + ); + await afterNextRender(() => + document.querySelector('.o_ActivityMarkDonePopover_discardButton').click() + ); + assert.containsNone( + document.body, + '.o_ActivityMarkDonePopover', + "Discard button clicked should have closed the mark done popover" + ); +}); + +QUnit.test('data-oe-id & data-oe-model link redirection on click', async function (assert) { + assert.expect(7); + + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.strictEqual( + payload.action.type, + 'ir.actions.act_window', + "action should open view" + ); + assert.strictEqual( + payload.action.res_model, + 'some.model', + "action should open view on 'some.model' model" + ); + assert.strictEqual( + payload.action.res_id, + 250, + "action should open view on 250" + ); + assert.step('do-action:openFormView_some.model_250'); + }); + await this.start({ env: { bus } }); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + category: 'not_upload_file', + id: 12, + note: `<p><a href="#" data-oe-id="250" data-oe-model="some.model">some.model_250</a></p>`, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityComponent(activity); + assert.containsOnce( + document.body, + '.o_Activity_note', + "activity should have a note" + ); + assert.containsOnce( + document.querySelector('.o_Activity_note'), + 'a', + "activity note should have a link" + ); + + document.querySelector(`.o_Activity_note a`).click(); + assert.verifySteps( + ['do-action:openFormView_some.model_250'], + "should have open form view on related record after click on link" + ); +}); + +}); +}); +}); + +}); 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 00000000..ca191694 --- /dev/null +++ b/addons/mail/static/src/components/activity_box/activity_box.js @@ -0,0 +1,64 @@ +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 useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.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); + useShouldUpdateBasedOnProps(); + useStore(props => { + const chatter = this.env.models['mail.chatter'].get(props.chatterLocalId); + const thread = chatter && chatter.thread; + return { + chatter: chatter ? chatter.__state : undefined, + thread: thread && thread.__state, + }; + }); + } + + //-------------------------------------------------------------------------- + // 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 00000000..64e99347 --- /dev/null +++ b/addons/mail/static/src/components/activity_box/activity_box.scss @@ -0,0 +1,45 @@ +// ------------------------------------------------------------------ +// 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_titleBadges { + margin-inline-end: map-get($spacers, 3); +} + +.o_ActivityBox_titleLine { + flex: 1 1 auto; + width: auto; +} + +.o_ActivityBox_titleText { + margin: 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 00000000..900b5634 --- /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 and chatter.thread"> + <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-down' : 'fa-caret-right'"/> + Planned activities + </span> + <t t-if="!chatter.isActivityBoxVisible"> + <span class="o_ActivityBox_titleBadges"> + <t t-if="chatter.thread.overdueActivities.length > 0"> + <span class="o_ActivityBox_titleBadge badge rounded-circle badge-danger"> + <t t-esc="chatter.thread.overdueActivities.length"/> + </span> + </t> + <t t-if="chatter.thread.todayActivities.length > 0"> + <span class="o_ActivityBox_titleBadge badge rounded-circle badge-warning"> + <t t-esc="chatter.thread.todayActivities.length"/> + </span> + </t> + <t t-if="chatter.thread.futureActivities.length > 0"> + <span class="o_ActivityBox_titleBadge badge rounded-circle badge-success"> + <t t-esc="chatter.thread.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.thread.activities" t-as="activity" t-key="activity.localId"> + <Activity class="o_ActivityBox_activity" activityLocalId="activity.localId"/> + </t> + </div> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js new file mode 100644 index 00000000..de1ea5ce --- /dev/null +++ b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js @@ -0,0 +1,122 @@ +odoo.define('mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class ActivityMarkDonePopover extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const activity = this.env.models['mail.activity'].get(props.activityLocalId); + return { + activity: activity ? activity.__state : undefined, + }; + }); + this._feedbackTextareaRef = useRef('feedbackTextarea'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + mounted() { + this._feedbackTextareaRef.el.focus(); + if (this.activity.feedbackBackup) { + this._feedbackTextareaRef.el.value = this.activity.feedbackBackup; + } + } + + /** + * @returns {mail.activity} + */ + get activity() { + return this.env.models['mail.activity'].get(this.props.activityLocalId); + } + + /** + * @returns {string} + */ + get DONE_AND_SCHEDULE_NEXT() { + return this.env._t("Done & Schedule Next"); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _close() { + this.trigger('o-popover-close'); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onBlur() { + this.activity.update({ + feedbackBackup: this._feedbackTextareaRef.el.value, + }); + } + + /** + * @private + */ + _onClickDiscard() { + this._close(); + } + + /** + * @private + */ + async _onClickDone() { + await this.activity.markAsDone({ + feedback: this._feedbackTextareaRef.el.value, + }); + this.trigger('reload', { keepChanges: true }); + } + + /** + * @private + */ + _onClickDoneAndScheduleNext() { + this.activity.markAsDoneAndScheduleNext({ + feedback: this._feedbackTextareaRef.el.value, + }); + } + + /** + * @private + */ + _onKeydown(ev) { + if (ev.key === 'Escape') { + this._close(); + } + } + +} + +Object.assign(ActivityMarkDonePopover, { + props: { + activityLocalId: String, + }, + template: 'mail.ActivityMarkDonePopover', +}); + +return ActivityMarkDonePopover; + +}); diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss new file mode 100644 index 00000000..3479ffc3 --- /dev/null +++ b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.scss @@ -0,0 +1,20 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ActivityMarkDonePopover { + min-height: 100px; +} + +.o_ActivityMarkDonePopover_buttons { + margin-top: map-get($spacers, 2); +} + +.o_ActivityMarkDonePopover_doneButton { + margin: map-get($spacers, 0) map-get($spacers, 2); +} + +.o_ActivityMarkDonePopover_feedback { + min-height: 70px; +} + diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml new file mode 100644 index 00000000..357ab59b --- /dev/null +++ b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.xml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ActivityMarkDonePopover" owl="1"> + <div class="o_ActivityMarkDonePopover" t-on-keydown="_onKeydown"> + <t t-if="activity"> + <textarea class="form-control o_ActivityMarkDonePopover_feedback" rows="3" placeholder="Write Feedback" t-on-blur="_onBlur" t-ref="feedbackTextarea"/> + <div class="o_ActivityMarkDonePopover_buttons"> + <button type="button" class="o_ActivityMarkDonePopover_doneScheduleNextButton btn btn-sm btn-primary" t-on-click="_onClickDoneAndScheduleNext" t-esc="DONE_AND_SCHEDULE_NEXT"/> + <t t-if="!activity.force_next"> + <button type="button" class="o_ActivityMarkDonePopover_doneButton btn btn-sm btn-primary" t-on-click="_onClickDone"> + Done + </button> + </t> + <button type="button" class="o_ActivityMarkDonePopover_discardButton btn btn-sm btn-link" t-on-click="_onClickDiscard"> + Discard + </button> + </div> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover_tests.js b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover_tests.js new file mode 100644 index 00000000..0c019b2b --- /dev/null +++ b/addons/mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover_tests.js @@ -0,0 +1,297 @@ +odoo.define('mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover_tests.js', function (require) { +'use strict'; + +const components = { + ActivityMarkDonePopover: require('mail/static/src/components/activity_mark_done_popover/activity_mark_done_popover.js'), +}; + +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const Bus = require('web.Bus'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('activity_mark_done_popover', {}, function () { +QUnit.module('activity_mark_done_popover_tests.js', { + beforeEach() { + beforeEach(this); + + this.createActivityMarkDonePopoverComponent = async activity => { + await createRootComponent(this, components.ActivityMarkDonePopover, { + props: { activityLocalId: activity.localId }, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('activity mark done popover simplest layout', async function (assert) { + assert.expect(6); + + await this.start(); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + category: 'not_upload_file', + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityMarkDonePopoverComponent(activity); + + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover', + "Popover component should be present" + ); + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover_feedback', + "Popover component should contain the feedback textarea" + ); + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover_buttons', + "Popover component should contain the action buttons" + ); + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover_doneScheduleNextButton', + "Popover component should contain the done & schedule next button" + ); + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover_doneButton', + "Popover component should contain the done button" + ); + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover_discardButton', + "Popover component should contain the discard button" + ); +}); + +QUnit.test('activity with force next mark done popover simplest layout', async function (assert) { + assert.expect(6); + + await this.start(); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + category: 'not_upload_file', + force_next: true, + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityMarkDonePopoverComponent(activity); + + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover', + "Popover component should be present" + ); + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover_feedback', + "Popover component should contain the feedback textarea" + ); + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover_buttons', + "Popover component should contain the action buttons" + ); + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover_doneScheduleNextButton', + "Popover component should contain the done & schedule next button" + ); + assert.containsNone( + document.body, + '.o_ActivityMarkDonePopover_doneButton', + "Popover component should NOT contain the done button" + ); + assert.containsOnce( + document.body, + '.o_ActivityMarkDonePopover_discardButton', + "Popover component should contain the discard button" + ); +}); + +QUnit.test('activity mark done popover mark done without feedback', async function (assert) { + assert.expect(7); + + await this.start({ + async mockRPC(route, args) { + if (route === '/web/dataset/call_kw/mail.activity/action_feedback') { + assert.step('action_feedback'); + assert.strictEqual(args.args.length, 1); + assert.strictEqual(args.args[0].length, 1); + assert.strictEqual(args.args[0][0], 12); + assert.strictEqual(args.kwargs.attachment_ids.length, 0); + assert.notOk(args.kwargs.feedback); + return; + } + if (route === '/web/dataset/call_kw/mail.activity/unlink') { + // 'unlink' on non-existing record raises a server crash + throw new Error("'unlink' RPC on activity must not be called (already unlinked from mark as done)"); + } + return this._super(...arguments); + }, + }); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + category: 'not_upload_file', + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityMarkDonePopoverComponent(activity); + + document.querySelector('.o_ActivityMarkDonePopover_doneButton').click(); + assert.verifySteps( + ['action_feedback'], + "Mark done and schedule next button should call the right rpc" + ); +}); + +QUnit.test('activity mark done popover mark done with feedback', async function (assert) { + assert.expect(7); + + await this.start({ + async mockRPC(route, args) { + if (route === '/web/dataset/call_kw/mail.activity/action_feedback') { + assert.step('action_feedback'); + assert.strictEqual(args.args.length, 1); + assert.strictEqual(args.args[0].length, 1); + assert.strictEqual(args.args[0][0], 12); + assert.strictEqual(args.kwargs.attachment_ids.length, 0); + assert.strictEqual(args.kwargs.feedback, 'This task is done'); + return; + } + if (route === '/web/dataset/call_kw/mail.activity/unlink') { + // 'unlink' on non-existing record raises a server crash + throw new Error("'unlink' RPC on activity must not be called (already unlinked from mark as done)"); + } + return this._super(...arguments); + }, + }); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + category: 'not_upload_file', + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityMarkDonePopoverComponent(activity); + + let feedbackTextarea = document.querySelector('.o_ActivityMarkDonePopover_feedback'); + feedbackTextarea.focus(); + document.execCommand('insertText', false, 'This task is done'); + document.querySelector('.o_ActivityMarkDonePopover_doneButton').click(); + assert.verifySteps( + ['action_feedback'], + "Mark done and schedule next button should call the right rpc" + ); +}); + +QUnit.test('activity mark done popover mark done and schedule next', async function (assert) { + assert.expect(6); + + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('activity_action'); + throw new Error("The do-action event should not be triggered when the route doesn't return an action"); + }); + await this.start({ + async mockRPC(route, args) { + if (route === '/web/dataset/call_kw/mail.activity/action_feedback_schedule_next') { + assert.step('action_feedback_schedule_next'); + assert.strictEqual(args.args.length, 1); + assert.strictEqual(args.args[0].length, 1); + assert.strictEqual(args.args[0][0], 12); + assert.strictEqual(args.kwargs.feedback, 'This task is done'); + return false; + } + if (route === '/web/dataset/call_kw/mail.activity/unlink') { + // 'unlink' on non-existing record raises a server crash + throw new Error("'unlink' RPC on activity must not be called (already unlinked from mark as done)"); + } + return this._super(...arguments); + }, + env: { bus }, + }); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + category: 'not_upload_file', + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityMarkDonePopoverComponent(activity); + + let feedbackTextarea = document.querySelector('.o_ActivityMarkDonePopover_feedback'); + feedbackTextarea.focus(); + document.execCommand('insertText', false, 'This task is done'); + await afterNextRender(() => { + document.querySelector('.o_ActivityMarkDonePopover_doneScheduleNextButton').click(); + }); + assert.verifySteps( + ['action_feedback_schedule_next'], + "Mark done and schedule next button should call the right rpc and not trigger an action" + ); +}); + +QUnit.test('[technical] activity mark done & schedule next with new action', async function (assert) { + assert.expect(3); + + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('activity_action'); + assert.deepEqual( + payload.action, + { type: 'ir.actions.act_window' }, + "The content of the action should be correct" + ); + }); + await this.start({ + async mockRPC(route, args) { + if (route === '/web/dataset/call_kw/mail.activity/action_feedback_schedule_next') { + return { type: 'ir.actions.act_window' }; + } + return this._super(...arguments); + }, + env: { bus }, + }); + const activity = this.env.models['mail.activity'].create({ + canWrite: true, + category: 'not_upload_file', + id: 12, + thread: [['insert', { id: 42, model: 'res.partner' }]], + }); + await this.createActivityMarkDonePopoverComponent(activity); + + await afterNextRender(() => { + document.querySelector('.o_ActivityMarkDonePopover_doneScheduleNextButton').click(); + }); + assert.verifySteps( + ['activity_action'], + "The action returned by the route should be executed" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/attachment/attachment.js b/addons/mail/static/src/components/attachment/attachment.js new file mode 100644 index 00000000..a4b7b136 --- /dev/null +++ b/addons/mail/static/src/components/attachment/attachment.js @@ -0,0 +1,204 @@ +odoo.define('mail/static/src/components/attachment/attachment.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const components = { + AttachmentDeleteConfirmDialog: require('mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js'), +}; + +const { Component, useState } = owl; + +class Attachment extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps({ + compareDepth: { + attachmentLocalIds: 1, + }, + }); + useStore(props => { + const attachment = this.env.models['mail.attachment'].get(props.attachmentLocalId); + return { + attachment: attachment ? attachment.__state : undefined, + }; + }); + this.state = useState({ + hasDeleteConfirmDialog: false, + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.attachment} + */ + get attachment() { + return this.env.models['mail.attachment'].get(this.props.attachmentLocalId); + } + + /** + * Return the url of the attachment. Temporary attachments, a.k.a. uploading + * attachments, do not have an url. + * + * @returns {string} + */ + get attachmentUrl() { + if (this.attachment.isTemporary) { + return ''; + } + return this.env.session.url('/web/content', { + id: this.attachment.id, + download: true, + }); + } + + /** + * Get the details mode after auto mode is computed + * + * @returns {string} 'card', 'hover' or 'none' + */ + get detailsMode() { + if (this.props.detailsMode !== 'auto') { + return this.props.detailsMode; + } + if (this.attachment.fileType !== 'image') { + return 'card'; + } + return 'hover'; + } + + /** + * Get the attachment representation style to be applied + * + * @returns {string} + */ + get imageStyle() { + if (this.attachment.fileType !== 'image') { + return ''; + } + if (this.env.isQUnitTest) { + // background-image:url is hardly mockable, and attachments in + // QUnit tests do not actually exist in DB, so style should not + // be fetched at all. + return ''; + } + let size; + if (this.detailsMode === 'card') { + size = '38x38'; + } else { + // The size of background-image depends on the props.imageSize + // to sync with width and height of `.o_Attachment_image`. + if (this.props.imageSize === "large") { + size = '400x400'; + } else if (this.props.imageSize === "medium") { + size = '200x200'; + } else if (this.props.imageSize === "small") { + size = '100x100'; + } + } + // background-size set to override value from `o_image` which makes small image stretched + return `background-image:url(/web/image/${this.attachment.id}/${size}); background-size: auto;`; + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Download the attachment when clicking on donwload icon. + * + * @private + * @param {MouseEvent} ev + */ + _onClickDownload(ev) { + ev.stopPropagation(); + window.location = `/web/content/ir.attachment/${this.attachment.id}/datas?download=true`; + } + + /** + * Open the attachment viewer when clicking on viewable attachment. + * + * @private + * @param {MouseEvent} ev + */ + _onClickImage(ev) { + if (!this.attachment.isViewable) { + return; + } + this.env.models['mail.attachment'].view({ + attachment: this.attachment, + attachments: this.props.attachmentLocalIds.map( + attachmentLocalId => this.env.models['mail.attachment'].get(attachmentLocalId) + ), + }); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickUnlink(ev) { + ev.stopPropagation(); + if (!this.attachment) { + return; + } + if (this.attachment.isLinkedToComposer) { + this.attachment.remove(); + this.trigger('o-attachment-removed', { attachmentLocalId: this.props.attachmentLocalId }); + } else { + this.state.hasDeleteConfirmDialog = true; + } + } + + /** + * @private + */ + _onDeleteConfirmDialogClosed() { + this.state.hasDeleteConfirmDialog = false; + } +} + +Object.assign(Attachment, { + components, + defaultProps: { + attachmentLocalIds: [], + detailsMode: 'auto', + imageSize: 'medium', + isDownloadable: false, + isEditable: true, + showExtension: true, + showFilename: true, + }, + props: { + attachmentLocalId: String, + attachmentLocalIds: { + type: Array, + element: String, + }, + detailsMode: { + type: String, + validate: prop => ['auto', 'card', 'hover', 'none'].includes(prop), + }, + imageSize: { + type: String, + validate: prop => ['small', 'medium', 'large'].includes(prop), + }, + isDownloadable: Boolean, + isEditable: Boolean, + showExtension: Boolean, + showFilename: Boolean, + }, + template: 'mail.Attachment', +}); + +return Attachment; + +}); diff --git a/addons/mail/static/src/components/attachment/attachment.scss b/addons/mail/static/src/components/attachment/attachment.scss new file mode 100644 index 00000000..583e5703 --- /dev/null +++ b/addons/mail/static/src/components/attachment/attachment.scss @@ -0,0 +1,204 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_Attachment { + display: flex; + + &:hover .o_Attachment_asideItemUnlink.o-pretty { + transform: translateX(0); + } +} + +.o_Attachment_action { + min-width: 20px; +} + +.o_Attachment_actions { + justify-content: space-between; + display: flex; + flex-direction: column; +} + +.o_Attachment_aside { + position: relative; + overflow: hidden; + + &:not(.o-has-multiple-action) { + min-width: 50px; + } + + &.o-has-multiple-action { + min-width: 30px; + display: flex; + flex-direction: column; + } +} + +.o_Attachment_asideItem { + display: flex; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; +} + +.o_Attachment_asideItemUnlink.o-pretty { + position: absolute; + top: 0; + transform: translateX(100%); +} + +.o_Attachment_details { + display: flex; + flex-flow: column; + justify-content: center; + min-width: 0; /* This allows the text ellipsis in the flex element */ + /* prevent hover delete button & attachment image to be too close to the text */ + padding-left : map-get($spacers, 1); + padding-right : map-get($spacers, 1); +} + +.o_Attachment_filename { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.o_Attachment_image { + flex-shrink: 0; + margin: 3px; + + &.o-details-overlay { + position: relative; + // small, medium and large size styles should be sync with + // the size of the background-image and `.o_Attachment_image`. + &.o-small { + min-width: 100px; + min-height: 100px; + } + &.o-medium { + min-width: 200px; + min-height: 200px; + } + &.o-large { + min-width: 400px; + min-height: 400px; + } + + &:hover { + .o_Attachment_imageOverlay { + opacity: 1; + } + } + } +} + +.o_Attachment_imageOverlay { + bottom: 0; + display:flex; + flex-direction: row; + justify-content: flex-end; + left: 0; + padding: 10px; + position: absolute; + right: 0; + top: 0; +} + +.o_Attachment_imageOverlayDetails { + display: flex; + flex-direction: column; + justify-content: flex-end; + margin: 3px; + width: 200px; +} + + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_Attachment { + &.o-has-card-details { + background-color: gray('300'); + border-radius: 5px; + } +} + +.o_Attachment_action { + border-radius: 10px; + cursor: pointer; + text-align: center; + + &:hover { + background: rgba(255, 255, 255, 0.2); + } +} + +.o_Attachment_aside { + border-radius: 0 5px 5px 0; +} + +.o_Attachment_asideItemDownload { + cursor: pointer; + + &:hover { + background-color: gray('400'); + } +} + +.o_Attachment_asideItemUnlink { + cursor: pointer; + + &:not(.o-pretty):hover { + background-color: gray('400'); + } + + &.o-pretty { + color: white; + background-color: $o-brand-primary; + + &:hover { + background-color: darken($o-brand-primary, 10%); + } + } + +} + +.o_Attachment_asideItemUploaded { + color: $o-brand-primary; +} + +.o_Attachment_extension { + text-transform: uppercase; + font-size: 80%; + font-weight: 400; +} + +.o_Attachment_image.o-attachment-viewable { + cursor: zoom-in; + + &:not(.o-details-overlay):hover { + opacity: 0.7; + } +} + +.o_Attachment_imageOverlay { + background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.9)); + border-radius: 5px; + color: white; + opacity: 0; +} + +// ------------------------------------------------------------------ +// Animation +// ------------------------------------------------------------------ + +.o_Attachment_asideItemUnlink.o-pretty { + transition: transform 0.3s ease 0s; +} + +.o_Attachment_imageOverlay { + transition: all 0.3s ease 0s; +} diff --git a/addons/mail/static/src/components/attachment/attachment.xml b/addons/mail/static/src/components/attachment/attachment.xml new file mode 100644 index 00000000..938ff894 --- /dev/null +++ b/addons/mail/static/src/components/attachment/attachment.xml @@ -0,0 +1,115 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.Attachment" owl="1"> + <div class="o_Attachment" + t-att-class="{ + 'o-downloadable': props.isDownloadable, + 'o-editable': props.isEditable, + 'o-has-card-details': attachment and detailsMode === 'card', + 'o-temporary': attachment and attachment.isTemporary, + 'o-viewable': attachment and attachment.isViewable, + }" t-att-title="attachment ? attachment.displayName : undefined" t-att-data-attachment-local-id="attachment ? attachment.localId : undefined" + > + <t t-if="attachment"> + <!-- Image style--> + <!-- o_image from mimetype.scss --> + <div class="o_Attachment_image o_image" t-on-click="_onClickImage" + t-att-class="{ + 'o-attachment-viewable': attachment.isViewable, + 'o-details-overlay': detailsMode !== 'card', + 'o-large': props.imageSize === 'large', + 'o-medium': props.imageSize === 'medium', + 'o-small': props.imageSize === 'small', + }" t-att-href="attachmentUrl" t-att-style="imageStyle" t-att-data-mimetype="attachment.mimetype" + > + <t t-if="(props.showFilename or props.showExtension) and detailsMode === 'hover'"> + <div class="o_Attachment_imageOverlay"> + <div class="o_Attachment_details o_Attachment_imageOverlayDetails"> + <t t-if="props.showFilename"> + <div class="o_Attachment_filename"> + <t t-esc="attachment.displayName"/> + </div> + </t> + <t t-if="props.showExtension"> + <div class="o_Attachment_extension"> + <t t-esc="attachment.extension"/> + </div> + </t> + </div> + <div class="o_Attachment_actions"> + <!-- Remove button --> + <t t-if="props.isEditable" t-key="'unlink'"> + <div class="o_Attachment_action o_Attachment_actionUnlink" + t-att-class="{ + 'o-pretty': attachment.isLinkedToComposer, + }" t-on-click="_onClickUnlink" title="Remove" + > + <i class="fa fa-times"/> + </div> + </t> + <!-- Download button --> + <t t-if="props.isDownloadable and !attachment.isTemporary" t-key="'download'"> + <div class="o_Attachment_action o_Attachment_actionDownload" t-on-click="_onClickDownload" title="Download"> + <i class="fa fa-download"/> + </div> + </t> + </div> + </div> + </t> + </div> + <!-- Attachment details --> + <t t-if="(props.showFilename or props.showExtension) and detailsMode === 'card'"> + <div class="o_Attachment_details"> + <t t-if="props.showFilename"> + <div class="o_Attachment_filename"> + <t t-esc="attachment.displayName"/> + </div> + </t> + <t t-if="props.showExtension"> + <div class="o_Attachment_extension"> + <t t-esc="attachment.extension"/> + </div> + </t> + </div> + </t> + <!-- Attachment aside --> + <t t-if="detailsMode !== 'hover' and (props.isDownloadable or props.isEditable)"> + <div class="o_Attachment_aside" t-att-class="{ 'o-has-multiple-action': props.isDownloadable and props.isEditable }"> + <!-- Uploading icon --> + <t t-if="attachment.isTemporary and attachment.isLinkedToComposer"> + <div class="o_Attachment_asideItem o_Attachment_asideItemUploading" title="Uploading"> + <i class="fa fa-spin fa-spinner"/> + </div> + </t> + <!-- Uploaded icon --> + <t t-if="!attachment.isTemporary and attachment.isLinkedToComposer"> + <div class="o_Attachment_asideItem o_Attachment_asideItemUploaded" title="Uploaded"> + <i class="fa fa-check"/> + </div> + </t> + <!-- Remove button --> + <t t-if="props.isEditable"> + <div class="o_Attachment_asideItem o_Attachment_asideItemUnlink" t-att-class="{ 'o-pretty': attachment.isLinkedToComposer }" t-on-click="_onClickUnlink" title="Remove"> + <i class="fa fa-times"/> + </div> + </t> + <!-- Download button --> + <t t-if="props.isDownloadable and !attachment.isTemporary"> + <div class="o_Attachment_asideItem o_Attachment_asideItemDownload" t-on-click="_onClickDownload" title="Download"> + <i class="fa fa-download"/> + </div> + </t> + </div> + </t> + <t t-if="state.hasDeleteConfirmDialog"> + <AttachmentDeleteConfirmDialog + attachmentLocalId="props.attachmentLocalId" + t-on-dialog-closed="_onDeleteConfirmDialogClosed" + /> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/attachment/attachment_tests.js b/addons/mail/static/src/components/attachment/attachment_tests.js new file mode 100644 index 00000000..eaeb267d --- /dev/null +++ b/addons/mail/static/src/components/attachment/attachment_tests.js @@ -0,0 +1,762 @@ +odoo.define('mail/static/src/components/attachment/attachment_tests.js', function (require) { +'use strict'; + +const components = { + Attachment: require('mail/static/src/components/attachment/attachment.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('attachment', {}, function () { +QUnit.module('attachment_tests.js', { + beforeEach() { + beforeEach(this); + + this.createAttachmentComponent = async (attachment, otherProps) => { + const props = Object.assign({ attachmentLocalId: attachment.localId }, otherProps); + await createRootComponent(this, components.Attachment, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('simplest layout', async function (assert) { + assert.expect(8); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.txt", + id: 750, + mimetype: 'text/plain', + name: "test.txt", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'none', + isDownloadable: false, + isEditable: false, + showExtension: false, + showFilename: false, + }); + assert.strictEqual( + document.querySelectorAll('.o_Attachment').length, + 1, + "should have attachment component in DOM" + ); + const attachmentEl = document.querySelector('.o_Attachment'); + assert.strictEqual( + attachmentEl.dataset.attachmentLocalId, + this.env.models['mail.attachment'].findFromIdentifyingData({ id: 750 }).localId, + "attachment component should be linked to attachment store model" + ); + assert.strictEqual( + attachmentEl.title, + "test.txt", + "attachment should have filename as title attribute" + ); + assert.strictEqual( + attachmentEl.querySelectorAll(`:scope .o_Attachment_image`).length, + 1, + "attachment should have an image part" + ); + const attachmentImage = document.querySelector(`.o_Attachment_image`); + assert.ok( + attachmentImage.classList.contains('o_image'), + "attachment should have o_image classname (required for mimetype.scss style)" + ); + assert.strictEqual( + attachmentImage.dataset.mimetype, + 'text/plain', + "attachment should have data-mimetype set (required for mimetype.scss style)" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_details`).length, + 0, + "attachment should not have a details part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_aside`).length, + 0, + "attachment should not have an aside part" + ); +}); + +QUnit.test('simplest layout + deletable', async function (assert) { + assert.expect(6); + + await this.start({ + async mockRPC(route, args) { + if (route.includes('web/image/750')) { + assert.ok( + route.includes('/200x200'), + "should fetch image with 200x200 pixels ratio"); + assert.step('fetch_image'); + } + return this._super(...arguments); + }, + }); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.txt", + id: 750, + mimetype: 'text/plain', + name: "test.txt", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'none', + isDownloadable: false, + isEditable: true, + showExtension: false, + showFilename: false + }); + assert.strictEqual( + document.querySelectorAll('.o_Attachment').length, + 1, + "should have attachment component in DOM" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_image`).length, + 1, + "attachment should have an image part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_details`).length, + 0, + "attachment should not have a details part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_aside`).length, + 1, + "attachment should have an aside part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_asideItem`).length, + 1, + "attachment should have only one aside item" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_asideItemUnlink`).length, + 1, + "attachment should have a delete button" + ); +}); + +QUnit.test('simplest layout + downloadable', async function (assert) { + assert.expect(6); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.txt", + id: 750, + mimetype: 'text/plain', + name: "test.txt", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'none', + isDownloadable: true, + isEditable: false, + showExtension: false, + showFilename: false + }); + assert.strictEqual( + document.querySelectorAll('.o_Attachment').length, + 1, + "should have attachment component in DOM" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_image`).length, + 1, + "attachment should have an image part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_details`).length, + 0, + "attachment should not have a details part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_aside`).length, + 1, + "attachment should have an aside part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_asideItem`).length, + 1, + "attachment should have only one aside item" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_asideItemDownload`).length, + 1, + "attachment should have a download button" + ); +}); + +QUnit.test('simplest layout + deletable + downloadable', async function (assert) { + assert.expect(8); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.txt", + id: 750, + mimetype: 'text/plain', + name: "test.txt", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'none', + isDownloadable: true, + isEditable: true, + showExtension: false, + showFilename: false + }); + assert.strictEqual( + document.querySelectorAll('.o_Attachment').length, + 1, + "should have attachment component in DOM" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_image`).length, + 1, + "attachment should have an image part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_details`).length, + 0, + "attachment should not have a details part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_aside`).length, + 1, + "attachment should have an aside part" + ); + assert.ok( + document.querySelector(`.o_Attachment_aside`).classList.contains('o-has-multiple-action'), + "attachment aside should contain multiple actions" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_asideItem`).length, + 2, + "attachment should have only two aside items" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_asideItemDownload`).length, + 1, + "attachment should have a download button" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_asideItemUnlink`).length, + 1, + "attachment should have a delete button" + ); +}); + +QUnit.test('layout with card details', async function (assert) { + assert.expect(3); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.txt", + id: 750, + mimetype: 'text/plain', + name: "test.txt", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'card', + isDownloadable: false, + isEditable: false, + showExtension: false, + showFilename: false + }); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_image`).length, + 1, + "attachment should have an image part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_details`).length, + 0, + "attachment should not have a details part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_aside`).length, + 0, + "attachment should not have an aside part" + ); +}); + +QUnit.test('layout with card details and filename', async function (assert) { + assert.expect(3); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.txt", + id: 750, + mimetype: 'text/plain', + name: "test.txt", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'card', + isDownloadable: false, + isEditable: false, + showExtension: false, + showFilename: true + }); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_details`).length, + 1, + "attachment should have a details part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_filename`).length, + 1, + "attachment should not have its filename shown" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_extension`).length, + 0, + "attachment should have its extension shown" + ); +}); + +QUnit.test('layout with card details and extension', async function (assert) { + assert.expect(3); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.txt", + id: 750, + mimetype: 'text/plain', + name: "test.txt", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'card', + isDownloadable: false, + isEditable: false, + showExtension: true, + showFilename: false + }); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_details`).length, + 1, + "attachment should have a details part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_filename`).length, + 0, + "attachment should not have its filename shown" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_extension`).length, + 1, + "attachment should have its extension shown" + ); +}); + +QUnit.test('layout with card details and filename and extension', async function (assert) { + assert.expect(3); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.txt", + id: 750, + mimetype: 'text/plain', + name: "test.txt", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'card', + isDownloadable: false, + isEditable: false, + showExtension: true, + showFilename: true + }); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_details`).length, + 1, + "attachment should have a details part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_filename`).length, + 1, + "attachment should have its filename shown" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_extension`).length, + 1, + "attachment should have its extension shown" + ); +}); + +QUnit.test('simplest layout with hover details and filename and extension', async function (assert) { + assert.expect(8); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.txt", + id: 750, + mimetype: 'text/plain', + name: "test.txt", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'hover', + isDownloadable: true, + isEditable: true, + showExtension: true, + showFilename: true + }); + assert.strictEqual( + document.querySelectorAll(` + .o_Attachment_details:not(.o_Attachment_imageOverlayDetails) + `).length, + 0, + "attachment should not have a details part directly" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_imageOverlayDetails`).length, + 1, + "attachment should have a details part in the overlay" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_image`).length, + 1, + "attachment should have an image part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_imageOverlay`).length, + 1, + "attachment should have an image overlay part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_filename`).length, + 1, + "attachment should have its filename shown" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_extension`).length, + 1, + "attachment should have its extension shown" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_actions`).length, + 1, + "attachment should have an actions part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_aside`).length, + 0, + "attachment should not have an aside element" + ); +}); + +QUnit.test('auto layout with image', async function (assert) { + assert.expect(7); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.png", + id: 750, + mimetype: 'image/png', + name: "test.png", + }); + + await this.createAttachmentComponent(attachment, { + detailsMode: 'auto', + isDownloadable: false, + isEditable: false, + showExtension: true, + showFilename: true + }); + assert.strictEqual( + document.querySelectorAll(` + .o_Attachment_details:not(.o_Attachment_imageOverlayDetails) + `).length, + 0, + "attachment should not have a details part directly" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_imageOverlayDetails`).length, + 1, + "attachment should have a details part in the overlay" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_image`).length, + 1, + "attachment should have an image part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_imageOverlay`).length, + 1, + "attachment should have an image overlay part" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_filename`).length, + 1, + "attachment should have its filename shown" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_extension`).length, + 1, + "attachment should have its extension shown" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Attachment_aside`).length, + 0, + "attachment should not have an aside element" + ); +}); + +QUnit.test('view attachment', async function (assert) { + assert.expect(3); + + await this.start({ + hasDialog: true, + }); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.png", + id: 750, + mimetype: 'image/png', + name: "test.png", + }); + + await this.createAttachmentComponent(attachment, { + detailsMode: 'hover', + isDownloadable: false, + isEditable: false, + }); + assert.containsOnce( + document.body, + '.o_Attachment_image', + "attachment should have an image part" + ); + await afterNextRender(() => document.querySelector('.o_Attachment_image').click()); + assert.containsOnce( + document.body, + '.o_Dialog', + 'a dialog should have been opened once attachment image is clicked', + ); + assert.containsOnce( + document.body, + '.o_AttachmentViewer', + 'an attachment viewer should have been opened once attachment image is clicked', + ); +}); + +QUnit.test('close attachment viewer', async function (assert) { + assert.expect(3); + + await this.start({ hasDialog: true }); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.png", + id: 750, + mimetype: 'image/png', + name: "test.png", + }); + + await this.createAttachmentComponent(attachment, { + detailsMode: 'hover', + isDownloadable: false, + isEditable: false, + }); + assert.containsOnce( + document.body, + '.o_Attachment_image', + "attachment should have an image part" + ); + + await afterNextRender(() => document.querySelector('.o_Attachment_image').click()); + assert.containsOnce( + document.body, + '.o_AttachmentViewer', + "an attachment viewer should have been opened once attachment image is clicked", + ); + + await afterNextRender(() => + document.querySelector('.o_AttachmentViewer_headerItemButtonClose').click() + ); + assert.containsNone( + document.body, + '.o_Dialog', + "attachment viewer should be closed after clicking on close button" + ); +}); + +QUnit.test('clicking on the delete attachment button multiple times should do the rpc only once', async function (assert) { + assert.expect(2); + await this.start({ + async mockRPC(route, args) { + if (args.method === "unlink" && args.model === "ir.attachment") { + assert.step('attachment_unlink'); + return; + } + return this._super(...arguments); + }, + }); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.txt", + id: 750, + mimetype: 'text/plain', + name: "test.txt", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'hover', + }); + await afterNextRender(() => { + document.querySelector('.o_Attachment_actionUnlink').click(); + }); + + await afterNextRender(() => { + document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click(); + document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click(); + document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click(); + }); + assert.verifySteps( + ['attachment_unlink'], + "The unlink method must be called once" + ); +}); + +QUnit.test('[technical] does not crash when the viewer is closed before image load', async function (assert) { + /** + * When images are displayed using `src` attribute for the 1st time, it fetches the resource. + * In this case, images are actually displayed (fully fetched and rendered on screen) when + * `<image>` intercepts `load` event. + * + * Current code needs to be aware of load state of image, to display spinner when loading + * and actual image when loaded. This test asserts no crash from mishandling image becoming + * loaded from being viewed for 1st time, but viewer being closed while image is loading. + */ + assert.expect(1); + + await this.start({ hasDialog: true }); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.png", + id: 750, + mimetype: 'image/png', + name: "test.png", + }); + await this.createAttachmentComponent(attachment); + await afterNextRender(() => document.querySelector('.o_Attachment_image').click()); + const imageEl = document.querySelector('.o_AttachmentViewer_viewImage'); + await afterNextRender(() => + document.querySelector('.o_AttachmentViewer_headerItemButtonClose').click() + ); + // Simulate image becoming loaded. + let successfulLoad; + try { + imageEl.dispatchEvent(new Event('load', { bubbles: true })); + successfulLoad = true; + } catch (err) { + successfulLoad = false; + } finally { + assert.ok(successfulLoad, 'should not crash when the image is loaded'); + } +}); + +QUnit.test('plain text file is viewable', async function (assert) { + assert.expect(1); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.txt", + id: 750, + mimetype: 'text/plain', + name: "test.txt", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'card', + isDownloadable: false, + isEditable: false, + }); + assert.hasClass( + document.querySelector('.o_Attachment'), + 'o-viewable', + "should be viewable", + ); +}); + +QUnit.test('HTML file is viewable', async function (assert) { + assert.expect(1); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.html", + id: 750, + mimetype: 'text/html', + name: "test.html", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'card', + isDownloadable: false, + isEditable: false, + }); + assert.hasClass( + document.querySelector('.o_Attachment'), + 'o-viewable', + "should be viewable", + ); +}); + +QUnit.test('ODT file is not viewable', async function (assert) { + assert.expect(1); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.odt", + id: 750, + mimetype: 'application/vnd.oasis.opendocument.text', + name: "test.odt", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'card', + isDownloadable: false, + isEditable: false, + }); + assert.doesNotHaveClass( + document.querySelector('.o_Attachment'), + 'o-viewable', + "should not be viewable", + ); +}); + +QUnit.test('DOCX file is not viewable', async function (assert) { + assert.expect(1); + + await this.start(); + const attachment = this.env.models['mail.attachment'].create({ + filename: "test.docx", + id: 750, + mimetype: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', + name: "test.docx", + }); + await this.createAttachmentComponent(attachment, { + detailsMode: 'card', + isDownloadable: false, + isEditable: false, + }); + assert.doesNotHaveClass( + document.querySelector('.o_Attachment'), + 'o-viewable', + "should not be viewable", + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/attachment_box/attachment_box.js b/addons/mail/static/src/components/attachment_box/attachment_box.js new file mode 100644 index 00000000..5bfe7c06 --- /dev/null +++ b/addons/mail/static/src/components/attachment_box/attachment_box.js @@ -0,0 +1,124 @@ +odoo.define('mail/static/src/components/attachment_box/attachment_box.js', function (require) { +'use strict'; + +const components = { + AttachmentList: require('mail/static/src/components/attachment_list/attachment_list.js'), + DropZone: require('mail/static/src/components/drop_zone/drop_zone.js'), + FileUploader: require('mail/static/src/components/file_uploader/file_uploader.js'), +}; +const useDragVisibleDropZone = require('mail/static/src/component_hooks/use_drag_visible_dropzone/use_drag_visible_dropzone.js'); +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class AttachmentBox extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + this.isDropZoneVisible = useDragVisibleDropZone(); + useShouldUpdateBasedOnProps(); + useStore(props => { + const thread = this.env.models['mail.thread'].get(props.threadLocalId); + return { + thread, + threadAllAttachments: thread ? thread.allAttachments : [], + threadId: thread && thread.id, + threadModel: thread && thread.model, + }; + }, { + compareDepth: { + threadAllAttachments: 1, + }, + }); + /** + * Reference of the file uploader. + * Useful to programmatically prompts the browser file uploader. + */ + this._fileUploaderRef = useRef('fileUploader'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * Get an object which is passed to FileUploader component to be used when + * creating attachment. + * + * @returns {Object} + */ + get newAttachmentExtraData() { + return { + originThread: [['link', this.thread]], + }; + } + + /** + * @returns {mail.thread|undefined} + */ + get thread() { + return this.env.models['mail.thread'].get(this.props.threadLocalId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {Event} ev + */ + _onAttachmentCreated(ev) { + // FIXME Could be changed by spying attachments count (task-2252858) + this.trigger('o-attachments-changed'); + } + + /** + * @private + * @param {Event} ev + */ + _onAttachmentRemoved(ev) { + // FIXME Could be changed by spying attachments count (task-2252858) + this.trigger('o-attachments-changed'); + } + + /** + * @private + * @param {Event} ev + */ + _onClickAdd(ev) { + ev.preventDefault(); + ev.stopPropagation(); + this._fileUploaderRef.comp.openBrowserFileUploader(); + } + + /** + * @private + * @param {CustomEvent} ev + * @param {Object} ev.detail + * @param {FileList} ev.detail.files + */ + async _onDropZoneFilesDropped(ev) { + ev.stopPropagation(); + await this._fileUploaderRef.comp.uploadFiles(ev.detail.files); + this.isDropZoneVisible.value = false; + } + +} + +Object.assign(AttachmentBox, { + components, + props: { + threadLocalId: String, + }, + template: 'mail.AttachmentBox', +}); + +return AttachmentBox; + +}); diff --git a/addons/mail/static/src/components/attachment_box/attachment_box.scss b/addons/mail/static/src/components/attachment_box/attachment_box.scss new file mode 100644 index 00000000..d51cca9c --- /dev/null +++ b/addons/mail/static/src/components/attachment_box/attachment_box.scss @@ -0,0 +1,46 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_AttachmentBox { + position: relative; +} + +.o_AttachmentBox_buttonAdd { + align-self: center; +} + +.o_AttachmentBox_content { + display: flex; + flex-direction: column; +} + +.o_AttachmentBox_dashedLine { + flex-grow: 1; +} + +.o_AttachmentBox_fileInput { + display: none; +} + +.o_AttachmentBox_title { + display: flex; + align-items: center; +} + +.o_AttachmentBox_titleText { + padding: map-get($spacers, 3); +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_AttachmentBox_dashedLine { + border-style: dashed; + border-color: gray('300'); +} + +.o_AttachmentBox_title { + font-weight: bold; +} diff --git a/addons/mail/static/src/components/attachment_box/attachment_box.xml b/addons/mail/static/src/components/attachment_box/attachment_box.xml new file mode 100644 index 00000000..9cd3e713 --- /dev/null +++ b/addons/mail/static/src/components/attachment_box/attachment_box.xml @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.AttachmentBox" owl="1"> + <div class="o_AttachmentBox"> + <div class="o_AttachmentBox_title"> + <hr class="o_AttachmentBox_dashedLine"/> + <span class="o_AttachmentBox_titleText"> + Attachments + </span> + <hr class="o_AttachmentBox_dashedLine"/> + </div> + <div class="o_AttachmentBox_content"> + <t t-if="isDropZoneVisible.value"> + <DropZone + class="o_AttachmentBox_dropZone" + t-on-o-dropzone-files-dropped="_onDropZoneFilesDropped" + t-ref="dropzone" + /> + </t> + <t t-if="thread and thread.allAttachments.length > 0"> + <AttachmentList + class="o_attachmentBox_attachmentList" + areAttachmentsDownloadable="true" + attachmentLocalIds="thread.allAttachments.map(attachment => attachment.localId)" + attachmentsDetailsMode="'hover'" + attachmentsImageSize="'small'" + showAttachmentsFilenames="true" + t-on-o-attachment-removed="_onAttachmentRemoved" + /> + </t> + <button class="o_AttachmentBox_buttonAdd btn btn-link" type="button" t-on-click="_onClickAdd"> + <i class="fa fa-plus-square"/> + Add attachments + </button> + </div> + <t t-if="thread"> + <FileUploader + attachmentLocalIds="thread.allAttachments.map(attachment => attachment.localId)" + newAttachmentExtraData="newAttachmentExtraData" + uploadModel="thread.model" + uploadId="thread.id" + t-on-o-attachment-created="_onAttachmentCreated" + t-ref="fileUploader" + /> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/attachment_box/attachment_box_tests.js b/addons/mail/static/src/components/attachment_box/attachment_box_tests.js new file mode 100644 index 00000000..142eb804 --- /dev/null +++ b/addons/mail/static/src/components/attachment_box/attachment_box_tests.js @@ -0,0 +1,337 @@ +odoo.define('mail/static/src/components/attachment_box/attachment_box_tests.js', function (require) { +"use strict"; + +const components = { + AttachmentBox: require('mail/static/src/components/attachment_box/attachment_box.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + dragenterFiles, + dropFiles, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const { file: { createFile } } = require('web.test_utils'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('attachment_box', {}, function () { +QUnit.module('attachment_box_tests.js', { + beforeEach() { + beforeEach(this); + + this.createAttachmentBoxComponent = async (thread, otherProps) => { + const props = Object.assign({ threadLocalId: thread.localId }, otherProps); + await createRootComponent(this, components.AttachmentBox, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('base empty rendering', async function (assert) { + assert.expect(4); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + await this.createAttachmentBoxComponent(thread); + assert.strictEqual( + document.querySelectorAll(`.o_AttachmentBox`).length, + 1, + "should have an attachment box" + ); + assert.strictEqual( + document.querySelectorAll(`.o_AttachmentBox_buttonAdd`).length, + 1, + "should have a button add" + ); + assert.strictEqual( + document.querySelectorAll(`.o_FileUploader_input`).length, + 1, + "should have a file input" + ); + assert.strictEqual( + document.querySelectorAll(`.o_AttachmentBox .o_Attachment`).length, + 0, + "should not have any attachment" + ); +}); + +QUnit.test('base non-empty rendering', async function (assert) { + assert.expect(6); + + this.data['ir.attachment'].records.push( + { + mimetype: 'text/plain', + name: 'Blah.txt', + res_id: 100, + res_model: 'res.partner', + }, + { + mimetype: 'text/plain', + name: 'Blu.txt', + res_id: 100, + res_model: 'res.partner', + } + ); + await this.start({ + async mockRPC(route, args) { + if (route.includes('ir.attachment/search_read')) { + assert.step('ir.attachment/search_read'); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + await thread.fetchAttachments(); + await this.createAttachmentBoxComponent(thread); + assert.verifySteps( + ['ir.attachment/search_read'], + "should have fetched attachments" + ); + assert.strictEqual( + document.querySelectorAll(`.o_AttachmentBox`).length, + 1, + "should have an attachment box" + ); + assert.strictEqual( + document.querySelectorAll(`.o_AttachmentBox_buttonAdd`).length, + 1, + "should have a button add" + ); + assert.strictEqual( + document.querySelectorAll(`.o_FileUploader_input`).length, + 1, + "should have a file input" + ); + assert.strictEqual( + document.querySelectorAll(`.o_attachmentBox_attachmentList`).length, + 1, + "should have an attachment list" + ); +}); + +QUnit.test('attachment box: drop attachments', async function (assert) { + assert.expect(5); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + await thread.fetchAttachments(); + await this.createAttachmentBoxComponent(thread); + const files = [ + await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text.txt', + }), + ]; + assert.strictEqual( + document.querySelectorAll('.o_AttachmentBox').length, + 1, + "should have an attachment box" + ); + + await afterNextRender(() => + dragenterFiles(document.querySelector('.o_AttachmentBox')) + ); + assert.ok( + document.querySelector('.o_AttachmentBox_dropZone'), + "should have a drop zone" + ); + assert.strictEqual( + document.querySelectorAll(`.o_AttachmentBox .o_Attachment`).length, + 0, + "should have no attachment before files are dropped" + ); + + await afterNextRender(() => + dropFiles( + document.querySelector('.o_AttachmentBox_dropZone'), + files + ) + ); + assert.strictEqual( + document.querySelectorAll(`.o_AttachmentBox .o_Attachment`).length, + 1, + "should have 1 attachment in the box after files dropped" + ); + + await afterNextRender(() => + dragenterFiles(document.querySelector('.o_AttachmentBox')) + ); + const file1 = await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text2.txt', + }); + const file2 = await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text3.txt', + }); + await afterNextRender(() => + dropFiles( + document.querySelector('.o_AttachmentBox_dropZone'), + [file1, file2] + ) + ); + assert.strictEqual( + document.querySelectorAll(`.o_AttachmentBox .o_Attachment`).length, + 3, + "should have 3 attachments in the box after files dropped" + ); +}); + +QUnit.test('view attachments', async function (assert) { + assert.expect(7); + + await this.start({ + hasDialog: true, + }); + const thread = this.env.models['mail.thread'].create({ + attachments: [ + ['insert', { + id: 143, + mimetype: 'text/plain', + name: 'Blah.txt' + }], + ['insert', { + id: 144, + mimetype: 'text/plain', + name: 'Blu.txt' + }] + ], + id: 100, + model: 'res.partner', + }); + const firstAttachment = this.env.models['mail.attachment'].findFromIdentifyingData({ id: 143 }); + await this.createAttachmentBoxComponent(thread); + + await afterNextRender(() => + document.querySelector(` + .o_Attachment[data-attachment-local-id="${firstAttachment.localId}"] + .o_Attachment_image + `).click() + ); + assert.containsOnce( + document.body, + '.o_Dialog', + "a dialog should have been opened once attachment image is clicked", + ); + assert.containsOnce( + document.body, + '.o_AttachmentViewer', + "an attachment viewer should have been opened once attachment image is clicked", + ); + assert.strictEqual( + document.querySelector('.o_AttachmentViewer_name').textContent, + 'Blah.txt', + "attachment viewer iframe should point to clicked attachment", + ); + assert.containsOnce( + document.body, + '.o_AttachmentViewer_buttonNavigationNext', + "attachment viewer should allow to see next attachment", + ); + + await afterNextRender(() => + document.querySelector('.o_AttachmentViewer_buttonNavigationNext').click() + ); + assert.strictEqual( + document.querySelector('.o_AttachmentViewer_name').textContent, + 'Blu.txt', + "attachment viewer iframe should point to next attachment of attachment box", + ); + assert.containsOnce( + document.body, + '.o_AttachmentViewer_buttonNavigationNext', + "attachment viewer should allow to see next attachment", + ); + + await afterNextRender(() => + document.querySelector('.o_AttachmentViewer_buttonNavigationNext').click() + ); + assert.strictEqual( + document.querySelector('.o_AttachmentViewer_name').textContent, + 'Blah.txt', + "attachment viewer iframe should point anew to first attachment", + ); +}); + +QUnit.test('remove attachment should ask for confirmation', async function (assert) { + assert.expect(5); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + attachments: [ + ['insert', { + id: 143, + mimetype: 'text/plain', + name: 'Blah.txt' + }], + ], + id: 100, + model: 'res.partner', + }); + await this.createAttachmentBoxComponent(thread); + assert.containsOnce( + document.body, + '.o_Attachment', + "should have an attachment", + ); + assert.containsOnce( + document.body, + '.o_Attachment_asideItemUnlink', + "attachment should have a delete button" + ); + + await afterNextRender(() => document.querySelector('.o_Attachment_asideItemUnlink').click()); + assert.containsOnce( + document.body, + '.o_AttachmentDeleteConfirmDialog', + "A confirmation dialog should have been opened" + ); + assert.strictEqual( + document.querySelector('.o_AttachmentDeleteConfirmDialog_mainText').textContent, + `Do you really want to delete "Blah.txt"?`, + "Confirmation dialog should contain the attachment delete confirmation text" + ); + + // Confirm the deletion + await afterNextRender(() => document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click()); + assert.containsNone( + document.body, + '.o_Attachment', + "should no longer have an attachment", + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js new file mode 100644 index 00000000..ab7e155a --- /dev/null +++ b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js @@ -0,0 +1,92 @@ +odoo.define('mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const components = { + Dialog: require('web.OwlDialog'), +}; + +const { Component } = owl; +const { useRef } = owl.hooks; + +class AttachmentDeleteConfirmDialog extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const attachment = this.env.models['mail.attachment'].get(props.attachmentLocalId); + return { + attachment: attachment ? attachment.__state : undefined, + }; + }); + // to manually trigger the dialog close event + this._dialogRef = useRef('dialog'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.attachment} + */ + get attachment() { + return this.env.models['mail.attachment'].get(this.props.attachmentLocalId); + } + + /** + * @returns {string} + */ + getBody() { + return _.str.sprintf( + this.env._t(`Do you really want to delete "%s"?`), + owl.utils.escape(this.attachment.displayName) + ); + } + + /** + * @returns {string} + */ + getTitle() { + return this.env._t("Confirmation"); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onClickCancel() { + this._dialogRef.comp._close(); + } + + /** + * @private + */ + _onClickOk() { + this._dialogRef.comp._close(); + this.attachment.remove(); + this.trigger('o-attachment-removed', { attachmentLocalId: this.props.attachmentLocalId }); + } + +} + +Object.assign(AttachmentDeleteConfirmDialog, { + components, + props: { + attachmentLocalId: String, + }, + template: 'mail.AttachmentDeleteConfirmDialog', +}); + +return AttachmentDeleteConfirmDialog; + +}); diff --git a/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.xml b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.xml new file mode 100644 index 00000000..6b466a9b --- /dev/null +++ b/addons/mail/static/src/components/attachment_delete_confirm_dialog/attachment_delete_confirm_dialog.xml @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + <t t-name="mail.AttachmentDeleteConfirmDialog" owl="1"> + <Dialog contentClass="'o_AttachmentDeleteConfirmDialog'" title="getTitle()" size="'medium'" t-ref="dialog"> + <p class="o_AttachmentDeleteConfirmDialog_mainText" t-esc="getBody()"/> + <t t-set-slot="buttons"> + <button class="o_AttachmentDeleteConfirmDialog_confirmButton btn btn-primary" t-on-click="_onClickOk">Ok</button> + <button class="o_AttachmentDeleteConfirmDialog_cancelButton btn btn-secondary" t-on-click="_onClickCancel">Cancel</button> + </t> + </Dialog> + </t> +</templates> diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.js b/addons/mail/static/src/components/attachment_list/attachment_list.js new file mode 100644 index 00000000..d8658ac8 --- /dev/null +++ b/addons/mail/static/src/components/attachment_list/attachment_list.js @@ -0,0 +1,119 @@ +odoo.define('mail/static/src/components/attachment_list/attachment_list.js', function (require) { +'use strict'; + +const components = { + Attachment: require('mail/static/src/components/attachment/attachment.js'), +}; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class AttachmentList extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps({ + compareDepth: { + attachmentLocalIds: 1, + }, + }); + useStore(props => { + const attachments = this.env.models['mail.attachment'].all().filter(attachment => + props.attachmentLocalIds.includes(attachment.localId) + ); + return { + attachments: attachments + ? attachments.map(attachment => attachment.__state) + : undefined, + }; + }, { + compareDepth: { + attachments: 1, + }, + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.attachment[]} + */ + get attachments() { + return this.env.models['mail.attachment'].all().filter(attachment => + this.props.attachmentLocalIds.includes(attachment.localId) + ); + } + + /** + * @returns {mail.attachment[]} + */ + get imageAttachments() { + return this.attachments.filter(attachment => attachment.fileType === 'image'); + } + + /** + * @returns {mail.attachment[]} + */ + get nonImageAttachments() { + return this.attachments.filter(attachment => attachment.fileType !== 'image'); + } + + /** + * @returns {mail.attachment[]} + */ + get viewableAttachments() { + return this.attachments.filter(attachment => attachment.isViewable); + } + +} + +Object.assign(AttachmentList, { + components, + defaultProps: { + attachmentLocalIds: [], + }, + props: { + areAttachmentsDownloadable: { + type: Boolean, + optional: true, + }, + areAttachmentsEditable: { + type: Boolean, + optional: true, + }, + attachmentLocalIds: { + type: Array, + element: String, + }, + attachmentsDetailsMode: { + type: String, + optional: true, + validate: prop => ['auto', 'card', 'hover', 'none'].includes(prop), + }, + attachmentsImageSize: { + type: String, + optional: true, + validate: prop => ['small', 'medium', 'large'].includes(prop), + }, + showAttachmentsExtensions: { + type: Boolean, + optional: true, + }, + showAttachmentsFilenames: { + type: Boolean, + optional: true, + }, + }, + template: 'mail.AttachmentList', +}); + +return AttachmentList; + +}); diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.scss b/addons/mail/static/src/components/attachment_list/attachment_list.scss new file mode 100644 index 00000000..dfe281ae --- /dev/null +++ b/addons/mail/static/src/components/attachment_list/attachment_list.scss @@ -0,0 +1,29 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_AttachmentList { + display: flex; + flex-flow: column; + justify-content: flex-start; +} + +/* Avoid overflow of long attachment text */ +.o_AttachmentList_attachment { + margin-bottom: map-get($spacers, 1); + margin-top: map-get($spacers, 1); + margin-inline-end: map-get($spacers, 1); + margin-inline-start: map-get($spacers, 0); + max-width: 100%; +} + +.o_AttachmentList_partialList { + display: flex; + flex: 1; + flex-flow: wrap; +} + +.o_AttachmentList_partialListNonImages { + margin: map-get($spacers, 1); + justify-content: flex-start; +} diff --git a/addons/mail/static/src/components/attachment_list/attachment_list.xml b/addons/mail/static/src/components/attachment_list/attachment_list.xml new file mode 100644 index 00000000..39499285 --- /dev/null +++ b/addons/mail/static/src/components/attachment_list/attachment_list.xml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.AttachmentList" owl="1"> + <div class="o_AttachmentList"> + <div class="o_AttachmentList_partialList o_AttachmentList_partialListImages"> + <t t-foreach="imageAttachments" t-as="attachment" t-key="attachment.localId"> + <Attachment + class="o_AttachmentList_attachment o_AttachmentList_imageAttachment" + attachmentLocalId="attachment.localId" + attachmentLocalIds="viewableAttachments.map(attachment => attachment.localId)" + detailsMode="props.attachmentsDetailsMode" + imageSize="props.attachmentsImageSize" + isDownloadable="props.areAttachmentsDownloadable" + isEditable="props.areAttachmentsEditable" + showExtension="props.showAttachmentsExtensions" + showFilename="props.showAttachmentsFilenames" + /> + </t> + </div> + <div class="o_AttachmentList_partialList o_AttachmentList_partialListNonImages"> + <t t-foreach="nonImageAttachments" t-as="attachment" t-key="attachment.localId"> + <Attachment + class="o_AttachmentList_attachment o_AttachmentList_nonImageAttachment" + attachmentLocalId="attachment.localId" + attachmentLocalIds="viewableAttachments.map(attachment => attachment.localId)" + detailsMode="'card'" + imageSize="props.attachmentsImageSize" + isDownloadable="props.areAttachmentsDownloadable" + isEditable="props.areAttachmentsEditable" + showExtension="props.showAttachmentsExtensions" + showFilename="props.showAttachmentsFilenames" + /> + </t> + </div> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js new file mode 100644 index 00000000..30755fd9 --- /dev/null +++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.js @@ -0,0 +1,598 @@ +odoo.define('mail/static/src/components/attachment_viewer/attachment_viewer.js', function (require) { +'use strict'; + +const useRefs = require('mail/static/src/component_hooks/use_refs/use_refs.js'); +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component, QWeb } = owl; +const { useRef } = owl.hooks; + +const MIN_SCALE = 0.5; +const SCROLL_ZOOM_STEP = 0.1; +const ZOOM_STEP = 0.5; + +class AttachmentViewer extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + this.MIN_SCALE = MIN_SCALE; + useShouldUpdateBasedOnProps(); + useStore(props => { + const attachmentViewer = this.env.models['mail.attachment_viewer'].get(props.localId); + return { + attachment: attachmentViewer && attachmentViewer.attachment + ? attachmentViewer.attachment.__state + : undefined, + attachments: attachmentViewer + ? attachmentViewer.attachments.map(attachment => attachment.__state) + : [], + attachmentViewer: attachmentViewer ? attachmentViewer.__state : undefined, + }; + }); + /** + * Used to ensure that the ref is always up to date, which seems to be needed if the element + * has a t-key, which was added to force the rendering of a new element when the src of the image changes. + * This was made to remove the display of the previous image as soon as the src changes. + */ + this._getRefs = useRefs(); + /** + * Determine whether the user is currently dragging the image. + * This is useful to determine whether a click outside of the image + * should close the attachment viewer or not. + */ + this._isDragging = false; + /** + * Reference of the zoomer node. Useful to apply translate + * transformation on image visualisation. + */ + this._zoomerRef = useRef('zoomer'); + /** + * Tracked translate transformations on image visualisation. This is + * not observed with `useStore` because they are used to compute zoomer + * style, and this is changed directly on zoomer for performance + * reasons (overhead of making vdom is too significant for each mouse + * position changes while dragging) + */ + this._translate = { x: 0, y: 0, dx: 0, dy: 0 }; + this._onClickGlobal = this._onClickGlobal.bind(this); + } + + mounted() { + this.el.focus(); + this._handleImageLoad(); + document.addEventListener('click', this._onClickGlobal); + } + + /** + * When a new image is displayed, show a spinner until it is loaded. + */ + patched() { + this._handleImageLoad(); + } + + willUnmount() { + document.removeEventListener('click', this._onClickGlobal); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.attachment_viewer} + */ + get attachmentViewer() { + return this.env.models['mail.attachment_viewer'].get(this.props.localId); + } + + /** + * Compute the style of the image (scale + rotation). + * + * @returns {string} + */ + get imageStyle() { + const attachmentViewer = this.attachmentViewer; + let style = `transform: ` + + `scale3d(${attachmentViewer.scale}, ${attachmentViewer.scale}, 1) ` + + `rotate(${attachmentViewer.angle}deg);`; + + if (attachmentViewer.angle % 180 !== 0) { + style += `` + + `max-height: ${window.innerWidth}px; ` + + `max-width: ${window.innerHeight}px;`; + } else { + style += `` + + `max-height: 100%; ` + + `max-width: 100%;`; + } + return style; + } + + /** + * Mandatory method for dialog components. + * Prevent closing the dialog when clicking on the mask when the user is + * currently dragging the image. + * + * @returns {boolean} + */ + isCloseable() { + return !this._isDragging; + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * Close the dialog with this attachment viewer. + * + * @private + */ + _close() { + this.attachmentViewer.close(); + } + + /** + * Download the attachment. + * + * @private + */ + _download() { + const id = this.attachmentViewer.attachment.id; + this.env.services.navigate(`/web/content/ir.attachment/${id}/datas`, { download: true }); + } + + /** + * Determine whether the current image is rendered for the 1st time, and if + * that's the case, display a spinner until loaded. + * + * @private + */ + _handleImageLoad() { + if (!this.attachmentViewer || !this.attachmentViewer.attachment) { + return; + } + const refs = this._getRefs(); + const image = refs[`image_${this.attachmentViewer.attachment.id}`]; + if ( + this.attachmentViewer.attachment.fileType === 'image' && + (!image || !image.complete) + ) { + this.attachmentViewer.update({ isImageLoading: true }); + } + } + + /** + * Display the previous attachment in the list of attachments. + * + * @private + */ + _next() { + const attachmentViewer = this.attachmentViewer; + const index = attachmentViewer.attachments.findIndex(attachment => + attachment === attachmentViewer.attachment + ); + const nextIndex = (index + 1) % attachmentViewer.attachments.length; + attachmentViewer.update({ + attachment: [['link', attachmentViewer.attachments[nextIndex]]], + }); + } + + /** + * Display the previous attachment in the list of attachments. + * + * @private + */ + _previous() { + const attachmentViewer = this.attachmentViewer; + const index = attachmentViewer.attachments.findIndex(attachment => + attachment === attachmentViewer.attachment + ); + const nextIndex = index === 0 + ? attachmentViewer.attachments.length - 1 + : index - 1; + attachmentViewer.update({ + attachment: [['link', attachmentViewer.attachments[nextIndex]]], + }); + } + + /** + * Prompt the browser print of this attachment. + * + * @private + */ + _print() { + const printWindow = window.open('about:blank', '_new'); + printWindow.document.open(); + printWindow.document.write(` + <html> + <head> + <script> + function onloadImage() { + setTimeout('printImage()', 10); + } + function printImage() { + window.print(); + window.close(); + } + </script> + </head> + <body onload='onloadImage()'> + <img src="${this.attachmentViewer.attachment.defaultSource}" alt=""/> + </body> + </html>`); + printWindow.document.close(); + } + + /** + * Rotate the image by 90 degrees to the right. + * + * @private + */ + _rotate() { + this.attachmentViewer.update({ angle: this.attachmentViewer.angle + 90 }); + } + + /** + * Stop dragging interaction of the user. + * + * @private + */ + _stopDragging() { + this._isDragging = false; + this._translate.x += this._translate.dx; + this._translate.y += this._translate.dy; + this._translate.dx = 0; + this._translate.dy = 0; + this._updateZoomerStyle(); + } + + /** + * Update the style of the zoomer based on translate transformation. Changes + * are directly applied on zoomer, instead of triggering re-render and + * defining them in the template, for performance reasons. + * + * @private + * @returns {string} + */ + _updateZoomerStyle() { + const attachmentViewer = this.attachmentViewer; + const refs = this._getRefs(); + const image = refs[`image_${this.attachmentViewer.attachment.id}`]; + const tx = image.offsetWidth * attachmentViewer.scale > this._zoomerRef.el.offsetWidth + ? this._translate.x + this._translate.dx + : 0; + const ty = image.offsetHeight * attachmentViewer.scale > this._zoomerRef.el.offsetHeight + ? this._translate.y + this._translate.dy + : 0; + if (tx === 0) { + this._translate.x = 0; + } + if (ty === 0) { + this._translate.y = 0; + } + this._zoomerRef.el.style = `transform: ` + + `translate(${tx}px, ${ty}px)`; + } + + /** + * Zoom in the image. + * + * @private + * @param {Object} [param0={}] + * @param {boolean} [param0.scroll=false] + */ + _zoomIn({ scroll = false } = {}) { + this.attachmentViewer.update({ + scale: this.attachmentViewer.scale + (scroll ? SCROLL_ZOOM_STEP : ZOOM_STEP), + }); + this._updateZoomerStyle(); + } + + /** + * Zoom out the image. + * + * @private + * @param {Object} [param0={}] + * @param {boolean} [param0.scroll=false] + */ + _zoomOut({ scroll = false } = {}) { + if (this.attachmentViewer.scale === MIN_SCALE) { + return; + } + const unflooredAdaptedScale = ( + this.attachmentViewer.scale - + (scroll ? SCROLL_ZOOM_STEP : ZOOM_STEP) + ); + this.attachmentViewer.update({ + scale: Math.max(MIN_SCALE, unflooredAdaptedScale), + }); + this._updateZoomerStyle(); + } + + /** + * Reset the zoom scale of the image. + * + * @private + */ + _zoomReset() { + this.attachmentViewer.update({ scale: 1 }); + this._updateZoomerStyle(); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Called when clicking on mask of attachment viewer. + * + * @private + * @param {MouseEvent} ev + */ + _onClick(ev) { + if (this._isDragging) { + return; + } + // TODO: clicking on the background should probably be handled by the dialog? + // task-2092965 + this._close(); + } + + /** + * Called when clicking on cross icon. + * + * @private + * @param {MouseEvent} ev + */ + _onClickClose(ev) { + this._close(); + } + + /** + * Called when clicking on download icon. + * + * @private + * @param {MouseEvent} ev + */ + _onClickDownload(ev) { + ev.stopPropagation(); + this._download(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickGlobal(ev) { + if (!this._isDragging) { + return; + } + ev.stopPropagation(); + this._stopDragging(); + } + + /** + * Called when clicking on the header. Stop propagation of event to prevent + * closing the dialog. + * + * @private + * @param {MouseEvent} ev + */ + _onClickHeader(ev) { + ev.stopPropagation(); + } + + /** + * Called when clicking on image. Stop propagation of event to prevent + * closing the dialog. + * + * @private + * @param {MouseEvent} ev + */ + _onClickImage(ev) { + if (this._isDragging) { + return; + } + ev.stopPropagation(); + } + + /** + * Called when clicking on next icon. + * + * @private + * @param {MouseEvent} ev + */ + _onClickNext(ev) { + ev.stopPropagation(); + this._next(); + } + + /** + * Called when clicking on previous icon. + * + * @private + * @param {MouseEvent} ev + */ + _onClickPrevious(ev) { + ev.stopPropagation(); + this._previous(); + } + + /** + * Called when clicking on print icon. + * + * @private + * @param {MouseEvent} ev + */ + _onClickPrint(ev) { + ev.stopPropagation(); + this._print(); + } + + /** + * Called when clicking on rotate icon. + * + * @private + * @param {MouseEvent} ev + */ + _onClickRotate(ev) { + ev.stopPropagation(); + this._rotate(); + } + + /** + * Called when clicking on embed video player. Stop propagation to prevent + * closing the dialog. + * + * @private + * @param {MouseEvent} ev + */ + _onClickVideo(ev) { + ev.stopPropagation(); + } + + /** + * Called when clicking on zoom in icon. + * + * @private + * @param {MouseEvent} ev + */ + _onClickZoomIn(ev) { + ev.stopPropagation(); + this._zoomIn(); + } + + /** + * Called when clicking on zoom out icon. + * + * @private + * @param {MouseEvent} ev + */ + _onClickZoomOut(ev) { + ev.stopPropagation(); + this._zoomOut(); + } + + /** + * Called when clicking on reset zoom icon. + * + * @private + * @param {MouseEvent} ev + */ + _onClickZoomReset(ev) { + ev.stopPropagation(); + this._zoomReset(); + } + + /** + * @private + * @param {KeyboardEvent} ev + */ + _onKeydown(ev) { + switch (ev.key) { + case 'ArrowRight': + this._next(); + break; + case 'ArrowLeft': + this._previous(); + break; + case 'Escape': + this._close(); + break; + case 'q': + this._close(); + break; + case 'r': + this._rotate(); + break; + case '+': + this._zoomIn(); + break; + case '-': + this._zoomOut(); + break; + case '0': + this._zoomReset(); + break; + default: + return; + } + ev.stopPropagation(); + } + + /** + * Called when new image has been loaded + * + * @private + * @param {Event} ev + */ + _onLoadImage(ev) { + ev.stopPropagation(); + this.attachmentViewer.update({ isImageLoading: false }); + } + + /** + * @private + * @param {DragEvent} ev + */ + _onMousedownImage(ev) { + if (this._isDragging) { + return; + } + if (ev.button !== 0) { + return; + } + ev.stopPropagation(); + this._isDragging = true; + this._dragstartX = ev.clientX; + this._dragstartY = ev.clientY; + } + + /** + * @private + * @param {DragEvent} + */ + _onMousemoveView(ev) { + if (!this._isDragging) { + return; + } + this._translate.dx = ev.clientX - this._dragstartX; + this._translate.dy = ev.clientY - this._dragstartY; + this._updateZoomerStyle(); + } + + /** + * @private + * @param {Event} ev + */ + _onWheelImage(ev) { + ev.stopPropagation(); + if (!this.el) { + return; + } + if (ev.deltaY > 0) { + this._zoomOut({ scroll: true }); + } else { + this._zoomIn({ scroll: true }); + } + } + +} + +Object.assign(AttachmentViewer, { + props: { + localId: String, + }, + template: 'mail.AttachmentViewer', +}); + +QWeb.registerComponent('AttachmentViewer', AttachmentViewer); + +return AttachmentViewer; + +}); diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss new file mode 100644 index 00000000..54f00c1a --- /dev/null +++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.scss @@ -0,0 +1,198 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_AttachmentViewer { + display: flex; + width: 100%; + height: 100%; + flex-flow: column; + align-items: center; + z-index: -1; +} + +.o_AttachmentViewer_buttonNavigation { + position: absolute; + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + top: 50%; + transform: translateY(-50%); +} + +.o_AttachmentViewer_buttonNavigationNext { + right: 15px; + + > .fa { + margin: 1px 0 0 1px; // not correctly centered for some reasons + } +} + +.o_AttachmentViewer_buttonNavigationPrevious { + left: 15px; + + > .fa { + margin: 1px 1px 0 0; // not correctly centered for some reasons + } +} + +.o_AttachmentViewer_header { + display: flex; + height: $o-navbar-height; + align-items: center; + padding: 0 15px; + width: 100%; +} + +.o_AttachmentViewer_headerItem { + margin: 0 5px; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } +} + +.o_AttachmentViewer_loading { + position: absolute; +} + +.o_AttachmentViewer_main { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: -1; + padding: 45px 0; + + &.o_with_img { + overflow: hidden; + } +} + +.o_AttachmentViewer_toolbar { + position: absolute; + bottom: 45px; + transform: translateY(100%); + display: flex; +} + +.o_AttachmentViewer_toolbarButton { + padding: 8px; +} + +.o_AttachmentViewer_viewImage { + max-height: 100%; + max-width: 100%; +} + +.o_AttachmentViewer_viewIframe { + width: 90%; + height: 100%; +} + +.o_AttachmentViewer_viewVideo { + width: 75%; + height: 75%; +} + +.o_AttachmentViewer_zoomer { + position: absolute; + padding: 45px 0; + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_AttachmentViewer { + outline: none; +} + +.o_AttachmentViewer_buttonNavigation { + color: gray('400'); + background-color: lighten(black, 15%); + border-radius: 100%; + cursor: pointer; + + &:hover { + color: lighten(gray('400'), 15%); + background-color: black; + } +} + +.o_AttachmentViewer_header { + background-color: rgba(0, 0, 0, 0.7); + color: gray('400'); +} + +.o_AttachmentViewer_headerItemButton { + cursor: pointer; + + &:hover { + background-color: rgba(0, 0, 0, 0.8); + color: lighten(gray('400'), 15%); + } +} + +.o_AttachmentViewer_headerItemButtonClose { + cursor: pointer; + font-size: 1.3rem; +} + +.o_AttachmentViewer_toolbar { + cursor: pointer; +} + +.o_AttachmentViewer_toolbarButton { + background-color: lighten(black, 15%); + + &.o_disabled { + cursor: not-allowed; + filter: brightness(1.3); + } + + &:not(.o_disabled) { + color: gray('400'); + cursor: pointer; + + &:hover { + background-color: black; + color: lighten(gray('400'), 15%); + } + } +} + +.o_AttachmentViewer_view { + background-color: black; + box-shadow: 0 0 40px black; + outline: none; + border: none; + + &.o_text { + background-color: white; + } +} + +// ------------------------------------------------------------------ +// Animation +// ------------------------------------------------------------------ + +.o_AttachmentViewer_viewImage { + transition: transform 0.3s ease; +} + diff --git a/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml new file mode 100644 index 00000000..8791bd09 --- /dev/null +++ b/addons/mail/static/src/components/attachment_viewer/attachment_viewer.xml @@ -0,0 +1,93 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.AttachmentViewer" owl="1"> + <div class="o_AttachmentViewer" t-on-click="_onClick" t-on-keydown="_onKeydown" tabindex="0"> + <div class="o_AttachmentViewer_header" t-on-click="_onClickHeader"> + <t t-if="attachmentViewer.attachment.fileType"> + <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_icon"> + <t t-if="attachmentViewer.attachment.fileType === 'image'"> + <i class="fa fa-picture-o" role="img" title="Image"/> + </t> + <t t-if="attachmentViewer.attachment.fileType === 'application/pdf'"> + <i class="fa fa-file-text" role="img" title="PDF file"/> + </t> + <t t-if="attachmentViewer.attachment.isTextFile"> + <i class="fa fa-file-text" role="img" title="Text file"/> + </t> + <t t-if="attachmentViewer.attachment.fileType === 'video'"> + <i class="fa fa-video-camera" role="img" title="Video"/> + </t> + </div> + </t> + <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_name"> + <t t-esc="attachmentViewer.attachment.displayName"/> + </div> + <div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton" t-on-click="_onClickDownload" role="button" title="Download"> + <i class="fa fa-download fa-fw" role="img"/> + </div> + <div class="o-autogrow"/> + <div class="o_AttachmentViewer_headerItem o_AttachmentViewer_headerItemButton o_AttachmentViewer_headerItemButtonClose" t-on-click="_onClickClose" role="button" title="Close (Esc)" aria-label="Close"> + <i class="fa fa-fw fa-times" role="img"/> + </div> + </div> + <div class="o_AttachmentViewer_main" t-att-class="{ o_with_img: attachmentViewer.attachment.fileType === 'image' }" t-on-mousemove="_onMousemoveView"> + <t t-if="attachmentViewer.attachment.fileType === 'image'"> + <div class="o_AttachmentViewer_zoomer" t-ref="zoomer"> + <t t-if="attachmentViewer.isImageLoading"> + <div class="o_AttachmentViewer_loading"> + <i class="fa fa-3x fa-circle-o-notch fa-fw fa-spin" role="img" title="Loading"/> + </div> + </t> + <img class="o_AttachmentViewer_view o_AttachmentViewer_viewImage" t-on-click="_onClickImage" t-on-mousedown="_onMousedownImage" t-on-wheel="_onWheelImage" t-on-load="_onLoadImage" t-att-src="attachmentViewer.attachment.defaultSource" t-att-style="imageStyle" draggable="false" alt="Viewer" t-key="'image_' + attachmentViewer.attachment.id" t-ref="image_{{ attachmentViewer.attachment.id }}"/> + </div> + </t> + <t t-if="attachmentViewer.attachment.fileType === 'application/pdf'"> + <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_viewPdf" t-att-src="attachmentViewer.attachment.defaultSource"/> + </t> + <t t-if="attachmentViewer.attachment.isTextFile"> + <iframe class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_text" t-att-src="attachmentViewer.attachment.defaultSource"/> + </t> + <t t-if="attachmentViewer.attachment.fileType === 'youtu'"> + <iframe allow="autoplay; encrypted-media" class="o_AttachmentViewer_view o_AttachmentViewer_viewIframe o_AttachmentViewer_youtube" t-att-src="attachmentViewer.attachment.defaultSource" height="315" width="560"/> + </t> + <t t-if="attachmentViewer.attachment.fileType === 'video'"> + <video class="o_AttachmentViewer_view o_AttachmentViewer_viewVideo" t-on-click="_onClickVideo" controls="controls"> + <source t-att-data-type="attachmentViewer.attachment.mimetype" t-att-src="attachmentViewer.attachment.defaultSource"/> + </video> + </t> + </div> + <t t-if="attachmentViewer.attachment.fileType === 'image'"> + <div class="o_AttachmentViewer_toolbar" role="toolbar"> + <div class="o_AttachmentViewer_toolbarButton" t-on-click="_onClickZoomIn" title="Zoom In (+)" role="button"> + <i class="fa fa-fw fa-plus" role="img"/> + </div> + <div class="o_AttachmentViewer_toolbarButton" t-att-class="{ o_disabled: attachmentViewer.scale === 1 }" t-on-click="_onClickZoomReset" role="button" title="Reset Zoom (0)"> + <i class="fa fa-fw fa-search" role="img"/> + </div> + <div class="o_AttachmentViewer_toolbarButton" t-att-class="{ o_disabled: attachmentViewer.scale === MIN_SCALE }" t-on-click="_onClickZoomOut" title="Zoom Out (-)" role="button"> + <i class="fa fa-fw fa-minus" role="img"/> + </div> + <div class="o_AttachmentViewer_toolbarButton" t-on-click="_onClickRotate" title="Rotate (r)" role="button"> + <i class="fa fa-fw fa-repeat" role="img"/> + </div> + <div class="o_AttachmentViewer_toolbarButton" t-on-click="_onClickPrint" title="Print" role="button"> + <i class="fa fa-fw fa-print" role="img"/> + </div> + <div class="o_AttachmentViewer_buttonDownload o_AttachmentViewer_toolbarButton" t-on-click="_onClickDownload" title="Download" role="button"> + <i class="fa fa-download fa-fw" role="img"/> + </div> + </div> + </t> + <t t-if="attachmentViewer.attachments.length > 1"> + <div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationPrevious" t-on-click="_onClickPrevious" title="Previous (Left-Arrow)" role="button"> + <span class="fa fa-chevron-left" role="img"/> + </div> + <div class="o_AttachmentViewer_buttonNavigation o_AttachmentViewer_buttonNavigationNext" t-on-click="_onClickNext" title="Next (Right-Arrow)" role="button"> + <span class="fa fa-chevron-right" role="img"/> + </div> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js new file mode 100644 index 00000000..c6e268e5 --- /dev/null +++ b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.js @@ -0,0 +1,174 @@ +odoo.define('mail/static/src/components/autocomplete_input/autocomplete_input.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); + +const { Component } = owl; + +class AutocompleteInput extends Component { + + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + } + + mounted() { + if (this.props.isFocusOnMount) { + this.el.focus(); + } + + let args = { + autoFocus: true, + select: (ev, ui) => this._onAutocompleteSelect(ev, ui), + source: (req, res) => this._onAutocompleteSource(req, res), + focus: ev => this._onAutocompleteFocus(ev), + html: this.props.isHtml || false, + }; + + if (this.props.customClass) { + args.classes = { 'ui-autocomplete': this.props.customClass }; + } + + const autoCompleteElem = $(this.el).autocomplete(args); + // Resize the autocomplete dropdown options to handle the long strings + // By setting the width of dropdown based on the width of the input element. + autoCompleteElem.data("ui-autocomplete")._resizeMenu = function () { + const ul = this.menu.element; + ul.outerWidth(this.element.outerWidth()); + }; + } + + willUnmount() { + $(this.el).autocomplete('destroy'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * Returns whether the given node is self or a children of self, including + * the suggestion menu. + * + * @param {Node} node + * @returns {boolean} + */ + contains(node) { + if (this.el.contains(node)) { + return true; + } + if (!this.props.customClass) { + return false; + } + const element = document.querySelector(`.${this.props.customClass}`); + if (!element) { + return false; + } + return element.contains(node); + } + + focus() { + if (!this.el) { + return; + } + this.el.focus(); + } + + focusout() { + if (!this.el) { + return; + } + this.el.blur(); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {FocusEvent} ev + */ + _onAutocompleteFocus(ev) { + if (this.props.focus) { + this.props.focus(ev); + } else { + ev.preventDefault(); + } + } + + /** + * @private + * @param {Event} ev + * @param {Object} ui + */ + _onAutocompleteSelect(ev, ui) { + if (this.props.select) { + this.props.select(ev, ui); + } + } + + /** + * @private + * @param {Object} req + * @param {function} res + */ + _onAutocompleteSource(req, res) { + if (this.props.source) { + this.props.source(req, res); + } + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onBlur(ev) { + this.trigger('o-hide'); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onKeydown(ev) { + if (ev.key === 'Escape') { + this.trigger('o-hide'); + } + } + +} + +Object.assign(AutocompleteInput, { + defaultProps: { + isFocusOnMount: false, + isHtml: false, + placeholder: '', + }, + props: { + customClass: { + type: String, + optional: true, + }, + focus: { + type: Function, + optional: true, + }, + isFocusOnMount: Boolean, + isHtml: Boolean, + placeholder: String, + select: { + type: Function, + optional: true, + }, + source: { + type: Function, + optional: true, + }, + }, + template: 'mail.AutocompleteInput', +}); + +return AutocompleteInput; + +}); diff --git a/addons/mail/static/src/components/autocomplete_input/autocomplete_input.xml b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.xml new file mode 100644 index 00000000..ffa1bc89 --- /dev/null +++ b/addons/mail/static/src/components/autocomplete_input/autocomplete_input.xml @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.AutocompleteInput" owl="1"> + <input class="o_AutocompleteInput" t-on-blur="_onBlur" t-on-keydown="_onKeydown" t-att-placeholder="props.placeholder"/> + </t> + +</templates> diff --git a/addons/mail/static/src/components/chat_window/chat_window.js b/addons/mail/static/src/components/chat_window/chat_window.js new file mode 100644 index 00000000..f9271523 --- /dev/null +++ b/addons/mail/static/src/components/chat_window/chat_window.js @@ -0,0 +1,363 @@ +odoo.define('mail/static/src/components/chat_window/chat_window.js', function (require) { +'use strict'; + +const components = { + AutocompleteInput: require('mail/static/src/components/autocomplete_input/autocomplete_input.js'), + ChatWindowHeader: require('mail/static/src/components/chat_window_header/chat_window_header.js'), + ThreadView: require('mail/static/src/components/thread_view/thread_view.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js'); +const { isEventHandled } = require('mail/static/src/utils/utils.js'); + +const patchMixin = require('web.patchMixin'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class ChatWindow extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const chatWindow = this.env.models['mail.chat_window'].get(props.chatWindowLocalId); + const thread = chatWindow ? chatWindow.thread : undefined; + return { + chatWindow, + chatWindowHasNewMessageForm: chatWindow && chatWindow.hasNewMessageForm, + chatWindowIsDoFocus: chatWindow && chatWindow.isDoFocus, + chatWindowIsFocused: chatWindow && chatWindow.isFocused, + chatWindowIsFolded: chatWindow && chatWindow.isFolded, + chatWindowThreadView: chatWindow && chatWindow.threadView, + chatWindowVisibleIndex: chatWindow && chatWindow.visibleIndex, + chatWindowVisibleOffset: chatWindow && chatWindow.visibleOffset, + isDeviceMobile: this.env.messaging.device.isMobile, + localeTextDirection: this.env.messaging.locale.textDirection, + thread, + threadMassMailing: thread && thread.mass_mailing, + threadModel: thread && thread.model, + }; + }); + useUpdate({ func: () => this._update() }); + /** + * Reference of the header of the chat window. + * Useful to prevent click on header from wrongly focusing the window. + */ + this._chatWindowHeaderRef = useRef('header'); + /** + * Reference of the autocomplete input (new_message chat window only). + * Useful when focusing this chat window, which consists of focusing + * this input. + */ + this._inputRef = useRef('input'); + /** + * Reference of thread in the chat window (chat window with thread + * only). Useful when focusing this chat window, which consists of + * focusing this thread. Will likely focus the composer of thread, if + * it has one! + */ + this._threadRef = useRef('thread'); + this._onWillHideHomeMenu = this._onWillHideHomeMenu.bind(this); + this._onWillShowHomeMenu = this._onWillShowHomeMenu.bind(this); + // the following are passed as props to children + this._onAutocompleteSelect = this._onAutocompleteSelect.bind(this); + this._onAutocompleteSource = this._onAutocompleteSource.bind(this); + this._constructor(...args); + } + + /** + * Allows patching constructor. + */ + _constructor() {} + + mounted() { + this.env.messagingBus.on('will_hide_home_menu', this, this._onWillHideHomeMenu); + this.env.messagingBus.on('will_show_home_menu', this, this._onWillShowHomeMenu); + } + + willUnmount() { + this.env.messagingBus.off('will_hide_home_menu', this, this._onWillHideHomeMenu); + this.env.messagingBus.off('will_show_home_menu', this, this._onWillShowHomeMenu); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.chat_window} + */ + get chatWindow() { + return this.env.models['mail.chat_window'].get(this.props.chatWindowLocalId); + } + + /** + * Get the content of placeholder for the autocomplete input of + * 'new_message' chat window. + * + * @returns {string} + */ + get newMessageFormInputPlaceholder() { + return this.env._t("Search user..."); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * Apply visual position of the chat window. + * + * @private + */ + _applyVisibleOffset() { + const textDirection = this.env.messaging.locale.textDirection; + const offsetFrom = textDirection === 'rtl' ? 'left' : 'right'; + const oppositeFrom = offsetFrom === 'right' ? 'left' : 'right'; + this.el.style[offsetFrom] = this.chatWindow.visibleOffset + 'px'; + this.el.style[oppositeFrom] = 'auto'; + } + + /** + * Focus this chat window. + * + * @private + */ + _focus() { + this.chatWindow.update({ + isDoFocus: false, + isFocused: true, + }); + if (this._inputRef.comp) { + this._inputRef.comp.focus(); + } + if (this._threadRef.comp) { + this._threadRef.comp.focus(); + } + } + + /** + * Save the scroll positions of the chat window in the store. + * This is useful in order to remount chat windows and keep previous + * scroll positions. This is necessary because when toggling on/off + * home menu, the chat windows have to be remade from scratch. + * + * @private + */ + _saveThreadScrollTop() { + if ( + !this._threadRef.comp || + !this.chatWindow.threadViewer || + !this.chatWindow.threadViewer.threadView + ) { + return; + } + if (this.chatWindow.threadViewer.threadView.componentHintList.length > 0) { + // the current scroll position is likely incorrect due to the + // presence of hints to adjust it + return; + } + this.chatWindow.threadViewer.saveThreadCacheScrollHeightAsInitial( + this._threadRef.comp.getScrollHeight() + ); + this.chatWindow.threadViewer.saveThreadCacheScrollPositionsAsInitial( + this._threadRef.comp.getScrollTop() + ); + } + + /** + * @private + */ + _update() { + if (!this.chatWindow) { + // chat window is being deleted + return; + } + if (this.chatWindow.isDoFocus) { + this._focus(); + } + this._applyVisibleOffset(); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Called when selecting an item in the autocomplete input of the + * 'new_message' chat window. + * + * @private + * @param {Event} ev + * @param {Object} ui + * @param {Object} ui.item + * @param {integer} ui.item.id + */ + async _onAutocompleteSelect(ev, ui) { + const chat = await this.env.messaging.getChat({ partnerId: ui.item.id }); + if (!chat) { + return; + } + this.env.messaging.chatWindowManager.openThread(chat, { + makeActive: true, + replaceNewMessage: true, + }); + } + + /** + * Called when typing in the autocomplete input of the 'new_message' chat + * window. + * + * @private + * @param {Object} req + * @param {string} req.term + * @param {function} res + */ + _onAutocompleteSource(req, res) { + this.env.models['mail.partner'].imSearch({ + callback: (partners) => { + const suggestions = partners.map(partner => { + return { + id: partner.id, + value: partner.nameOrDisplayName, + label: partner.nameOrDisplayName, + }; + }); + res(_.sortBy(suggestions, 'label')); + }, + keyword: _.escape(req.term), + limit: 10, + }); + } + + /** + * Called when clicking on header of chat window. Usually folds the chat + * window. + * + * @private + * @param {CustomEvent} ev + */ + _onClickedHeader(ev) { + ev.stopPropagation(); + if (this.env.messaging.device.isMobile) { + return; + } + if (this.chatWindow.isFolded) { + this.chatWindow.unfold(); + this.chatWindow.focus(); + } else { + this._saveThreadScrollTop(); + this.chatWindow.fold(); + } + } + + /** + * Called when an element in the thread becomes focused. + * + * @private + * @param {FocusEvent} ev + */ + _onFocusinThread(ev) { + ev.stopPropagation(); + if (!this.chatWindow) { + // prevent crash on destroy + return; + } + this.chatWindow.update({ isFocused: true }); + } + + /** + * Focus out the chat window. + * + * @private + */ + _onFocusout() { + if (!this.chatWindow) { + // ignore focus out due to record being deleted + return; + } + this.chatWindow.update({ isFocused: false }); + } + + /** + * @private + * @param {KeyboardEvent} ev + */ + _onKeydown(ev) { + if (!this.chatWindow) { + // prevent crash during delete + return; + } + switch (ev.key) { + case 'Tab': + ev.preventDefault(); + if (ev.shiftKey) { + this.chatWindow.focusPreviousVisibleUnfoldedChatWindow(); + } else { + this.chatWindow.focusNextVisibleUnfoldedChatWindow(); + } + break; + case 'Escape': + if (isEventHandled(ev, 'ComposerTextInput.closeSuggestions')) { + break; + } + if (isEventHandled(ev, 'Composer.closeEmojisPopover')) { + break; + } + ev.preventDefault(); + this.chatWindow.focusNextVisibleUnfoldedChatWindow(); + this.chatWindow.close(); + break; + } + } + + /** + * Save the scroll positions of the chat window in the store. + * This is useful in order to remount chat windows and keep previous + * scroll positions. This is necessary because when toggling on/off + * home menu, the chat windows have to be remade from scratch. + * + * @private + */ + async _onWillHideHomeMenu() { + this._saveThreadScrollTop(); + } + + /** + * Save the scroll positions of the chat window in the store. + * This is useful in order to remount chat windows and keep previous + * scroll positions. This is necessary because when toggling on/off + * home menu, the chat windows have to be remade from scratch. + * + * @private + */ + async _onWillShowHomeMenu() { + this._saveThreadScrollTop(); + } + +} + +Object.assign(ChatWindow, { + components, + defaultProps: { + hasCloseAsBackButton: false, + isExpandable: false, + isFullscreen: false, + }, + props: { + chatWindowLocalId: String, + hasCloseAsBackButton: Boolean, + isExpandable: Boolean, + isFullscreen: Boolean, + }, + template: 'mail.ChatWindow', +}); + +return patchMixin(ChatWindow); + +}); diff --git a/addons/mail/static/src/components/chat_window/chat_window.scss b/addons/mail/static/src/components/chat_window/chat_window.scss new file mode 100644 index 00000000..7b61cd3b --- /dev/null +++ b/addons/mail/static/src/components/chat_window/chat_window.scss @@ -0,0 +1,93 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ChatWindow { + position: absolute; + bottom: 0; + display: flex; + flex-flow: column; + + &:not(.o-mobile) { + max-width: 100%; + max-height: 100%; + width: 325px; + + &.o-folded { + height: $o-mail-chat-window-header-height; + } + + &:not(.o-folded) { + height: 400px; + } + } + + &.o-mobile { + position: fixed; + } + + &.o-fullscreen { + height: 100%; + width: 100%; + } +} + +.o_ChatWindow_header { + flex: 0 0 auto; +} + +.o_ChatWindow_newMessageForm { + padding: 3px; + margin-top: 3px; + display: flex; + align-items: center; +} + +.o_ChatWindow_newMessageFormInput { + flex: 1 1 auto; +} + +.o_ChatWindow_newMessageFormLabel { + margin-right: 5px; + flex: 0 0 auto; +} + +.o_ChatWindow_thread { + flex: 1 1 auto; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_ChatWindow { + background-color: $o-mail-thread-window-bg; + border-radius: 6px 6px 0 0; + box-shadow: -5px -5px 10px rgba(black, 0.09); + outline: none; + + &:not(.o-mobile) { + + &.o-focused { + box-shadow: -5px -5px 10px rgba(black, 0.18); + } + } + + + .o_Composer { + border: 0; + } +} + +.o_ChatWindow_header { + border-radius: 3px 3px 0 0; +} + +.o_ChatWindow_newMessageFormInput { + outline: none; + border: 1px solid gray('300'); // cancel firefox border on input focus +} + +.o_ChatWindow_thread .o_ThreadView_messageList { + font-size: 1rem; +} diff --git a/addons/mail/static/src/components/chat_window/chat_window.xml b/addons/mail/static/src/components/chat_window/chat_window.xml new file mode 100644 index 00000000..ad4a1096 --- /dev/null +++ b/addons/mail/static/src/components/chat_window/chat_window.xml @@ -0,0 +1,54 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ChatWindow" owl="1"> + <div class="o_ChatWindow" tabindex="0" t-att-data-visible-index="chatWindow ? chatWindow.visibleIndex : undefined" + t-att-class="{ + 'o-focused': chatWindow and chatWindow.isFocused, + 'o-folded': chatWindow and chatWindow.isFolded, + 'o-fullscreen': props.isFullscreen, + 'o-mobile': env.messaging.device.isMobile, + 'o-new-message': chatWindow and !chatWindow.thread, + }" t-on-keydown="_onKeydown" t-on-focusout="_onFocusout" t-att-data-chat-window-local-id="chatWindow ? chatWindow.localId : undefined" t-att-data-thread-local-id="chatWindow ? (chatWindow.thread ? chatWindow.thread.localId : '') : undefined" + > + <t t-if="chatWindow"> + <ChatWindowHeader + class="o_ChatWindow_header" + chatWindowLocalId="chatWindow.localId" + hasCloseAsBackButton="props.hasCloseAsBackButton" + isExpandable="props.isExpandable" + t-on-o-clicked="_onClickedHeader" + t-ref="header" + /> + <t t-if="chatWindow.threadView"> + <ThreadView + class="o_ChatWindow_thread" + composerAttachmentsDetailsMode="'card'" + hasComposer="chatWindow.thread.model !== 'mail.box' and (!chatWindow.thread.mass_mailing or env.messaging.device.isMobile)" + hasComposerCurrentPartnerAvatar="false" + hasComposerSendButton="env.messaging.device.isMobile" + hasSquashCloseMessages="chatWindow.thread.model !== 'mail.box'" + threadViewLocalId="chatWindow.threadView.localId" + t-on-focusin="_onFocusinThread" + t-ref="thread" + /> + </t> + <t t-if="chatWindow.hasNewMessageForm"> + <div class="o_ChatWindow_newMessageForm"> + <span class="o_ChatWindow_newMessageFormLabel"> + To: + </span> + <AutocompleteInput + class="o_ChatWindow_newMessageFormInput" + placeholder="newMessageFormInputPlaceholder" + select="_onAutocompleteSelect" + source="_onAutocompleteSource" + t-ref="input" + /> + </div> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.js b/addons/mail/static/src/components/chat_window_header/chat_window_header.js new file mode 100644 index 00000000..ea560ca2 --- /dev/null +++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.js @@ -0,0 +1,118 @@ +odoo.define('mail/static/src/components/chat_window_header/chat_window_header.js', function (require) { +'use strict'; + +const components = { + ThreadIcon: require('mail/static/src/components/thread_icon/thread_icon.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class ChatWindowHeader extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const chatWindow = this.env.models['mail.chat_window'].get(props.chatWindowLocalId); + const thread = chatWindow && chatWindow.thread; + return { + chatWindow, + chatWindowHasShiftLeft: chatWindow && chatWindow.hasShiftLeft, + chatWindowHasShiftRight: chatWindow && chatWindow.hasShiftRight, + chatWindowName: chatWindow && chatWindow.name, + isDeviceMobile: this.env.messaging.device.isMobile, + thread, + threadLocalMessageUnreadCounter: thread && thread.localMessageUnreadCounter, + threadMassMailing: thread && thread.mass_mailing, + threadModel: thread && thread.model, + }; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.chat_window} + */ + get chatWindow() { + return this.env.models['mail.chat_window'].get(this.props.chatWindowLocalId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClick(ev) { + const chatWindow = this.chatWindow; + this.trigger('o-clicked', { chatWindow }); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickClose(ev) { + ev.stopPropagation(); + if (!this.chatWindow) { + return; + } + this.chatWindow.close(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickExpand(ev) { + ev.stopPropagation(); + this.chatWindow.expand(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickShiftLeft(ev) { + ev.stopPropagation(); + this.chatWindow.shiftLeft(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickShiftRight(ev) { + ev.stopPropagation(); + this.chatWindow.shiftRight(); + } + +} + +Object.assign(ChatWindowHeader, { + components, + defaultProps: { + hasCloseAsBackButton: false, + isExpandable: false, + }, + props: { + chatWindowLocalId: String, + hasCloseAsBackButton: Boolean, + isExpandable: Boolean, + }, + template: 'mail.ChatWindowHeader', +}); + +return ChatWindowHeader; + +}); diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.scss b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss new file mode 100644 index 00000000..c5c23634 --- /dev/null +++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.scss @@ -0,0 +1,95 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ChatWindowHeader { + display: flex; + align-items: center; + height: $o-mail-chat-window-header-height; + + &.o-mobile { + height: $o-mail-chat-window-header-height-mobile; + } +} + +.o_ChatWindowHeader_command { + padding: 0 8px; + display: flex; + height: 100%; + align-items: center; + + &:hover { + background-color: rgba(0, 0, 0, 0.1); + } +} + +.o_ChatWindowHeader_commandBack { + margin-right: 5px; +} + +.o_ChatWindowHeader_item { + margin: 0 3px; + + &.o_ChatWindowHeader_rightArea { + margin-right: 0; + } + + &:first-child { + margin-left: 10px; + + &.o_ChatWindowHeader_command { + margin-left: 0px; // no margin for commands + } + } + + &.o_ChatWindowHeader_rightArea:last-child .o_ChatWindowHeader_command { + margin-right: 0px; // no margin for commands + } +} + +.o_ChatWindowHeader_name { + max-height: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.o_ChatWindowHeader_rightArea { + display: flex; + height: 100%; + align-items: center; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_ChatWindowHeader { + background-color: $o-brand-odoo; + color: white; + cursor: pointer; + + &:not(.o-mobile) { + + &:hover .o_ChatWindowHeader_command { + opacity: 0.7; + + &:hover { + opacity: 1; + } + } + + &:not(:hover) .o_ChatWindowHeader_command { + opacity: 0.5; + } + } + +} + +.o_ChatWindowHeader_command.o-mobile { + font-size: 1.3rem; +} + +.o_ChatWindowHeader_name { + user-select: none; +} diff --git a/addons/mail/static/src/components/chat_window_header/chat_window_header.xml b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml new file mode 100644 index 00000000..b922da15 --- /dev/null +++ b/addons/mail/static/src/components/chat_window_header/chat_window_header.xml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ChatWindowHeader" owl="1"> + <div class="o_ChatWindowHeader" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClick"> + <t t-if="chatWindow"> + <t t-if="props.hasCloseAsBackButton"> + <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandBack o_ChatWindowHeader_commandClose" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickClose" title="Close conversation"> + <i class="fa fa-arrow-left"/> + </div> + </t> + <t t-if="chatWindow.thread and chatWindow.thread.model === 'mail.channel'"> + <ThreadIcon + class="o_ChatWindowHeader_icon o_ChatWindowHeader_item" + threadLocalId="chatWindow.thread.localId" + /> + </t> + <div class="o_ChatWindowHeader_item o_ChatWindowHeader_name" t-att-title="chatWindow.name"> + <t t-esc="chatWindow.name"/> + </div> + <t t-if="chatWindow.thread and chatWindow.thread.mass_mailing"> + <i class="fa fa-envelope-o" title="Messages are sent by email" role="img"/> + </t> + <t t-if="chatWindow.thread and chatWindow.thread.localMessageUnreadCounter > 0"> + <div class="o_ChatWindowHeader_counter o_ChatWindowHeader_item"> + (<t t-esc="chatWindow.thread.localMessageUnreadCounter"/>) + </div> + </t> + <div class="o-autogrow"/> + <div class="o_ChatWindowHeader_item o_ChatWindowHeader_rightArea"> + <t t-if="chatWindow.hasShiftLeft"> + <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftLeft" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickShiftLeft" title="Shift left"> + <i class="fa fa-angle-left"/> + </div> + </t> + <t t-if="chatWindow.hasShiftRight"> + <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandShiftRight" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickShiftRight" title="Shift right"> + <i class="fa fa-angle-right"/> + </div> + </t> + <t t-if="props.isExpandable"> + <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandExpand" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickExpand" title="Open in Discuss"> + <i class="fa fa-expand"/> + </div> + </t> + <t t-if="!props.hasCloseAsBackButton"> + <div class="o_ChatWindowHeader_command o_ChatWindowHeader_commandClose" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" t-on-click="_onClickClose" title="Close chat window"> + <i class="fa fa-close"/> + </div> + </t> + </div> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js new file mode 100644 index 00000000..926ca083 --- /dev/null +++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js @@ -0,0 +1,141 @@ +odoo.define('mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js', function (require) { +'use strict'; + +const components = { + ChatWindowHeader: require('mail/static/src/components/chat_window_header/chat_window_header.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class ChatWindowHiddenMenu extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useStore(props => { + const chatWindowManager = this.env.messaging.chatWindowManager; + const device = this.env.messaging.device; + const locale = this.env.messaging.locale; + return { + chatWindowManager: chatWindowManager ? chatWindowManager.__state : undefined, + device: device ? device.__state : undefined, + localeTextDirection: locale ? locale.textDirection : undefined, + }; + }); + this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this); + /** + * Reference of the dropup list. Useful to auto-set max height based on + * browser screen height. + */ + this._listRef = useRef('list'); + /** + * The intent of the toggle button depends on the last rendered state. + */ + this._wasMenuOpen; + } + + mounted() { + this._apply(); + document.addEventListener('click', this._onClickCaptureGlobal, true); + } + + patched() { + this._apply(); + } + + willUnmount() { + document.removeEventListener('click', this._onClickCaptureGlobal, true); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _apply() { + this._applyListHeight(); + this._applyOffset(); + this._wasMenuOpen = this.env.messaging.chatWindowManager.isHiddenMenuOpen; + } + + /** + * @private + */ + _applyListHeight() { + const device = this.env.messaging.device; + const height = device.globalWindowInnerHeight / 2; + this._listRef.el.style['max-height'] = `${height}px`; + } + + /** + * @private + */ + _applyOffset() { + const textDirection = this.env.messaging.locale.textDirection; + const offsetFrom = textDirection === 'rtl' ? 'left' : 'right'; + const oppositeFrom = offsetFrom === 'right' ? 'left' : 'right'; + const offset = this.env.messaging.chatWindowManager.visual.hidden.offset; + this.el.style[offsetFrom] = `${offset}px`; + this.el.style[oppositeFrom] = 'auto'; + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Closes the menu when clicking outside. + * Must be done as capture to avoid stop propagation. + * + * @private + * @param {MouseEvent} ev + */ + _onClickCaptureGlobal(ev) { + if (this.el.contains(ev.target)) { + return; + } + this.env.messaging.chatWindowManager.closeHiddenMenu(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickToggle(ev) { + if (this._wasMenuOpen) { + this.env.messaging.chatWindowManager.closeHiddenMenu(); + } else { + this.env.messaging.chatWindowManager.openHiddenMenu(); + } + } + + /** + * @private + * @param {CustomEvent} ev + * @param {Object} ev.detail + * @param {mail.chat_window} ev.detail.chatWindow + */ + _onClickedChatWindow(ev) { + const chatWindow = ev.detail.chatWindow; + chatWindow.makeActive(); + this.env.messaging.chatWindowManager.closeHiddenMenu(); + } + +} + +Object.assign(ChatWindowHiddenMenu, { + components, + props: {}, + template: 'mail.ChatWindowHiddenMenu', +}); + +return ChatWindowHiddenMenu; + +}); diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss new file mode 100644 index 00000000..119d6184 --- /dev/null +++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.scss @@ -0,0 +1,90 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ChatWindowHiddenMenu { + position: fixed; + bottom: 0; + display: flex; + width: 50px; + height: 28px; + align-items: stretch; +} + +.o_ChatWindowHiddenMenu_chatWindowHeader { + max-width: 200px; +} + +.o_ChatWindowHiddenMenu_dropdownToggle { + display: flex; + align-items: center; + justify-content: center; + flex: 1 1 auto; + max-width: 100%; +} + +.o_ChatWindowHiddenMenu_dropdownToggleIcon { + margin-right: 1px; +} + +.o_ChatWindowHiddenMenu_dropdownToggleItem { + margin: 0 3px; +} + +.o_ChatWindowHiddenMenu_list { + overflow: auto; + margin: 0; + padding: 0; +} + +.o_ChatWindowHiddenMenu_listItem { + + &:not(:last-child) { + margin-bottom: 1px; + } +} + +.o_ChatWindowHiddenMenu_unreadCounter { + position: absolute; + right: 0; + top: 0; + transform: translate(50%, -50%); + z-index: 1001; // on top of bootstrap dropup menu +} + +.o_ChatWindowHiddenMenu_windowCounter { + overflow: hidden; + text-overflow: ellipsis; + margin-left: 1px; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_ChatWindowHiddenMenu { + background-color: gray('900'); + border-radius: 6px 6px 0 0; + color: white; + cursor: pointer; +} + +.o_ChatWindowHiddenMenu_chatWindowHeader { + opacity: 0.95; + + &:hover { + opacity: 1; + } +} + +.o_ChatWindowHiddenMenu_dropdownToggle.show { + opacity: 0.5; +} + +.o_ChatWindowHiddenMenu_unreadCounter { + background-color: $o-brand-primary; +} + +.o_ChatWindowHiddenMenu_windowCounter { + user-select: none; +} diff --git a/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml new file mode 100644 index 00000000..943fc71d --- /dev/null +++ b/addons/mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.xml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ChatWindowHiddenMenu" owl="1"> + <div class="dropup o_ChatWindowHiddenMenu"> + <div class="dropdown-toggle o_ChatWindowHiddenMenu_dropdownToggle" t-att-class="{ show: env.messaging.chatWindowManager.isHiddenMenuOpen }" t-on-click="_onClickToggle"> + <div class="fa fa-comments-o o_ChatWindowHiddenMenu_dropdownToggleIcon o_ChatWindowHiddenMenu_dropdownToggleItem"/> + <div class="o_ChatWindowHiddenMenu_dropdownToggleItem o_ChatWindowHiddenMenu_windowCounter"> + <t t-esc="env.messaging.chatWindowManager.allOrderedHidden.length"/> + </div> + </div> + <ul class="dropdown-menu dropdown-menu-right o_ChatWindowHiddenMenu_list" t-att-class="{ show: env.messaging.chatWindowManager.isHiddenMenuOpen }" role="menu" t-ref="list"> + <t t-foreach="env.messaging.chatWindowManager.allOrderedHidden" t-as="chatWindow" t-key="chatWindow.localId"> + <li class="o_ChatWindowHiddenMenu_listItem" role="menuitem"> + <ChatWindowHeader + class="o_ChatWindowHiddenMenu_chatWindowHeader" + chatWindowLocalId="chatWindow.localId" + t-on-o-clicked="_onClickedChatWindow" + /> + </li> + </t> + </ul> + <t t-if="env.messaging.chatWindowManager.unreadHiddenConversationAmount > 0"> + <div class="badge badge-pill o_ChatWindowHiddenMenu_unreadCounter"> + <t t-esc="env.messaging.chatWindowManager.unreadHiddenConversationAmount"/> + </div> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js new file mode 100644 index 00000000..a0c49a96 --- /dev/null +++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.js @@ -0,0 +1,51 @@ +odoo.define('mail/static/src/components/chat_window_manager/chat_window_manager.js', function (require) { +'use strict'; + +const components = { + ChatWindow: require('mail/static/src/components/chat_window/chat_window.js'), + ChatWindowHiddenMenu: require('mail/static/src/components/chat_window_hidden_menu/chat_window_hidden_menu.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class ChatWindowManager extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const chatWindowManager = this.env.messaging && this.env.messaging.chatWindowManager; + const allOrderedVisible = chatWindowManager + ? chatWindowManager.allOrderedVisible + : []; + return { + allOrderedVisible, + allOrderedVisibleThread: allOrderedVisible.map(chatWindow => chatWindow.thread), + chatWindowManager, + chatWindowManagerHasHiddenChatWindows: chatWindowManager && chatWindowManager.hasHiddenChatWindows, + isMessagingInitialized: this.env.isMessagingInitialized(), + }; + }, { + compareDepth: { + allOrderedVisible: 1, + allOrderedVisibleThread: 1, + }, + }); + } + +} + +Object.assign(ChatWindowManager, { + components, + props: {}, + template: 'mail.ChatWindowManager', +}); + +return ChatWindowManager; + +}); diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.scss b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.scss new file mode 100644 index 00000000..1e8abf54 --- /dev/null +++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.scss @@ -0,0 +1,16 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ChatWindowManager { + bottom: 0; + right: 0; + display: flex; + flex-direction: row-reverse; + z-index: 1000; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml new file mode 100644 index 00000000..8e2bd6bf --- /dev/null +++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager.xml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ChatWindowManager" owl="1"> + <div class="o_ChatWindowManager"> + <t t-if="env.isMessagingInitialized()"> + <!-- Note: DOM elements are ordered from left to right --> + <t t-if="env.messaging.chatWindowManager.hasHiddenChatWindows"> + <ChatWindowHiddenMenu class="o_ChatWindowManager_hiddenMenu"/> + </t> + <t t-foreach="env.messaging.chatWindowManager.allOrderedVisible" t-as="chatWindow" t-key="chatWindow.localId"> + <ChatWindow + chatWindowLocalId="chatWindow.localId" + hasCloseAsBackButton="env.messaging.device.isMobile" + isExpandable="!env.messaging.device.isMobile and !!chatWindow.thread" + isFullscreen="env.messaging.device.isMobile" + /> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js b/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js new file mode 100644 index 00000000..ce82f2bb --- /dev/null +++ b/addons/mail/static/src/components/chat_window_manager/chat_window_manager_tests.js @@ -0,0 +1,2423 @@ +odoo.define('mail/static/src/components/chat_window_manager/chat_window_manager_tests.js', function (require) { +'use strict'; + +const { makeDeferred } = require('mail/static/src/utils/deferred/deferred.js'); +const { + afterEach, + afterNextRender, + beforeEach, + nextAnimationFrame, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const { + file: { createFile, inputFiles }, + dom: { triggerEvent }, +} = require('web.test_utils'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('chat_window_manager', {}, function () { +QUnit.module('chat_window_manager_tests.js', { + beforeEach() { + beforeEach(this); + + this.start = async params => { + const { afterEvent, env, widget } = await start(Object.assign( + { hasChatWindow: true, hasMessagingMenu: true }, + params, + { data: this.data } + )); + this.debug = params && params.debug; + this.afterEvent = afterEvent; + this.env = env; + this.widget = widget; + }; + + /** + * Simulates the external behaviours & DOM changes implied by hiding home menu. + * Needed to assert validity of tests at technical level (actual code of home menu could not + * be used in these tests). + */ + this.hideHomeMenu = async () => { + await this.env.bus.trigger('will_hide_home_menu'); + await this.env.bus.trigger('hide_home_menu'); + }; + + /** + * Simulates the external behaviours & DOM changes implied by showing home menu. + * Needed to assert validity of tests at technical level (actual code of home menu could not + * be used in these tests). + */ + this.showHomeMenu = async () => { + await this.env.bus.trigger('will_show_home_menu'); + const $frag = document.createDocumentFragment(); + // in real condition, chat window will be removed and put in a fragment then + // reinserted into DOM + const selector = this.debug ? 'body' : '#qunit-fixture'; + $(selector).contents().appendTo($frag); + await this.env.bus.trigger('show_home_menu'); + $(selector).append($frag); + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('[technical] messaging not created', async function (assert) { + /** + * Creation of messaging in env is async due to generation of models being + * async. Generation of models is async because it requires parsing of all + * JS modules that contain pieces of model definitions. + * + * Time of having no messaging is very short, almost imperceptible by user + * on UI, but the display should not crash during this critical time period. + */ + assert.expect(2); + + const messagingBeforeCreationDeferred = makeDeferred(); + await this.start({ + messagingBeforeCreationDeferred, + waitUntilMessagingCondition: 'none', + }); + assert.containsOnce( + document.body, + '.o_ChatWindowManager', + "should have chat window manager even when messaging is not yet created" + ); + + // simulate messaging being created + messagingBeforeCreationDeferred.resolve(); + await nextAnimationFrame(); + + assert.containsOnce( + document.body, + '.o_ChatWindowManager', + "should still contain chat window manager after messaging has been created" + ); +}); + +QUnit.test('initial mount', async function (assert) { + assert.expect(1); + + await this.start(); + assert.containsOnce( + document.body, + '.o_ChatWindowManager', + "should have chat window manager" + ); +}); + +QUnit.test('chat window new message: basic rendering', async function (assert) { + assert.expect(10); + + await this.start(); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_newMessageButton`).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow`).length, + 1, + "should have open a chat window" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow_header`).length, + 1, + "should have a header" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow_header .o_ChatWindowHeader_name`).length, + 1, + "should have name part in header" + ); + assert.strictEqual( + document.querySelector(`.o_ChatWindow_header .o_ChatWindowHeader_name`).textContent, + "New message", + "should display 'new message' in the header" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow_header .o_ChatWindowHeader_command`).length, + 1, + "should have 1 command in header" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow_header .o_ChatWindowHeader_commandClose`).length, + 1, + "should have command to close chat window" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow_newMessageForm`).length, + 1, + "should have a new message chat window container" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow_newMessageFormLabel`).length, + 1, + "should have a part in selection with label" + ); + assert.strictEqual( + document.querySelector(`.o_ChatWindow_newMessageFormLabel`).textContent.trim(), + "To:", + "should have label 'To:' in selection" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow_newMessageFormInput`).length, + 1, + "should have an input in selection" + ); +}); + +QUnit.test('chat window new message: focused on open', async function (assert) { + assert.expect(2); + + await this.start(); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_newMessageButton`).click() + ); + assert.ok( + document.querySelector(`.o_ChatWindow`).classList.contains('o-focused'), + "chat window should be focused" + ); + assert.ok( + document.activeElement, + document.querySelector(`.o_ChatWindow_newMessageFormInput`), + "chat window focused = selection input focused" + ); +}); + +QUnit.test('chat window new message: close', async function (assert) { + assert.expect(1); + + await this.start(); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_newMessageButton`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_ChatWindow_header .o_ChatWindowHeader_commandClose`).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow`).length, + 0, + "chat window should be closed" + ); +}); + +QUnit.test('chat window new message: fold', async function (assert) { + assert.expect(6); + + await this.start(); + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_newMessageButton`).click() + ); + assert.doesNotHaveClass( + document.querySelector(`.o_ChatWindow`), + 'o-folded', + "chat window should not be folded by default" + ); + assert.containsOnce( + document.body, + '.o_ChatWindow_newMessageForm', + "chat window should have new message form" + ); + + await afterNextRender(() => document.querySelector(`.o_ChatWindow_header`).click()); + assert.hasClass( + document.querySelector(`.o_ChatWindow`), + 'o-folded', + "chat window should become folded" + ); + assert.containsNone( + document.body, + '.o_ChatWindow_newMessageForm', + "chat window should not have new message form" + ); + + await afterNextRender(() => document.querySelector(`.o_ChatWindow_header`).click()); + assert.doesNotHaveClass( + document.querySelector(`.o_ChatWindow`), + 'o-folded', + "chat window should become unfolded" + ); + assert.containsOnce( + document.body, + '.o_ChatWindow_newMessageForm', + "chat window should have new message form" + ); +}); + +QUnit.test('open chat from "new message" chat window should open chat in place of this "new message" chat window', async function (assert) { + /** + * InnerWith computation uses following info: + * ([mocked] global window width: @see `mail/static/src/utils/test_utils.js:start()` method) + * (others: @see mail/static/src/models/chat_window_manager/chat_window_manager.js:visual) + * + * - chat window width: 325px + * - start/end/between gap width: 10px/10px/5px + * - hidden menu width: 200px + * - global width: 1920px + * + * Enough space for 3 visible chat windows: + * 10 + 325 + 5 + 325 + 5 + 325 + 10 = 1000 < 1920 + */ + assert.expect(11); + + this.data['res.partner'].records.push({ id: 131, name: "Partner 131" }); + this.data['res.users'].records.push({ partner_id: 131 }); + this.data['mail.channel'].records.push( + { is_minimized: true }, + { is_minimized: true }, + ); + const imSearchDef = makeDeferred(); + await this.start({ + env: { + browser: { + innerWidth: 1920, + }, + }, + async mockRPC(route, args) { + const res = await this._super(...arguments); + if (args.method === 'im_search') { + imSearchDef.resolve(); + } + return res; + } + }); + assert.containsN( + document.body, + '.o_ChatWindow', + 2, + "should have 2 chat windows initially" + ); + assert.containsNone( + document.body, + '.o_ChatWindow.o-new-message', + "should not have any 'new message' chat window initially" + ); + + // open "new message" chat window + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_newMessageButton`).click() + ); + assert.containsOnce( + document.body, + '.o_ChatWindow.o-new-message', + "should have 'new message' chat window after clicking 'new message' in messaging menu" + ); + assert.containsN( + document.body, + '.o_ChatWindow', + 3, + "should have 3 chat window after opening 'new message' chat window", + ); + assert.containsOnce( + document.body, + '.o_ChatWindow_newMessageFormInput', + "'new message' chat window should have new message form input" + ); + assert.hasClass( + document.querySelector('.o_ChatWindow[data-visible-index="2"]'), + 'o-new-message', + "'new message' chat window should be the last chat window initially", + ); + + await afterNextRender(() => + document.querySelector('.o_ChatWindow[data-visible-index="2"] .o_ChatWindowHeader_commandShiftRight').click() + ); + assert.hasClass( + document.querySelector('.o_ChatWindow[data-visible-index="1"]'), + 'o-new-message', + "'new message' chat window should have moved to the middle after clicking shift previous", + ); + + // search for a user in "new message" autocomplete + document.execCommand('insertText', false, "131"); + document.querySelector(`.o_ChatWindow_newMessageFormInput`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ChatWindow_newMessageFormInput`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + // Wait for search RPC to be resolved. The following await lines are + // necessary because autocomplete is an external lib therefore it is not + // possible to use `afterNextRender`. + await imSearchDef; + await nextAnimationFrame(); + const link = document.querySelector('.ui-autocomplete .ui-menu-item a'); + assert.ok( + link, + "should have autocomplete suggestion after typing on 'new message' input" + ); + assert.strictEqual( + link.textContent, + "Partner 131", + "autocomplete suggestion should target the partner matching search term" + ); + + await afterNextRender(() => link.click()); + assert.containsNone( + document.body, + '.o_ChatWindow.o-new-message', + "should have removed the 'new message' chat window after selecting a partner" + ); + assert.strictEqual( + document.querySelector('.o_ChatWindow[data-visible-index="1"] .o_ChatWindowHeader_name').textContent, + "Partner 131", + "chat window with selected partner should be opened in position where 'new message' chat window was, which is in the middle" + ); +}); + +QUnit.test('new message chat window should close on selecting the user if chat with the user is already open', async function (assert) { + assert.expect(2); + + this.data['res.partner'].records.push({ id: 131, name: "Partner 131"}); + this.data['res.users'].records.push({ id: 12, partner_id: 131 }); + this.data['mail.channel'].records.push({ + channel_type: "chat", + id: 20, + is_minimized: true, + members: [this.data.currentPartnerId, 131], + name: "Partner 131", + public: 'private', + state: 'open', + }); + const imSearchDef = makeDeferred(); + await this.start({ + async mockRPC(route, args) { + const res = await this._super(...arguments); + if (args.method === 'im_search') { + imSearchDef.resolve(); + } + return res; + }, + }); + + // open "new message" chat window + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_newMessageButton`).click()); + + // search for a user in "new message" autocomplete + document.execCommand('insertText', false, "131"); + document.querySelector(`.o_ChatWindow_newMessageFormInput`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ChatWindow_newMessageFormInput`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + // Wait for search RPC to be resolved. The following await lines are + // necessary because autocomplete is an external lib therefore it is not + // possible to use `afterNextRender`. + await imSearchDef; + await nextAnimationFrame(); + const link = document.querySelector('.ui-autocomplete .ui-menu-item a'); + + await afterNextRender(() => link.click()); + assert.containsNone( + document.body, + '.o_ChatWindow_newMessageFormInput', + "'new message' chat window should not be there" + ); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "should have only one chat window after selecting user whose chat is already open", + ); +}); + +QUnit.test('new message autocomplete should automatically select first result', async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ id: 131, name: "Partner 131" }); + this.data['res.users'].records.push({ partner_id: 131 }); + const imSearchDef = makeDeferred(); + await this.start({ + async mockRPC(route, args) { + const res = await this._super(...arguments); + if (args.method === 'im_search') { + imSearchDef.resolve(); + } + return res; + }, + }); + + // open "new message" chat window + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_newMessageButton`).click() + ); + + // search for a user in "new message" autocomplete + document.execCommand('insertText', false, "131"); + document.querySelector(`.o_ChatWindow_newMessageFormInput`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ChatWindow_newMessageFormInput`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + // Wait for search RPC to be resolved. The following await lines are + // necessary because autocomplete is an external lib therefore it is not + // possible to use `afterNextRender`. + await imSearchDef; + await nextAnimationFrame(); + assert.hasClass( + document.querySelector('.ui-autocomplete .ui-menu-item a'), + 'ui-state-active', + "first autocomplete result should be automatically selected", + ); +}); + +QUnit.test('chat window: basic rendering', async function (assert) { + assert.expect(11); + + // channel that is expected to be found in the messaging menu + // with random unique id and name that will be asserted during the test + this.data['mail.channel'].records.push({ id: 20, name: "General" }); + await this.start(); + + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_NotificationList_preview`).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow`).length, + 1, + "should have open a chat window" + ); + const chatWindow = document.querySelector(`.o_ChatWindow`); + assert.strictEqual( + chatWindow.dataset.threadLocalId, + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId, + "should have open a chat window of channel" + ); + assert.strictEqual( + chatWindow.querySelectorAll(`:scope .o_ChatWindow_header`).length, + 1, + "should have header part" + ); + const chatWindowHeader = chatWindow.querySelector(`:scope .o_ChatWindow_header`); + assert.strictEqual( + chatWindowHeader.querySelectorAll(`:scope .o_ThreadIcon`).length, + 1, + "should have thread icon in header part" + ); + assert.strictEqual( + chatWindowHeader.querySelectorAll(`:scope .o_ChatWindowHeader_name`).length, + 1, + "should have thread name in header part" + ); + assert.strictEqual( + chatWindowHeader.querySelector(`:scope .o_ChatWindowHeader_name`).textContent, + "General", + "should have correct thread name in header part" + ); + assert.strictEqual( + chatWindowHeader.querySelectorAll(`:scope .o_ChatWindowHeader_command`).length, + 2, + "should have 2 commands in header part" + ); + assert.strictEqual( + chatWindowHeader.querySelectorAll(`:scope .o_ChatWindowHeader_commandExpand`).length, + 1, + "should have command to expand thread in discuss" + ); + assert.strictEqual( + chatWindowHeader.querySelectorAll(`:scope .o_ChatWindowHeader_commandClose`).length, + 1, + "should have command to close chat window" + ); + assert.strictEqual( + chatWindow.querySelectorAll(`:scope .o_ChatWindow_thread`).length, + 1, + "should have part to display thread content inside chat window" + ); + assert.ok( + chatWindow.querySelector(`:scope .o_ChatWindow_thread`).classList.contains('o_ThreadView'), + "thread part should use component ThreadView" + ); +}); + +QUnit.test('chat window: fold', async function (assert) { + assert.expect(9); + + // channel that is expected to be found in the messaging menu + // with random UUID, will be asserted during the test + this.data['mail.channel'].records.push({ uuid: 'channel-uuid' }); + await this.start({ + mockRPC(route, args) { + if (args.method === 'channel_fold') { + assert.step(`rpc:${args.method}/${args.kwargs.state}`); + } + return this._super(...arguments); + }, + }); + // Open Thread + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click() + ); + assert.containsOnce( + document.body, + '.o_ChatWindow_thread', + "chat window should have a thread" + ); + assert.verifySteps( + ['rpc:channel_fold/open'], + "should sync fold state 'open' with server after opening chat window" + ); + + // Fold chat window + await afterNextRender(() => document.querySelector(`.o_ChatWindow_header`).click()); + assert.verifySteps( + ['rpc:channel_fold/folded'], + "should sync fold state 'folded' with server after folding chat window" + ); + assert.containsNone( + document.body, + '.o_ChatWindow_thread', + "chat window should not have any thread" + ); + + // Unfold chat window + await afterNextRender(() => document.querySelector(`.o_ChatWindow_header`).click()); + assert.verifySteps( + ['rpc:channel_fold/open'], + "should sync fold state 'open' with server after unfolding chat window" + ); + assert.containsOnce( + document.body, + '.o_ChatWindow_thread', + "chat window should have a thread" + ); +}); + +QUnit.test('chat window: open / close', async function (assert) { + assert.expect(10); + + // channel that is expected to be found in the messaging menu + // with random UUID, will be asserted during the test + this.data['mail.channel'].records.push({ uuid: 'channel-uuid' }); + await this.start({ + mockRPC(route, args) { + if (args.method === 'channel_fold') { + assert.step(`rpc:channel_fold/${args.kwargs.state}`); + } + return this._super(...arguments); + }, + }); + assert.containsNone( + document.body, + '.o_ChatWindow', + "should not have a chat window initially" + ); + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click() + ); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "should have a chat window after clicking on thread preview" + ); + assert.verifySteps( + ['rpc:channel_fold/open'], + "should sync fold state 'open' with server after opening chat window" + ); + + // Close chat window + await afterNextRender(() => document.querySelector(`.o_ChatWindowHeader_commandClose`).click()); + assert.containsNone( + document.body, + '.o_ChatWindow', + "should not have a chat window after closing it" + ); + assert.verifySteps( + ['rpc:channel_fold/closed'], + "should sync fold state 'closed' with server after closing chat window" + ); + + // Reopen chat window + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click() + ); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "should have a chat window again after clicking on thread preview again" + ); + assert.verifySteps( + ['rpc:channel_fold/open'], + "should sync fold state 'open' with server after opening chat window again" + ); +}); + +QUnit.test('Mobile: opening a chat window should not update channel state on the server', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ + id: 20, + state: 'closed', + }); + await this.start({ + env: { + device: { + isMobile: true, + }, + }, + }); + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await afterNextRender(() => document.querySelector(`.o_NotificationList_preview`).click()); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "should have a chat window after clicking on thread preview" + ); + const channels = await this.env.services.rpc({ + model: 'mail.channel', + method: 'read', + args: [20], + }, { shadow: true }); + assert.strictEqual( + channels[0].state, + 'closed', + 'opening a chat window in mobile should not update channel state on the server', + ); +}); + +QUnit.test('Mobile: closing a chat window should not update channel state on the server', async function (assert) { + assert.expect(3); + + this.data['mail.channel'].records.push({ + id: 20, + state: 'open', + }); + await this.start({ + env: { + device: { + isMobile: true, + }, + }, + }); + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await afterNextRender(() => document.querySelector(`.o_NotificationList_preview`).click()); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "should have a chat window after clicking on thread preview" + ); + // Close chat window + await afterNextRender(() => document.querySelector(`.o_ChatWindowHeader_commandClose`).click()); + assert.containsNone( + document.body, + '.o_ChatWindow', + "should not have a chat window after closing it" + ); + const channels = await this.env.services.rpc({ + model: 'mail.channel', + method: 'read', + args: [20], + }, { shadow: true }); + assert.strictEqual( + channels[0].state, + 'open', + 'closing the chat window should not update channel state on the server', + ); +}); + +QUnit.test("Mobile: chat window shouldn't open automatically after receiving a new message", async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ id: 10, name: "Demo" }); + this.data['res.users'].records.push({ + id: 42, + partner_id: 10, + }); + this.data['mail.channel'].records = [ + { + channel_type: "chat", + id: 10, + members: [this.data.currentPartnerId, 10], + uuid: 'channel-10-uuid', + }, + ]; + await this.start({ + env: { + device: { + isMobile: true, + }, + }, + }); + + // simulate receiving a message + await afterNextRender(() => this.env.services.rpc({ + route: '/mail/chat_post', + params: { + context: { + mockedUserId: 42, + }, + message_content: "hu", + uuid: 'channel-10-uuid', + }, + })); + assert.containsNone( + document.body, + '.o_ChatWindow', + "On mobile, the chat window shouldn't open automatically after receiving a new message" + ); +}); + +QUnit.test('chat window: close on ESCAPE', async function (assert) { + assert.expect(10); + + // expected partner to be found by mention during the test + this.data['res.partner'].records.push({ name: "TestPartner" }); + // a chat window with thread is expected to be initially open for this test + this.data['mail.channel'].records.push({ is_minimized: true }); + await this.start({ + mockRPC(route, args) { + if (args.method === 'channel_fold') { + assert.step(`rpc:channel_fold/${args.kwargs.state}`); + } + return this._super(...arguments); + }, + }); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "chat window should be opened initially" + ); + + await afterNextRender(() => + document.querySelector(`.o_Composer_buttonEmojis`).click() + ); + assert.containsOnce( + document.body, + '.o_EmojisPopover', + "emojis popover should be opened after click on emojis button" + ); + + await afterNextRender(() => { + const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" }); + document.querySelector(`.o_Composer_buttonEmojis`).dispatchEvent(ev); + }); + assert.containsNone( + document.body, + '.o_EmojisPopover', + "emojis popover should be closed after pressing escape on emojis button" + ); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "chat window should still be opened after pressing escape on emojis button" + ); + + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "@"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.hasClass( + document.querySelector('.o_ComposerSuggestionList_list'), + 'show', + "should display mention suggestions on typing '@'" + ); + + await afterNextRender(() => { + const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" }); + document.querySelector(`.o_ComposerTextInput_textarea`).dispatchEvent(ev); + }); + assert.containsNone( + document.body, + '.o_ComposerSuggestionList_list', + "mention suggestion should be closed after pressing escape on mention suggestion" + ); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "chat window should still be opened after pressing escape on mention suggestion" + ); + + await afterNextRender(() => { + const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" }); + document.querySelector(`.o_ComposerTextInput_textarea`).dispatchEvent(ev); + }); + assert.containsNone( + document.body, + '.o_ChatWindow', + "chat window should be closed after pressing escape if there was no other priority escape handler" + ); + assert.verifySteps(['rpc:channel_fold/closed']); +}); + +QUnit.test('focus next visible chat window when closing current chat window with ESCAPE', async function (assert) { + /** + * computation uses following info: + * ([mocked] global window width: @see `mail/static/src/utils/test_utils.js:start()` method) + * (others: @see mail/static/src/models/chat_window_manager/chat_window_manager.js:visual) + * + * - chat window width: 325px + * - start/end/between gap width: 10px/10px/5px + * - hidden menu width: 200px + * - global width: 1920px + * + * Enough space for 2 visible chat windows: + * 10 + 325 + 5 + 325 + 10 = 670 < 1920 + */ + assert.expect(4); + + // 2 chat windows with thread are expected to be initially open for this test + this.data['mail.channel'].records.push( + { is_minimized: true, state: 'open' }, + { is_minimized: true, state: 'open' } + ); + await this.start({ + env: { + browser: { + innerWidth: 1920, + }, + }, + }); + assert.containsN( + document.body, + '.o_ChatWindow .o_ComposerTextInput_textarea', + 2, + "2 chat windows should be present initially" + ); + assert.containsNone( + document.body, + '.o_ChatWindow.o-folded', + "both chat windows should be open" + ); + + await afterNextRender(() => { + const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: 'Escape' }); + document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(ev); + }); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "only one chat window should remain after pressing escape on first chat window" + ); + assert.hasClass( + document.querySelector('.o_ChatWindow'), + 'o-focused', + "next visible chat window should be focused after pressing escape on first chat window" + ); +}); + +QUnit.test('[technical] chat window: composer state conservation on toggle home menu', async function (assert) { + // technical as show/hide home menu simulation are involved and home menu implementation + // have side-effects on DOM that may make chat window components not work + assert.expect(7); + + // channel that is expected to be found in the messaging menu + // with random unique id that is needed to link messages + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click() + ); + // Set content of the composer of the chat window + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, 'XDU for the win !'); + }); + assert.containsNone( + document.body, + '.o_Composer .o_Attachment', + "composer should have no attachment initially" + ); + // Set attachments of the composer + const files = [ + await createFile({ + name: 'text state conservation on toggle home menu.txt', + content: 'hello, world', + contentType: 'text/plain', + }), + await createFile({ + name: 'text2 state conservation on toggle home menu.txt', + content: 'hello, xdu is da best man', + contentType: 'text/plain', + }) + ]; + await afterNextRender(() => + inputFiles( + document.querySelector('.o_FileUploader_input'), + files + ) + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "XDU for the win !", + "chat window composer initial text input should contain 'XDU for the win !'" + ); + assert.containsN( + document.body, + '.o_Composer .o_Attachment', + 2, + "composer should have 2 total attachments after adding 2 attachments" + ); + + await this.hideHomeMenu(); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "XDU for the win !", + "Chat window composer should still have the same input after hiding home menu" + ); + assert.containsN( + document.body, + '.o_Composer .o_Attachment', + 2, + "Chat window composer should have 2 attachments after hiding home menu" + ); + + // Show home menu + await this.showHomeMenu(); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "XDU for the win !", + "chat window composer should still have the same input showing home menu" + ); + assert.containsN( + document.body, + '.o_Composer .o_Attachment', + 2, + "Chat window composer should have 2 attachments showing home menu" + ); +}); + +QUnit.test('[technical] chat window: scroll conservation on toggle home menu', async function (assert) { + // technical as show/hide home menu simulation are involved and home menu implementation + // have side-effects on DOM that may make chat window components not work + assert.expect(2); + + this.data['mail.channel'].records.push({ id: 20 }); + for (let i = 0; i < 10; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + }); + } + await this.start(); + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => document.querySelector('.o_NotificationList_preview').click(), + message: "should wait until channel 20 scrolled to its last message after opening it from the messaging menu", + predicate: ({ scrollTop, thread }) => { + const messageList = document.querySelector('.o_ThreadView_messageList'); + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === messageList.scrollHeight - messageList.clientHeight + ); + }, + }); + // Set a scroll position to chat window + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => { + document.querySelector(`.o_ThreadView_messageList`).scrollTop = 142; + }, + message: "should wait until channel 20 scrolled to 142 after setting this value manually", + predicate: ({ scrollTop, thread }) => { + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === 142 + ); + }, + }); + await afterNextRender(() => this.hideHomeMenu()); + assert.strictEqual( + document.querySelector(`.o_ThreadView_messageList`).scrollTop, + 142, + "chat window scrollTop should still be the same after home menu is hidden" + ); + + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => this.showHomeMenu(), + message: "should wait until channel 20 restored its scroll to 142 after showing the home menu", + predicate: ({ scrollTop, thread }) => { + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === 142 + ); + }, + }); + assert.strictEqual( + document.querySelector(`.o_ThreadView_messageList`).scrollTop, + 142, + "chat window scrollTop should still be the same after home menu is shown" + ); +}); + +QUnit.test('open 2 different chat windows: enough screen width [REQUIRE FOCUS]', async function (assert) { + /** + * computation uses following info: + * ([mocked] global window width: @see `mail/static/src/utils/test_utils.js:start()` method) + * (others: @see mail/static/src/models/chat_window_manager/chat_window_manager.js:visual) + * + * - chat window width: 325px + * - start/end/between gap width: 10px/10px/5px + * - hidden menu width: 200px + * - global width: 1920px + * + * Enough space for 2 visible chat windows: + * 10 + 325 + 5 + 325 + 10 = 670 < 1920 + */ + assert.expect(8); + + // 2 channels are expected to be found in the messaging menu, each with a + // random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 10 }, { id: 20 }); + await this.start({ + env: { + browser: { + innerWidth: 1920, // enough to fit at least 2 chat windows + }, + }, + }); + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await afterNextRender(() => + document.querySelector(` + .o_MessagingMenu_dropdownMenu + .o_NotificationList_preview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow`).length, + 1, + "should have open a chat window" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_ChatWindow[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "chat window of chat should be open" + ); + assert.ok( + document.querySelector(` + .o_ChatWindow[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `).classList.contains('o-focused'), + "chat window of chat should have focus" + ); + + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await afterNextRender(() => + document.querySelector(` + .o_MessagingMenu_dropdownMenu + .o_NotificationList_preview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow`).length, + 2, + "should have open a new chat window" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_ChatWindow[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "chat window of channel should be open" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_ChatWindow[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "chat window of chat should still be open" + ); + assert.ok( + document.querySelector(` + .o_ChatWindow[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).classList.contains('o-focused'), + "chat window of channel should have focus" + ); + assert.notOk( + document.querySelector(` + .o_ChatWindow[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `).classList.contains('o-focused'), + "chat window of chat should no longer have focus" + ); +}); + +QUnit.test('open 2 chat windows: check shift operations are available', async function (assert) { + assert.expect(9); + + // 2 channels are expected to be found in the messaging menu + // only their existence matters, data are irrelevant + this.data['mail.channel'].records.push({}, {}); + await this.start(); + + await afterNextRender(() => { + document.querySelector('.o_MessagingMenu_toggler').click(); + }); + await afterNextRender(() => { + document.querySelectorAll('.o_MessagingMenu_dropdownMenu .o_NotificationList_preview')[0].click(); + }); + await afterNextRender(() => { + document.querySelector('.o_MessagingMenu_toggler').click(); + }); + await afterNextRender(() => { + document.querySelectorAll('.o_MessagingMenu_dropdownMenu .o_NotificationList_preview')[1].click(); + }); + assert.containsN( + document.body, + '.o_ChatWindow', + 2, + "should have opened 2 chat windows" + ); + assert.containsOnce( + document.querySelectorAll('.o_ChatWindow')[0], + '.o_ChatWindowHeader_commandShiftLeft', + "first chat window should be allowed to shift left" + ); + assert.containsNone( + document.querySelectorAll('.o_ChatWindow')[0], + '.o_ChatWindowHeader_commandShiftRight', + "first chat window should not be allowed to shift right" + ); + assert.containsNone( + document.querySelectorAll('.o_ChatWindow')[1], + '.o_ChatWindowHeader_commandShiftLeft', + "second chat window should not be allowed to shift left" + ); + assert.containsOnce( + document.querySelectorAll('.o_ChatWindow')[1], + '.o_ChatWindowHeader_commandShiftRight', + "second chat window should be allowed to shift right" + ); + + const initialFirstChatWindowThreadLocalId = + document.querySelectorAll('.o_ChatWindow')[0].dataset.threadLocalId; + const initialSecondChatWindowThreadLocalId = + document.querySelectorAll('.o_ChatWindow')[1].dataset.threadLocalId; + await afterNextRender(() => { + document.querySelectorAll('.o_ChatWindow')[0] + .querySelector(':scope .o_ChatWindowHeader_commandShiftLeft') + .click(); + }); + assert.strictEqual( + document.querySelectorAll('.o_ChatWindow')[0].dataset.threadLocalId, + initialSecondChatWindowThreadLocalId, + "First chat window should be second after it has been shift left" + ); + assert.strictEqual( + document.querySelectorAll('.o_ChatWindow')[1].dataset.threadLocalId, + initialFirstChatWindowThreadLocalId, + "Second chat window should be first after the first has been shifted left" + ); + + await afterNextRender(() => { + document.querySelectorAll('.o_ChatWindow')[1] + .querySelector(':scope .o_ChatWindowHeader_commandShiftRight') + .click(); + }); + assert.strictEqual( + document.querySelectorAll('.o_ChatWindow')[0].dataset.threadLocalId, + initialFirstChatWindowThreadLocalId, + "First chat window should be back at first place after being shifted left then right" + ); + assert.strictEqual( + document.querySelectorAll('.o_ChatWindow')[1].dataset.threadLocalId, + initialSecondChatWindowThreadLocalId, + "Second chat window should be back at second place after first one has been shifted left then right" + ); +}); + +QUnit.test('open 2 folded chat windows: check shift operations are available', async function (assert) { + /** + * computation uses following info: + * ([mocked] global window width: 900px) + * (others: @see `mail/static/src/models/chat_window_manager/chat_window_manager.js:visual`) + * + * - chat window width: 325px + * - start/end/between gap width: 10px/10px/5px + * - global width: 900px + * + * 2 visible chat windows + hidden menu: + * 10 + 325 + 5 + 325 + 10 = 675 < 900 + */ + assert.expect(13); + + this.data['res.partner'].records.push({ id: 7, name: "Demo" }); + const channel = { + channel_type: "channel", + is_minimized: true, + is_pinned: true, + state: 'folded', + }; + const chat = { + channel_type: "chat", + is_minimized: true, + is_pinned: true, + members: [this.data.currentPartnerId, 7], + state: 'folded', + }; + this.data['mail.channel'].records.push(channel, chat); + await this.start({ + env: { + browser: { + innerWidth: 900, + }, + }, + }); + + assert.containsN( + document.body, + '.o_ChatWindow', + 2, + "should have opened 2 chat windows initially" + ); + assert.hasClass( + document.querySelector('.o_ChatWindow[data-visible-index="0"]'), + 'o-folded', + "first chat window should be folded" + ); + assert.hasClass( + document.querySelector('.o_ChatWindow[data-visible-index="1"]'), + 'o-folded', + "second chat window should be folded" + ); + assert.containsOnce( + document.body, + '.o_ChatWindow .o_ChatWindowHeader_commandShiftLeft', + "there should be only one chat window allowed to shift left even if folded" + ); + assert.containsOnce( + document.body, + '.o_ChatWindow .o_ChatWindowHeader_commandShiftRight', + "there should be only one chat window allowed to shift right even if folded" + ); + + const initialFirstChatWindowThreadLocalId = + document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId; + const initialSecondChatWindowThreadLocalId = + document.querySelector('.o_ChatWindow[data-visible-index="1"]').dataset.threadLocalId; + await afterNextRender(() => + document.querySelector('.o_ChatWindowHeader_commandShiftLeft').click() + ); + assert.strictEqual( + document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId, + initialSecondChatWindowThreadLocalId, + "First chat window should be second after it has been shift left" + ); + assert.strictEqual( + document.querySelector('.o_ChatWindow[data-visible-index="1"]').dataset.threadLocalId, + initialFirstChatWindowThreadLocalId, + "Second chat window should be first after the first has been shifted left" + ); + + await afterNextRender(() => + document.querySelector('.o_ChatWindowHeader_commandShiftLeft').click() + ); + assert.strictEqual( + document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId, + initialFirstChatWindowThreadLocalId, + "First chat window should be back at first place" + ); + assert.strictEqual( + document.querySelector('.o_ChatWindow[data-visible-index="1"]').dataset.threadLocalId, + initialSecondChatWindowThreadLocalId, + "Second chat window should be back at second place" + ); + + await afterNextRender(() => + document.querySelector('.o_ChatWindowHeader_commandShiftRight').click() + ); + assert.strictEqual( + document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId, + initialSecondChatWindowThreadLocalId, + "First chat window should be second after it has been shift right" + ); + assert.strictEqual( + document.querySelector('.o_ChatWindow[data-visible-index="1"]').dataset.threadLocalId, + initialFirstChatWindowThreadLocalId, + "Second chat window should be first after the first has been shifted right" + ); + + await afterNextRender(() => + document.querySelector('.o_ChatWindowHeader_commandShiftRight').click() + ); + assert.strictEqual( + document.querySelector('.o_ChatWindow[data-visible-index="0"]').dataset.threadLocalId, + initialFirstChatWindowThreadLocalId, + "First chat window should be back at first place" + ); + assert.strictEqual( + document.querySelector('.o_ChatWindow[data-visible-index="1"]').dataset.threadLocalId, + initialSecondChatWindowThreadLocalId, + "Second chat window should be back at second place" + ); +}); + +QUnit.test('open 3 different chat windows: not enough screen width', async function (assert) { + /** + * computation uses following info: + * ([mocked] global window width: 900px) + * (others: @see `mail/static/src/models/chat_window_manager/chat_window_manager.js:visual`) + * + * - chat window width: 325px + * - start/end/between gap width: 10px/10px/5px + * - hidden menu width: 200px + * - global width: 1080px + * + * Enough space for 2 visible chat windows, and one hidden chat window: + * 3 visible chat windows: + * 10 + 325 + 5 + 325 + 5 + 325 + 10 = 1000 < 900 + * 2 visible chat windows + hidden menu: + * 10 + 325 + 5 + 325 + 10 + 200 + 5 = 875 < 900 + */ + assert.expect(12); + + // 3 channels are expected to be found in the messaging menu, each with a + // random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 1 }, { id: 2 }, { id: 3 }); + await this.start({ + env: { + browser: { + innerWidth: 900, // enough to fit 2 chat windows but not 3 + }, + }, + }); + + // open, from systray menu, chat windows of channels with Id 1, 2, then 3 + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(` + .o_MessagingMenu_dropdownMenu + .o_NotificationList_preview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 1, + model: 'mail.channel', + }).localId + }"] + `).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow`).length, + 1, + "should have open 1 visible chat window" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindowManager_hiddenMenu`).length, + 0, + "should not have hidden menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_dropdownMenu`).length, + 0, + "messaging menu should be hidden" + ); + + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(` + .o_MessagingMenu_dropdownMenu + .o_NotificationList_preview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 2, + model: 'mail.channel', + }).localId + }"] + `).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow`).length, + 2, + "should have open 2 visible chat windows" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindowManager_hiddenMenu`).length, + 0, + "should not have hidden menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_dropdownMenu`).length, + 0, + "messaging menu should be hidden" + ); + + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(` + .o_MessagingMenu_dropdownMenu + .o_NotificationList_preview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 3, + model: 'mail.channel', + }).localId + }"] + `).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow`).length, + 2, + "should have open 2 visible chat windows" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindowManager_hiddenMenu`).length, + 1, + "should have hidden menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_dropdownMenu`).length, + 0, + "messaging menu should be hidden" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_ChatWindow[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 1, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "chat window of channel 1 should be open" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_ChatWindow[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 3, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "chat window of channel 3 should be open" + ); + assert.ok( + document.querySelector(` + .o_ChatWindow[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 3, + model: 'mail.channel', + }).localId + }"] + `).classList.contains('o-focused'), + "chat window of channel 3 should have focus" + ); +}); + +QUnit.test('chat window: switch on TAB', async function (assert) { + assert.expect(10); + + // 2 channels are expected to be found in the messaging menu + // with random unique id and name that will be asserted during the test + this.data['mail.channel'].records.push( + { id: 1, name: "channel1" }, + { id: 2, name: "channel2" } + ); + await this.start(); + + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(` + .o_MessagingMenu_dropdownMenu + .o_NotificationList_preview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 1, + model: 'mail.channel', + }).localId + }"]` + ).click() + ); + + assert.containsOnce(document.body, '.o_ChatWindow', "Only 1 chatWindow must be opened"); + const chatWindow = document.querySelector('.o_ChatWindow'); + assert.strictEqual( + chatWindow.querySelector('.o_ChatWindowHeader_name').textContent, + 'channel1', + "The name of the only chatWindow should be 'channel1' (channel with ID 1)" + ); + assert.strictEqual( + chatWindow.querySelector('.o_ComposerTextInput_textarea'), + document.activeElement, + "The chatWindow composer must have focus" + ); + + await afterNextRender(() => + triggerEvent( + chatWindow.querySelector('.o_ChatWindow .o_ComposerTextInput_textarea'), + 'keydown', + { key: 'Tab' }, + ) + ); + assert.strictEqual( + chatWindow.querySelector('.o_ChatWindow .o_ComposerTextInput_textarea'), + document.activeElement, + "The chatWindow composer still has focus" + ); + + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(` + .o_MessagingMenu_dropdownMenu + .o_NotificationList_preview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 2, + model: 'mail.channel', + }).localId + }"]` + ).click() + ); + + assert.containsN(document.body, '.o_ChatWindow', 2, "2 chatWindows must be opened"); + const chatWindows = document.querySelectorAll('.o_ChatWindow'); + assert.strictEqual( + chatWindows[0].querySelector('.o_ChatWindowHeader_name').textContent, + 'channel1', + "The name of the 1st chatWindow should be 'channel1' (channel with ID 1)" + ); + assert.strictEqual( + chatWindows[1].querySelector('.o_ChatWindowHeader_name').textContent, + 'channel2', + "The name of the 2nd chatWindow should be 'channel2' (channel with ID 2)" + ); + assert.strictEqual( + chatWindows[1].querySelector('.o_ComposerTextInput_textarea'), + document.activeElement, + "The 2nd chatWindow composer must have focus (channel with ID 2)" + ); + + await afterNextRender(() => + triggerEvent( + chatWindows[1].querySelector('.o_ComposerTextInput_textarea'), + 'keydown', + { key: 'Tab' }, + ) + ); + assert.containsN(document.body, '.o_ChatWindow', 2, "2 chatWindows should still be opened"); + assert.strictEqual( + chatWindows[0].querySelector('.o_ComposerTextInput_textarea'), + document.activeElement, + "The 1st chatWindow composer must have focus (channel with ID 1)" + ); +}); + +QUnit.test('chat window: TAB cycle with 3 open chat windows [REQUIRE FOCUS]', async function (assert) { + /** + * InnerWith computation uses following info: + * ([mocked] global window width: @see `mail/static/src/utils/test_utils.js:start()` method) + * (others: @see mail/static/src/models/chat_window_manager/chat_window_manager.js:visual) + * + * - chat window width: 325px + * - start/end/between gap width: 10px/10px/5px + * - hidden menu width: 200px + * - global width: 1920px + * + * Enough space for 3 visible chat windows: + * 10 + 325 + 5 + 325 + 5 + 325 + 10 = 1000 < 1920 + */ + assert.expect(6); + + this.data['mail.channel'].records.push( + { + is_minimized: true, + is_pinned: true, + state: 'open', + }, + { + is_minimized: true, + is_pinned: true, + state: 'open', + }, + { + is_minimized: true, + is_pinned: true, + state: 'open', + } + ); + await this.start({ + env: { + browser: { + innerWidth: 1920, + }, + }, + }); + assert.containsN( + document.body, + '.o_ChatWindow .o_ComposerTextInput_textarea', + 3, + "initialy, 3 chat windows should be present" + ); + assert.containsNone( + document.body, + '.o_ChatWindow.o-folded', + "all 3 chat windows should be open" + ); + + await afterNextRender(() => { + document.querySelector(".o_ChatWindow[data-visible-index='2'] .o_ComposerTextInput_textarea").focus(); + }); + assert.strictEqual( + document.querySelector(".o_ChatWindow[data-visible-index='2'] .o_ComposerTextInput_textarea"), + document.activeElement, + "The chatWindow with visible-index 2 should have the focus" + ); + + await afterNextRender(() => + triggerEvent( + document.querySelector(".o_ChatWindow[data-visible-index='2'] .o_ComposerTextInput_textarea"), + 'keydown', + { key: 'Tab' }, + ) + ); + assert.strictEqual( + document.querySelector(".o_ChatWindow[data-visible-index='1'] .o_ComposerTextInput_textarea"), + document.activeElement, + "after pressing tab on the chatWindow with visible-index 2, the chatWindow with visible-index 1 should have focus" + ); + + await afterNextRender(() => + triggerEvent( + document.querySelector(".o_ChatWindow[data-visible-index='1'] .o_ComposerTextInput_textarea"), + 'keydown', + { key: 'Tab' }, + ) + ); + assert.strictEqual( + document.querySelector(".o_ChatWindow[data-visible-index='0'] .o_ComposerTextInput_textarea"), + document.activeElement, + "after pressing tab on the chat window with visible-index 1, the chatWindow with visible-index 0 should have focus" + ); + + await afterNextRender(() => + triggerEvent( + document.querySelector(".o_ChatWindow[data-visible-index='0'] .o_ComposerTextInput_textarea"), + 'keydown', + { key: 'Tab' }, + ) + ); + assert.strictEqual( + document.querySelector(".o_ChatWindow[data-visible-index='2'] .o_ComposerTextInput_textarea"), + document.activeElement, + "the chatWindow with visible-index 2 should have the focus after pressing tab on the chatWindow with visible-index 0" + ); +}); + +QUnit.test('chat window with a thread: keep scroll position in message list on folded', async function (assert) { + assert.expect(3); + + // channel that is expected to be found in the messaging menu + // with a random unique id, needed to link messages + this.data['mail.channel'].records.push({ id: 20 }); + for (let i = 0; i < 10; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + }); + } + await this.start(); + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => document.querySelector('.o_NotificationList_preview').click(), + message: "should wait until channel 20 scrolled to its last message after opening it from the messaging menu", + predicate: ({ scrollTop, thread }) => { + const messageList = document.querySelector('.o_ThreadView_messageList'); + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === messageList.scrollHeight - messageList.clientHeight + ); + }, + }); + // Set a scroll position to chat window + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => { + document.querySelector(`.o_ThreadView_messageList`).scrollTop = 142; + }, + message: "should wait until channel 20 scrolled to 142 after setting this value manually", + predicate: ({ scrollTop, thread }) => { + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === 142 + ); + }, + }); + assert.strictEqual( + document.querySelector(`.o_ThreadView_messageList`).scrollTop, + 142, + "verify chat window initial scrollTop" + ); + + // fold chat window + await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click()); + assert.containsNone( + document.body, + ".o_ThreadView", + "chat window should be folded so no ThreadView should be present" + ); + + // unfold chat window + await afterNextRender(() => this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => document.querySelector('.o_ChatWindow_header').click(), + message: "should wait until channel 20 restored its scroll position to 142", + predicate: ({ scrollTop, thread }) => { + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === 142 + + ); + }, + })); + assert.strictEqual( + document.querySelector(`.o_ThreadView_messageList`).scrollTop, + 142, + "chat window scrollTop should still be the same when chat window is unfolded" + ); +}); + +QUnit.test('chat window should scroll to the newly posted message just after posting it', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ + id: 20, + is_minimized: true, + state: 'open', + }); + for (let i = 0; i < 10; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + }); + } + await this.start(); + + // Set content of the composer of the chat window + await afterNextRender(() => { + document.querySelector('.o_ComposerTextInput_textarea').focus(); + document.execCommand('insertText', false, 'WOLOLO'); + }); + // Send a new message in the chatwindow to trigger the scroll + await afterNextRender(() => + triggerEvent( + document.querySelector('.o_ChatWindow .o_ComposerTextInput_textarea'), + 'keydown', + { key: 'Enter' }, + ) + ); + const messageList = document.querySelector('.o_MessageList'); + assert.strictEqual( + messageList.scrollHeight - messageList.scrollTop, + messageList.clientHeight, + "chat window should scroll to the newly posted message just after posting it" + ); +}); + +QUnit.test('chat window: post message on non-mailing channel with "CTRL-Enter" keyboard shortcut for small screen size', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ + id: 20, + is_minimized: true, + mass_mailing: false, + }); + await this.start({ + env: { + device: { + isMobile: true, // here isMobile is used for the small screen size, not actually for the mobile devices + }, + }, + }); + + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click() + ); + // insert some HTML in editable + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "Test"); + }); + await afterNextRender(() => { + const kevt = new window.KeyboardEvent('keydown', { ctrlKey: true, key: "Enter" }); + document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt); + }); + assert.containsOnce( + document.body, + '.o_Message', + "should now have single message in channel after posting message from pressing 'CTRL-Enter' in text input of composer for small screen" + ); +}); + +QUnit.test('[technical] chat window: composer state conservation on toggle home menu when folded', async function (assert) { + // technical as show/hide home menu simulation are involved and home menu implementation + // have side-effects on DOM that may make chat window components not work + assert.expect(6); + + // channel that is expected to be found in the messaging menu + // only its existence matters, data are irrelevant + this.data['mail.channel'].records.push({}); + await this.start(); + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_dropdownMenu .o_NotificationList_preview`).click() + ); + // Set content of the composer of the chat window + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, 'XDU for the win !'); + }); + // Set attachments of the composer + const files = [ + await createFile({ + name: 'text state conservation on toggle home menu.txt', + content: 'hello, world', + contentType: 'text/plain', + }), + await createFile({ + name: 'text2 state conservation on toggle home menu.txt', + content: 'hello, xdu is da best man', + contentType: 'text/plain', + }) + ]; + await afterNextRender(() => + inputFiles( + document.querySelector('.o_FileUploader_input'), + files + ) + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "XDU for the win !", + "verify chat window composer initial html input" + ); + assert.containsN( + document.body, + '.o_Composer .o_Attachment', + 2, + "verify chat window composer initial attachment count" + ); + + // fold chat window + await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click()); + await this.hideHomeMenu(); + // unfold chat window + await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click()); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "XDU for the win !", + "Chat window composer should still have the same input after hiding home menu" + ); + assert.containsN( + document.body, + '.o_Composer .o_Attachment', + 2, + "Chat window composer should have 2 attachments after hiding home menu" + ); + + // fold chat window + await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click()); + await this.showHomeMenu(); + // unfold chat window + await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click()); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "XDU for the win !", + "chat window composer should still have the same input after showing home menu" + ); + assert.containsN( + document.body, + '.o_Composer .o_Attachment', + 2, + "Chat window composer should have 2 attachments after showing home menu" + ); +}); + +QUnit.test('[technical] chat window with a thread: keep scroll position in message list on toggle home menu when folded', async function (assert) { + // technical as show/hide home menu simulation are involved and home menu implementation + // have side-effects on DOM that may make chat window components not work + assert.expect(2); + + // channel that is expected to be found in the messaging menu + // with random unique id, needed to link messages + this.data['mail.channel'].records.push({ id: 20 }); + for (let i = 0; i < 10; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + }); + } + await this.start(); + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => document.querySelector('.o_NotificationList_preview').click(), + message: "should wait until channel 20 scrolled to its last message after opening it from the messaging menu", + predicate: ({ scrollTop, thread }) => { + const messageList = document.querySelector('.o_ThreadView_messageList'); + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === messageList.scrollHeight - messageList.clientHeight + ); + }, + }); + // Set a scroll position to chat window + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => document.querySelector(`.o_ThreadView_messageList`).scrollTop = 142, + message: "should wait until channel 20 scrolled to 142 after setting this value manually", + predicate: ({ scrollTop, thread }) => { + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === 142 + ); + }, + }); + // fold chat window + await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click()); + await this.hideHomeMenu(); + // unfold chat window + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => document.querySelector('.o_ChatWindow_header').click(), + message: "should wait until channel 20 restored its scroll to 142 after unfolding it", + predicate: ({ scrollTop, thread }) => { + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === 142 + ); + }, + }); + assert.strictEqual( + document.querySelector(`.o_ThreadView_messageList`).scrollTop, + 142, + "chat window scrollTop should still be the same after home menu is hidden" + ); + + // fold chat window + await afterNextRender(() => document.querySelector('.o_ChatWindow_header').click()); + // Show home menu + await this.showHomeMenu(); + // unfold chat window + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => document.querySelector('.o_ChatWindow_header').click(), + message: "should wait until channel 20 restored its scroll position to the last saved value (142)", + predicate: ({ scrollTop, thread }) => { + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === 142 + ); + }, + }); + assert.strictEqual( + document.querySelector(`.o_ThreadView_messageList`).scrollTop, + 142, + "chat window scrollTop should still be the same after home menu is shown" + ); +}); + +QUnit.test('chat window does not fetch messages if hidden', async function (assert) { + /** + * computation uses following info: + * ([mocked] global window width: 900px) + * (others: @see `mail/static/src/models/chat_window_manager/chat_window_manager.js:visual`) + * + * - chat window width: 325px + * - start/end/between gap width: 10px/10px/5px + * - hidden menu width: 200px + * - global width: 1080px + * + * Enough space for 2 visible chat windows, and one hidden chat window: + * 3 visible chat windows: + * 10 + 325 + 5 + 325 + 5 + 325 + 10 = 1000 > 900 + * 2 visible chat windows + hidden menu: + * 10 + 325 + 5 + 325 + 10 + 200 + 5 = 875 < 900 + */ + assert.expect(14); + + // 3 channels are expected to be found in the messaging menu, each with a + // random unique id that will be referenced in the test + this.data['mail.channel'].records = [ + { + id: 10, + is_minimized: true, + name: "Channel #10", + state: 'open', + }, + { + id: 11, + is_minimized: true, + name: "Channel #11", + state: 'open', + }, + { + id: 12, + is_minimized: true, + name: "Channel #12", + state: 'open', + }, + ]; + await this.start({ + env: { + browser: { + innerWidth: 900, + }, + }, + mockRPC(route, args) { + if (args.method === 'message_fetch') { + // domain should be like [['channel_id', 'in', [X]]] with X the channel id + const channel_ids = args.kwargs.domain[0][2]; + assert.strictEqual(channel_ids.length, 1, "messages should be fetched channel per channel"); + assert.step(`rpc:message_fetch:${channel_ids[0]}`); + } + return this._super(...arguments); + }, + }); + + assert.containsN( + document.body, + '.o_ChatWindow', + 2, + "2 chat windows should be visible" + ); + assert.containsNone( + document.body, + `.o_ChatWindow[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 12, + model: 'mail.channel', + }).localId + }"]`, + "chat window for Channel #12 should be hidden" + ); + assert.containsOnce( + document.body, + '.o_ChatWindowHiddenMenu', + "chat window hidden menu should be displayed" + ); + assert.verifySteps( + ['rpc:message_fetch:10', 'rpc:message_fetch:11'], + "messages should be fetched for the two visible chat windows" + ); + + await afterNextRender(() => + document.querySelector('.o_ChatWindowHiddenMenu_dropdownToggle').click() + ); + assert.containsOnce( + document.body, + '.o_ChatWindowHiddenMenu_chatWindowHeader', + "1 hidden chat window should be listed in hidden menu" + ); + + await afterNextRender(() => + document.querySelector('.o_ChatWindowHiddenMenu_chatWindowHeader').click() + ); + assert.containsN( + document.body, + '.o_ChatWindow', + 2, + "2 chat windows should still be visible" + ); + assert.containsOnce( + document.body, + `.o_ChatWindow[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 12, + model: 'mail.channel', + }).localId + }"]`, + "chat window for Channel #12 should now be visible" + ); + assert.verifySteps( + ['rpc:message_fetch:12'], + "messages should now be fetched for Channel #12" + ); +}); + +QUnit.test('new message separator is shown in a chat window of a chat on receiving new message if there is a history of conversation', async function (assert) { + assert.expect(3); + + this.data['res.partner'].records.push({ id: 10, name: "Demo" }); + this.data['res.users'].records.push({ + id: 42, + name: "Foreigner user", + partner_id: 10, + }); + this.data['mail.channel'].records = [ + { + channel_type: "chat", + id: 10, + is_minimized: true, + is_pinned: false, + members: [this.data.currentPartnerId, 10], + uuid: 'channel-10-uuid', + }, + ]; + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [10], + model: 'mail.channel', + res_id: 10, + }); + await this.start(); + + // simulate receiving a message + await afterNextRender(async () => this.env.services.rpc({ + route: '/mail/chat_post', + params: { + context: { + mockedUserId: 42, + }, + message_content: "hu", + uuid: 'channel-10-uuid', + }, + })); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "a chat window should be visible after receiving a new message from a chat" + ); + assert.containsN( + document.body, + '.o_Message', + 2, + "chat window should have 2 messages" + ); + assert.containsOnce( + document.body, + '.o_MessageList_separatorNewMessages', + "should display 'new messages' separator in the conversation, from reception of new messages" + ); +}); + +QUnit.test('new message separator is not shown in a chat window of a chat on receiving new message if there is no history of conversation', async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ id: 10, name: "Demo" }); + this.data['res.users'].records.push({ + id: 42, + name: "Foreigner user", + partner_id: 10, + }); + this.data['mail.channel'].records = [{ + channel_type: "chat", + id: 10, + members: [this.data.currentPartnerId, 10], + uuid: 'channel-10-uuid', + }]; + await this.start(); + + // simulate receiving a message + await afterNextRender(async () => this.env.services.rpc({ + route: '/mail/chat_post', + params: { + context: { + mockedUserId: 42, + }, + message_content: "hu", + uuid: 'channel-10-uuid', + }, + })); + assert.containsNone( + document.body, + '.o_MessageList_separatorNewMessages', + "should not display 'new messages' separator in the conversation of a chat on receiving new message if there is no history of conversation" + ); +}); + +QUnit.test('focusing a chat window of a chat should make new message separator disappear [REQUIRE FOCUS]', async function (assert) { + assert.expect(2); + + this.data['res.partner'].records.push({ id: 10, name: "Demo" }); + this.data['res.users'].records.push({ + id: 42, + name: "Foreigner user", + partner_id: 10, + }); + this.data['mail.channel'].records.push( + { + channel_type: "chat", + id: 10, + is_minimized: true, + is_pinned: false, + members: [this.data.currentPartnerId, 10], + message_unread_counter: 0, + uuid: 'channel-10-uuid', + }, + ); + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [10], + model: 'mail.channel', + res_id: 10, + }); + await this.start(); + + // simulate receiving a message + await afterNextRender(() => this.env.services.rpc({ + route: '/mail/chat_post', + params: { + context: { + mockedUserId: 42, + }, + message_content: "hu", + uuid: 'channel-10-uuid', + }, + })); + assert.containsOnce( + document.body, + '.o_MessageList_separatorNewMessages', + "should display 'new messages' separator in the conversation, from reception of new messages" + ); + + await afterNextRender(() => this.afterEvent({ + eventName: 'o-thread-last-seen-by-current-partner-message-id-changed', + func: () => document.querySelector('.o_ComposerTextInput_textarea').focus(), + message: "should wait until last seen by current partner message id changed", + predicate: ({ thread }) => { + return ( + thread.id === 10 && + thread.model === 'mail.channel' + ); + }, + })); + assert.containsNone( + document.body, + '.o_MessageList_separatorNewMessages', + "new message separator should no longer be shown, after focus on composer text input of chat window" + ); +}); + +QUnit.test('chat window should remain folded when new message is received', async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ id: 10, name: "Demo" }); + this.data['res.users'].records.push({ + id: 42, + name: "Foreigner user", + partner_id: 10, + }); + this.data['mail.channel'].records = [ + { + channel_type: "chat", + id: 10, + is_minimized: true, + is_pinned: false, + members: [this.data.currentPartnerId, 10], + state: 'folded', + uuid: 'channel-10-uuid', + }, + ]; + + await this.start(); + // simulate receiving a new message + await afterNextRender(async () => this.env.services.rpc({ + route: '/mail/chat_post', + params: { + context: { + mockedUserId: 42, + }, + message_content: "New Message 2", + uuid: 'channel-10-uuid', + }, + })); + assert.hasClass( + document.querySelector(`.o_ChatWindow`), + 'o-folded', + "chat window should remain folded" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/chatter/chatter.js b/addons/mail/static/src/components/chatter/chatter.js new file mode 100644 index 00000000..3f6ca7dc --- /dev/null +++ b/addons/mail/static/src/components/chatter/chatter.js @@ -0,0 +1,150 @@ +odoo.define('mail/static/src/components/chatter/chatter.js', function (require) { +'use strict'; + +const components = { + ActivityBox: require('mail/static/src/components/activity_box/activity_box.js'), + AttachmentBox: require('mail/static/src/components/attachment_box/attachment_box.js'), + ChatterTopbar: require('mail/static/src/components/chatter_topbar/chatter_topbar.js'), + Composer: require('mail/static/src/components/composer/composer.js'), + ThreadView: require('mail/static/src/components/thread_view/thread_view.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class Chatter extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const chatter = this.env.models['mail.chatter'].get(props.chatterLocalId); + const thread = chatter ? chatter.thread : undefined; + let attachments = []; + if (thread) { + attachments = thread.allAttachments; + } + return { + attachments: attachments.map(attachment => attachment.__state), + chatter: chatter ? chatter.__state : undefined, + composer: thread && thread.composer, + thread, + threadActivitiesLength: thread && thread.activities.length, + }; + }, { + compareDepth: { + attachments: 1, + }, + }); + useUpdate({ func: () => this._update() }); + /** + * Reference of the composer. Useful to focus it. + */ + this._composerRef = useRef('composer'); + /** + * Reference of the scroll Panel (Real scroll element). Useful to pass the Scroll element to + * child component to handle proper scrollable element. + */ + this._scrollPanelRef = useRef('scrollPanel'); + /** + * Reference of the message list. Useful to trigger the scroll event on it. + */ + this._threadRef = useRef('thread'); + this.getScrollableElement = this.getScrollableElement.bind(this); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.chatter} + */ + get chatter() { + return this.env.models['mail.chatter'].get(this.props.chatterLocalId); + } + + /** + * @returns {Element|undefined} Scrollable Element + */ + getScrollableElement() { + if (!this._scrollPanelRef.el) { + return; + } + return this._scrollPanelRef.el; + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _notifyRendered() { + this.trigger('o-chatter-rendered', { + attachments: this.chatter.thread.allAttachments, + thread: this.chatter.thread.localId, + }); + } + + /** + * @private + */ + _update() { + if (!this.chatter) { + return; + } + if (this.chatter.thread) { + this._notifyRendered(); + } + if (this.chatter.isDoFocus) { + this.chatter.update({ isDoFocus: false }); + const composer = this._composerRef.comp; + if (composer) { + composer.focus(); + } + } + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onComposerMessagePosted() { + this.chatter.update({ isComposerVisible: false }); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onScrollPanelScroll(ev) { + if (!this._threadRef.comp) { + return; + } + this._threadRef.comp.onScroll(ev); + } + +} + +Object.assign(Chatter, { + components, + props: { + chatterLocalId: String, + }, + template: 'mail.Chatter', +}); + +return Chatter; + +}); diff --git a/addons/mail/static/src/components/chatter/chatter.scss b/addons/mail/static/src/components/chatter/chatter.scss new file mode 100644 index 00000000..d722e03b --- /dev/null +++ b/addons/mail/static/src/components/chatter/chatter.scss @@ -0,0 +1,42 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_Chatter { + position: relative; + display: flex; + flex: 1 1 auto; + flex-direction: column; + width: map-get($sizes, 100); +} + +.o_Chatter_composer { + border-bottom: $border-width solid; + + &.o-bordered { + border-left: $border-width solid; + border-right: $border-width solid; + } +} + +.o_Chatter_scrollPanel { + overflow-y: auto; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_Chatter { + background-color: white; + border-color: $border-color; +} + +.o_Chatter_composer { + border-bottom-color: $border-color; + + &.o-bordered { + border-left-color: $border-color; + border-right-color: $border-color; + } +} diff --git a/addons/mail/static/src/components/chatter/chatter.xml b/addons/mail/static/src/components/chatter/chatter.xml new file mode 100644 index 00000000..d9cf20b4 --- /dev/null +++ b/addons/mail/static/src/components/chatter/chatter.xml @@ -0,0 +1,56 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.Chatter" owl="1"> + <div class="o_Chatter"> + <t t-if="chatter"> + <div class="o_Chatter_fixedPanel"> + <ChatterTopbar + class="o_Chatter_topbar" + chatterLocalId="chatter.localId" + /> + <t t-if="chatter.threadView and chatter.isComposerVisible"> + <Composer + class="o_Chatter_composer" + t-att-class="{ 'o-bordered': chatter.hasExternalBorder }" + composerLocalId="chatter.thread.composer.localId" + hasFollowers="true" + hasMentionSuggestionsBelowPosition="true" + isCompact="false" + isExpandable="true" + textInputSendShortcuts="['ctrl-enter', 'meta-enter']" + t-on-o-message-posted="_onComposerMessagePosted" + t-ref="composer" + /> + </t> + </div> + <div class="o_Chatter_scrollPanel" t-on-scroll="_onScrollPanelScroll" t-ref="scrollPanel"> + <t t-if="chatter.isAttachmentBoxVisible"> + <AttachmentBox + class="o_Chatter_attachmentBox" + threadLocalId="chatter.thread.localId" + /> + </t> + <t t-if="chatter.thread and chatter.hasActivities and chatter.thread.activities.length > 0"> + <ActivityBox + class="o_Chatter_activityBox" + chatterLocalId="chatter.localId" + /> + </t> + <t t-if="chatter.threadView"> + <ThreadView + class="o_Chatter_thread" + getScrollableElement="getScrollableElement" + hasComposer="false" + hasScrollAdjust="chatter.hasMessageListScrollAdjust" + order="'desc'" + threadViewLocalId="chatter.threadView.localId" + t-ref="thread" + /> + </t> + </div> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/chatter/chatter_suggested_recipient_tests.js b/addons/mail/static/src/components/chatter/chatter_suggested_recipient_tests.js new file mode 100644 index 00000000..9cb57d83 --- /dev/null +++ b/addons/mail/static/src/components/chatter/chatter_suggested_recipient_tests.js @@ -0,0 +1,420 @@ +odoo.define('mail/static/src/components/chatter/chatter_suggested_recipient_tests', function (require) { +'use strict'; + +const components = { + Chatter: require('mail/static/src/components/chatter/chatter.js'), + Composer: require('mail/static/src/components/composer/composer.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('chatter', {}, function () { +QUnit.module('chatter_suggested_recipients_tests.js', { + beforeEach() { + beforeEach(this); + + this.createChatterComponent = async ({ chatter }, otherProps) => { + const props = Object.assign({ chatterLocalId: chatter.localId }, otherProps); + await createRootComponent(this, components.Chatter, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test("suggest recipient on 'Send message' composer", async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ + display_name: "John Jane", + email: "john@jane.be", + id: 100, + }); + this.data['res.fake'].records.push({ + id: 10, + email_cc: "john@test.be", + partner_ids: [100], + }); + await this.start (); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 10, + threadModel: 'res.fake', + }); + await this.createChatterComponent({ chatter }); + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + assert.containsOnce( + document.body, + '.o_ComposerSuggestedRecipientList', + "Should display a list of suggested recipients after opening the composer from 'Send message' button" + ); +}); + +QUnit.test("with 3 or less suggested recipients: no 'show more' button", async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ + display_name: "John Jane", + email: "john@jane.be", + id: 100, + }); + this.data['res.fake'].records.push({ + id: 10, + email_cc: "john@test.be", + partner_ids: [100], + }); + await this.start (); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 10, + threadModel: 'res.fake', + }); + await this.createChatterComponent({ chatter }); + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + assert.containsNone( + document.body, + '.o_ComposerSuggestedRecipientList_showMore', + "should not display 'show more' button with 3 or less suggested recipients" + ); +}); + +QUnit.test("display reason for suggested recipient on mouse over", async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ + display_name: "John Jane", + email: "john@jane.be", + id: 100, + }); + this.data['res.fake'].records.push({ + id: 10, + partner_ids: [100], + }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 10, + threadModel: 'res.fake', + }); + await this.createChatterComponent({ chatter }); + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + const partnerTitle = document.querySelector('.o_ComposerSuggestedRecipient[data-partner-id="100"]').getAttribute('title'); + assert.strictEqual( + partnerTitle, + "Add as recipient and follower (reason: Email partner)", + "must display reason for suggested recipient on mouse over", + ); +}); + +QUnit.test("suggested recipient without partner are unchecked by default", async function (assert) { + assert.expect(1); + + this.data['res.fake'].records.push({ + id: 10, + email_cc: "john@test.be", + }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 10, + threadModel: 'res.fake', + }); + await this.createChatterComponent({ chatter }); + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + const checkboxUnchecked = document.querySelector('.o_ComposerSuggestedRecipient:not([data-partner-id]) input[type=checkbox]'); + assert.notOk( + checkboxUnchecked.checked, + "suggested recipient without partner must be unchecked by default", + ); +}); + +QUnit.test("suggested recipient with partner are checked by default", async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ + display_name: "John Jane", + email: "john@jane.be", + id: 100, + }); + this.data['res.fake'].records.push({ + id: 10, + partner_ids: [100], + }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 10, + threadModel: 'res.fake', + }); + await this.createChatterComponent({ chatter }); + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + const checkboxChecked = document.querySelector('.o_ComposerSuggestedRecipient[data-partner-id="100"] input[type=checkbox]'); + assert.ok( + checkboxChecked.checked, + "suggested recipient with partner must be checked by default", + ); +}); + +QUnit.test("more than 3 suggested recipients: display only 3 and 'show more' button", async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ + display_name: "John Jane", + email: "john@jane.be", + id: 100, + }); + this.data['res.partner'].records.push({ + display_name: "Jack Jone", + email: "jack@jone.be", + id: 1000, + }); + this.data['res.partner'].records.push({ + display_name: "jolly Roger", + email: "Roger@skullflag.com", + id: 1001, + }); + this.data['res.partner'].records.push({ + display_name: "jack sparrow", + email: "jsparrow@blackpearl.bb", + id: 1002, + }); + this.data['res.fake'].records.push({ + id: 10, + partner_ids: [100, 1000, 1001, 1002], + }); + await this.start (); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 10, + threadModel: 'res.fake', + }); + await this.createChatterComponent({ chatter }); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + assert.containsOnce( + document.body, + '.o_ComposerSuggestedRecipientList_showMore', + "more than 3 suggested recipients display 'show more' button" + ); +}); + +QUnit.test("more than 3 suggested recipients: show all of them on click 'show more' button", async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ + display_name: "John Jane", + email: "john@jane.be", + id: 100, + }); + this.data['res.partner'].records.push({ + display_name: "Jack Jone", + email: "jack@jone.be", + id: 1000, + }); + this.data['res.partner'].records.push({ + display_name: "jolly Roger", + email: "Roger@skullflag.com", + id: 1001, + }); + this.data['res.partner'].records.push({ + display_name: "jack sparrow", + email: "jsparrow@blackpearl.bb", + id: 1002, + }); + this.data['res.fake'].records.push({ + id: 10, + partner_ids: [100, 1000, 1001, 1002], + }); + await this.start (); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 10, + threadModel: 'res.fake', + }); + await this.createChatterComponent({ chatter }); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_ComposerSuggestedRecipientList_showMore`).click() + ); + assert.containsN( + document.body, + '.o_ComposerSuggestedRecipient', + 4, + "more than 3 suggested recipients: show all of them on click 'show more' button" + ); +}); + +QUnit.test("more than 3 suggested recipients -> click 'show more' -> 'show less' button", async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ + display_name: "John Jane", + email: "john@jane.be", + id: 100, + }); + this.data['res.partner'].records.push({ + display_name: "Jack Jone", + email: "jack@jone.be", + id: 1000, + }); + this.data['res.partner'].records.push({ + display_name: "jolly Roger", + email: "Roger@skullflag.com", + id: 1001, + }); + this.data['res.partner'].records.push({ + display_name: "jack sparrow", + email: "jsparrow@blackpearl.bb", + id: 1002, + }); + this.data['res.fake'].records.push({ + id: 10, + partner_ids: [100, 1000, 1001, 1002], + }); + await this.start (); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 10, + threadModel: 'res.fake', + }); + await this.createChatterComponent({ chatter }); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_ComposerSuggestedRecipientList_showMore`).click() + ); + assert.containsOnce( + document.body, + '.o_ComposerSuggestedRecipientList_showLess', + "more than 3 suggested recipients -> click 'show more' -> 'show less' button" + ); +}); + +QUnit.test("suggested recipients list display 3 suggested recipient and 'show more' button when 'show less' button is clicked", async function (assert) { + assert.expect(2); + + this.data['res.partner'].records.push({ + display_name: "John Jane", + email: "john@jane.be", + id: 100, + }); + this.data['res.partner'].records.push({ + display_name: "Jack Jone", + email: "jack@jone.be", + id: 1000, + }); + this.data['res.partner'].records.push({ + display_name: "jolly Roger", + email: "Roger@skullflag.com", + id: 1001, + }); + this.data['res.partner'].records.push({ + display_name: "jack sparrow", + email: "jsparrow@blackpearl.bb", + id: 1002, + }); + this.data['res.fake'].records.push({ + id: 10, + partner_ids: [100, 1000, 1001, 1002], + }); + await this.start (); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 10, + threadModel: 'res.fake', + }); + await this.createChatterComponent({ chatter }); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_ComposerSuggestedRecipientList_showMore`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_ComposerSuggestedRecipientList_showLess`).click() + ); + assert.containsN( + document.body, + '.o_ComposerSuggestedRecipient', + 3, + "suggested recipient list should display 3 suggested recipients after clicking on 'show less'." + ); + assert.containsOnce( + document.body, + '.o_ComposerSuggestedRecipientList_showMore', + "suggested recipient list should containt a 'show More' button after clicking on 'show less'." + ); +}); + +QUnit.test("suggested recipients should not be notified when posting an internal note", async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ + display_name: "John Jane", + email: "john@jane.be", + id: 100, + }); + this.data['res.fake'].records.push({ + id: 10, + partner_ids: [100], + }); + await this.start({ + async mockRPC(route, args) { + if (args.model === 'res.fake' && args.method === 'message_post') { + assert.strictEqual( + args.kwargs.partner_ids.length, + 0, + "message_post should not contain suggested recipients when posting an internal note" + ); + } + return this._super(...arguments); + }, + }); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 10, + threadModel: 'res.fake', + }); + await this.createChatterComponent({ chatter }); + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click() + ); + document.querySelector('.o_ComposerTextInput_textarea').focus(); + await afterNextRender(() => document.execCommand('insertText', false, "Dummy Message")); + await afterNextRender(() => { + document.querySelector('.o_Composer_buttonSend').click(); + }); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/chatter/chatter_tests.js b/addons/mail/static/src/components/chatter/chatter_tests.js new file mode 100644 index 00000000..15163e85 --- /dev/null +++ b/addons/mail/static/src/components/chatter/chatter_tests.js @@ -0,0 +1,469 @@ +odoo.define('mail/static/src/components/chatter/chatter_tests', function (require) { +'use strict'; + +const components = { + Chatter: require('mail/static/src/components/chatter/chatter.js'), + Composer: require('mail/static/src/components/composer/composer.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + nextAnimationFrame, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('chatter', {}, function () { +QUnit.module('chatter_tests.js', { + beforeEach() { + beforeEach(this); + + this.createChatterComponent = async ({ chatter }, otherProps) => { + const props = Object.assign({ chatterLocalId: chatter.localId }, otherProps); + await createRootComponent(this, components.Chatter, { + props, + target: this.widget.el, + }); + }; + + this.createComposerComponent = async (composer, otherProps) => { + const props = Object.assign({ composerLocalId: composer.localId }, otherProps); + await createRootComponent(this, components.Composer, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('base rendering when chatter has no attachment', async function (assert) { + assert.expect(6); + + this.data['res.partner'].records.push({ id: 100 }); + for (let i = 0; i < 60; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + model: 'res.partner', + res_id: 100, + }); + } + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterComponent({ chatter }); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter`).length, + 1, + "should have a chatter" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar`).length, + 1, + "should have a chatter topbar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_attachmentBox`).length, + 0, + "should not have an attachment box in the chatter" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_thread`).length, + 1, + "should have a thread in the chatter" + ); + assert.strictEqual( + document.querySelector(`.o_Chatter_thread`).dataset.threadLocalId, + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 100, + model: 'res.partner', + }).localId, + "thread should have the right thread local id" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 30, + "the first 30 messages of thread should be loaded" + ); +}); + +QUnit.test('base rendering when chatter has no record', async function (assert) { + assert.expect(8); + + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadModel: 'res.partner', + }); + await this.createChatterComponent({ chatter }); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter`).length, + 1, + "should have a chatter" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar`).length, + 1, + "should have a chatter topbar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_attachmentBox`).length, + 0, + "should not have an attachment box in the chatter" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_thread`).length, + 1, + "should have a thread in the chatter" + ); + assert.ok( + chatter.thread.isTemporary, + "thread should have a temporary thread linked to chatter" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 1, + "should have a message" + ); + assert.strictEqual( + document.querySelector(`.o_Message_content`).textContent, + "Creating a new record...", + "should have the 'Creating a new record ...' message" + ); + assert.containsNone( + document.body, + '.o_MessageList_loadMore', + "should not have the 'load more' button" + ); +}); + +QUnit.test('base rendering when chatter has attachments', async function (assert) { + assert.expect(3); + + this.data['res.partner'].records.push({ id: 100 }); + this.data['ir.attachment'].records.push( + { + mimetype: 'text/plain', + name: 'Blah.txt', + res_id: 100, + res_model: 'res.partner', + }, + { + mimetype: 'text/plain', + name: 'Blu.txt', + res_id: 100, + res_model: 'res.partner', + } + ); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterComponent({ chatter }); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter`).length, + 1, + "should have a chatter" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar`).length, + 1, + "should have a chatter topbar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_attachmentBox`).length, + 0, + "should not have an attachment box in the chatter" + ); +}); + +QUnit.test('show attachment box', async function (assert) { + assert.expect(6); + + this.data['res.partner'].records.push({ id: 100 }); + this.data['ir.attachment'].records.push( + { + mimetype: 'text/plain', + name: 'Blah.txt', + res_id: 100, + res_model: 'res.partner', + }, + { + mimetype: 'text/plain', + name: 'Blu.txt', + res_id: 100, + res_model: 'res.partner', + } + ); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterComponent({ chatter }); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter`).length, + 1, + "should have a chatter" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar`).length, + 1, + "should have a chatter topbar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length, + 1, + "should have an attachments button in chatter topbar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length, + 1, + "attachments button should have a counter" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_attachmentBox`).length, + 0, + "should not have an attachment box in the chatter" + ); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonAttachments`).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_attachmentBox`).length, + 1, + "should have an attachment box in the chatter" + ); +}); + +QUnit.test('composer show/hide on log note/send message [REQUIRE FOCUS]', async function (assert) { + assert.expect(10); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterComponent({ chatter }); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonSendMessage`).length, + 1, + "should have a send message button" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonLogNote`).length, + 1, + "should have a log note button" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_composer`).length, + 0, + "should not have a composer" + ); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_composer`).length, + 1, + "should have a composer" + ); + assert.hasClass( + document.querySelector('.o_Chatter_composer'), + 'o-focused', + "composer 'send message' in chatter should have focus just after being displayed" + ); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_composer`).length, + 1, + "should still have a composer" + ); + assert.hasClass( + document.querySelector('.o_Chatter_composer'), + 'o-focused', + "composer 'log note' in chatter should have focus just after being displayed" + ); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_composer`).length, + 0, + "should have no composer anymore" + ); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_composer`).length, + 1, + "should have a composer" + ); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_Chatter_composer`).length, + 0, + "should have no composer anymore" + ); +}); + +QUnit.test('should not display user notification messages in chatter', async function (assert) { + assert.expect(1); + + this.data['res.partner'].records.push({ id: 100 }); + this.data['mail.message'].records.push({ + id: 102, + message_type: 'user_notification', + model: 'res.partner', + res_id: 100, + }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterComponent({ chatter }); + + assert.containsNone( + document.body, + '.o_Message', + "should display no messages" + ); +}); + +QUnit.test('post message with "CTRL-Enter" keyboard shortcut', async function (assert) { + assert.expect(2); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterComponent({ chatter }); + assert.containsNone( + document.body, + '.o_Message', + "should not have any message initially in chatter" + ); + + await afterNextRender(() => + document.querySelector('.o_ChatterTopbar_buttonSendMessage').click() + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "Test"); + }); + await afterNextRender(() => { + const kevt = new window.KeyboardEvent('keydown', { ctrlKey: true, key: "Enter" }); + document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt); + }); + assert.containsOnce( + document.body, + '.o_Message', + "should now have single message in chatter after posting message from pressing 'CTRL-Enter' in text input of composer" + ); +}); + +QUnit.test('post message with "META-Enter" keyboard shortcut', async function (assert) { + assert.expect(2); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterComponent({ chatter }); + assert.containsNone( + document.body, + '.o_Message', + "should not have any message initially in chatter" + ); + + await afterNextRender(() => + document.querySelector('.o_ChatterTopbar_buttonSendMessage').click() + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "Test"); + }); + await afterNextRender(() => { + const kevt = new window.KeyboardEvent('keydown', { key: "Enter", metaKey: true }); + document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt); + }); + assert.containsOnce( + document.body, + '.o_Message', + "should now have single message in channel after posting message from pressing 'META-Enter' in text input of composer" + ); +}); + +QUnit.test('do not post message with "Enter" keyboard shortcut', async function (assert) { + // Note that test doesn't assert Enter makes a newline, because this + // default browser cannot be simulated with just dispatching + // programmatically crafted events... + assert.expect(2); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterComponent({ chatter }); + assert.containsNone( + document.body, + '.o_Message', + "should not have any message initially in chatter" + ); + + await afterNextRender(() => + document.querySelector('.o_ChatterTopbar_buttonSendMessage').click() + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "Test"); + }); + const kevt = new window.KeyboardEvent('keydown', { key: "Enter" }); + document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt); + await nextAnimationFrame(); + assert.containsNone( + document.body, + '.o_Message', + "should still not have any message in mailing channel after pressing 'Enter' in text input of composer" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.js b/addons/mail/static/src/components/chatter_container/chatter_container.js new file mode 100644 index 00000000..2b186e62 --- /dev/null +++ b/addons/mail/static/src/components/chatter_container/chatter_container.js @@ -0,0 +1,139 @@ +odoo.define('mail/static/src/components/chatter_container/chatter_container.js', function (require) { +'use strict'; + +const components = { + Chatter: require('mail/static/src/components/chatter/chatter.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js'); +const { clear } = require('mail/static/src/model/model_field_command.js'); + +const { Component } = owl; + +/** + * This component abstracts chatter component to its parent, so that it can be + * mounted and receive chatter data even when a chatter component cannot be + * created. Indeed, in order to create a chatter component, we must create + * a chatter record, the latter requiring messaging to be initialized. The view + * may attempt to create a chatter before messaging has been initialized, so + * this component delays the mounting of chatter until it becomes initialized. + */ +class ChatterContainer extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + this.chatter = undefined; + this._wasMessagingInitialized = false; + useShouldUpdateBasedOnProps(); + useStore(props => { + const isMessagingInitialized = this.env.isMessagingInitialized(); + // Delay creation of chatter record until messaging is initialized. + // Ideally should observe models directly to detect change instead + // of using `useStore`. + if (!this._wasMessagingInitialized && isMessagingInitialized) { + this._wasMessagingInitialized = true; + this._insertFromProps(props); + } + return { chatter: this.chatter }; + }); + useUpdate({ func: () => this._update() }); + } + + /** + * @override + */ + willUpdateProps(nextProps) { + if (this.env.isMessagingInitialized()) { + this._insertFromProps(nextProps); + } + return super.willUpdateProps(...arguments); + } + + /** + * @override + */ + destroy() { + super.destroy(); + if (this.chatter) { + this.chatter.delete(); + } + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _insertFromProps(props) { + const values = Object.assign({}, props); + if (values.threadId === undefined) { + values.threadId = clear(); + } + if (!this.chatter) { + this.chatter = this.env.models['mail.chatter'].create(values); + } else { + this.chatter.update(values); + } + } + + /** + * @private + */ + _update() { + if (this.chatter) { + this.chatter.refresh(); + } + } + +} + +Object.assign(ChatterContainer, { + components, + props: { + hasActivities: { + type: Boolean, + optional: true, + }, + hasExternalBorder: { + type: Boolean, + optional: true, + }, + hasFollowers: { + type: Boolean, + optional: true, + }, + hasMessageList: { + type: Boolean, + optional: true, + }, + hasMessageListScrollAdjust: { + type: Boolean, + optional: true, + }, + hasTopbarCloseButton: { + type: Boolean, + optional: true, + }, + isAttachmentBoxVisibleInitially: { + type: Boolean, + optional: true, + }, + threadId: { + type: Number, + optional: true, + }, + threadModel: String, + }, + template: 'mail.ChatterContainer', +}); + + +return ChatterContainer; + +}); diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.scss b/addons/mail/static/src/components/chatter_container/chatter_container.scss new file mode 100644 index 00000000..8cd51580 --- /dev/null +++ b/addons/mail/static/src/components/chatter_container/chatter_container.scss @@ -0,0 +1,25 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ChatterContainer { + display: flex; + flex: 1 1 auto; + width: map-get($sizes, 100); +} + +.o_ChatterContainer_noChatter { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; +} + +.o_ChatterContainer_noChatterIcon { + margin-right: map-get($spacers, 2); +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + diff --git a/addons/mail/static/src/components/chatter_container/chatter_container.xml b/addons/mail/static/src/components/chatter_container/chatter_container.xml new file mode 100644 index 00000000..c1d8d220 --- /dev/null +++ b/addons/mail/static/src/components/chatter_container/chatter_container.xml @@ -0,0 +1,15 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ChatterContainer" owl="1"> + <div class="o_ChatterContainer"> + <t t-if="chatter"> + <Chatter chatterLocalId="chatter.localId"/> + </t> + <t t-else=""> + <div class="o_ChatterContainer_noChatter"><i class="o_ChatterContainer_noChatterIcon fa fa-spinner fa-spin"/>Please wait...</div> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.js b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.js new file mode 100644 index 00000000..41d2a461 --- /dev/null +++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.js @@ -0,0 +1,137 @@ +odoo.define('mail/static/src/components/chatter_topbar/chatter_topbar.js', function (require) { +'use strict'; + +const components = { + FollowButton: require('mail/static/src/components/follow_button/follow_button.js'), + FollowerListMenu: require('mail/static/src/components/follower_list_menu/follower_list_menu.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class ChatterTopbar extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const chatter = this.env.models['mail.chatter'].get(props.chatterLocalId); + const thread = chatter ? chatter.thread : undefined; + const threadAttachments = thread ? thread.allAttachments : []; + return { + areThreadAttachmentsLoaded: thread && thread.areAttachmentsLoaded, + chatter: chatter ? chatter.__state : undefined, + composerIsLog: chatter && chatter.composer && chatter.composer.isLog, + threadAttachmentsAmount: threadAttachments.length, + }; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.chatter} + */ + get chatter() { + return this.env.models['mail.chatter'].get(this.props.chatterLocalId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickAttachments(ev) { + this.chatter.update({ + isAttachmentBoxVisible: !this.chatter.isAttachmentBoxVisible, + }); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickClose(ev) { + this.trigger('o-close-chatter'); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickLogNote(ev) { + if (!this.chatter.composer) { + return; + } + if (this.chatter.isComposerVisible && this.chatter.composer.isLog) { + this.chatter.update({ isComposerVisible: false }); + } else { + this.chatter.showLogNote(); + } + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickScheduleActivity(ev) { + const action = { + type: 'ir.actions.act_window', + name: this.env._t("Schedule Activity"), + res_model: 'mail.activity', + view_mode: 'form', + views: [[false, 'form']], + target: 'new', + context: { + default_res_id: this.chatter.thread.id, + default_res_model: this.chatter.thread.model, + }, + res_id: false, + }; + return this.env.bus.trigger('do-action', { + action, + options: { + on_close: () => { + this.trigger('reload', { keepChanges: true }); + }, + }, + }); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickSendMessage(ev) { + if (!this.chatter.composer) { + return; + } + if (this.chatter.isComposerVisible && !this.chatter.composer.isLog) { + this.chatter.update({ isComposerVisible: false }); + } else { + this.chatter.showSendMessage(); + } + } + +} + +Object.assign(ChatterTopbar, { + components, + props: { + chatterLocalId: String, + }, + template: 'mail.ChatterTopbar', +}); + +return ChatterTopbar; + +}); diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss new file mode 100644 index 00000000..062e5219 --- /dev/null +++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.scss @@ -0,0 +1,106 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ChatterTopbar { + display: flex; + flex-direction: row; + justify-content: space-between; + // We need the +1 to handle the status bar border-bottom. + // The var is called `$o-statusbar-height`, but is used on button, therefore + // doesn't include the border-bottom. + // We use min-height to allow multiples buttons lines on mobile. + min-height: $o-statusbar-height + 1; +} + +.o_ChatterTopbar_actions { + border-bottom: $border-width solid; + display: flex; + flex: 1; + flex-direction: row; + flex-wrap: wrap-reverse; // reverse to ensure send buttons are directly above composer +} + +.o_ChatterTopbar_button { + margin-bottom: -$border-width; /* Needed to allow "overriding" of the bottom border */ +} + +.o_ChatterTopbar_buttonAttachmentsCountLoader { + margin-left: 2px; +} + +.o_ChatterTopbar_buttonCount { + padding-left: 0.25rem; +} + +.o_ChatterTopbar_buttonClose { + display: flex; + flex-shrink: 0; + justify-content: center; + align-items: center; + width: 34px; + height: 34px; +} + +.o_ChatterTopbar_followerListMenu { + display: flex; +} + +.o_ChatterTopbar_rightSection { + display: flex; + flex: 1 0 auto; + justify-content: flex-end; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_ChatterTopbar_actions { + border-color: transparent; + + &.o-has-active-button { + border-color: $border-color; + } +} + +.o_ChatterTopbar_button { + border-radius: 0; + + &:hover { + background-color: gray('300'); + } + + &.o-active { + color: $o-brand-odoo; + background-color: lighten(gray('300'), 7%); + border-right-color: $border-color; + + &:not(:first-of-type), + &:first-of-type.o-bordered { + border-left-color: $border-color; + } + + &.o-bordered { + border-top-color: $border-color; + } + + &:hover { + background-color: gray('300'); + color: $link-hover-color; + } + } +} + +.o_ChatterTopbar_buttonClose { + border-radius: 0 0 10px 10px; + font-size: $font-size-lg; + background-color: gray('700'); + color: gray('100'); + cursor: pointer; + + &:hover { + background-color: gray('600'); + color: $white; + } +} diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml new file mode 100644 index 00000000..5d4029e6 --- /dev/null +++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar.xml @@ -0,0 +1,74 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ChatterTopbar" owl="1"> + <div class="o_ChatterTopbar"> + <t t-if="chatter"> + <div class="o_ChatterTopbar_actions" t-att-class="{'o-has-active-button': chatter.isComposerVisible }"> + <t t-if="chatter.threadView"> + <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonSendMessage" + type="button" + t-att-class="{ + 'o-active': chatter.isComposerVisible and chatter.composer and !chatter.composer.isLog, + 'o-bordered': chatter.hasExternalBorder, + }" + t-att-disabled="chatter.isDisabled" + t-on-click="_onClickSendMessage" + > + Send message + </button> + <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonLogNote" + type="button" + t-att-class="{ + 'o-active': chatter.isComposerVisible and chatter.composer and chatter.composer.isLog, + 'o-bordered': chatter.hasExternalBorder, + }" + t-att-disabled="chatter.isDisabled" + t-on-click="_onClickLogNote" + > + Log note + </button> + </t> + <t t-if="chatter.hasActivities"> + <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonScheduleActivity" type="button" t-att-disabled="chatter.isDisabled" t-on-click="_onClickScheduleActivity"> + <i class="fa fa-clock-o"/> + Schedule activity + </button> + </t> + <div class="o-autogrow"/> + <div class="o_ChatterTopbar_rightSection"> + <button class="btn btn-link o_ChatterTopbar_button o_ChatterTopbar_buttonAttachments" type="button" t-att-disabled="chatter.isDisabled" t-on-click="_onClickAttachments"> + <i class="fa fa-paperclip"/> + <t t-if="chatter.isDisabled or !chatter.isShowingAttachmentsLoading"> + <span class="o_ChatterTopbar_buttonCount o_ChatterTopbar_buttonAttachmentsCount" t-esc="chatter.thread ? chatter.thread.allAttachments.length : 0"/> + </t> + <t t-else=""> + <i class="o_ChatterTopbar_buttonAttachmentsCountLoader fa fa-spinner fa-spin" aria-label="Attachment counter loading..."/> + </t> + </button> + <t t-if="chatter.hasFollowers and chatter.thread"> + <t t-if="chatter.thread.channel_type !== 'chat'"> + <FollowButton + class="o_ChatterTopbar_button o_ChatterTopbar_followButton" + isDisabled="chatter.isDisabled" + threadLocalId="chatter.thread.localId" + /> + </t> + <FollowerListMenu + class="o_ChatterTopbar_button o_ChatterTopbar_followerListMenu" + isDisabled="chatter.isDisabled" + threadLocalId="chatter.thread.localId" + /> + </t> + </div> + </div> + <t t-if="chatter.hasTopbarCloseButton"> + <div class="o_ChatterTopbar_buttonClose" title="Close" t-on-click="_onClickClose"> + <i class="fa fa-times"/> + </div> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/chatter_topbar/chatter_topbar_tests.js b/addons/mail/static/src/components/chatter_topbar/chatter_topbar_tests.js new file mode 100644 index 00000000..3063b389 --- /dev/null +++ b/addons/mail/static/src/components/chatter_topbar/chatter_topbar_tests.js @@ -0,0 +1,730 @@ +odoo.define('mail/static/src/components/chatter_topbar/chatter_topbar_tests.js', function (require) { +'use strict'; + +const components = { + ChatterTopBar: require('mail/static/src/components/chatter_topbar/chatter_topbar.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const { makeTestPromise } = require('web.test_utils'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('chatter_topbar', {}, function () { +QUnit.module('chatter_topbar_tests.js', { + beforeEach() { + beforeEach(this); + + this.createChatterTopbarComponent = async (chatter, otherProps) => { + const props = Object.assign({ chatterLocalId: chatter.localId }, otherProps); + await createRootComponent(this, components.ChatterTopBar, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('base rendering', async function (assert) { + assert.expect(8); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar`).length, + 1, + "should have a chatter topbar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonSendMessage`).length, + 1, + "should have a send message button in chatter menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonLogNote`).length, + 1, + "should have a log note button in chatter menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonScheduleActivity`).length, + 1, + "should have a schedule activity button in chatter menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length, + 1, + "should have an attachments button in chatter menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length, + 0, + "attachments button should not have a loader" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length, + 1, + "attachments button should have a counter" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_followerListMenu`).length, + 1, + "should have a follower menu" + ); +}); + +QUnit.test('base disabled rendering', async function (assert) { + assert.expect(8); + + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar`).length, + 1, + "should have a chatter topbar" + ); + assert.ok( + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).disabled, + "send message button should be disabled" + ); + assert.ok( + document.querySelector(`.o_ChatterTopbar_buttonLogNote`).disabled, + "log note button should be disabled" + ); + assert.ok( + document.querySelector(`.o_ChatterTopbar_buttonScheduleActivity`).disabled, + "schedule activity should be disabled" + ); + assert.ok( + document.querySelector(`.o_ChatterTopbar_buttonAttachments`).disabled, + "attachments button should be disabled" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length, + 0, + "attachments button should not have a loader" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length, + 1, + "attachments button should have a counter" + ); + assert.strictEqual( + document.querySelector(`.o_ChatterTopbar_buttonAttachmentsCount`).textContent, + '0', + "attachments button counter should be 0" + ); +}); + +QUnit.test('attachment loading is delayed', async function (assert) { + assert.expect(4); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start({ + hasTimeControl: true, + loadingBaseDelayDuration: 100, + async mockRPC(route) { + if (route.includes('ir.attachment/search_read')) { + await makeTestPromise(); // simulate long loading + } + return this._super(...arguments); + } + }); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar`).length, + 1, + "should have a chatter topbar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length, + 1, + "should have an attachments button in chatter menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length, + 0, + "attachments button should not have a loader yet" + ); + + await afterNextRender(async () => this.env.testUtils.advanceTime(100)); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length, + 1, + "attachments button should now have a loader" + ); +}); + +QUnit.test('attachment counter while loading attachments', async function (assert) { + assert.expect(4); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start({ + async mockRPC(route) { + if (route.includes('ir.attachment/search_read')) { + await makeTestPromise(); // simulate long loading + } + return this._super(...arguments); + } + }); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar`).length, + 1, + "should have a chatter topbar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length, + 1, + "should have an attachments button in chatter menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length, + 1, + "attachments button should have a loader" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length, + 0, + "attachments button should not have a counter" + ); +}); + +QUnit.test('attachment counter transition when attachments become loaded)', async function (assert) { + assert.expect(7); + + this.data['res.partner'].records.push({ id: 100 }); + const attachmentPromise = makeTestPromise(); + await this.start({ + async mockRPC(route) { + const _super = this._super.bind(this, ...arguments); // limitation of class.js + if (route.includes('ir.attachment/search_read')) { + await attachmentPromise; + } + return _super(); + }, + }); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar`).length, + 1, + "should have a chatter topbar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length, + 1, + "should have an attachments button in chatter menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length, + 1, + "attachments button should have a loader" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length, + 0, + "attachments button should not have a counter" + ); + + await afterNextRender(() => attachmentPromise.resolve()); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length, + 1, + "should have an attachments button in chatter menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCountLoader`).length, + 0, + "attachments button should not have a loader" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length, + 1, + "attachments button should have a counter" + ); +}); + +QUnit.test('attachment counter without attachments', async function (assert) { + assert.expect(4); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar`).length, + 1, + "should have a chatter topbar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length, + 1, + "should have an attachments button in chatter menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length, + 1, + "attachments button should have a counter" + ); + assert.strictEqual( + document.querySelector(`.o_ChatterTopbar_buttonAttachmentsCount`).textContent, + '0', + 'attachment counter should contain "0"' + ); +}); + +QUnit.test('attachment counter with attachments', async function (assert) { + assert.expect(4); + + this.data['res.partner'].records.push({ id: 100 }); + this.data['ir.attachment'].records.push( + { + mimetype: 'text/plain', + name: 'Blah.txt', + res_id: 100, + res_model: 'res.partner', + }, + { + mimetype: 'text/plain', + name: 'Blu.txt', + res_id: 100, + res_model: 'res.partner', + } + ); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar`).length, + 1, + "should have a chatter topbar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachments`).length, + 1, + "should have an attachments button in chatter menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatterTopbar_buttonAttachmentsCount`).length, + 1, + "attachments button should have a counter" + ); + assert.strictEqual( + document.querySelector(`.o_ChatterTopbar_buttonAttachmentsCount`).textContent, + '2', + 'attachment counter should contain "2"' + ); +}); + +QUnit.test('composer state conserved when clicking on another topbar button', async function (assert) { + assert.expect(8); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + + assert.containsOnce( + document.body, + `.o_ChatterTopbar`, + "should have a chatter topbar" + ); + assert.containsOnce( + document.body, + `.o_ChatterTopbar_buttonSendMessage`, + "should have a send message button in chatter menu" + ); + assert.containsOnce( + document.body, + `.o_ChatterTopbar_buttonLogNote`, + "should have a log note button in chatter menu" + ); + assert.containsOnce( + document.body, + `.o_ChatterTopbar_buttonAttachments`, + "should have an attachments button in chatter menu" + ); + + await afterNextRender(() => { + document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click(); + }); + assert.containsOnce( + document.body, + `.o_ChatterTopbar_buttonLogNote.o-active`, + "log button should now be active" + ); + assert.containsNone( + document.body, + `.o_ChatterTopbar_buttonSendMessage.o-active`, + "send message button should not be active" + ); + + await afterNextRender(() => { + document.querySelector(`.o_ChatterTopbar_buttonAttachments`).click(); + }); + assert.containsOnce( + document.body, + `.o_ChatterTopbar_buttonLogNote.o-active`, + "log button should still be active" + ); + assert.containsNone( + document.body, + `.o_ChatterTopbar_buttonSendMessage.o-active`, + "send message button should still be not active" + ); +}); + +QUnit.test('rendering with multiple partner followers', async function (assert) { + assert.expect(7); + + await this.start(); + this.data['res.partner'].records.push({ + id: 100, + message_follower_ids: [1, 2], + }); + this.data['mail.followers'].records.push( + { + // simulate real return from RPC + // (the presence of the key and the falsy value need to be handled correctly) + channel_id: false, + id: 1, + name: "Jean Michang", + partner_id: 12, + res_id: 100, + res_model: 'res.partner', + }, { + // simulate real return from RPC + // (the presence of the key and the falsy value need to be handled correctly) + channel_id: false, + id: 2, + name: "Eden Hazard", + partner_id: 11, + res_id: 100, + res_model: 'res.partner', + }, + ); + const chatter = this.env.models['mail.chatter'].create({ + followerIds: [1, 2], + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + + assert.containsOnce( + document.body, + '.o_FollowerListMenu', + "should have followers menu component" + ); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_buttonFollowers', + "should have followers button" + ); + + await afterNextRender(() => { + document.querySelector('.o_FollowerListMenu_buttonFollowers').click(); + }); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_dropdown', + "followers dropdown should be opened" + ); + assert.containsN( + document.body, + '.o_Follower', + 2, + "exactly two followers should be listed" + ); + assert.containsN( + document.body, + '.o_Follower_name', + 2, + "exactly two follower names should be listed" + ); + assert.strictEqual( + document.querySelectorAll('.o_Follower_name')[0].textContent.trim(), + "Jean Michang", + "first follower is 'Jean Michang'" + ); + assert.strictEqual( + document.querySelectorAll('.o_Follower_name')[1].textContent.trim(), + "Eden Hazard", + "second follower is 'Eden Hazard'" + ); +}); + +QUnit.test('rendering with multiple channel followers', async function (assert) { + assert.expect(7); + + this.data['res.partner'].records.push({ + id: 100, + message_follower_ids: [1, 2], + }); + await this.start(); + this.data['mail.followers'].records.push( + { + channel_id: 11, + id: 1, + name: "channel numero 5", + // simulate real return from RPC + // (the presence of the key and the falsy value need to be handled correctly) + partner_id: false, + res_id: 100, + res_model: 'res.partner', + }, { + channel_id: 12, + id: 2, + name: "channel armstrong", + // simulate real return from RPC + // (the presence of the key and the falsy value need to be handled correctly) + partner_id: false, + res_id: 100, + res_model: 'res.partner', + }, + ); + const chatter = this.env.models['mail.chatter'].create({ + followerIds: [1, 2], + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + + assert.containsOnce( + document.body, + '.o_FollowerListMenu', + "should have followers menu component" + ); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_buttonFollowers', + "should have followers button" + ); + + await afterNextRender(() => { + document.querySelector('.o_FollowerListMenu_buttonFollowers').click(); + }); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_dropdown', + "followers dropdown should be opened" + ); + assert.containsN( + document.body, + '.o_Follower', + 2, + "exactly two followers should be listed" + ); + assert.containsN( + document.body, + '.o_Follower_name', + 2, + "exactly two follower names should be listed" + ); + assert.strictEqual( + document.querySelectorAll('.o_Follower_name')[0].textContent.trim(), + "channel numero 5", + "first follower is 'channel numero 5'" + ); + assert.strictEqual( + document.querySelectorAll('.o_Follower_name')[1].textContent.trim(), + "channel armstrong", + "second follower is 'channel armstrong'" + ); +}); + +QUnit.test('log note/send message switching', async function (assert) { + assert.expect(8); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + assert.containsOnce( + document.body, + '.o_ChatterTopbar_buttonSendMessage', + "should have a 'Send Message' button" + ); + assert.doesNotHaveClass( + document.querySelector('.o_ChatterTopbar_buttonSendMessage'), + 'o-active', + "'Send Message' button should not be active" + ); + assert.containsOnce( + document.body, + '.o_ChatterTopbar_buttonLogNote', + "should have a 'Log Note' button" + ); + assert.doesNotHaveClass( + document.querySelector('.o_ChatterTopbar_buttonLogNote'), + 'o-active', + "'Log Note' button should not be active" + ); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + assert.hasClass( + document.querySelector('.o_ChatterTopbar_buttonSendMessage'), + 'o-active', + "'Send Message' button should be active" + ); + assert.doesNotHaveClass( + document.querySelector('.o_ChatterTopbar_buttonLogNote'), + 'o-active', + "'Log Note' button should not be active" + ); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click() + ); + assert.doesNotHaveClass( + document.querySelector('.o_ChatterTopbar_buttonSendMessage'), + 'o-active', + "'Send Message' button should not be active" + ); + assert.hasClass( + document.querySelector('.o_ChatterTopbar_buttonLogNote'), + 'o-active', + "'Log Note' button should be active" + ); +}); + +QUnit.test('log note toggling', async function (assert) { + assert.expect(4); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + assert.containsOnce( + document.body, + '.o_ChatterTopbar_buttonLogNote', + "should have a 'Log Note' button" + ); + assert.doesNotHaveClass( + document.querySelector('.o_ChatterTopbar_buttonLogNote'), + 'o-active', + "'Log Note' button should not be active" + ); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click() + ); + assert.hasClass( + document.querySelector('.o_ChatterTopbar_buttonLogNote'), + 'o-active', + "'Log Note' button should be active" + ); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonLogNote`).click() + ); + assert.doesNotHaveClass( + document.querySelector('.o_ChatterTopbar_buttonLogNote'), + 'o-active', + "'Log Note' button should not be active" + ); +}); + +QUnit.test('send message toggling', async function (assert) { + assert.expect(4); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start(); + const chatter = this.env.models['mail.chatter'].create({ + threadId: 100, + threadModel: 'res.partner', + }); + await this.createChatterTopbarComponent(chatter); + assert.containsOnce( + document.body, + '.o_ChatterTopbar_buttonSendMessage', + "should have a 'Send Message' button" + ); + assert.doesNotHaveClass( + document.querySelector('.o_ChatterTopbar_buttonSendMessage'), + 'o-active', + "'Send Message' button should not be active" + ); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + assert.hasClass( + document.querySelector('.o_ChatterTopbar_buttonSendMessage'), + 'o-active', + "'Send Message' button should be active" + ); + + await afterNextRender(() => + document.querySelector(`.o_ChatterTopbar_buttonSendMessage`).click() + ); + assert.doesNotHaveClass( + document.querySelector('.o_ChatterTopbar_buttonSendMessage'), + 'o-active', + "'Send Message' button should not be active" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/composer/composer.js b/addons/mail/static/src/components/composer/composer.js new file mode 100644 index 00000000..31654a4f --- /dev/null +++ b/addons/mail/static/src/components/composer/composer.js @@ -0,0 +1,444 @@ +odoo.define('mail/static/src/components/composer/composer.js', function (require) { +'use strict'; + +const components = { + AttachmentList: require('mail/static/src/components/attachment_list/attachment_list.js'), + ComposerSuggestedRecipientList: require('mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js'), + DropZone: require('mail/static/src/components/drop_zone/drop_zone.js'), + EmojisPopover: require('mail/static/src/components/emojis_popover/emojis_popover.js'), + FileUploader: require('mail/static/src/components/file_uploader/file_uploader.js'), + TextInput: require('mail/static/src/components/composer_text_input/composer_text_input.js'), + ThreadTextualTypingStatus: require('mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js'), +}; +const useDragVisibleDropZone = require('mail/static/src/component_hooks/use_drag_visible_dropzone/use_drag_visible_dropzone.js'); +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js'); +const { + isEventHandled, + markEventHandled, +} = require('mail/static/src/utils/utils.js'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class Composer extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + this.isDropZoneVisible = useDragVisibleDropZone(); + useShouldUpdateBasedOnProps({ + compareDepth: { + textInputSendShortcuts: 1, + }, + }); + useStore(props => { + const composer = this.env.models['mail.composer'].get(props.composerLocalId); + const thread = composer && composer.thread; + return { + composer, + composerAttachments: composer ? composer.attachments : [], + composerCanPostMessage: composer && composer.canPostMessage, + composerHasFocus: composer && composer.hasFocus, + composerIsLog: composer && composer.isLog, + composerSubjectContent: composer && composer.subjectContent, + isDeviceMobile: this.env.messaging.device.isMobile, + thread, + threadChannelType: thread && thread.channel_type, // for livechat override + threadDisplayName: thread && thread.displayName, + threadMassMailing: thread && thread.mass_mailing, + threadModel: thread && thread.model, + threadName: thread && thread.name, + }; + }, { + compareDepth: { + composerAttachments: 1, + }, + }); + useUpdate({ func: () => this._update() }); + /** + * Reference of the emoji popover. Useful to include emoji popover as + * contained "inside" the composer. + */ + this._emojisPopoverRef = useRef('emojisPopover'); + /** + * Reference of the file uploader. + * Useful to programmatically prompts the browser file uploader. + */ + this._fileUploaderRef = useRef('fileUploader'); + /** + * Reference of the text input component. + */ + this._textInputRef = useRef('textInput'); + /** + * Reference of the subject input. Useful to set content. + */ + this._subjectRef = useRef('subject'); + this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this); + } + + mounted() { + document.addEventListener('click', this._onClickCaptureGlobal, true); + } + + willUnmount() { + document.removeEventListener('click', this._onClickCaptureGlobal, true); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.composer} + */ + get composer() { + return this.env.models['mail.composer'].get(this.props.composerLocalId); + } + + /** + * Returns whether the given node is self or a children of self, including + * the emoji popover. + * + * @param {Node} node + * @returns {boolean} + */ + contains(node) { + // emoji popover is outside but should be considered inside + const emojisPopover = this._emojisPopoverRef.comp; + if (emojisPopover && emojisPopover.contains(node)) { + return true; + } + return this.el.contains(node); + } + + /** + * Get the current partner image URL. + * + * @returns {string} + */ + get currentPartnerAvatar() { + const avatar = this.env.messaging.currentUser + ? this.env.session.url('/web/image', { + field: 'image_128', + id: this.env.messaging.currentUser.id, + model: 'res.users', + }) + : '/web/static/src/img/user_menu_avatar.png'; + return avatar; + } + + /** + * Focus the composer. + */ + focus() { + if (this.env.messaging.device.isMobile) { + this.el.scrollIntoView(); + } + this._textInputRef.comp.focus(); + } + + /** + * Focusout the composer. + */ + focusout() { + this._textInputRef.comp.focusout(); + } + + /** + * Determine whether composer should display a footer. + * + * @returns {boolean} + */ + get hasFooter() { + return ( + this.props.hasThreadTyping || + this.composer.attachments.length > 0 || + !this.props.isCompact + ); + } + + /** + * Determine whether the composer should display a header. + * + * @returns {boolean} + */ + get hasHeader() { + return ( + (this.props.hasThreadName && this.composer.thread) || + (this.props.hasFollowers && !this.composer.isLog) + ); + } + + /** + * Get an object which is passed to FileUploader component to be used when + * creating attachment. + * + * @returns {Object} + */ + get newAttachmentExtraData() { + return { + composers: [['replace', this.composer]], + }; + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * Post a message in the composer on related thread. + * + * Posting of the message could be aborted if it cannot be posted like if there are attachments + * currently uploading or if there is no text content and no attachments. + * + * @private + */ + async _postMessage() { + if (!this.composer.canPostMessage) { + if (this.composer.hasUploadingAttachment) { + this.env.services['notification'].notify({ + message: this.env._t("Please wait while the file is uploading."), + type: 'warning', + }); + } + return; + } + await this.composer.postMessage(); + // TODO: we might need to remove trigger and use the store to wait for the post rpc to be done + // task-2252858 + this.trigger('o-message-posted'); + } + + /** + * @private + */ + _update() { + if (this.props.isDoFocus) { + this.focus(); + } + if (!this.composer) { + return; + } + if (this._subjectRef.el) { + this._subjectRef.el.value = this.composer.subjectContent; + } + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Called when clicking on attachment button. + * + * @private + */ + _onClickAddAttachment() { + this._fileUploaderRef.comp.openBrowserFileUploader(); + if (!this.env.device.isMobile) { + this.focus(); + } + } + + /** + * Discards the composer when clicking away. + * + * @private + * @param {MouseEvent} ev + */ + _onClickCaptureGlobal(ev) { + if (this.contains(ev.target)) { + return; + } + this.composer.discard(); + } + + /** + * Called when clicking on "expand" button. + * + * @private + */ + _onClickFullComposer() { + this.composer.openFullComposer(); + } + + /** + * Called when clicking on "discard" button. + * + * @private + * @param {MouseEvent} ev + */ + _onClickDiscard(ev) { + this.composer.discard(); + } + + /** + * Called when clicking on "send" button. + * + * @private + */ + _onClickSend() { + this._postMessage(); + this.focus(); + } + + /** + * @private + */ + _onComposerSuggestionClicked() { + this.focus(); + } + + /** + * @private + */ + _onComposerTextInputSendShortcut() { + this._postMessage(); + } + + /** + * Called when some files have been dropped in the dropzone. + * + * @private + * @param {CustomEvent} ev + * @param {Object} ev.detail + * @param {FileList} ev.detail.files + */ + async _onDropZoneFilesDropped(ev) { + ev.stopPropagation(); + await this._fileUploaderRef.comp.uploadFiles(ev.detail.files); + this.isDropZoneVisible.value = false; + } + + /** + * Called when selection an emoji from the emoji popover (from the emoji + * button). + * + * @private + * @param {CustomEvent} ev + * @param {Object} ev.detail + * @param {string} ev.detail.unicode + */ + _onEmojiSelection(ev) { + ev.stopPropagation(); + this._textInputRef.comp.saveStateInStore(); + this.composer.insertIntoTextInput(ev.detail.unicode); + if (!this.env.device.isMobile) { + this.focus(); + } + } + + /** + * @private + */ + _onInputSubject() { + this.composer.update({ subjectContent: this._subjectRef.el.value }); + } + + /** + * @private + * @param {KeyboardEvent} ev + */ + _onKeydown(ev) { + if (ev.key === 'Escape') { + if (isEventHandled(ev, 'ComposerTextInput.closeSuggestions')) { + return; + } + if (isEventHandled(ev, 'Composer.closeEmojisPopover')) { + return; + } + ev.preventDefault(); + this.composer.discard(); + } + } + + /** + * @private + * @param {KeyboardEvent} ev + */ + _onKeydownEmojiButton(ev) { + if (ev.key === 'Escape') { + if (this._emojisPopoverRef.comp) { + this._emojisPopoverRef.comp.close(); + this.focus(); + markEventHandled(ev, 'Composer.closeEmojisPopover'); + } + } + } + + /** + * @private + * @param {CustomEvent} ev + */ + async _onPasteTextInput(ev) { + if (!ev.clipboardData || !ev.clipboardData.files) { + return; + } + await this._fileUploaderRef.comp.uploadFiles(ev.clipboardData.files); + } + +} + +Object.assign(Composer, { + components, + defaultProps: { + hasCurrentPartnerAvatar: true, + hasDiscardButton: false, + hasFollowers: false, + hasSendButton: true, + hasThreadName: false, + hasThreadTyping: false, + isCompact: true, + isDoFocus: false, + isExpandable: false, + }, + props: { + attachmentsDetailsMode: { + type: String, + optional: true, + }, + composerLocalId: String, + hasCurrentPartnerAvatar: Boolean, + hasDiscardButton: Boolean, + hasFollowers: Boolean, + hasMentionSuggestionsBelowPosition: { + type: Boolean, + optional: true, + }, + hasSendButton: Boolean, + hasThreadName: Boolean, + hasThreadTyping: Boolean, + /** + * Determines whether this should become focused. + */ + isDoFocus: Boolean, + showAttachmentsExtensions: { + type: Boolean, + optional: true, + }, + showAttachmentsFilenames: { + type: Boolean, + optional: true, + }, + isCompact: Boolean, + isExpandable: Boolean, + /** + * If set, keyboard shortcuts from text input to send message. + * If not set, will use default values from `ComposerTextInput`. + */ + textInputSendShortcuts: { + type: Array, + element: String, + optional: true, + }, + }, + template: 'mail.Composer', +}); + +return Composer; + +}); diff --git a/addons/mail/static/src/components/composer/composer.scss b/addons/mail/static/src/components/composer/composer.scss new file mode 100644 index 00000000..df695cce --- /dev/null +++ b/addons/mail/static/src/components/composer/composer.scss @@ -0,0 +1,273 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_Composer { + display: grid; + grid-template-areas: + "sidebar-header core-header" + "sidebar-main core-main" + "sidebar-footer core-footer"; + grid-template-columns: auto 1fr; + grid-template-rows: auto 1fr auto; + + &.o-has-current-partner-avatar { + grid-template-columns: 50px 1fr; + padding: map-get($spacers, 3) map-get($spacers, 3) map-get($spacers, 4) map-get($spacers, 1); + + &:not(.o-has-footer) { + padding-bottom: 20px; + } + + &:not(.o-has-header) { + padding-top: 20px; + } + } +} + +.o_Composer_actionButtons { + &.o-composer-is-compact { + display: flex; + } + &:not(.o-composer-is-compact) { + margin-top: 10px; + } +} + +.o_Composer_attachmentList { + flex: 1 1 auto; + + &.o-composer-is-compact { + max-height: 100px; + } + + &:not(.o-composer-is-compact) { + overflow-y: auto; + max-height: 300px; + } +} + +.o_Composer_buttons { + display: flex; + align-items: stretch; + align-self: stretch; + flex: 0 0 auto; + min-height: 41px; // match minimal-height of input, including border width + + &:not(.o-composer-is-compact) { + border: 0; + height: auto; + padding: 0 10px; + width: 100%; + } +} + +.o_Composer_coreFooter { + grid-area: core-footer; + overflow-x: hidden; + + &:not(.o-composer-is-compact) { + margin-left: 0; + } +} + +.o_Composer_coreHeader { + grid-area: core-header; +} + +.o_Composer_coreMain { + grid-area: core-main; + min-width: 0; + display: flex; + flex-wrap: nowrap; + align-items: flex-start; + flex: 1 1 auto; + + &:not(.o-composer-is-compact) { + flex-direction: column; + } +} + +.o_Composer_currentPartnerAvatar { + width: 36px; + height: 36px; +} + +.o_Composer_followers, +.o_Composer_suggestedPartners { + flex: 0 0 100%; + margin-bottom: $o-mail-chatter-gap * 0.5; +} + +.o_Composer_primaryToolButtons { + display: flex; + align-items: center; + + &.o-composer-is-compact { + padding-left: map-get($spacers, 2); + padding-right: map-get($spacers, 2); + } +} + +.o_Composer_sidebarMain { + grid-area: sidebar-main; + justify-self: center; +} + +.o_Composer_subject { + border-top: $border-width solid $border-color; + border-right: $border-width solid $border-color; + border-left: $border-width solid $border-color; + border-radius: $o-mail-rounded-rectangle-border-radius-sm $o-mail-rounded-rectangle-border-radius-sm 0 0; +} + +.o_Composer_subjectInput { + display: flex; + flex: 1; + padding: map-get($spacers, 2) map-get($spacers, 3); + border: 0; +} + +.o_Composer_textInput { + flex: 1 1 auto; + align-self: stretch; + + &:not(.o-composer-is-compact) { + border: 0; + min-height: 40px; + } +} + +.o_Composer_threadTextualTypingStatus { + font-size: $font-size-sm; + overflow: hidden; + text-overflow: ellipsis; + + &:before { + // invisible character so that typing status bar has constant height, regardless of text content. + content: "\200b"; /* unicode zero width space character */ + } +} + +.o_Composer_toolButton { + // keep a margin between the buttons to prevent their focus shadow from overlapping + margin-left: map-get($spacers, 1); + margin-right: map-get($spacers, 1); +} + +.o_Composer_toolButtons { + display: flex; + padding-top: map-get($spacers, 1); + padding-bottom: map-get($spacers, 1); + + &:not(.o-composer-is-compact) { + flex-direction: row; + justify-content: space-between; + flex: 100%; + } +} + +.o_Composer_toolButtonSeparator { + flex: 0 0 auto; + margin-top: map-get($spacers, 2); + margin-bottom: map-get($spacers, 2); +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +// TODO FIXME o-open on the button should be enough. +// Style of button when popover is "open" comes from web.Popover, and we can't +// define a modifier on .o_Composer_button due to not being aware of Popover's +// state in context of template. https://github.com/odoo/owl/issues/693 +.o_is_open .o_Composer_toolButton { + background-color: gray('200'); +} + +.o_Composer { + background-color: lighten(gray('300'), 7%); +} + +.o_Composer_actionButton.o-last.o-has-current-partner-avatar.o-composer-is-compact { + border-radius: 0 $o-mail-rounded-rectangle-border-radius-lg $o-mail-rounded-rectangle-border-radius-lg 0; +} + +.o_Composer_button.o-composer-is-compact { + border-left: none; // overrides bootstrap button style + + :last-child { + border-radius: 0 3px 3px 0; + } +} + +.o_Composer_buttonDiscard { + border: 1px solid lighten(gray('400'), 5%); +} + +.o_Composer_buttons { + border: 0; +} + +.o_Composer_coreMain:not(.o-composer-is-compact) { + background: white; + border: 1px solid lighten(gray('400'), 5%); + + // textarea should be all rounded but only when there is no subject field above + &:not(.o-composer-is-extended) { + border-radius: $o-mail-rounded-rectangle-border-radius-lg; + } +} + +.o_Composer_currentPartnerAvatar { + object-fit: cover; +} + +.o_Composer_textInput { + appearance: none; + outline: none; + background-color: white; + border: 0; + border-top: 1px solid lighten(gray('400'), 5%); + border-bottom: 1px solid lighten(gray('400'), 5%); + border-left: 1px solid lighten(gray('400'), 5%); + + &:not(.o-composer-is-compact) { + border: 0; + border-radius: $o-mail-rounded-rectangle-border-radius-lg; + } + + &.o-has-current-partner-avatar.o-composer-is-compact { + border-radius: $o-mail-rounded-rectangle-border-radius-lg 0 0 $o-mail-rounded-rectangle-border-radius-lg; + } +} + +.o_Composer_toolButton { + border: 0; // overrides bootstrap btn + background-color: white; // overrides bootstrap btn-light + color: gray('600'); // overrides bootstrap btn-light + border-radius: 50%; + + &.o-open { + background-color: gray('200'); + } +} + +.o_Composer_toolButtons { + background-color: white; + border-top: 1px solid lighten(gray('400'), 5%); + border-bottom: 1px solid lighten(gray('400'), 5%); + + &:not(.o-composer-is-compact) { + border-bottom: 0; + border-radius: initial; + } + + &:last-child:not(.o-composer-has-current-partner-avatar) { + border-right: 1px solid lighten(gray('400'), 5%); + } +} + +.o_Composer_toolButtonSeparator { + border-left: 1px solid lighten(gray('400'), 5%); +} diff --git a/addons/mail/static/src/components/composer/composer.xml b/addons/mail/static/src/components/composer/composer.xml new file mode 100644 index 00000000..cc7038d3 --- /dev/null +++ b/addons/mail/static/src/components/composer/composer.xml @@ -0,0 +1,179 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.Composer" owl="1"> + <div class="o_Composer" + t-att-class="{ + 'o-focused': composer and composer.hasFocus, + 'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar, + 'o-has-footer': hasFooter, + 'o-has-header': hasHeader, + 'o-is-compact': props.isCompact, + }" + t-on-keydown="_onKeydown" + > + <t t-if="composer"> + <t t-if="isDropZoneVisible.value"> + <DropZone + class="o_Composer_dropZone" + t-on-o-dropzone-files-dropped="_onDropZoneFilesDropped" + t-ref="dropzone" + /> + </t> + <FileUploader + attachmentLocalIds="composer.attachments.map(attachment => attachment.localId)" + newAttachmentExtraData="newAttachmentExtraData" + t-ref="fileUploader" + /> + <t t-if="hasHeader"> + <div class="o_Composer_coreHeader"> + <t t-if="props.hasThreadName and composer.thread"> + <span class="o_Composer_threadName"> + on: <b><t t-esc="composer.thread.displayName"/></b> + </span> + </t> + <t t-if="props.hasFollowers and !composer.isLog"> + <!-- Text for followers --> + <small class="o_Composer_followers"> + <b class="text-muted">To: </b> + <em class="text-muted">Followers of </em> + <b> + <t t-if="composer.thread and composer.thread.name"> +  "<t t-esc="composer.thread.name"/>" + </t> + <t t-else=""> + this document + </t> + </b> + </small> + <ComposerSuggestedRecipientList + threadLocalId="composer.thread.localId" + /> + </t> + </div> + </t> + <t t-if="composer.thread and composer.thread.model === 'mail.channel' and composer.thread.mass_mailing"> + <div class="o_Composer_subject"> + <input class="o_Composer_subjectInput" type="text" placeholder="Subject" t-on-input="_onInputSubject" t-ref="subject"/> + </div> + </t> + <t t-if="props.hasCurrentPartnerAvatar"> + <div class="o_Composer_sidebarMain"> + <img class="o_Composer_currentPartnerAvatar rounded-circle" t-att-src="currentPartnerAvatar" alt=""/> + </div> + </t> + <div + class="o_Composer_coreMain" + t-att-class="{ + 'o-composer-is-compact': props.isCompact, + 'o-composer-is-extended': composer.thread and composer.thread.mass_mailing, + }" + > + <TextInput + class="o_Composer_textInput" + t-att-class="{ + 'o-composer-is-compact': props.isCompact, + 'o_Composer_textInput-mobile': env.messaging.device.isMobile, + 'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar, + }" + composerLocalId="composer.localId" + hasMentionSuggestionsBelowPosition="props.hasMentionSuggestionsBelowPosition" + isCompact="props.isCompact" + sendShortcuts="props.textInputSendShortcuts" + t-on-o-composer-suggestion-clicked="_onComposerSuggestionClicked" + t-on-o-composer-text-input-send-shortcut="_onComposerTextInputSendShortcut" + t-on-paste="_onPasteTextInput" + t-key="composer.localId" + t-ref="textInput" + /> + <div class="o_Composer_buttons" t-att-class="{ 'o-composer-is-compact': props.isCompact, 'o-mobile': env.messaging.device.isMobile }"> + <div class="o_Composer_toolButtons" + t-att-class="{ + 'o-composer-has-current-partner-avatar': props.hasCurrentPartnerAvatar, + 'o-composer-is-compact': props.isCompact, + }"> + <t t-if="props.isCompact"> + <div class="o_Composer_toolButtonSeparator"/> + </t> + <div class="o_Composer_primaryToolButtons" t-att-class="{ 'o-composer-is-compact': props.isCompact }"> + <Popover position="'top'" t-on-o-emoji-selection="_onEmojiSelection"> + <!-- TODO FIXME o-open not possible to code due to https://github.com/odoo/owl/issues/693 --> + <button class="o_Composer_button o_Composer_buttonEmojis o_Composer_toolButton btn btn-light" + t-att-class="{ + 'o-open': false and state.displayed, + 'o-mobile': env.messaging.device.isMobile, + }" + t-on-keydown="_onKeydownEmojiButton" + > + <i class="fa fa-smile-o"/> + </button> + <t t-set="opened"> + <EmojisPopover t-ref="emojisPopover"/> + </t> + </Popover> + <button class="o_Composer_button o_Composer_buttonAttachment o_Composer_toolButton btn btn-light fa fa-paperclip" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Add attachment" type="button" t-on-click="_onClickAddAttachment"/> + </div> + <t t-if="props.isExpandable"> + <div class="o_Composer_secondaryToolButtons"> + <button class="btn btn-light fa fa-expand o_Composer_button o_Composer_buttonFullComposer o_Composer_toolButton" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" title="Full composer" type="button" t-on-click="_onClickFullComposer"/> + </div> + </t> + </div> + <t t-if="props.isCompact"> + <t t-call="mail.Composer.actionButtons"/> + </t> + </div> + </div> + <t t-if="hasFooter"> + <div class="o_Composer_coreFooter" t-att-class="{ 'o-composer-is-compact': props.isCompact }"> + <t t-if="props.hasThreadTyping"> + <ThreadTextualTypingStatus class="o_Composer_threadTextualTypingStatus" threadLocalId="composer.thread.localId"/> + </t> + <t t-if="composer.attachments.length > 0"> + <AttachmentList + class="o_Composer_attachmentList" + t-att-class="{ 'o-composer-is-compact': props.isCompact }" + areAttachmentsEditable="true" + attachmentsDetailsMode="props.attachmentsDetailsMode" + attachmentsImageSize="'small'" + attachmentLocalIds="composer.attachments.map(attachment => attachment.localId)" + showAttachmentsExtensions="props.showAttachmentsExtensions" + showAttachmentsFilenames="props.showAttachmentsFilenames" + /> + </t> + <t t-if="!props.isCompact"> + <t t-call="mail.Composer.actionButtons"/> + </t> + </div> + </t> + </t> + </div> + </t> + + <t t-name="mail.Composer.actionButtons" owl="1"> + <div class="o_Composer_actionButtons" t-att-class="{ 'o-composer-is-compact': props.isCompact }"> + <t t-if="props.hasSendButton"> + <button class="o_Composer_actionButton o_Composer_button o_Composer_buttonSend btn btn-primary" + t-att-class="{ + 'fa': env.messaging.device.isMobile, + 'fa-paper-plane-o': env.messaging.device.isMobile, + 'o-last': env.messaging.device.isMobile or !props.hasDiscardButton, + 'o-composer-is-compact': props.isCompact, + 'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar, + }" + t-att-disabled="!composer.canPostMessage ? 'disabled' : ''" + type="button" + t-on-click="_onClickSend" + > + <t t-if="!env.messaging.device.isMobile"><t t-if="composer.isLog">Log</t><t t-else="">Send</t></t> + </button> + </t> + <t t-if="!env.messaging.device.isMobile and props.hasDiscardButton"> + <button class="o_Composer_actionButton o-last o_Composer_button o_Composer_buttonDiscard btn btn-secondary" t-att-class="{ 'o-composer-is-compact': props.isCompact, 'o-has-current-partner-avatar': props.hasCurrentPartnerAvatar }" type="button" t-on-click="_onClickDiscard"> + Discard + </button> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/composer/composer_tests.js b/addons/mail/static/src/components/composer/composer_tests.js new file mode 100644 index 00000000..a4ff5978 --- /dev/null +++ b/addons/mail/static/src/components/composer/composer_tests.js @@ -0,0 +1,2153 @@ +odoo.define('mail/static/src/components/composer/composer_tests.js', function (require) { +'use strict'; + +const components = { + Composer: require('mail/static/src/components/composer/composer.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + dragenterFiles, + dropFiles, + nextAnimationFrame, + pasteFiles, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const { + file: { + createFile, + inputFiles, + }, + makeTestPromise, +} = require('web.test_utils'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('composer', {}, function () { +QUnit.module('composer_tests.js', { + beforeEach() { + beforeEach(this); + + this.createComposerComponent = async (composer, otherProps) => { + const props = Object.assign({ composerLocalId: composer.localId }, otherProps); + await createRootComponent(this, components.Composer, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { afterEvent, env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.afterEvent = afterEvent; + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('composer text input: basic rendering when posting a message', async function (assert) { + assert.expect(5); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + composer: [['create', { isLog: false }]], + id: 20, + model: 'res.partner', + }); + await this.createComposerComponent(thread.composer); + assert.strictEqual( + document.querySelectorAll('.o_Composer').length, + 1, + "should have composer in discuss thread" + ); + assert.strictEqual( + document.querySelectorAll('.o_Composer_textInput').length, + 1, + "should have text input inside discuss thread composer" + ); + assert.ok( + document.querySelector('.o_Composer_textInput').classList.contains('o_ComposerTextInput'), + "composer text input of composer should be a ComposerTextIput component" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ComposerTextInput_textarea`).length, + 1, + "should have editable part inside composer text input" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).placeholder, + "Send a message to followers...", + "should have 'Send a message to followers...' as placeholder composer text input" + ); +}); + +QUnit.test('composer text input: basic rendering when logging note', async function (assert) { + assert.expect(5); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + composer: [['create', { isLog: true }]], + id: 20, + model: 'res.partner', + }); + await this.createComposerComponent(thread.composer); + assert.strictEqual( + document.querySelectorAll('.o_Composer').length, + 1, + "should have composer in discuss thread" + ); + assert.strictEqual( + document.querySelectorAll('.o_Composer_textInput').length, + 1, + "should have text input inside discuss thread composer" + ); + assert.ok( + document.querySelector('.o_Composer_textInput').classList.contains('o_ComposerTextInput'), + "composer text input of composer should be a ComposerTextIput component" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ComposerTextInput_textarea`).length, + 1, + "should have editable part inside composer text input" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).placeholder, + "Log an internal note...", + "should have 'Log an internal note...' as placeholder in composer text input if composer is log" + ); +}); + +QUnit.test('composer text input: basic rendering when linked thread is a mail.channel', async function (assert) { + assert.expect(5); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer); + assert.strictEqual( + document.querySelectorAll('.o_Composer').length, + 1, + "should have composer in discuss thread" + ); + assert.strictEqual( + document.querySelectorAll('.o_Composer_textInput').length, + 1, + "should have text input inside discuss thread composer" + ); + assert.ok( + document.querySelector('.o_Composer_textInput').classList.contains('o_ComposerTextInput'), + "composer text input of composer should be a ComposerTextIput component" + ); + assert.strictEqual( + document.querySelectorAll(`.o_ComposerTextInput_textarea`).length, + 1, + "should have editable part inside composer text input" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).placeholder, + "Write something...", + "should have 'Write something...' as placeholder in composer text input if composer is for a 'mail.channel'" + ); +}); + +QUnit.test('mailing channel composer: basic rendering', async function (assert) { + assert.expect(2); + + // channel that is expected to be rendered, with proper mass_mailing + // value and a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20, mass_mailing: true }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer); + assert.containsOnce( + document.body, + '.o_ComposerTextInput', + "Composer should have a text input" + ); + assert.containsOnce( + document.body, + '.o_Composer_subjectInput', + "Composer should have a subject input" + ); +}); + +QUnit.test('add an emoji', async function (assert) { + assert.expect(1); + + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + await afterNextRender(() => + document.querySelector('.o_Composer_buttonEmojis').click() + ); + await afterNextRender(() => + document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "😊", + "emoji should be inserted in the composer text input" + ); + // ensure popover is closed + await nextAnimationFrame(); + await nextAnimationFrame(); + await nextAnimationFrame(); +}); + +QUnit.test('add an emoji after some text', async function (assert) { + assert.expect(2); + + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "Blabla"); + }); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "Blabla", + "composer text input should have text only initially" + ); + + await afterNextRender(() => document.querySelector('.o_Composer_buttonEmojis').click()); + await afterNextRender(() => + document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "Blabla😊", + "emoji should be inserted after the text" + ); + // ensure popover is closed + await nextAnimationFrame(); + await nextAnimationFrame(); + await nextAnimationFrame(); +}); + +QUnit.test('add emoji replaces (keyboard) text selection', async function (assert) { + assert.expect(2); + + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + const composerTextInputTextArea = document.querySelector(`.o_ComposerTextInput_textarea`); + await afterNextRender(() => { + composerTextInputTextArea.focus(); + document.execCommand('insertText', false, "Blabla"); + }); + assert.strictEqual( + composerTextInputTextArea.value, + "Blabla", + "composer text input should have text only initially" + ); + + // simulate selection of all the content by keyboard + composerTextInputTextArea.setSelectionRange(0, composerTextInputTextArea.value.length); + + // select emoji + await afterNextRender(() => document.querySelector('.o_Composer_buttonEmojis').click()); + await afterNextRender(() => + document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "😊", + "whole text selection should have been replaced by emoji" + ); + // ensure popover is closed + await nextAnimationFrame(); + await nextAnimationFrame(); + await nextAnimationFrame(); +}); + +QUnit.test('display canned response suggestions on typing ":"', async function (assert) { + assert.expect(2); + + this.data['mail.shortcode'].records.push({ + id: 11, + source: "hello", + substitution: "Hello! How are you?", + }); + + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestionList_list', + "Canned responses suggestions list should not be present" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, ":"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.hasClass( + document.querySelector('.o_ComposerSuggestionList_list'), + 'show', + "should display canned response suggestions on typing ':'" + ); +}); + +QUnit.test('use a canned response', async function (assert) { + assert.expect(4); + + this.data['mail.shortcode'].records.push({ + id: 11, + source: "hello", + substitution: "Hello! How are you?", + }); + + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestionList_list', + "canned response suggestions list should not be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "text content of composer should be empty initially" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, ":"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "should have a canned response suggestion" + ); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "Hello! How are you? ", + "text content of composer should have canned response + additional whitespace afterwards" + ); +}); + +QUnit.test('use a canned response some text', async function (assert) { + assert.expect(5); + + this.data['mail.shortcode'].records.push({ + id: 11, + source: "hello", + substitution: "Hello! How are you?", + }); + + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestion', + "canned response suggestions list should not be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "text content of composer should be empty initially" + ); + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + await afterNextRender(() => + document.execCommand('insertText', false, "bluhbluh ") + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "bluhbluh ", + "text content of composer should have content" + ); + await afterNextRender(() => { + document.execCommand('insertText', false, ":"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "should have a canned response suggestion" + ); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "bluhbluh Hello! How are you? ", + "text content of composer should have previous content + canned response substitution + additional whitespace afterwards" + ); +}); + +QUnit.test('add an emoji after a canned response', async function (assert) { + assert.expect(5); + + this.data['mail.shortcode'].records.push({ + id: 11, + source: "hello", + substitution: "Hello! How are you?", + }); + + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestion', + "canned response suggestions list should not be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "text content of composer should be empty initially" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, ":"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "should have a canned response suggestion" + ); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "Hello! How are you? ", + "text content of composer should have previous content + canned response substitution + additional whitespace afterwards" + ); + + // select emoji + await afterNextRender(() => + document.querySelector('.o_Composer_buttonEmojis').click() + ); + await afterNextRender(() => + document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "Hello! How are you? 😊", + "text content of composer should have previous canned response substitution and selected emoji just after" + ); + // ensure popover is closed + await nextAnimationFrame(); +}); + +QUnit.test('display channel mention suggestions on typing "#"', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ + id: 7, + name: "General", + public: "groups", + }); + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestionList_list', + "channel mention suggestions list should not be present" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "#"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.hasClass( + document.querySelector('.o_ComposerSuggestionList_list'), + 'show', + "should display channel mention suggestions on typing '#'" + ); +}); + +QUnit.test('mention a channel', async function (assert) { + assert.expect(4); + + this.data['mail.channel'].records.push({ + id: 7, + name: "General", + public: "groups", + }); + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestionList_list', + "channel mention suggestions list should not be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "text content of composer should be empty initially" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "#"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "should have a channel mention suggestion" + ); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "#General ", + "text content of composer should have mentioned channel + additional whitespace afterwards" + ); +}); + +QUnit.test('mention a channel after some text', async function (assert) { + assert.expect(5); + + this.data['mail.channel'].records.push({ + id: 7, + name: "General", + public: "groups", + }); + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestion', + "channel mention suggestions list should not be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "text content of composer should be empty initially" + ); + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + await afterNextRender(() => + document.execCommand('insertText', false, "bluhbluh ") + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "bluhbluh ", + "text content of composer should have content" + ); + await afterNextRender(() => { + document.execCommand('insertText', false, "#"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "should have a channel mention suggestion" + ); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "bluhbluh #General ", + "text content of composer should have previous content + mentioned channel + additional whitespace afterwards" + ); +}); + +QUnit.test('add an emoji after a channel mention', async function (assert) { + assert.expect(5); + + this.data['mail.channel'].records.push({ + id: 7, + name: "General", + public: "groups", + }); + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestion', + "mention suggestions list should not be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "text content of composer should be empty initially" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "#"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "should have a channel mention suggestion" + ); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "#General ", + "text content of composer should have previous content + mentioned channel + additional whitespace afterwards" + ); + + // select emoji + await afterNextRender(() => + document.querySelector('.o_Composer_buttonEmojis').click() + ); + await afterNextRender(() => + document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "#General 😊", + "text content of composer should have previous channel mention and selected emoji just after" + ); + // ensure popover is closed + await nextAnimationFrame(); +}); + +QUnit.test('display command suggestions on typing "/"', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ channel_type: 'channel', id: 20 }); + this.data['mail.channel_command'].records.push( + { + channel_types: ['channel'], + help: "List users in the current channel", + name: "who", + }, + ); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestionList_list', + "command suggestions list should not be present" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "/"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.hasClass( + document.querySelector('.o_ComposerSuggestionList_list'), + 'show', + "should display command suggestions on typing '/'" + ); +}); + +QUnit.test('do not send typing notification on typing "/" command', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ id: 20 }); + this.data['mail.channel_command'].records.push({ + channel_types: ['channel'], + help: "List users in the current channel", + name: "who", + }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'notify_typing') { + assert.step(`notify_typing:${args.kwargs.is_typing}`); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer, { hasThreadTyping: true }); + + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "/"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.verifySteps([], "No rpc done"); +}); + +QUnit.test('do not send typing notification on typing after selecting suggestion from "/" command', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ id: 20 }); + this.data['mail.channel_command'].records.push({ + channel_types: ['channel'], + help: "List users in the current channel", + name: "who", + }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'notify_typing') { + assert.step(`notify_typing:${args.kwargs.is_typing}`); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer, { hasThreadTyping: true }); + + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "/"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, " is user?"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.verifySteps([], "No rpc done"); +}); + +QUnit.test('use a command for a specific channel type', async function (assert) { + assert.expect(4); + + this.data['mail.channel'].records.push({ channel_type: 'channel', id: 20 }); + this.data['mail.channel_command'].records.push( + { + channel_types: ['channel'], + help: "List users in the current channel", + name: "who", + }, + ); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestionList_list', + "command suggestions list should not be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "text content of composer should be empty initially" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "/"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "should have a command suggestion" + ); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "/who ", + "text content of composer should have used command + additional whitespace afterwards" + ); +}); + +QUnit.test("channel with no commands should not prompt any command suggestions on typing /", async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ channel_type: 'chat', id: 20 }); + this.data['mail.channel_command'].records.push( + { + channel_types: ['channel'], + help: "bla bla bla", + name: "who", + }, + ); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer); + await afterNextRender(() => { + document.querySelector('.o_ComposerTextInput_textarea').focus(); + document.execCommand('insertText', false, "/"); + const composer_text_input = document.querySelector('.o_ComposerTextInput_textarea'); + composer_text_input.dispatchEvent(new window.KeyboardEvent('keydown')); + composer_text_input.dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsNone( + document.body, + '.o_ComposerSuggestion', + "should not prompt (command) suggestion after typing / (reason: no channel commands in chat channels)" + ); +}); + +QUnit.test('command suggestion should only open if command is the first character', async function (assert) { + assert.expect(4); + + this.data['mail.channel'].records.push({ channel_type: 'channel', id: 20 }); + this.data['mail.channel_command'].records.push( + { + channel_types: ['channel'], + help: "List users in the current channel", + name: "who", + }, + ); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer); + assert.containsNone( + document.body, + '.o_ComposerSuggestion', + "command suggestions list should not be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "text content of composer should be empty initially" + ); + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + await afterNextRender(() => + document.execCommand('insertText', false, "bluhbluh ") + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "bluhbluh ", + "text content of composer should have content" + ); + await afterNextRender(() => { + document.execCommand('insertText', false, "/"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsNone( + document.body, + '.o_ComposerSuggestion', + "should not have a command suggestion" + ); +}); + +QUnit.test('add an emoji after a command', async function (assert) { + assert.expect(5); + + this.data['mail.channel'].records.push({ channel_type: 'channel', id: 20 }); + this.data['mail.channel_command'].records.push( + { + channel_types: ['channel'], + help: "List users in the current channel", + name: "who", + }, + ); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestion', + "command suggestions list should not be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "text content of composer should be empty initially" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "/"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "should have a command suggestion" + ); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "/who ", + "text content of composer should have previous content + used command + additional whitespace afterwards" + ); + + // select emoji + await afterNextRender(() => + document.querySelector('.o_Composer_buttonEmojis').click() + ); + await afterNextRender(() => + document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "/who 😊", + "text content of composer should have previous command and selected emoji just after" + ); + // ensure popover is closed + await nextAnimationFrame(); +}); + +QUnit.test('display partner mention suggestions on typing "@"', async function (assert) { + assert.expect(3); + + this.data['res.partner'].records.push({ + id: 11, + email: "testpartner@odoo.com", + name: "TestPartner", + }); + this.data['res.partner'].records.push({ + id: 12, + email: "testpartner2@odoo.com", + name: "TestPartner2", + }); + this.data['res.users'].records.push({ + partner_id: 11, + }); + + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestionList_list', + "mention suggestions list should not be present" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "@"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.hasClass( + document.querySelector('.o_ComposerSuggestionList_list'), + 'show', + "should display mention suggestions on typing '@'" + ); + assert.containsOnce( + document.body, + '.dropdown-divider', + "should have a separator" + ); +}); + +QUnit.test('mention a partner', async function (assert) { + assert.expect(4); + + this.data['res.partner'].records.push({ + email: "testpartner@odoo.com", + name: "TestPartner", + }); + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestionList_list', + "mention suggestions list should not be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "text content of composer should be empty initially" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "@"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + document.execCommand('insertText', false, "T"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + document.execCommand('insertText', false, "e"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "should have a mention suggestion" + ); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "@TestPartner ", + "text content of composer should have mentioned partner + additional whitespace afterwards" + ); +}); + +QUnit.test('mention a partner after some text', async function (assert) { + assert.expect(5); + + this.data['res.partner'].records.push({ + email: "testpartner@odoo.com", + name: "TestPartner", + }); + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestion', + "mention suggestions list should not be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "text content of composer should be empty initially" + ); + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + await afterNextRender(() => + document.execCommand('insertText', false, "bluhbluh ") + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "bluhbluh ", + "text content of composer should have content" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "@"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + document.execCommand('insertText', false, "T"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + document.execCommand('insertText', false, "e"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "should have a mention suggestion" + ); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "bluhbluh @TestPartner ", + "text content of composer should have previous content + mentioned partner + additional whitespace afterwards" + ); +}); + +QUnit.test('add an emoji after a partner mention', async function (assert) { + assert.expect(5); + + this.data['res.partner'].records.push({ + email: "testpartner@odoo.com", + name: "TestPartner", + }); + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + + assert.containsNone( + document.body, + '.o_ComposerSuggestion', + "mention suggestions list should not be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "text content of composer should be empty initially" + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "@"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + document.execCommand('insertText', false, "T"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + document.execCommand('insertText', false, "e"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "should have a mention suggestion" + ); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "@TestPartner ", + "text content of composer should have previous content + mentioned partner + additional whitespace afterwards" + ); + + // select emoji + await afterNextRender(() => + document.querySelector('.o_Composer_buttonEmojis').click() + ); + await afterNextRender(() => + document.querySelector('.o_EmojisPopover_emoji[data-unicode="😊"]').click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value.replace(/\s/, " "), + "@TestPartner 😊", + "text content of composer should have previous mention and selected emoji just after" + ); + // ensure popover is closed + await nextAnimationFrame(); +}); + +QUnit.test('composer: add an attachment', async function (assert) { + assert.expect(2); + + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer, { attachmentsDetailsMode: 'card' }); + const file = await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text.txt', + }); + await afterNextRender(() => + inputFiles( + document.querySelector('.o_FileUploader_input'), + [file] + ) + ); + assert.ok( + document.querySelector('.o_Composer_attachmentList'), + "should have an attachment list" + ); + assert.ok( + document.querySelector(`.o_Composer .o_Attachment`), + "should have an attachment" + ); +}); + +QUnit.test('composer: drop attachments', async function (assert) { + assert.expect(4); + + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + const files = [ + await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text.txt', + }), + await createFile({ + content: 'hello, worlduh', + contentType: 'text/plain', + name: 'text2.txt', + }), + ]; + await afterNextRender(() => dragenterFiles(document.querySelector('.o_Composer'))); + assert.ok( + document.querySelector('.o_Composer_dropZone'), + "should have a drop zone" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Composer .o_Attachment`).length, + 0, + "should have no attachment before files are dropped" + ); + + await afterNextRender(() => + dropFiles( + document.querySelector('.o_Composer_dropZone'), + files + ) + ); + assert.strictEqual( + document.querySelectorAll(`.o_Composer .o_Attachment`).length, + 2, + "should have 2 attachments in the composer after files dropped" + ); + + await afterNextRender(() => dragenterFiles(document.querySelector('.o_Composer'))); + await afterNextRender(async () => + dropFiles( + document.querySelector('.o_Composer_dropZone'), + [ + await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text3.txt', + }) + ] + ) + ); + assert.strictEqual( + document.querySelectorAll(`.o_Composer .o_Attachment`).length, + 3, + "should have 3 attachments in the box after files dropped" + ); +}); + +QUnit.test('composer: paste attachments', async function (assert) { + assert.expect(2); + + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + const files = [ + await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text.txt', + }) + ]; + assert.strictEqual( + document.querySelectorAll(`.o_Composer .o_Attachment`).length, + 0, + "should not have any attachment in the composer before paste" + ); + + await afterNextRender(() => + pasteFiles(document.querySelector('.o_ComposerTextInput'), files) + ); + assert.strictEqual( + document.querySelectorAll(`.o_Composer .o_Attachment`).length, + 1, + "should have 1 attachment in the composer after paste" + ); +}); + +QUnit.test('send message when enter is pressed while holding ctrl key (this shortcut is available)', async function (assert) { + // Note that test doesn't assert ENTER makes no newline, because this + // default browser cannot be simulated with just dispatching + // programmatically crafted events... + assert.expect(5); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_post') { + assert.step('message_post'); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer, { + textInputSendShortcuts: ['ctrl-enter'], + }); + // Type message + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "test message"); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "test message", + "should have inserted text content in editable" + ); + + await afterNextRender(() => { + const enterEvent = new window.KeyboardEvent('keydown', { key: 'Enter' }); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(enterEvent); + }); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "test message", + "should have inserted text content in editable as message has not been posted" + ); + + // Send message with ctrl+enter + await afterNextRender(() => + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown', { ctrlKey: true, key: 'Enter' })) + ); + assert.verifySteps(['message_post']); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "should have no content in composer input as message has been posted" + ); +}); + +QUnit.test('send message when enter is pressed while holding meta key (this shortcut is available)', async function (assert) { + // Note that test doesn't assert ENTER makes no newline, because this + // default browser cannot be simulated with just dispatching + // programmatically crafted events... + assert.expect(5); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_post') { + assert.step('message_post'); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer, { + textInputSendShortcuts: ['meta-enter'], + }); + // Type message + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "test message"); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "test message", + "should have inserted text content in editable" + ); + + await afterNextRender(() => { + const enterEvent = new window.KeyboardEvent('keydown', { key: 'Enter' }); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(enterEvent); + }); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "test message", + "should have inserted text content in editable as message has not been posted" + ); + + // Send message with meta+enter + await afterNextRender(() => + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', metaKey: true })) + ); + assert.verifySteps(['message_post']); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "should have no content in composer input as message has been posted" + ); +}); + +QUnit.test('composer text input cleared on message post', async function (assert) { + assert.expect(4); + + // channel that is expected to be rendered + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_post') { + assert.step('message_post'); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer); + // Type message + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "test message"); + }); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "test message", + "should have inserted text content in editable" + ); + + // Send message + await afterNextRender(() => + document.querySelector('.o_Composer_buttonSend').click() + ); + assert.verifySteps(['message_post']); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "should have no content in composer input after posting message" + ); +}); + +QUnit.test('composer inputs cleared on message post in composer of a mailing channel', async function (assert) { + assert.expect(10); + + // channel that is expected to be rendered, with proper mass_mailing + // value and a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20, mass_mailing: true }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_post') { + assert.step('message_post'); + assert.ok( + 'body' in args.kwargs, + "body should be posted with the message" + ); + assert.strictEqual( + args.kwargs.body, + "test message", + "posted body should be the one typed in text input" + ); + assert.ok( + 'subject' in args.kwargs, + "subject should be posted with the message" + ); + assert.strictEqual( + args.kwargs.subject, + "test subject", + "posted subject should be the one typed in subject input" + ); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer); + // Type message + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "test message"); + }); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "test message", + "should have inserted text content in editable" + ); + + await afterNextRender(() => { + document.querySelector(`.o_Composer_subjectInput`).focus(); + document.execCommand('insertText', false, "test subject"); + }); + assert.strictEqual( + document.querySelector(`.o_Composer_subjectInput`).value, + "test subject", + "should have inserted text content in input" + ); + + // Send message + await afterNextRender(() => + document.querySelector('.o_Composer_buttonSend').click() + ); + assert.verifySteps(['message_post']); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "should have no content in composer input after posting message" + ); + assert.strictEqual( + document.querySelector(`.o_Composer_subjectInput`).value, + "", + "should have no content in composer subject input after posting message" + ); +}); + +QUnit.test('composer with thread typing notification status', async function (assert) { + assert.expect(2); + + // channel that is expected to be rendered + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer, { hasThreadTyping: true }); + + assert.containsOnce( + document.body, + '.o_Composer_threadTextualTypingStatus', + "Composer should have a thread textual typing status bar" + ); + assert.strictEqual( + document.body.querySelector('.o_Composer_threadTextualTypingStatus').textContent, + "", + "By default, thread textual typing status bar should be empty" + ); +}); + +QUnit.test('current partner notify is typing to other thread members', async function (assert) { + assert.expect(2); + + // channel that is expected to be rendered + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'notify_typing') { + assert.step(`notify_typing:${args.kwargs.is_typing}`); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer, { hasThreadTyping: true }); + + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "a"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'a' })); + + assert.verifySteps( + ['notify_typing:true'], + "should have notified current partner typing status" + ); +}); + +QUnit.test('current partner is typing should not translate on textual typing status', async function (assert) { + assert.expect(3); + + // channel that is expected to be rendered + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + await this.start({ + hasTimeControl: true, + async mockRPC(route, args) { + if (args.method === 'notify_typing') { + assert.step(`notify_typing:${args.kwargs.is_typing}`); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer, { hasThreadTyping: true }); + + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "a"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'a' })); + + assert.verifySteps( + ['notify_typing:true'], + "should have notified current partner typing status" + ); + + await nextAnimationFrame(); + assert.strictEqual( + document.body.querySelector('.o_Composer_threadTextualTypingStatus').textContent, + "", + "Thread textual typing status bar should not display current partner is typing" + ); +}); + +QUnit.test('current partner notify no longer is typing to thread members after 5 seconds inactivity', async function (assert) { + assert.expect(4); + + // channel that is expected to be rendered + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + await this.start({ + hasTimeControl: true, + async mockRPC(route, args) { + if (args.method === 'notify_typing') { + assert.step(`notify_typing:${args.kwargs.is_typing}`); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer, { hasThreadTyping: true }); + + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "a"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'a' })); + + assert.verifySteps( + ['notify_typing:true'], + "should have notified current partner is typing" + ); + + await this.env.testUtils.advanceTime(5 * 1000); + assert.verifySteps( + ['notify_typing:false'], + "should have notified current partner no longer is typing (inactive for 5 seconds)" + ); +}); + +QUnit.test('current partner notify is typing again to other members every 50s of long continuous typing', async function (assert) { + assert.expect(4); + + // channel that is expected to be rendered + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + await this.start({ + hasTimeControl: true, + async mockRPC(route, args) { + if (args.method === 'notify_typing') { + assert.step(`notify_typing:${args.kwargs.is_typing}`); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer, { hasThreadTyping: true }); + + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "a"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'a' })); + assert.verifySteps( + ['notify_typing:true'], + "should have notified current partner is typing" + ); + + // simulate current partner typing a character every 2.5 seconds for 50 seconds straight. + let totalTimeElapsed = 0; + const elapseTickTime = 2.5 * 1000; + while (totalTimeElapsed < 50 * 1000) { + document.execCommand('insertText', false, "a"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'a' })); + totalTimeElapsed += elapseTickTime; + await this.env.testUtils.advanceTime(elapseTickTime); + } + + assert.verifySteps( + ['notify_typing:true'], + "should have notified current partner is still typing after 50s of straight typing" + ); +}); + +QUnit.test('composer: send button is disabled if attachment upload is not finished', async function (assert) { + assert.expect(8); + + const attachmentUploadedPromise = makeTestPromise(); + await this.start({ + async mockFetch(resource, init) { + const res = this._super(...arguments); + if (resource === '/web/binary/upload_attachment') { + await attachmentUploadedPromise; + } + return res; + } + }); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + const file = await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text.txt', + }); + await afterNextRender(() => + inputFiles( + document.querySelector('.o_FileUploader_input'), + [file] + ) + ); + assert.containsOnce( + document.body, + '.o_Attachment', + "should have an attachment after a file has been input" + ); + assert.containsOnce( + document.body, + '.o_Attachment.o-temporary', + "attachment displayed is being uploaded" + ); + assert.containsOnce( + document.body, + '.o_Composer_buttonSend', + "composer send button should be displayed" + ); + assert.ok( + !!document.querySelector('.o_Composer_buttonSend').attributes.disabled, + "composer send button should be disabled as attachment is not yet uploaded" + ); + + // simulates attachment finishes uploading + await afterNextRender(() => attachmentUploadedPromise.resolve()); + assert.containsOnce( + document.body, + '.o_Attachment', + "should have only one attachment" + ); + assert.containsNone( + document.body, + '.o_Attachment.o-temporary', + "attachment displayed should be uploaded" + ); + assert.containsOnce( + document.body, + '.o_Composer_buttonSend', + "composer send button should still be present" + ); + assert.ok( + !document.querySelector('.o_Composer_buttonSend').attributes.disabled, + "composer send button should be enabled as attachment is now uploaded" + ); +}); + +QUnit.test('warning on send with shortcut when attempting to post message with still-uploading attachments', async function (assert) { + assert.expect(7); + + await this.start({ + async mockFetch(resource, init) { + const res = this._super(...arguments); + if (resource === '/web/binary/upload_attachment') { + // simulates attachment is never finished uploading + await new Promise(() => {}); + } + return res; + }, + services: { + notification: { + notify(params) { + assert.strictEqual( + params.message, + "Please wait while the file is uploading.", + "notification content should be about the uploading file" + ); + assert.strictEqual( + params.type, + 'warning', + "notification should be a warning" + ); + assert.step('notification'); + } + } + }, + }); + const thread = this.env.models['mail.thread'].create({ + composer: [['create', { isLog: false }]], + id: 20, + model: 'res.partner', + }); + await this.createComposerComponent(thread.composer, { + textInputSendShortcuts: ['enter'], + }); + const file = await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text.txt', + }); + await afterNextRender(() => + inputFiles( + document.querySelector('.o_FileUploader_input'), + [file] + ) + ); + assert.containsOnce( + document.body, + '.o_Attachment', + "should have only one attachment" + ); + assert.containsOnce( + document.body, + '.o_Attachment.o-temporary', + "attachment displayed is being uploaded" + ); + assert.containsOnce( + document.body, + '.o_Composer_buttonSend', + "composer send button should be displayed" + ); + + // Try to send message + document + .querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' })); + assert.verifySteps( + ['notification'], + "should have triggered a notification for inability to post message at the moment (some attachments are still being uploaded)" + ); +}); + +QUnit.test('remove an attachment from composer does not need any confirmation', async function (assert) { + assert.expect(3); + + await this.start(); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + const file = await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text.txt', + }); + await afterNextRender(() => + inputFiles( + document.querySelector('.o_FileUploader_input'), + [file] + ) + ); + assert.containsOnce( + document.body, + '.o_Composer_attachmentList', + "should have an attachment list" + ); + assert.containsOnce( + document.body, + '.o_Composer .o_Attachment', + "should have only one attachment" + ); + + await afterNextRender(() => + document.querySelector('.o_Attachment_asideItemUnlink').click() + ); + assert.containsNone( + document.body, + '.o_Composer .o_Attachment', + "should not have any attachment left after unlinking the only one" + ); +}); + +QUnit.test('remove an uploading attachment', async function (assert) { + assert.expect(4); + + await this.start({ + async mockFetch(resource, init) { + const res = this._super(...arguments); + if (resource === '/web/binary/upload_attachment') { + // simulates uploading indefinitely + await new Promise(() => {}); + } + return res; + } + }); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + const file = await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text.txt', + }); + await afterNextRender(() => + inputFiles( + document.querySelector('.o_FileUploader_input'), + [file] + ) + ); + assert.containsOnce( + document.body, + '.o_Composer_attachmentList', + "should have an attachment list" + ); + assert.containsOnce( + document.body, + '.o_Composer .o_Attachment', + "should have only one attachment" + ); + assert.containsOnce( + document.body, + '.o_Composer .o_Attachment.o-temporary', + "should have an uploading attachment" + ); + + await afterNextRender(() => + document.querySelector('.o_Attachment_asideItemUnlink').click()); + assert.containsNone( + document.body, + '.o_Composer .o_Attachment', + "should not have any attachment left after unlinking temporary one" + ); +}); + +QUnit.test('remove an uploading attachment aborts upload', async function (assert) { + assert.expect(1); + + await this.start({ + async mockFetch(resource, init) { + const res = this._super(...arguments); + if (resource === '/web/binary/upload_attachment') { + // simulates uploading indefinitely + await new Promise(() => {}); + } + return res; + } + }); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + const file = await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text.txt', + }); + await afterNextRender(() => + inputFiles( + document.querySelector('.o_FileUploader_input'), + [file] + ) + ); + assert.containsOnce( + document.body, + '.o_Attachment', + "should contain an attachment" + ); + const attachmentLocalId = document.querySelector('.o_Attachment').dataset.attachmentLocalId; + + await this.afterEvent({ + eventName: 'o-attachment-upload-abort', + func: () => { + document.querySelector('.o_Attachment_asideItemUnlink').click(); + }, + message: "attachment upload request should have been aborted", + predicate: ({ attachment }) => { + return attachment.localId === attachmentLocalId; + }, + }); +}); + +QUnit.test("basic rendering when sending a message to the followers and thread doesn't have a name", async function (assert) { + assert.expect(1); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + composer: [['create', { isLog: false }]], + id: 20, + model: 'res.partner', + }); + await this.createComposerComponent(thread.composer, { hasFollowers: true }); + assert.strictEqual( + document.querySelector('.o_Composer_followers').textContent.replace(/\s+/g, ''), + "To:Followersofthisdocument", + "Composer should display \"To: Followers of this document\" if the thread as no name." + ); +}); + +QUnit.test('send message only once when button send is clicked twice quickly', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_post') { + assert.step('message_post'); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer); + // Type message + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "test message"); + }); + + await afterNextRender(() => { + document.querySelector(`.o_Composer_buttonSend`).click(); + document.querySelector(`.o_Composer_buttonSend`).click(); + }); + assert.verifySteps( + ['message_post'], + "The message has been posted only once" + ); +}); + +QUnit.test('send message only once when enter is pressed twice quickly', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_post') { + assert.step('message_post'); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createComposerComponent(thread.composer, { + textInputSendShortcuts: ['enter'], + }); + // Type message + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "test message"); + }); + await afterNextRender(() => { + const enterEvent = new window.KeyboardEvent('keydown', { key: 'Enter' }); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(enterEvent); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(enterEvent); + }); + assert.verifySteps( + ['message_post'], + "The message has been posted only once" + ); +}); + +QUnit.test('[technical] does not crash when an attachment is removed before its upload starts', async function (assert) { + // Uploading multiple files uploads attachments one at a time, this test + // ensures that there is no crash when an attachment is destroyed before its + // upload started. + assert.expect(1); + + // Promise to block attachment uploading + const uploadPromise = makeTestPromise(); + await this.start({ + async mockFetch(resource) { + const _super = this._super.bind(this, ...arguments); + if (resource === '/web/binary/upload_attachment') { + await uploadPromise; + } + return _super(); + }, + }); + const composer = this.env.models['mail.composer'].create(); + await this.createComposerComponent(composer); + const file1 = await createFile({ + name: 'text1.txt', + content: 'hello, world', + contentType: 'text/plain', + }); + const file2 = await createFile({ + name: 'text2.txt', + content: 'hello, world', + contentType: 'text/plain', + }); + await afterNextRender(() => + inputFiles( + document.querySelector('.o_FileUploader_input'), + [file1, file2] + ) + ); + await afterNextRender(() => { + Array.from(document.querySelectorAll('div')) + .find(el => el.textContent === 'text2.txt') + .closest('.o_Attachment') + .querySelector('.o_Attachment_asideItemUnlink') + .click(); + } + ); + // Simulates the completion of the upload of the first attachment + uploadPromise.resolve(); + assert.containsOnce( + document.body, + '.o_Attachment:contains("text1.txt")', + "should only have the first attachment after cancelling the second attachment" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js new file mode 100644 index 00000000..efedf662 --- /dev/null +++ b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js @@ -0,0 +1,158 @@ +odoo.define('mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js'); + +const { FormViewDialog } = require('web.view_dialogs'); +const { ComponentAdapter } = require('web.OwlCompatibility'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class FormViewDialogComponentAdapter extends ComponentAdapter { + + renderWidget() { + // Ensure the dialog is properly reconstructed. Without this line, it is + // impossible to open the dialog again after having it closed a first + // time, because the DOM of the dialog has disappeared. + return this.willStart(); + } + +} + +const components = { + FormViewDialogComponentAdapter, +}; + +class ComposerSuggestedRecipient extends Component { + + constructor(...args) { + super(...args); + this.id = _.uniqueId('o_ComposerSuggestedRecipient_'); + useShouldUpdateBasedOnProps(); + useStore(props => { + const suggestedRecipientInfo = this.env.models['mail.suggested_recipient_info'].get(props.suggestedRecipientLocalId); + const partner = suggestedRecipientInfo && suggestedRecipientInfo.partner; + return { + partner: partner && partner.__state, + suggestedRecipientInfo: suggestedRecipientInfo && suggestedRecipientInfo.__state, + }; + }); + useUpdate({ func: () => this._update() }); + /** + * Form view dialog class. Useful to reference it in the template. + */ + this.FormViewDialog = FormViewDialog; + /** + * Reference of the checkbox. Useful to know whether it was checked or + * not, to properly update the corresponding state in the record or to + * prompt the user with the partner creation dialog. + */ + this._checkboxRef = useRef('checkbox'); + /** + * Reference of the partner creation dialog. Useful to open it, for + * compatibility with old code. + */ + this._dialogRef = useRef('dialog'); + /** + * Whether the dialog is currently open. `_dialogRef` cannot be trusted + * to know if the dialog is open due to manually calling `open` and + * potential out of sync with component adapter. + */ + this._isDialogOpen = false; + this._onDialogSaved = this._onDialogSaved.bind(this); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {string|undefined} + */ + get ADD_AS_RECIPIENT_AND_FOLLOWER_REASON() { + if (!this.suggestedRecipientInfo) { + return undefined; + } + return this.env._t(_.str.sprintf( + "Add as recipient and follower (reason: %s)", + this.suggestedRecipientInfo.reason + )); + } + + /** + * @returns {string} + */ + get PLEASE_COMPLETE_CUSTOMER_S_INFORMATION() { + return this.env._t("Please complete customer's information"); + } + + /** + * @returns {mail.suggested_recipient_info} + */ + get suggestedRecipientInfo() { + return this.env.models['mail.suggested_recipient_info'].get(this.props.suggestedRecipientInfoLocalId); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _update() { + if (this._checkboxRef.el && this.suggestedRecipientInfo) { + this._checkboxRef.el.checked = this.suggestedRecipientInfo.isSelected; + } + } + + //-------------------------------------------------------------------------- + // Handler + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onChangeCheckbox() { + const isChecked = this._checkboxRef.el.checked; + this.suggestedRecipientInfo.update({ isSelected: isChecked }); + if (!this.suggestedRecipientInfo.partner) { + // Recipients must always be partners. On selecting a suggested + // recipient that does not have a partner, the partner creation form + // should be opened. + if (isChecked && this._dialogRef && !this._isDialogOpen) { + this._isDialogOpen = true; + this._dialogRef.comp.widget.on('closed', this, () => { + this._isDialogOpen = false; + }); + this._dialogRef.comp.widget.open(); + } + } + } + + /** + * @private + */ + _onDialogSaved() { + const thread = this.suggestedRecipientInfo && this.suggestedRecipientInfo.thread; + if (!thread) { + return; + } + thread.fetchAndUpdateSuggestedRecipients(); + } +} + +Object.assign(ComposerSuggestedRecipient, { + components, + props: { + suggestedRecipientInfoLocalId: String, + }, + template: 'mail.ComposerSuggestedRecipient', +}); + +return ComposerSuggestedRecipient; + +}); diff --git a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.scss b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.scss new file mode 100644 index 00000000..c8b6b5ad --- /dev/null +++ b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.scss @@ -0,0 +1,5 @@ +// Dirty fix: clear modal-body padding, otherwise it create space inside the +// suggested_recipient list. +.o_ComposerSuggestedRecipient .modal-body { + padding: 0; +} diff --git a/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml new file mode 100644 index 00000000..4e754359 --- /dev/null +++ b/addons/mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.xml @@ -0,0 +1,41 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + <t t-name="mail.ComposerSuggestedRecipient" owl="1"> + <div class="o_ComposerSuggestedRecipient" t-att-data-partner-id="suggestedRecipientInfo.partner and suggestedRecipientInfo.partner.id ? suggestedRecipientInfo.partner.id : false" t-att-title="ADD_AS_RECIPIENT_AND_FOLLOWER_REASON"> + <t t-if="suggestedRecipientInfo"> + <div class="custom-control custom-checkbox"> + <input t-attf-id="{{ id }}_checkbox" class="custom-control-input" type="checkbox" t-att-checked="suggestedRecipientInfo.isSelected ? 'checked' : undefined" t-on-change="_onChangeCheckbox" t-ref="checkbox" /> + <label class="custom-control-label" t-attf-for="{{ id }}_checkbox"> + <t t-if="suggestedRecipientInfo.name"> + <t t-esc="suggestedRecipientInfo.name"/> + </t> + <t t-if="suggestedRecipientInfo.email"> + (<t t-esc="suggestedRecipientInfo.email"/>) + </t> + </label> + </div> + <t t-if="!suggestedRecipientInfo.partner"> + <FormViewDialogComponentAdapter + Component="FormViewDialog" + params="{ + context: { + active_id: suggestedRecipientInfo.thread.id, + active_model: 'mail.compose.message', + default_email: suggestedRecipientInfo.email, + default_name: suggestedRecipientInfo.name, + force_email: true, + ref: 'compound_context', + }, + disable_multiple_selection: true, + on_saved: _onDialogSaved, + res_id: false, + res_model: 'res.partner', + title: PLEASE_COMPLETE_CUSTOMER_S_INFORMATION, + }" + t-ref="dialog" + /> + </t> + </t> + </div> + </t> +</templates> diff --git a/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js new file mode 100644 index 00000000..61da098c --- /dev/null +++ b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js @@ -0,0 +1,77 @@ +odoo.define('mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; +const { useState } = owl.hooks; + +const components = { + ComposerSuggestedRecipient: require('mail/static/src/components/composer_suggested_recipient/composer_suggested_recipient.js'), +}; + +class ComposerSuggestedRecipientList extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + this.state = useState({ + hasShowMoreButton: false, + }); + useStore(props => { + const thread = this.env.models['mail.thread'].get(props.threadLocalId); + return { + threadSuggestedRecipientInfoList: thread ? thread.suggestedRecipientInfoList : [], + }; + }, { + compareDepth: { + threadSuggestedRecipientInfoList: 1, + }, + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.thread} + */ + get thread() { + return this.env.models['mail.thread'].get(this.props.threadLocalId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onClickShowLess(ev) { + this.state.hasShowMoreButton = false; + } + + /** + * @private + */ + _onClickShowMore(ev) { + this.state.hasShowMoreButton = true; + } + +} + +Object.assign(ComposerSuggestedRecipientList, { + components, + props: { + threadLocalId: String, + }, + template: 'mail.ComposerSuggestedRecipientList', +}); + +return ComposerSuggestedRecipientList; +}); diff --git a/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.scss b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.scss new file mode 100644 index 00000000..4e1b4dd7 --- /dev/null +++ b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.scss @@ -0,0 +1,3 @@ +.o_ComposerSuggestedRecipientList { + margin-bottom: map-get($spacers, 2); +} diff --git a/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.xml b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.xml new file mode 100644 index 00000000..c78570db --- /dev/null +++ b/addons/mail/static/src/components/composer_suggested_recipient_list/composer_suggested_recipient_list.xml @@ -0,0 +1,26 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + <t t-name="mail.ComposerSuggestedRecipientList" owl="1"> + <div class="o_ComposerSuggestedRecipientList"> + <t t-if="thread"> + <t t-foreach="state.hasShowMoreButton ? thread.suggestedRecipientInfoList : thread.suggestedRecipientInfoList.slice(0,3)" t-as="recipientInfo" t-key="recipientInfo.localId"> + <ComposerSuggestedRecipient + suggestedRecipientInfoLocalId="recipientInfo.localId" + /> + </t> + <t t-if="thread.suggestedRecipientInfoList.length > 3"> + <t t-if="!state.hasShowMoreButton" > + <button class="o_ComposerSuggestedRecipientList_showMore btn btn-sm btn-link" t-on-click="_onClickShowMore"> + Show more + </button> + </t> + <t t-else=""> + <button class="o_ComposerSuggestedRecipientList_showLess btn btn-sm btn-link" t-on-click="_onClickShowLess"> + Show less + </button> + </t> + </t> + </t> + </div> + </t> +</templates> diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js new file mode 100644 index 00000000..da54ab54 --- /dev/null +++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.js @@ -0,0 +1,143 @@ +odoo.define('mail/static/src/components/composer_suggestion/composer_suggestion.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js'); + +const components = { + PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'), +}; + +const { Component } = owl; + +class ComposerSuggestion extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const composer = this.env.models['mail.composer'].get(this.props.composerLocalId); + const record = this.env.models[props.modelName].get(props.recordLocalId); + return { + composerHasToScrollToActiveSuggestion: composer && composer.hasToScrollToActiveSuggestion, + record: record ? record.__state : undefined, + }; + }); + useUpdate({ func: () => this._update() }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.composer} + */ + get composer() { + return this.env.models['mail.composer'].get(this.props.composerLocalId); + } + + get isCannedResponse() { + return this.props.modelName === "mail.canned_response"; + } + + get isChannel() { + return this.props.modelName === "mail.thread"; + } + + get isCommand() { + return this.props.modelName === "mail.channel_command"; + } + + get isPartner() { + return this.props.modelName === "mail.partner"; + } + + get record() { + return this.env.models[this.props.modelName].get(this.props.recordLocalId); + } + + /** + * Returns a descriptive title for this suggestion. Useful to be able to + * read both parts when they are overflowing the UI. + * + * @returns {string} + */ + title() { + if (this.isCannedResponse) { + return _.str.sprintf("%s: %s", this.record.source, this.record.substitution); + } + if (this.isChannel) { + return this.record.name; + } + if (this.isCommand) { + return _.str.sprintf("%s: %s", this.record.name, this.record.help); + } + if (this.isPartner) { + if (this.record.email) { + return _.str.sprintf("%s (%s)", this.record.nameOrDisplayName, this.record.email); + } + return this.record.nameOrDisplayName; + } + return ""; + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _update() { + if ( + this.composer && + this.composer.hasToScrollToActiveSuggestion && + this.props.isActive + ) { + this.el.scrollIntoView({ + block: 'center', + }); + this.composer.update({ hasToScrollToActiveSuggestion: false }); + } + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {Event} ev + */ + _onClick(ev) { + ev.preventDefault(); + this.composer.update({ activeSuggestedRecord: [['link', this.record]] }); + this.composer.insertSuggestion(); + this.composer.closeSuggestions(); + this.trigger('o-composer-suggestion-clicked'); + } + +} + +Object.assign(ComposerSuggestion, { + components, + defaultProps: { + isActive: false, + }, + props: { + composerLocalId: String, + isActive: Boolean, + modelName: String, + recordLocalId: String, + }, + template: 'mail.ComposerSuggestion', +}); + +return ComposerSuggestion; + +}); diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss new file mode 100644 index 00000000..4083c149 --- /dev/null +++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.scss @@ -0,0 +1,43 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ComposerSuggestion { + display: flex; + width: map-get($sizes, 100); + padding: map-get($spacers, 2) map-get($spacers, 4); +} + +.o_ComposerSuggestion_part1 { + // avoid shrinking part 1 because it is more important than part 2 + // because no shrink, ensure it cannot overflow with a max-width + flex: 0 0 auto; + max-width: 100%; + overflow: hidden; + padding-inline-end: map-get($spacers, 2); + text-overflow: ellipsis; +} + +.o_ComposerSuggestion_part2 { + // shrink part 2 to properly ensure it cannot overflow + flex: 0 1 auto; + overflow: hidden; + text-overflow: ellipsis; +} + +.o_ComposerSuggestion_partnerImStatusIcon { + flex: 0 0 auto; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_ComposerSuggestion_part1 { + font-weight: $font-weight-bold; +} + +.o_ComposerSuggestion_part2 { + font-style: italic; + color: $gray-600; +} diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml new file mode 100644 index 00000000..787b5aed --- /dev/null +++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion.xml @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ComposerSuggestion" owl="1"> + <a class="o_ComposerSuggestion dropdown-item" t-att-class="{ 'active': props.isActive }" href="#" t-att-title="title()" role="menuitem" t-on-click="_onClick"> + <t t-if="record"> + <t t-if="isCannedResponse"> + <span class="o_ComposerSuggestion_part1"><t t-esc="record.source"/></span> + <span class="o_ComposerSuggestion_part2"><t t-esc="record.substitution"/></span> + </t> + <t t-if="isChannel"> + <span class="o_ComposerSuggestion_part1"><t t-esc="record.name"/></span> + </t> + <t t-if="isCommand"> + <span class="o_ComposerSuggestion_part1"><t t-esc="record.name"/></span> + <span class="o_ComposerSuggestion_part2"><t t-esc="record.help"/></span> + </t> + <t t-if="isPartner"> + <PartnerImStatusIcon + class="o_ComposerSuggestion_partnerImStatusIcon" + hasBackground="false" + partnerLocalId="record.localId" + /> + <span class="o_ComposerSuggestion_part1"><t t-esc="record.nameOrDisplayName"/></span> + <t t-if="record.email"> + <span class="o_ComposerSuggestion_part2">(<t t-esc="record.email"/>)</span> + </t> + </t> + </t> + </a> + </t> + +</templates> diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion_canned_response_tests.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_canned_response_tests.js new file mode 100644 index 00000000..0e0f8685 --- /dev/null +++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_canned_response_tests.js @@ -0,0 +1,154 @@ +odoo.define('mail/static/src/components/composer_suggestion/composer_suggestion_canned_response_tests.js', function (require) { +'use strict'; + +const components = { + ComposerSuggestion: require('mail/static/src/components/composer_suggestion/composer_suggestion.js'), +}; +const { + afterEach, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('composer_suggestion', {}, function () { +QUnit.module('composer_suggestion_canned_response_tests.js', { + beforeEach() { + beforeEach(this); + + this.createComposerSuggestion = async props => { + await createRootComponent(this, components.ComposerSuggestion, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('canned response suggestion displayed', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const cannedResponse = this.env.models['mail.canned_response'].create({ + id: 7, + source: 'hello', + substitution: "Hello, how are you?", + }); + await this.createComposerSuggestion({ + composerLocalId: thread.composer.localId, + isActive: true, + modelName: 'mail.canned_response', + recordLocalId: cannedResponse.localId, + }); + + assert.containsOnce( + document.body, + `.o_ComposerSuggestion`, + "Canned response suggestion should be present" + ); +}); + +QUnit.test('canned response suggestion correct data', async function (assert) { + assert.expect(5); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const cannedResponse = this.env.models['mail.canned_response'].create({ + id: 7, + source: 'hello', + substitution: "Hello, how are you?", + }); + await this.createComposerSuggestion({ + composerLocalId: thread.composer.localId, + isActive: true, + modelName: 'mail.canned_response', + recordLocalId: cannedResponse.localId, + }); + + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "Canned response suggestion should be present" + ); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion_part1', + "Canned response source should be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerSuggestion_part1`).textContent, + "hello", + "Canned response source should be displayed" + ); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion_part2', + "Canned response substitution should be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerSuggestion_part2`).textContent, + "Hello, how are you?", + "Canned response substitution should be displayed" + ); +}); + +QUnit.test('canned response suggestion active', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const cannedResponse = this.env.models['mail.canned_response'].create({ + id: 7, + source: 'hello', + substitution: "Hello, how are you?", + }); + await this.createComposerSuggestion({ + composerLocalId: thread.composer.localId, + isActive: true, + modelName: 'mail.canned_response', + recordLocalId: cannedResponse.localId, + }); + + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "Canned response suggestion should be displayed" + ); + assert.hasClass( + document.querySelector('.o_ComposerSuggestion'), + 'active', + "should be active initially" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion_channel_tests.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_channel_tests.js new file mode 100644 index 00000000..7a211483 --- /dev/null +++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_channel_tests.js @@ -0,0 +1,144 @@ +odoo.define('mail/static/src/components/composer_suggestion/composer_suggestion_channel_tests.js', function (require) { +'use strict'; + +const components = { + ComposerSuggestion: require('mail/static/src/components/composer_suggestion/composer_suggestion.js'), +}; +const { + afterEach, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('composer_suggestion', {}, function () { +QUnit.module('composer_suggestion_channel_tests.js', { + beforeEach() { + beforeEach(this); + + this.createComposerSuggestion = async props => { + await createRootComponent(this, components.ComposerSuggestion, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('channel mention suggestion displayed', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const channel = this.env.models['mail.thread'].create({ + id: 7, + name: "General", + model: 'mail.channel', + }); + await this.createComposerSuggestion({ + composerLocalId: thread.composer.localId, + isActive: true, + modelName: 'mail.thread', + recordLocalId: channel.localId, + }); + + assert.containsOnce( + document.body, + `.o_ComposerSuggestion`, + "Channel mention suggestion should be present" + ); +}); + +QUnit.test('channel mention suggestion correct data', async function (assert) { + assert.expect(3); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const channel = this.env.models['mail.thread'].create({ + id: 7, + name: "General", + model: 'mail.channel', + }); + await this.createComposerSuggestion({ + composerLocalId: thread.composer.localId, + isActive: true, + modelName: 'mail.thread', + recordLocalId: channel.localId, + }); + + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "Channel mention suggestion should be present" + ); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion_part1', + "Channel name should be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerSuggestion_part1`).textContent, + "General", + "Channel name should be displayed" + ); +}); + +QUnit.test('channel mention suggestion active', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const channel = this.env.models['mail.thread'].create({ + id: 7, + name: "General", + model: 'mail.channel', + }); + await this.createComposerSuggestion({ + composerLocalId: thread.composer.localId, + isActive: true, + modelName: 'mail.thread', + recordLocalId: channel.localId, + }); + + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "Channel mention suggestion should be displayed" + ); + assert.hasClass( + document.querySelector('.o_ComposerSuggestion'), + 'active', + "should be active initially" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion_command_tests.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_command_tests.js new file mode 100644 index 00000000..8bbb3d45 --- /dev/null +++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_command_tests.js @@ -0,0 +1,151 @@ +odoo.define('mail/static/src/components/composer_suggestion/composer_suggestion_command_tests.js', function (require) { +'use strict'; + +const components = { + ComposerSuggestion: require('mail/static/src/components/composer_suggestion/composer_suggestion.js'), +}; +const { + afterEach, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('composer_suggestion', {}, function () { +QUnit.module('composer_suggestion_command_tests.js', { + beforeEach() { + beforeEach(this); + + this.createComposerSuggestion = async props => { + await createRootComponent(this, components.ComposerSuggestion, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('command suggestion displayed', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const command = this.env.models['mail.channel_command'].create({ + name: 'whois', + help: "Displays who it is", + }); + await this.createComposerSuggestion({ + composerLocalId: thread.composer.localId, + isActive: true, + modelName: 'mail.channel_command', + recordLocalId: command.localId, + }); + + assert.containsOnce( + document.body, + `.o_ComposerSuggestion`, + "Command suggestion should be present" + ); +}); + +QUnit.test('command suggestion correct data', async function (assert) { + assert.expect(5); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const command = this.env.models['mail.channel_command'].create({ + name: 'whois', + help: "Displays who it is", + }); + await this.createComposerSuggestion({ + composerLocalId: thread.composer.localId, + isActive: true, + modelName: 'mail.channel_command', + recordLocalId: command.localId, + }); + + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "Command suggestion should be present" + ); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion_part1', + "Command name should be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerSuggestion_part1`).textContent, + "whois", + "Command name should be displayed" + ); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion_part2', + "Command help should be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerSuggestion_part2`).textContent, + "Displays who it is", + "Command help should be displayed" + ); +}); + +QUnit.test('command suggestion active', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const command = this.env.models['mail.channel_command'].create({ + name: 'whois', + help: "Displays who it is", + }); + await this.createComposerSuggestion({ + composerLocalId: thread.composer.localId, + isActive: true, + modelName: 'mail.channel_command', + recordLocalId: command.localId, + }); + + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "Command suggestion should be displayed" + ); + assert.hasClass( + document.querySelector('.o_ComposerSuggestion'), + 'active', + "should be active initially" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/composer_suggestion/composer_suggestion_partner_tests.js b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_partner_tests.js new file mode 100644 index 00000000..548fd6d7 --- /dev/null +++ b/addons/mail/static/src/components/composer_suggestion/composer_suggestion_partner_tests.js @@ -0,0 +1,160 @@ +odoo.define('mail/static/src/components/composer_suggestion/composer_suggestion_partner_tests.js', function (require) { +'use strict'; + +const components = { + ComposerSuggestion: require('mail/static/src/components/composer_suggestion/composer_suggestion.js'), +}; +const { + afterEach, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('composer_suggestion', {}, function () { +QUnit.module('composer_suggestion_partner_tests.js', { + beforeEach() { + beforeEach(this); + + this.createComposerSuggestion = async props => { + await createRootComponent(this, components.ComposerSuggestion, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('partner mention suggestion displayed', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const partner = this.env.models['mail.partner'].create({ + id: 7, + im_status: 'online', + name: "Demo User", + }); + await this.createComposerSuggestion({ + composerLocalId: thread.composer.localId, + isActive: true, + modelName: 'mail.partner', + recordLocalId: partner.localId, + }); + + assert.containsOnce( + document.body, + `.o_ComposerSuggestion`, + "Partner mention suggestion should be present" + ); +}); + +QUnit.test('partner mention suggestion correct data', async function (assert) { + assert.expect(6); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const partner = this.env.models['mail.partner'].create({ + email: "demo_user@odoo.com", + id: 7, + im_status: 'online', + name: "Demo User", + }); + await this.createComposerSuggestion({ + composerLocalId: thread.composer.localId, + isActive: true, + modelName: 'mail.partner', + recordLocalId: partner.localId, + }); + + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "Partner mention suggestion should be present" + ); + assert.strictEqual( + document.querySelectorAll(`.o_PartnerImStatusIcon`).length, + 1, + "Partner's im_status should be displayed" + ); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion_part1', + "Partner's name should be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerSuggestion_part1`).textContent, + "Demo User", + "Partner's name should be displayed" + ); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion_part2', + "Partner's email should be present" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerSuggestion_part2`).textContent, + "(demo_user@odoo.com)", + "Partner's email should be displayed" + ); +}); + +QUnit.test('partner mention suggestion active', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const partner = this.env.models['mail.partner'].create({ + id: 7, + im_status: 'online', + name: "Demo User", + }); + await this.createComposerSuggestion({ + composerLocalId: thread.composer.localId, + isActive: true, + modelName: 'mail.partner', + recordLocalId: partner.localId, + }); + + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "Partner mention suggestion should be displayed" + ); + assert.hasClass( + document.querySelector('.o_ComposerSuggestion'), + 'active', + "should be active initially" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.js b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.js new file mode 100644 index 00000000..23f08399 --- /dev/null +++ b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.js @@ -0,0 +1,73 @@ +odoo.define('mail/static/src/components/composer_suggestion_list/composer_suggestion_list.js', function (require) { +'use strict'; + +const components = { + ComposerSuggestion: require('mail/static/src/components/composer_suggestion/composer_suggestion.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class ComposerSuggestionList extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const composer = this.env.models['mail.composer'].get(props.composerLocalId); + const activeSuggestedRecord = composer + ? composer.activeSuggestedRecord + : undefined; + const extraSuggestedRecords = composer + ? composer.extraSuggestedRecords + : []; + const mainSuggestedRecords = composer + ? composer.mainSuggestedRecords + : []; + return { + activeSuggestedRecord, + composer, + composerSuggestionModelName: composer && composer.suggestionModelName, + extraSuggestedRecords, + mainSuggestedRecords, + }; + }, { + compareDepth: { + extraSuggestedRecords: 1, + mainSuggestedRecords: 1, + }, + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.composer} + */ + get composer() { + return this.env.models['mail.composer'].get(this.props.composerLocalId); + } + +} + +Object.assign(ComposerSuggestionList, { + components, + defaultProps: { + isBelow: false, + }, + props: { + composerLocalId: String, + isBelow: Boolean, + }, + template: 'mail.ComposerSuggestionList', +}); + +return ComposerSuggestionList; + +}); diff --git a/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.scss b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.scss new file mode 100644 index 00000000..fa8d375e --- /dev/null +++ b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.scss @@ -0,0 +1,27 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ComposerSuggestionList { + position: absolute; + // prevent suggestion items from overflowing + width: 100%; + + &.o-lowPosition { + bottom: 0; + } +} + +.o_ComposerSuggestionList_drop { + // prevent suggestion items from overflowing + width: 100%; +} + +.o_ComposerSuggestionList_list { + // prevent suggestion items from overflowing + width: 100%; + // prevent from overflowing chat window, must be smaller than its height + // minus the max height taken by composer and attachment list + max-height: 150px; + overflow: auto; +} diff --git a/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.xml b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.xml new file mode 100644 index 00000000..9747109a --- /dev/null +++ b/addons/mail/static/src/components/composer_suggestion_list/composer_suggestion_list.xml @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ComposerSuggestionList" owl="1"> + <div class="o_ComposerSuggestionList" t-att-class="{ 'o-lowPosition': props.isBelow }"> + <div class="o_ComposerSuggestionList_drop" t-att-class="{ 'dropdown': props.isBelow, 'dropup': !props.isBelow }"> + <div class="o_ComposerSuggestionList_list dropdown-menu show"> + <t t-foreach="composer.mainSuggestedRecords" t-as="record" t-key="record.localId"> + <ComposerSuggestion + composerLocalId="props.composerLocalId" + isActive="record === composer.activeSuggestedRecord" + modelName="composer.suggestionModelName" + recordLocalId="record.localId" + /> + </t> + <t t-if="composer.mainSuggestedRecords.length > 0 and composer.extraSuggestedRecords.length > 0"> + <div role="separator" class="dropdown-divider"/> + </t> + <t t-foreach="composer.extraSuggestedRecords" t-as="record" t-key="record.localId"> + <ComposerSuggestion + composerLocalId="props.composerLocalId" + isActive="record === composer.activeSuggestedRecord" + modelName="composer.suggestionModelName" + recordLocalId="record.localId" + /> + </t> + </div> + </div> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.js b/addons/mail/static/src/components/composer_text_input/composer_text_input.js new file mode 100644 index 00000000..2bdd34da --- /dev/null +++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.js @@ -0,0 +1,419 @@ +odoo.define('mail/static/src/components/composer_text_input/composer_text_input.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js'); + +const components = { + ComposerSuggestionList: require('mail/static/src/components/composer_suggestion_list/composer_suggestion_list.js'), +}; +const { markEventHandled } = require('mail/static/src/utils/utils.js'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class ComposerTextInput extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps({ + compareDepth: { + sendShortcuts: 1, + }, + }); + useStore(props => { + const composer = this.env.models['mail.composer'].get(props.composerLocalId); + const thread = composer && composer.thread; + return { + composerHasFocus: composer && composer.hasFocus, + composerHasSuggestions: composer && composer.hasSuggestions, + composerIsLog: composer && composer.isLog, + composerTextInputContent: composer && composer.textInputContent, + composerTextInputCursorEnd: composer && composer.textInputCursorEnd, + composerTextInputCursorStart: composer && composer.textInputCursorStart, + composerTextInputSelectionDirection: composer && composer.textInputSelectionDirection, + isDeviceMobile: this.env.messaging.device.isMobile, + threadModel: thread && thread.model, + }; + }); + /** + * Updates the composer text input content when composer is mounted + * as textarea content can't be changed from the DOM. + */ + useUpdate({ func: () => this._update() }); + /** + * Last content of textarea from input event. Useful to determine + * whether the current partner is typing something. + */ + this._textareaLastInputValue = ""; + /** + * Reference of the textarea. Useful to set height, selection and content. + */ + this._textareaRef = useRef('textarea'); + /** + * This is the invisible textarea used to compute the composer height + * based on the text content. We need it to downsize the textarea + * properly without flicker. + */ + this._mirroredTextareaRef = useRef('mirroredTextarea'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.composer} + */ + get composer() { + return this.env.models['mail.composer'].get(this.props.composerLocalId); + } + + /** + * @returns {string} + */ + get textareaPlaceholder() { + if (!this.composer) { + return ""; + } + if (this.composer.thread && this.composer.thread.model !== 'mail.channel') { + if (this.composer.isLog) { + return this.env._t("Log an internal note..."); + } + return this.env._t("Send a message to followers..."); + } + return this.env._t("Write something..."); + } + + focus() { + this._textareaRef.el.focus(); + } + + focusout() { + this.saveStateInStore(); + this._textareaRef.el.blur(); + } + + /** + * Saves the composer text input state in store + */ + saveStateInStore() { + this.composer.update({ + textInputContent: this._getContent(), + textInputCursorEnd: this._getSelectionEnd(), + textInputCursorStart: this._getSelectionStart(), + textInputSelectionDirection: this._textareaRef.el.selectionDirection, + }); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * Returns textarea current content. + * + * @private + * @returns {string} + */ + _getContent() { + return this._textareaRef.el.value; + } + + /** + * Returns selection end position. + * + * @private + * @returns {integer} + */ + _getSelectionEnd() { + return this._textareaRef.el.selectionEnd; + } + + /** + * Returns selection start position. + * + * @private + * @returns {integer} + * + */ + _getSelectionStart() { + return this._textareaRef.el.selectionStart; + } + + /** + * Determines whether the textarea is empty or not. + * + * @private + * @returns {boolean} + */ + _isEmpty() { + return this._getContent() === ""; + } + + /** + * Updates the content and height of a textarea + * + * @private + */ + _update() { + if (!this.composer) { + return; + } + if (this.composer.isLastStateChangeProgrammatic) { + this._textareaRef.el.value = this.composer.textInputContent; + if (this.composer.hasFocus) { + this._textareaRef.el.setSelectionRange( + this.composer.textInputCursorStart, + this.composer.textInputCursorEnd, + this.composer.textInputSelectionDirection, + ); + } + this.composer.update({ isLastStateChangeProgrammatic: false }); + } + this._updateHeight(); + } + + /** + * Updates the textarea height. + * + * @private + */ + _updateHeight() { + this._mirroredTextareaRef.el.value = this.composer.textInputContent; + this._textareaRef.el.style.height = (this._mirroredTextareaRef.el.scrollHeight) + "px"; + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onClickTextarea() { + // clicking might change the cursor position + this.saveStateInStore(); + } + + /** + * @private + */ + _onFocusinTextarea() { + this.composer.focus(); + this.trigger('o-focusin-composer'); + } + + /** + * @private + */ + _onFocusoutTextarea() { + this.saveStateInStore(); + this.composer.update({ hasFocus: false }); + } + + /** + * @private + */ + _onInputTextarea() { + this.saveStateInStore(); + if (this._textareaLastInputValue !== this._textareaRef.el.value) { + this.composer.handleCurrentPartnerIsTyping(); + } + this._textareaLastInputValue = this._textareaRef.el.value; + this._updateHeight(); + } + + /** + * @private + * @param {KeyboardEvent} ev + */ + _onKeydownTextarea(ev) { + switch (ev.key) { + case 'Escape': + if (this.composer.hasSuggestions) { + ev.preventDefault(); + this.composer.closeSuggestions(); + markEventHandled(ev, 'ComposerTextInput.closeSuggestions'); + } + break; + // UP, DOWN, TAB: prevent moving cursor if navigation in mention suggestions + case 'ArrowUp': + case 'PageUp': + case 'ArrowDown': + case 'PageDown': + case 'Home': + case 'End': + case 'Tab': + if (this.composer.hasSuggestions) { + // We use preventDefault here to avoid keys native actions but actions are handled in keyUp + ev.preventDefault(); + } + break; + // ENTER: submit the message only if the dropdown mention proposition is not displayed + case 'Enter': + this._onKeydownTextareaEnter(ev); + break; + } + } + + /** + * @private + * @param {KeyboardEvent} ev + */ + _onKeydownTextareaEnter(ev) { + if (this.composer.hasSuggestions) { + ev.preventDefault(); + return; + } + if ( + this.props.sendShortcuts.includes('ctrl-enter') && + !ev.altKey && + ev.ctrlKey && + !ev.metaKey && + !ev.shiftKey + ) { + this.trigger('o-composer-text-input-send-shortcut'); + ev.preventDefault(); + return; + } + if ( + this.props.sendShortcuts.includes('enter') && + !ev.altKey && + !ev.ctrlKey && + !ev.metaKey && + !ev.shiftKey + ) { + this.trigger('o-composer-text-input-send-shortcut'); + ev.preventDefault(); + return; + } + if ( + this.props.sendShortcuts.includes('meta-enter') && + !ev.altKey && + !ev.ctrlKey && + ev.metaKey && + !ev.shiftKey + ) { + this.trigger('o-composer-text-input-send-shortcut'); + ev.preventDefault(); + return; + } + } + + /** + * Key events management is performed in a Keyup to avoid intempestive RPC calls + * + * @private + * @param {KeyboardEvent} ev + */ + _onKeyupTextarea(ev) { + switch (ev.key) { + case 'Escape': + // already handled in _onKeydownTextarea, break to avoid default + break; + // ENTER, HOME, END, UP, DOWN, PAGE UP, PAGE DOWN, TAB: check if navigation in mention suggestions + case 'Enter': + if (this.composer.hasSuggestions) { + this.composer.insertSuggestion(); + this.composer.closeSuggestions(); + this.focus(); + } + break; + case 'ArrowUp': + case 'PageUp': + if (this.composer.hasSuggestions) { + this.composer.setPreviousSuggestionActive(); + this.composer.update({ hasToScrollToActiveSuggestion: true }); + } + break; + case 'ArrowDown': + case 'PageDown': + if (this.composer.hasSuggestions) { + this.composer.setNextSuggestionActive(); + this.composer.update({ hasToScrollToActiveSuggestion: true }); + } + break; + case 'Home': + if (this.composer.hasSuggestions) { + this.composer.setFirstSuggestionActive(); + this.composer.update({ hasToScrollToActiveSuggestion: true }); + } + break; + case 'End': + if (this.composer.hasSuggestions) { + this.composer.setLastSuggestionActive(); + this.composer.update({ hasToScrollToActiveSuggestion: true }); + } + break; + case 'Tab': + if (this.composer.hasSuggestions) { + if (ev.shiftKey) { + this.composer.setPreviousSuggestionActive(); + this.composer.update({ hasToScrollToActiveSuggestion: true }); + } else { + this.composer.setNextSuggestionActive(); + this.composer.update({ hasToScrollToActiveSuggestion: true }); + } + } + break; + case 'Alt': + case 'AltGraph': + case 'CapsLock': + case 'Control': + case 'Fn': + case 'FnLock': + case 'Hyper': + case 'Meta': + case 'NumLock': + case 'ScrollLock': + case 'Shift': + case 'ShiftSuper': + case 'Symbol': + case 'SymbolLock': + // prevent modifier keys from resetting the suggestion state + break; + // Otherwise, check if a mention is typed + default: + this.saveStateInStore(); + } + } + +} + +Object.assign(ComposerTextInput, { + components, + defaultProps: { + hasMentionSuggestionsBelowPosition: false, + sendShortcuts: [], + }, + props: { + composerLocalId: String, + hasMentionSuggestionsBelowPosition: Boolean, + isCompact: Boolean, + /** + * Keyboard shortcuts from text input to send message. + */ + sendShortcuts: { + type: Array, + element: String, + validate: prop => { + for (const shortcut of prop) { + if (!['ctrl-enter', 'enter', 'meta-enter'].includes(shortcut)) { + return false; + } + } + return true; + }, + }, + }, + template: 'mail.ComposerTextInput', +}); + +return ComposerTextInput; + +}); diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.scss b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss new file mode 100644 index 00000000..b9119a71 --- /dev/null +++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.scss @@ -0,0 +1,40 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ComposerTextInput { + min-width: 0; + position: relative; +} + +.o_ComposerTextInput_mirroredTextarea { + height: 0; + position: absolute; + opacity: 0; + overflow: hidden; + top: -10000px; +} + +.o_ComposerTextInput_textareaStyle { + padding: 10px; + resize: none; + border-radius: $o-mail-rounded-rectangle-border-radius-lg; + border: none; + overflow: auto; + + &.o-composer-is-compact { + // When composer is compact, textarea should not be rounded on the right as + // buttons are glued to it + border-top-right-radius: 0; + border-bottom-right-radius: 0; + // Chat window height should be taken into account to choose this value + // ideally this should be less than the third of chat window height + max-height: 100px; + } + + &:not(.o-composer-is-compact) { + // Don't allow the input to take the whole height when it's not compact + // (like in chatter for example) but allow it to take some more place + max-height: 400px; + } +} diff --git a/addons/mail/static/src/components/composer_text_input/composer_text_input.xml b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml new file mode 100644 index 00000000..a14fdee8 --- /dev/null +++ b/addons/mail/static/src/components/composer_text_input/composer_text_input.xml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ComposerTextInput" owl="1"> + <div class="o_ComposerTextInput"> + <t t-if="composer"> + <t t-if="composer.hasSuggestions"> + <ComposerSuggestionList + composerLocalId="props.composerLocalId" + isBelow="props.hasMentionSuggestionsBelowPosition" + /> + </t> + <textarea class="o_ComposerTextInput_textarea o_ComposerTextInput_textareaStyle" t-att-class="{ 'o-composer-is-compact': props.isCompact }" t-esc="composer.textInputContent" t-att-placeholder="textareaPlaceholder" t-on-click="_onClickTextarea" t-on-focusin="_onFocusinTextarea" t-on-focusout="_onFocusoutTextarea" t-on-keydown="_onKeydownTextarea" t-on-keyup="_onKeyupTextarea" t-on-input="_onInputTextarea" t-ref="textarea"/> + <!-- + This is an invisible textarea used to compute the composer + height based on the text content. We need it to downsize + the textarea properly without flicker. + --> + <textarea class="o_ComposerTextInput_mirroredTextarea o_ComposerTextInput_textareaStyle" t-att-class="{ 'o-composer-is-compact': props.isCompact }" t-esc="composer.textInputContent" t-ref="mirroredTextarea" disabled="1"/> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/dialog/dialog.js b/addons/mail/static/src/components/dialog/dialog.js new file mode 100644 index 00000000..65902c9c --- /dev/null +++ b/addons/mail/static/src/components/dialog/dialog.js @@ -0,0 +1,119 @@ +odoo.define('mail/static/src/components/dialog/dialog.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const patchMixin = require('web.patchMixin'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class Dialog extends Component { + + /** + * @param {...any} args + */ + constructor(...args) { + super(...args); + /** + * Reference to the component used inside this dialog. + */ + this._componentRef = useRef('component'); + this._onClickGlobal = this._onClickGlobal.bind(this); + this._onKeydownDocument = this._onKeydownDocument.bind(this); + useShouldUpdateBasedOnProps(); + useStore(props => { + const dialog = this.env.models['mail.dialog'].get(props.dialogLocalId); + return { + dialog: dialog ? dialog.__state : undefined, + }; + }); + this._constructor(); + } + + /** + * Allows patching constructor. + */ + _constructor() {} + + mounted() { + document.addEventListener('click', this._onClickGlobal, true); + document.addEventListener('keydown', this._onKeydownDocument); + } + + willUnmount() { + document.removeEventListener('click', this._onClickGlobal, true); + document.removeEventListener('keydown', this._onKeydownDocument); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.dialog} + */ + get dialog() { + return this.env.models['mail.dialog'].get(this.props.dialogLocalId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Called when clicking on this dialog. + * + * @private + * @param {MouseEvent} ev + */ + _onClick(ev) { + ev.stopPropagation(); + } + + /** + * Closes the dialog when clicking outside. + * Does not work with attachment viewer because it takes the whole space. + * + * @private + * @param {MouseEvent} ev + */ + _onClickGlobal(ev) { + if (this._componentRef.el && this._componentRef.el.contains(ev.target)) { + return; + } + // TODO: this should be child logic (will crash if child doesn't have isCloseable!!) + // task-2092965 + if ( + this._componentRef.comp && + this._componentRef.comp.isCloseable && + !this._componentRef.comp.isCloseable() + ) { + return; + } + this.dialog.delete(); + } + + /** + * @private + * @param {KeyboardEvent} ev + */ + _onKeydownDocument(ev) { + if (ev.key === 'Escape') { + this.dialog.delete(); + } + } + +} + +Object.assign(Dialog, { + props: { + dialogLocalId: String, + }, + template: 'mail.Dialog', +}); + +return patchMixin(Dialog); + +}); diff --git a/addons/mail/static/src/components/dialog/dialog.scss b/addons/mail/static/src/components/dialog/dialog.scss new file mode 100644 index 00000000..fa17dac0 --- /dev/null +++ b/addons/mail/static/src/components/dialog/dialog.scss @@ -0,0 +1,23 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_Dialog { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + align-items: center; + justify-content: center; + z-index: $zindex-modal; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_Dialog { + background-color: rgba(0, 0, 0, 0.7); +} diff --git a/addons/mail/static/src/components/dialog/dialog.xml b/addons/mail/static/src/components/dialog/dialog.xml new file mode 100644 index 00000000..3c953dec --- /dev/null +++ b/addons/mail/static/src/components/dialog/dialog.xml @@ -0,0 +1,22 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.Dialog" owl="1"> + <div class="o_Dialog"> + <t t-if="dialog"> + <t t-if="dialog.record"> + <t + t-component="{{ dialog.record['constructor'].name }}" + class="o_Dialog_component" + t-props="{ localId: dialog.record.localId }" + t-ref="component" + /> + </t> + <t t-else=""> + <span>Only dialog linked to a record is currently supported!</span> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager.js b/addons/mail/static/src/components/dialog_manager/dialog_manager.js new file mode 100644 index 00000000..69b64a27 --- /dev/null +++ b/addons/mail/static/src/components/dialog_manager/dialog_manager.js @@ -0,0 +1,69 @@ +odoo.define('mail/static/src/components/dialog_manager/dialog_manager.js', function (require) { +'use strict'; + +const components = { + Dialog: require('mail/static/src/components/dialog/dialog.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class DialogManager extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const dialogManager = this.env.messaging && this.env.messaging.dialogManager; + return { + dialogManager: dialogManager ? dialogManager.__state : undefined, + }; + }); + } + + mounted() { + this._checkDialogOpen(); + } + + patched() { + this._checkDialogOpen(); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _checkDialogOpen() { + if (!this.env.messaging) { + /** + * Messaging not created, which means essential models like + * dialog manager are not ready, so open status of dialog in DOM + * is omitted during this (short) period of time. + */ + return; + } + if (this.env.messaging.dialogManager.dialogs.length > 0) { + document.body.classList.add('modal-open'); + } else { + document.body.classList.remove('modal-open'); + } + } + +} + +Object.assign(DialogManager, { + components, + props: {}, + template: 'mail.DialogManager', +}); + +return DialogManager; + +}); diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager.xml b/addons/mail/static/src/components/dialog_manager/dialog_manager.xml new file mode 100644 index 00000000..035e543e --- /dev/null +++ b/addons/mail/static/src/components/dialog_manager/dialog_manager.xml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.DialogManager" owl="1"> + <div class="o_DialogManager"> + <t t-if="env.messaging"> + <t t-foreach="env.messaging.dialogManager.dialogs" t-as="dialog" t-key="dialog.localId"> + <Dialog + class="o_DialogManager_dialog" + dialogLocalId="dialog.localId" + /> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/dialog_manager/dialog_manager_tests.js b/addons/mail/static/src/components/dialog_manager/dialog_manager_tests.js new file mode 100644 index 00000000..f377ec17 --- /dev/null +++ b/addons/mail/static/src/components/dialog_manager/dialog_manager_tests.js @@ -0,0 +1,82 @@ +odoo.define('mail/static/src/components/dialog_manager/dialog_manager_tests.js', function (require) { +'use strict'; + +const { makeDeferred } = require('mail/static/src/utils/deferred/deferred.js'); +const { + afterEach, + beforeEach, + nextAnimationFrame, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('dialog_manager', {}, function () { +QUnit.module('dialog_manager_tests.js', { + beforeEach() { + beforeEach(this); + + this.start = async params => { + const { env, widget } = await start(Object.assign( + { hasDialog: true }, + params, + { data: this.data } + )); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('[technical] messaging not created', async function (assert) { + /** + * Creation of messaging in env is async due to generation of models being + * async. Generation of models is async because it requires parsing of all + * JS modules that contain pieces of model definitions. + * + * Time of having no messaging is very short, almost imperceptible by user + * on UI, but the display should not crash during this critical time period. + */ + assert.expect(2); + + const messagingBeforeCreationDeferred = makeDeferred(); + await this.start({ + messagingBeforeCreationDeferred, + waitUntilMessagingCondition: 'none', + }); + assert.containsOnce( + document.body, + '.o_DialogManager', + "should have dialog manager even when messaging is not yet created" + ); + + // simulate messaging being created + messagingBeforeCreationDeferred.resolve(); + await nextAnimationFrame(); + + assert.containsOnce( + document.body, + '.o_DialogManager', + "should still contain dialog manager after messaging has been created" + ); +}); + +QUnit.test('initial mount', async function (assert) { + assert.expect(1); + + await this.start(); + assert.containsOnce( + document.body, + '.o_DialogManager', + "should have dialog manager" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/discuss/discuss.js b/addons/mail/static/src/components/discuss/discuss.js new file mode 100644 index 00000000..068fd88d --- /dev/null +++ b/addons/mail/static/src/components/discuss/discuss.js @@ -0,0 +1,313 @@ +odoo.define('mail/static/src/components/discuss/discuss.js', function (require) { +'use strict'; + +const components = { + AutocompleteInput: require('mail/static/src/components/autocomplete_input/autocomplete_input.js'), + Composer: require('mail/static/src/components/composer/composer.js'), + DiscussMobileMailboxSelection: require('mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.js'), + DiscussSidebar: require('mail/static/src/components/discuss_sidebar/discuss_sidebar.js'), + MobileMessagingNavbar: require('mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js'), + ModerationDiscardDialog: require('mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js'), + ModerationRejectDialog: require('mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js'), + NotificationList: require('mail/static/src/components/notification_list/notification_list.js'), + ThreadView: require('mail/static/src/components/thread_view/thread_view.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const patchMixin = require('web.patchMixin'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class Discuss extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore((...args) => this._useStoreSelector(...args), { + compareDepth: { + checkedMessages: 1, + uncheckedMessages: 1, + }, + }); + this._updateLocalStoreProps(); + /** + * Reference of the composer. Useful to focus it. + */ + this._composerRef = useRef('composer'); + /** + * Reference of the ThreadView. Useful to focus it. + */ + this._threadViewRef = useRef('threadView'); + // bind since passed as props + this._onMobileAddItemHeaderInputSelect = this._onMobileAddItemHeaderInputSelect.bind(this); + this._onMobileAddItemHeaderInputSource = this._onMobileAddItemHeaderInputSource.bind(this); + } + + mounted() { + this.discuss.update({ isOpen: true }); + if (this.discuss.thread) { + this.trigger('o-push-state-action-manager'); + } else if (this.env.isMessagingInitialized()) { + this.discuss.openInitThread(); + } + this._updateLocalStoreProps(); + } + + patched() { + this.trigger('o-update-control-panel'); + if (this.discuss.thread) { + this.trigger('o-push-state-action-manager'); + } + if ( + this.discuss.thread && + this.discuss.thread === this.env.messaging.inbox && + this.discuss.threadView && + this._lastThreadCache === this.discuss.threadView.threadCache.localId && + this._lastThreadCounter > 0 && this.discuss.thread.counter === 0 + ) { + this.trigger('o-show-rainbow-man'); + } + this._activeThreadCache = this.discuss.threadView && this.discuss.threadView.threadCache; + this._updateLocalStoreProps(); + } + + willUnmount() { + if (this.discuss) { + this.discuss.close(); + } + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {string} + */ + get addChannelInputPlaceholder() { + return this.env._t("Create or search channel..."); + } + + /** + * @returns {string} + */ + get addChatInputPlaceholder() { + return this.env._t("Search user..."); + } + + /** + * @returns {mail.discuss} + */ + get discuss() { + return this.env.messaging && this.env.messaging.discuss; + } + + /** + * @returns {Object[]} + */ + mobileNavbarTabs() { + return [{ + icon: 'fa fa-inbox', + id: 'mailbox', + label: this.env._t("Mailboxes"), + }, { + icon: 'fa fa-user', + id: 'chat', + label: this.env._t("Chat"), + }, { + icon: 'fa fa-users', + id: 'channel', + label: this.env._t("Channel"), + }]; + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _updateLocalStoreProps() { + /** + * Locally tracked store props `activeThreadCache`. + * Useful to set scroll position from last stored one and to display + * rainbox man on inbox. + */ + this._lastThreadCache = ( + this.discuss.threadView && + this.discuss.threadView.threadCache && + this.discuss.threadView.threadCache.localId + ); + /** + * Locally tracked store props `threadCounter`. + * Useful to display the rainbow man on inbox. + */ + this._lastThreadCounter = ( + this.discuss.thread && + this.discuss.thread.counter + ); + } + + /** + * Returns data selected from the store. + * + * @private + * @param {Object} props + * @returns {Object} + */ + _useStoreSelector(props) { + const discuss = this.env.messaging && this.env.messaging.discuss; + const thread = discuss && discuss.thread; + const threadView = discuss && discuss.threadView; + const replyingToMessage = discuss && discuss.replyingToMessage; + const replyingToMessageOriginThread = replyingToMessage && replyingToMessage.originThread; + const checkedMessages = threadView ? threadView.checkedMessages : []; + return { + checkedMessages, + checkedMessagesIsModeratedByCurrentPartner: checkedMessages && checkedMessages.some(message => message.isModeratedByCurrentPartner), // for widget + discuss, + discussActiveId: discuss && discuss.activeId, // for widget + discussActiveMobileNavbarTabId: discuss && discuss.activeMobileNavbarTabId, + discussHasModerationDiscardDialog: discuss && discuss.hasModerationDiscardDialog, + discussHasModerationRejectDialog: discuss && discuss.hasModerationRejectDialog, + discussIsAddingChannel: discuss && discuss.isAddingChannel, + discussIsAddingChat: discuss && discuss.isAddingChat, + discussIsDoFocus: discuss && discuss.isDoFocus, + discussReplyingToMessageOriginThreadComposer: replyingToMessageOriginThread && replyingToMessageOriginThread.composer, + inbox: this.env.messaging.inbox, + isDeviceMobile: this.env.messaging && this.env.messaging.device.isMobile, + isMessagingInitialized: this.env.isMessagingInitialized(), + replyingToMessage, + starred: this.env.messaging.starred, // for widget + thread, + threadCache: threadView && threadView.threadCache, + threadChannelType: thread && thread.channel_type, // for widget + threadDisplayName: thread && thread.displayName, // for widget + threadCounter: thread && thread.counter, + threadModel: thread && thread.model, + threadPublic: thread && thread.public, // for widget + threadView, + threadViewMessagesLength: threadView && threadView.messages.length, // for widget + uncheckedMessages: threadView ? threadView.uncheckedMessages : [], // for widget + }; + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onDialogClosedModerationDiscard() { + this.discuss.update({ hasModerationDiscardDialog: false }); + } + + /** + * @private + */ + _onDialogClosedModerationReject() { + this.discuss.update({ hasModerationRejectDialog: false }); + } + + /** + * @private + * @param {CustomEvent} ev + */ + _onFocusinComposer(ev) { + this.discuss.update({ isDoFocus: false }); + } + + /** + * @private + * @param {CustomEvent} ev + */ + _onHideMobileAddItemHeader(ev) { + ev.stopPropagation(); + this.discuss.clearIsAddingItem(); + } + + /** + * @private + * @param {Event} ev + * @param {Object} ui + * @param {Object} ui.item + * @param {integer} ui.item.id + */ + _onMobileAddItemHeaderInputSelect(ev, ui) { + const discuss = this.discuss; + if (discuss.isAddingChannel) { + discuss.handleAddChannelAutocompleteSelect(ev, ui); + } else { + discuss.handleAddChatAutocompleteSelect(ev, ui); + } + } + + /** + * @private + * @param {Object} req + * @param {string} req.term + * @param {function} res + */ + _onMobileAddItemHeaderInputSource(req, res) { + if (this.discuss.isAddingChannel) { + this.discuss.handleAddChannelAutocompleteSource(req, res); + } else { + this.discuss.handleAddChatAutocompleteSource(req, res); + } + } + + /** + * @private + */ + _onReplyingToMessageMessagePosted() { + this.env.services['notification'].notify({ + message: _.str.sprintf( + this.env._t(`Message posted on "%s"`), + owl.utils.escape(this.discuss.replyingToMessage.originThread.displayName) + ), + type: 'warning', + }); + this.discuss.clearReplyingToMessage(); + } + + /** + * @private + * @param {CustomEvent} ev + * @param {Object} ev.detail + * @param {string} ev.detail.tabId + */ + _onSelectMobileNavbarTab(ev) { + ev.stopPropagation(); + if (this.discuss.activeMobileNavbarTabId === ev.detail.tabId) { + return; + } + this.discuss.clearReplyingToMessage(); + this.discuss.update({ activeMobileNavbarTabId: ev.detail.tabId }); + } + + /** + * @private + * @param {CustomEvent} ev + */ + _onThreadRendered(ev) { + this.trigger('o-update-control-panel'); + } + +} + +Object.assign(Discuss, { + components, + props: {}, + template: 'mail.Discuss', +}); + +return patchMixin(Discuss); + +}); diff --git a/addons/mail/static/src/components/discuss/discuss.scss b/addons/mail/static/src/components/discuss/discuss.scss new file mode 100644 index 00000000..5cddf101 --- /dev/null +++ b/addons/mail/static/src/components/discuss/discuss.scss @@ -0,0 +1,114 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_action_manager { + // bug with scrollable inside discuss mobile without this... + min-height: 0; +} + +.o-autogrow { + flex: 1 1 auto; +} + +.o_Discuss { + display: flex; + height: 100%; + min-height: 0; + + &.o-mobile { + flex-flow: column; + align-items: center; + } +} + +.o_Discuss_chatWindowHeader { + width: 100%; + flex: 0 0 auto; +} + +.o_Discuss_content { + height: 100%; + overflow: auto; + flex: 1 1 auto; + display: flex; + flex-flow: column; +} + +.o_Discuss_messagingNotInitialized { + flex: 1 1 auto; + display: flex; + align-items: center; + justify-content: center; +} + +.o_Discuss_messagingNotInitializedIcon { + margin-right: 3px; +} + +.o_Discuss_mobileAddItemHeader { + display: flex; + justify-content: center; + width: 100%; + padding: 0 10px; +} + +.o_Discuss_mobileAddItemHeaderInput { + flex: 1 1 auto; + margin-bottom: 8px; + padding: 8px; +} + +.o_Discuss_mobileMailboxSelection { + width: 100%; +} + +.o_Discuss_mobileNavbar { + width: 100%; +} + +.o_Discuss_noThread { + display: flex; + flex: 1 1 auto; + width: 100%; + align-items: center; + justify-content: center; +} + +.o_Discuss_replyingToMessageComposer { + width: 100%; +} + +.o_Discuss_sidebar { + height: 100%; + overflow: auto; + padding-top: 10px; + flex: 0 0 auto; +} + +.o_Discuss_thread { + flex: 1 1 auto; + + &.o-mobile { + width: 100%; + } +} + +.o_Discuss_notificationList { + width: 100%; + flex: 1 1 auto; +} +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_Discuss.o-mobile { + background-color: white; +} + +.o_Discuss_mobileAddItemHeaderInput { + appearance: none; + border: 1px solid gray('400'); + border-radius: 5px; + outline: none; +} diff --git a/addons/mail/static/src/components/discuss/discuss.xml b/addons/mail/static/src/components/discuss/discuss.xml new file mode 100644 index 00000000..ad9171a5 --- /dev/null +++ b/addons/mail/static/src/components/discuss/discuss.xml @@ -0,0 +1,106 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.Discuss" owl="1"> + <div class="o_Discuss" + t-att-class="{ + 'o-adding-item': discuss ? discuss.isAddingChannel or discuss.isAddingChat : false, + 'o-mobile': env.messaging ? env.messaging.device.isMobile : false, + }" + > + <t t-if="!env.isMessagingInitialized()"> + <div class="o_Discuss_messagingNotInitialized"><i class="o_Discuss_messagingNotInitializedIcon fa fa-spinner fa-spin"/>Please wait...</div> + </t> + <t t-else=""> + <t t-if="!env.messaging.device.isMobile"> + <DiscussSidebar class="o_Discuss_sidebar"/> + </t> + <t t-if="env.messaging.device.isMobile" t-call="mail.Discuss.content"/> + <t t-else=""> + <div class="o_Discuss_content"> + <t t-call="mail.Discuss.content"/> + </div> + </t> + <t t-if="discuss.hasModerationDiscardDialog"> + <ModerationDiscardDialog messageLocalIds="discuss.threadView.checkedMessages.map(message => message.localId)" t-on-dialog-closed="_onDialogClosedModerationDiscard"/> + </t> + <t t-if="discuss.hasModerationRejectDialog"> + <ModerationRejectDialog messageLocalIds="discuss.threadView.checkedMessages.map(message => message.localId)" t-on-dialog-closed="_onDialogClosedModerationReject"/> + </t> + </t> + </div> + </t> + + <t t-name="mail.Discuss.content" owl="1"> + <t t-if="env.messaging.device.isMobile and discuss.activeMobileNavbarTabId === 'mailbox'"> + <DiscussMobileMailboxSelection class="o_Discuss_mobileMailboxSelection"/> + </t> + <t t-if="env.messaging.device.isMobile and (discuss.isAddingChannel or discuss.isAddingChat)"> + <div class="o_Discuss_mobileAddItemHeader"> + <AutocompleteInput + class="o_Discuss_mobileAddItemHeaderInput" + isFocusOnMount="true" + isHtml="discuss.isAddingChannel" + placeholder="discuss.isAddingChannel ? addChannelInputPlaceholder : addChatInputPlaceholder" + select="_onMobileAddItemHeaderInputSelect" + source="_onMobileAddItemHeaderInputSource" + t-on-o-hide="_onHideMobileAddItemHeader" + /> + </div> + </t> + <t t-if="discuss.threadView"> + <ThreadView + class="o_Discuss_thread" + t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" + composerAttachmentsDetailsMode="'card'" + hasComposer="discuss.thread.model !== 'mail.box'" + hasComposerCurrentPartnerAvatar="!env.messaging.device.isMobile" + hasComposerThreadTyping="true" + hasMessageCheckbox="true" + hasSquashCloseMessages="discuss.thread.model !== 'mail.box'" + haveMessagesMarkAsReadIcon="discuss.thread === env.messaging.inbox" + haveMessagesReplyIcon="discuss.thread === env.messaging.inbox" + isDoFocus="discuss.isDoFocus" + selectedMessageLocalId="discuss.replyingToMessage and discuss.replyingToMessage.localId" + threadViewLocalId="discuss.threadView.localId" + t-on-o-focusin-composer="_onFocusinComposer" + t-on-o-rendered="_onThreadRendered" + t-ref="threadView" + /> + </t> + <t t-if="!discuss.thread and (!env.messaging.device.isMobile or discuss.activeMobileNavbarTabId === 'mailbox')"> + <div class="o_Discuss_noThread"> + No conversation selected. + </div> + </t> + <t t-if="env.messaging.device.isMobile and discuss.activeMobileNavbarTabId !== 'mailbox'"> + <NotificationList + class="o_Discuss_notificationList" + filter="discuss.activeMobileNavbarTabId" + /> + </t> + <t t-if="env.messaging.device.isMobile and !discuss.isReplyingToMessage"> + <MobileMessagingNavbar + class="o_Discuss_mobileNavbar" + activeTabId="discuss.activeMobileNavbarTabId" + tabs="mobileNavbarTabs()" + t-on-o-select-mobile-messaging-navbar-tab="_onSelectMobileNavbarTab" + /> + </t> + <t t-if="discuss.isReplyingToMessage"> + <Composer + class="o_Discuss_replyingToMessageComposer" + composerLocalId="discuss.replyingToMessage.originThread.composer.localId" + hasCurrentPartnerAvatar="!env.messaging.device.isMobile" + hasDiscardButton="true" + hasThreadName="true" + isDoFocus="discuss.isDoFocus" + textInputSendShortcuts="['ctrl-enter', 'meta-enter']" + t-on-o-focusin-composer="_onFocusinComposer" + t-on-o-message-posted="_onReplyingToMessageMessagePosted" + t-ref="composer" + /> + </t> + </t> + +</templates> diff --git a/addons/mail/static/src/components/discuss/tests/discuss_domain_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_domain_tests.js new file mode 100644 index 00000000..26431207 --- /dev/null +++ b/addons/mail/static/src/components/discuss/tests/discuss_domain_tests.js @@ -0,0 +1,408 @@ +odoo.define('mail/static/src/components/discuss/tests/discuss_domain_tests.js', function (require) { +'use strict'; + +const { + afterEach, + afterNextRender, + beforeEach, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('discuss', {}, function () { +QUnit.module('discuss_domain_tests.js', { + beforeEach() { + beforeEach(this); + + this.start = async params => { + const { afterEvent, env, widget } = await start(Object.assign({}, params, { + autoOpenDiscuss: true, + data: this.data, + hasDiscuss: true, + })); + this.afterEvent = afterEvent; + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('discuss should filter messages based on given domain', async function (assert) { + assert.expect(2); + + this.data['mail.message'].records.push({ + body: "test", + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + }, { + body: "not empty", + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + }); + await this.start(); + assert.containsN( + document.body, + '.o_Message', + 2, + "should have 2 messages in Inbox initially" + ); + + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + // simulate control panel search + this.env.messaging.discuss.update({ + stringifiedDomain: JSON.stringify([['body', 'ilike', 'test']]), + }); + }, + message: "should wait until search filter is applied", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + hint.data.fetchedMessages.length === 1 && + threadViewer.thread.model === 'mail.box' && + threadViewer.thread.id === 'inbox' + ); + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "should only have the 1 message containing 'test' remaining after doing a search" + ); +}); + +QUnit.test('discuss should keep filter domain on changing thread', async function (assert) { + assert.expect(3); + + this.data['mail.channel'].records.push({ id: 20 }); + this.data['mail.message'].records.push({ + body: "test", + channel_ids: [20], + }, { + body: "not empty", + channel_ids: [20], + }); + await this.start(); + const channel = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + assert.containsNone( + document.body, + '.o_Message', + "should have no message in Inbox initially" + ); + + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + // simulate control panel search + this.env.messaging.discuss.update({ + stringifiedDomain: JSON.stringify([['body', 'ilike', 'test']]), + }); + }, + message: "should wait until search filter is applied", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.box' && + threadViewer.thread.id === 'inbox' + ); + }, + }); + assert.containsNone( + document.body, + '.o_Message', + "should have still no message in Inbox after doing a search" + ); + + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${channel.localId}"] + `).click(); + }, + message: "should wait until channel 20 is loaded after clicking on it", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 20 + ); + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "should only have the 1 message containing 'test' in channel 20 (due to the domain still applied on changing thread)" + ); +}); + +QUnit.test('discuss should refresh filtered thread on receiving new message', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const channel = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${channel.localId}"] + `).click(); + }, + message: "should wait until channel 20 is loaded after clicking on it", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 20 + ); + }, + }); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + // simulate control panel search + this.env.messaging.discuss.update({ + stringifiedDomain: JSON.stringify([['body', 'ilike', 'test']]), + }); + }, + message: "should wait until search filter is applied", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 20 + ); + }, + }); + assert.containsNone( + document.body, + '.o_Message', + "should have initially no message in channel 20 matching the search 'test'" + ); + + // simulate receiving a message + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => this.env.services.rpc({ + route: '/mail/chat_post', + params: { + message_content: "test", + uuid: channel.uuid, + }, + }), + message: "should wait until channel 20 refreshed its filtered message list", + predicate: data => { + return ( + data.threadViewer.thread.model === 'mail.channel' && + data.threadViewer.thread.id === 20 && + data.hint.type === 'messages-loaded' + ); + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "should only have the 1 message containing 'test' in channel 20 after just receiving it" + ); +}); + +QUnit.test('discuss should refresh filtered thread on changing thread', async function (assert) { + assert.expect(4); + + this.data['mail.channel'].records.push({ id: 20 }, { id: 21 }); + await this.start(); + const channel20 = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + const channel21 = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 21, + model: 'mail.channel', + }); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${channel20.localId}"] + `).click(); + }, + message: "should wait until channel 20 is loaded after clicking on it", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 20 + ); + }, + }); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + // simulate control panel search + this.env.messaging.discuss.update({ + stringifiedDomain: JSON.stringify([['body', 'ilike', 'test']]), + }); + }, + message: "should wait until search filter is applied", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 20 + ); + }, + }); + assert.containsNone( + document.body, + '.o_Message', + "should have initially no message in channel 20 matching the search 'test'" + ); + + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${channel21.localId}"] + `).click(); + }, + message: "should wait until channel 21 is loaded after clicking on it", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 21 + ); + }, + }); + assert.containsNone( + document.body, + '.o_Message', + "should have no message in channel 21 matching the search 'test'" + ); + // simulate receiving a message on channel 20 while channel 21 is displayed + await this.env.services.rpc({ + route: '/mail/chat_post', + params: { + message_content: "test", + uuid: channel20.uuid, + }, + }); + assert.containsNone( + document.body, + '.o_Message', + "should still have no message in channel 21 matching the search 'test' after receiving a message on channel 20" + ); + + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${channel20.localId}"] + `).click(); + }, + message: "should wait until channel 20 is loaded with the new message after clicking on it", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 20 && + threadViewer.threadCache.fetchedMessages.length === 1 + ); + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "should now have the 1 message containing 'test' in channel 20 when displaying it, after having received the message while the channel was not visible" + ); +}); + +QUnit.test('select all and unselect all buttons should work on filtered thread', async function (assert) { + assert.expect(4); + + this.data['mail.channel'].records.push({ + id: 20, + is_moderator: true, + moderation: true, + name: "general", + }); + this.data['mail.message'].records.push({ + body: "<p>test</p>", + model: 'mail.channel', + moderation_status: 'pending_moderation', + res_id: 20, + }); + await this.start(); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${this.env.messaging.moderation.localId}"] + `).click(); + }, + message: "should wait until moderation box is loaded after clicking on it", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.box' && + threadViewer.thread.id === 'moderation' + ); + }, + }); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + // simulate control panel search + this.env.messaging.discuss.update({ + stringifiedDomain: JSON.stringify([['body', 'ilike', 'test']]), + }); + }, + message: "should wait until search filter is applied", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.box' && + threadViewer.thread.id === 'moderation' + ); + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "should only have the 1 message containing 'test' in moderation box" + ); + assert.notOk( + document.querySelector('.o_Message_checkbox').checked, + "the moderation checkbox should not be checked initially" + ); + + await afterNextRender(() => document.querySelector('.o_widget_Discuss_controlPanelButtonSelectAll').click()); + assert.ok( + document.querySelector('.o_Message_checkbox').checked, + "the moderation checkbox should be checked after clicking on 'select all'" + ); + + await afterNextRender(() => document.querySelector('.o_widget_Discuss_controlPanelButtonUnselectAll').click()); + assert.notOk( + document.querySelector('.o_Message_checkbox').checked, + "the moderation checkbox should be unchecked after clicking on 'unselect all'" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/discuss/tests/discuss_inbox_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_inbox_tests.js new file mode 100644 index 00000000..63b524eb --- /dev/null +++ b/addons/mail/static/src/components/discuss/tests/discuss_inbox_tests.js @@ -0,0 +1,725 @@ +odoo.define('mail/static/src/components/discuss/tests/discuss_inbox_tests.js', function (require) { +'use strict'; + +const { + afterEach, + afterNextRender, + beforeEach, + nextAnimationFrame, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const Bus = require('web.Bus'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('discuss', {}, function () { +QUnit.module('discuss_inbox_tests.js', { + beforeEach() { + beforeEach(this); + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + autoOpenDiscuss: true, + data: this.data, + hasDiscuss: true, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('reply: discard on pressing escape', async function (assert) { + assert.expect(9); + + // partner expected to be found by mention + this.data['res.partner'].records.push({ + email: "testpartnert@odoo.com", + id: 11, + name: "TestPartner", + }); + // message expected to be found in inbox + this.data['mail.message'].records.push({ + body: "not empty", + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 20, + }); + await this.start(); + assert.containsOnce( + document.body, + '.o_Message', + "should display a single message" + ); + + await afterNextRender(() => + document.querySelector('.o_Message_commandReply').click() + ); + assert.containsOnce( + document.body, + '.o_Composer', + "should have composer after clicking on reply to message" + ); + + await afterNextRender(() => + document.querySelector(`.o_Composer_buttonEmojis`).click() + ); + assert.containsOnce( + document.body, + '.o_EmojisPopover', + "emojis popover should be opened after click on emojis button" + ); + + await afterNextRender(() => { + const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" }); + document.querySelector(`.o_Composer_buttonEmojis`).dispatchEvent(ev); + }); + assert.containsNone( + document.body, + '.o_EmojisPopover', + "emojis popover should be closed after pressing escape on emojis button" + ); + assert.containsOnce( + document.body, + '.o_Composer', + "reply composer should still be opened after pressing escape on emojis button" + ); + + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "@"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + document.execCommand('insertText', false, "T"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + document.execCommand('insertText', false, "e"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + assert.containsOnce( + document.body, + '.o_ComposerSuggestion', + "mention suggestion should be opened after typing @" + ); + + await afterNextRender(() => { + const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" }); + document.querySelector(`.o_ComposerTextInput_textarea`).dispatchEvent(ev); + }); + assert.containsNone( + document.body, + '.o_ComposerSuggestion', + "mention suggestion should be closed after pressing escape on mention suggestion" + ); + assert.containsOnce( + document.body, + '.o_Composer', + "reply composer should still be opened after pressing escape on mention suggestion" + ); + + await afterNextRender(() => { + const ev = new window.KeyboardEvent('keydown', { bubbles: true, key: "Escape" }); + document.querySelector(`.o_ComposerTextInput_textarea`).dispatchEvent(ev); + }); + assert.containsNone( + document.body, + '.o_Composer', + "reply composer should be closed after pressing escape if there was no other priority escape handler" + ); +}); + +QUnit.test('reply: discard on discard button click', async function (assert) { + assert.expect(4); + + this.data['mail.message'].records.push({ + body: "not empty", + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 20, + }); + await this.start(); + assert.containsOnce( + document.body, + '.o_Message', + "should display a single message" + ); + + await afterNextRender(() => + document.querySelector('.o_Message_commandReply').click() + ); + assert.containsOnce( + document.body, + '.o_Composer', + "should have composer after clicking on reply to message" + ); + assert.containsOnce( + document.body, + '.o_Composer_buttonDiscard', + "composer should have a discard button" + ); + + await afterNextRender(() => + document.querySelector(`.o_Composer_buttonDiscard`).click() + ); + assert.containsNone( + document.body, + '.o_Composer', + "reply composer should be closed after clicking on discard" + ); +}); + +QUnit.test('reply: discard on reply button toggle', async function (assert) { + assert.expect(3); + + this.data['mail.message'].records.push({ + body: "not empty", + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 20, + }); + await this.start(); + assert.containsOnce( + document.body, + '.o_Message', + "should display a single message" + ); + + await afterNextRender(() => + document.querySelector('.o_Message_commandReply').click() + ); + assert.containsOnce( + document.body, + '.o_Composer', + "should have composer after clicking on reply to message" + ); + + await afterNextRender(() => + document.querySelector(`.o_Message_commandReply`).click() + ); + assert.containsNone( + document.body, + '.o_Composer', + "reply composer should be closed after clicking on reply button again" + ); +}); + +QUnit.test('reply: discard on click away', async function (assert) { + assert.expect(7); + + this.data['mail.message'].records.push({ + body: "not empty", + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 20, + }); + await this.start(); + assert.containsOnce( + document.body, + '.o_Message', + "should display a single message" + ); + + await afterNextRender(() => + document.querySelector('.o_Message_commandReply').click() + ); + assert.containsOnce( + document.body, + '.o_Composer', + "should have composer after clicking on reply to message" + ); + + document.querySelector(`.o_ComposerTextInput_textarea`).click(); + await nextAnimationFrame(); // wait just in case, but nothing is supposed to happen + assert.containsOnce( + document.body, + '.o_Composer', + "reply composer should still be there after clicking inside itself" + ); + + await afterNextRender(() => + document.querySelector(`.o_Composer_buttonEmojis`).click() + ); + assert.containsOnce( + document.body, + '.o_EmojisPopover', + "emojis popover should be opened after clicking on emojis button" + ); + + await afterNextRender(() => { + document.querySelector(`.o_EmojisPopover_emoji`).click(); + }); + assert.containsNone( + document.body, + '.o_EmojisPopover', + "emojis popover should be closed after selecting an emoji" + ); + assert.containsOnce( + document.body, + '.o_Composer', + "reply composer should still be there after selecting an emoji (even though it is technically a click away, it should be considered inside)" + ); + + await afterNextRender(() => + document.querySelector(`.o_Message`).click() + ); + assert.containsNone( + document.body, + '.o_Composer', + "reply composer should be closed after clicking away" + ); +}); + +QUnit.test('"reply to" composer should log note if message replied to is a note', async function (assert) { + assert.expect(6); + + this.data['mail.message'].records.push({ + body: "not empty", + is_discussion: false, + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 20, + }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_post') { + assert.step('message_post'); + assert.strictEqual( + args.kwargs.message_type, + "comment", + "should set message type as 'comment'" + ); + assert.strictEqual( + args.kwargs.subtype_xmlid, + "mail.mt_note", + "should set subtype_xmlid as 'note'" + ); + } + return this._super(...arguments); + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "should display a single message" + ); + + await afterNextRender(() => + document.querySelector('.o_Message_commandReply').click() + ); + assert.strictEqual( + document.querySelector('.o_Composer_buttonSend').textContent.trim(), + "Log", + "Send button text should be 'Log'" + ); + + await afterNextRender(() => + document.execCommand('insertText', false, "Test") + ); + await afterNextRender(() => + document.querySelector('.o_Composer_buttonSend').click() + ); + assert.verifySteps(['message_post']); +}); + +QUnit.test('"reply to" composer should send message if message replied to is not a note', async function (assert) { + assert.expect(6); + + this.data['mail.message'].records.push({ + body: "not empty", + is_discussion: true, + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 20, + }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_post') { + assert.step('message_post'); + assert.strictEqual( + args.kwargs.message_type, + "comment", + "should set message type as 'comment'" + ); + assert.strictEqual( + args.kwargs.subtype_xmlid, + "mail.mt_comment", + "should set subtype_xmlid as 'comment'" + ); + } + return this._super(...arguments); + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "should display a single message" + ); + + await afterNextRender(() => + document.querySelector('.o_Message_commandReply').click() + ); + assert.strictEqual( + document.querySelector('.o_Composer_buttonSend').textContent.trim(), + "Send", + "Send button text should be 'Send'" + ); + + await afterNextRender(() => + document.execCommand('insertText', false, "Test") + ); + await afterNextRender(() => + document.querySelector('.o_Composer_buttonSend').click() + ); + assert.verifySteps(['message_post']); +}); + +QUnit.test('error notifications should not be shown in Inbox', async function (assert) { + assert.expect(3); + + this.data['mail.message'].records.push({ + body: "not empty", + id: 100, + model: 'mail.channel', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 20, + }); + this.data['mail.notification'].records.push({ + mail_message_id: 100, // id of related message + res_partner_id: this.data.currentPartnerId, // must be for current partner + notification_status: 'exception', + notification_type: 'email', + }); + await this.start(); + assert.containsOnce( + document.body, + '.o_Message', + "should display a single message" + ); + assert.containsOnce( + document.body, + '.o_Message_originThreadLink', + "should display origin thread link" + ); + assert.containsNone( + document.body, + '.o_Message_notificationIcon', + "should not display any notification icon in Inbox" + ); +}); + +QUnit.test('show subject of message in Inbox', async function (assert) { + assert.expect(3); + + this.data['mail.message'].records.push({ + body: "not empty", + model: 'mail.channel', // random existing model + needaction: true, // message_fetch domain + needaction_partner_ids: [this.data.currentPartnerId], // not needed, for consistency + subject: "Salutations, voyageur", // will be asserted in the test + }); + await this.start(); + assert.containsOnce( + document.body, + '.o_Message', + "should display a single message" + ); + assert.containsOnce( + document.body, + '.o_Message_subject', + "should display subject of the message" + ); + assert.strictEqual( + document.querySelector('.o_Message_subject').textContent, + "Subject: Salutations, voyageur", + "Subject of the message should be 'Salutations, voyageur'" + ); +}); + +QUnit.test('show subject of message in history', async function (assert) { + assert.expect(3); + + this.data['mail.message'].records.push({ + body: "not empty", + history_partner_ids: [3], // not needed, for consistency + model: 'mail.channel', // random existing model + subject: "Salutations, voyageur", // will be asserted in the test + }); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.box_history', + }, + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "should display a single message" + ); + assert.containsOnce( + document.body, + '.o_Message_subject', + "should display subject of the message" + ); + assert.strictEqual( + document.querySelector('.o_Message_subject').textContent, + "Subject: Salutations, voyageur", + "Subject of the message should be 'Salutations, voyageur'" + ); +}); + +QUnit.test('click on (non-channel/non-partner) origin thread link should redirect to form view', async function (assert) { + assert.expect(9); + + const bus = new Bus(); + bus.on('do-action', null, payload => { + // Callback of doing an action (action manager). + // Expected to be called on click on origin thread link, + // which redirects to form view of record related to origin thread + assert.step('do-action'); + assert.strictEqual( + payload.action.type, + 'ir.actions.act_window', + "action should open a view" + ); + assert.deepEqual( + payload.action.views, + [[false, 'form']], + "action should open form view" + ); + assert.strictEqual( + payload.action.res_model, + 'some.model', + "action should open view with model 'some.model' (model of message origin thread)" + ); + assert.strictEqual( + payload.action.res_id, + 10, + "action should open view with id 10 (id of message origin thread)" + ); + }); + this.data['some.model'] = { fields: {}, records: [{ id: 10 }] }; + this.data['mail.message'].records.push({ + body: "not empty", + model: 'some.model', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + record_name: "Some record", + res_id: 10, + }); + await this.start({ + env: { + bus, + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "should display a single message" + ); + assert.containsOnce( + document.body, + '.o_Message_originThreadLink', + "should display origin thread link" + ); + assert.strictEqual( + document.querySelector('.o_Message_originThreadLink').textContent, + "Some record", + "origin thread link should display record name" + ); + + document.querySelector('.o_Message_originThreadLink').click(); + assert.verifySteps(['do-action'], "should have made an action on click on origin thread (to open form view)"); +}); + +QUnit.test('subject should not be shown when subject is the same as the thread name', async function (assert) { + assert.expect(1); + + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [100], + model: 'mail.channel', + res_id: 100, + needaction: true, + subject: "Salutations, voyageur", + }); + this.data['mail.channel'].records.push({ + id: 100, + name: "Salutations, voyageur", + }); + await this.start(); + + assert.containsNone( + document.body, + '.o_Message_subject', + "subject should not be shown when subject is the same as the thread name" + ); +}); + +QUnit.test('subject should not be shown when subject is the same as the thread name and both have the same prefix', async function (assert) { + assert.expect(1); + + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [100], + model: 'mail.channel', + res_id: 100, + needaction: true, + subject: "Re: Salutations, voyageur", + }); + this.data['mail.channel'].records.push({ + id: 100, + name: "Re: Salutations, voyageur", + }); + await this.start(); + + assert.containsNone( + document.body, + '.o_Message_subject', + "subject should not be shown when subject is the same as the thread name and both have the same prefix" + ); +}); + +QUnit.test('subject should not be shown when subject differs from thread name only by the "Re:" prefix', async function (assert) { + assert.expect(1); + + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [100], + model: 'mail.channel', + res_id: 100, + needaction: true, + subject: "Re: Salutations, voyageur", + }); + this.data['mail.channel'].records.push({ + id: 100, + name: "Salutations, voyageur", + }); + await this.start(); + + assert.containsNone( + document.body, + '.o_Message_subject', + "should not display subject when subject differs from thread name only by the 'Re:' prefix" + ); +}); + +QUnit.test('subject should not be shown when subject differs from thread name only by the "Fw:" and "Re:" prefix', async function (assert) { + assert.expect(1); + + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [100], + model: 'mail.channel', + res_id: 100, + needaction: true, + subject: "Fw: Re: Salutations, voyageur", + }); + this.data['mail.channel'].records.push({ + id: 100, + name: "Salutations, voyageur", + }); + await this.start(); + + assert.containsNone( + document.body, + '.o_Message_subject', + "should not display subject when subject differs from thread name only by the 'Fw:' and Re:' prefix" + ); +}); + +QUnit.test('subject should be shown when the thread name has an extra prefix compared to subject', async function (assert) { + assert.expect(1); + + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [100], + model: 'mail.channel', + res_id: 100, + needaction: true, + subject: "Salutations, voyageur", + }); + this.data['mail.channel'].records.push({ + id: 100, + name: "Re: Salutations, voyageur", + }); + await this.start(); + + assert.containsOnce( + document.body, + '.o_Message_subject', + "subject should be shown when the thread name has an extra prefix compared to subject" + ); +}); + +QUnit.test('subject should not be shown when subject differs from thread name only by the "fw:" prefix and both contain another common prefix', async function (assert) { + assert.expect(1); + + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [100], + model: 'mail.channel', + res_id: 100, + needaction: true, + subject: "fw: re: Salutations, voyageur", + }); + this.data['mail.channel'].records.push({ + id: 100, + name: "Re: Salutations, voyageur", + }); + await this.start(); + + assert.containsNone( + document.body, + '.o_Message_subject', + "subject should not be shown when subject differs from thread name only by the 'fw:' prefix and both contain another common prefix" + ); +}); + +QUnit.test('subject should not be shown when subject differs from thread name only by the "Re: Re:" prefix', async function (assert) { + assert.expect(1); + + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [100], + model: 'mail.channel', + res_id: 100, + needaction: true, + subject: "Re: Re: Salutations, voyageur", + }); + this.data['mail.channel'].records.push({ + id: 100, + name: "Salutations, voyageur", + }); + await this.start(); + + assert.containsNone( + document.body, + '.o_Message_subject', + "should not display subject when subject differs from thread name only by the 'Re: Re:'' prefix" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/discuss/tests/discuss_moderation_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_moderation_tests.js new file mode 100644 index 00000000..c4c53cb5 --- /dev/null +++ b/addons/mail/static/src/components/discuss/tests/discuss_moderation_tests.js @@ -0,0 +1,1180 @@ +odoo.define('mail/static/src/components/discuss/tests/discuss_moderation_tests.js', function (require) { +'use strict'; + +const { + afterEach, + afterNextRender, + beforeEach, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('discuss', {}, function () { +QUnit.module('discuss_moderation_tests.js', { + beforeEach() { + beforeEach(this); + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + autoOpenDiscuss: true, + data: this.data, + hasDiscuss: true, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('as moderator, moderated channel with pending moderation message', async function (assert) { + assert.expect(37); + + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message and will be referenced in the test + is_moderator: true, // current user is expected to be moderator of channel + moderation: true, // for consistency, but not used in the scope of this test + name: "general", // random name, will be asserted in the test + }); + this.data['mail.message'].records.push({ + body: "<p>test</p>", // random body, will be asserted in the test + model: 'mail.channel', // expected value to link message to channel + moderation_status: 'pending_moderation', // message is expected to be pending moderation + res_id: 20, // id of the channel + }); + await this.start(); + + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.moderation.localId + }"] + `), + "should display the moderation box in the sidebar" + ); + const mailboxCounter = document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.moderation.localId + }"] + .o_DiscussSidebarItem_counter + `); + assert.ok( + mailboxCounter, + "there should be a counter next to the moderation mailbox in the sidebar" + ); + assert.strictEqual( + mailboxCounter.textContent.trim(), + "1", + "the mailbox counter of the moderation mailbox should display '1'" + ); + + // 1. go to moderation mailbox + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.moderation.localId + }"] + `).click() + ); + // check message + assert.containsOnce( + document.body, + '.o_Message', + "should be only one message in moderation box" + ); + assert.strictEqual( + document.querySelector('.o_Message_content').textContent, + "test", + "this message pending moderation should have the correct content" + ); + assert.containsOnce( + document.body, + '.o_Message_originThreadLink', + "thee message should have one origin" + ); + assert.strictEqual( + document.querySelector('.o_Message_originThreadLink').textContent, + "#general", + "the message pending moderation should have correct origin as its linked document" + ); + assert.containsOnce( + document.body, + '.o_Message_checkbox', + "there should be a moderation checkbox next to the message" + ); + assert.notOk( + document.querySelector('.o_Message_checkbox').checked, + "the moderation checkbox should be unchecked by default" + ); + // check select all (enabled) / unselect all (disabled) buttons + assert.containsOnce( + document.body, + '.o_widget_Discuss_controlPanelButtonSelectAll', + "there should be a 'Select All' button in the control panel" + ); + assert.doesNotHaveClass( + document.querySelector('.o_widget_Discuss_controlPanelButtonSelectAll'), + 'disabled', + "the 'Select All' button should not be disabled" + ); + assert.containsOnce( + document.body, + '.o_widget_Discuss_controlPanelButtonUnselectAll', + "there should be a 'Unselect All' button in the control panel" + ); + assert.hasClass( + document.querySelector('.o_widget_Discuss_controlPanelButtonUnselectAll'), + 'disabled', + "the 'Unselect All' button should be disabled" + ); + // check moderate all buttons (invisible) + assert.containsN( + document.body, + '.o_widget_Discuss_controlPanelButtonModeration', + 3, + "there should be 3 buttons to moderate selected messages in the control panel" + ); + assert.containsOnce( + document.body, + '.o_widget_Discuss_controlPanelButtonModeration.o-accept', + "there should one moderate button to accept messages pending moderation" + ); + assert.isNotVisible( + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept'), + "the moderate button 'Accept' should be invisible by default" + ); + assert.containsOnce( + document.body, + '.o_widget_Discuss_controlPanelButtonModeration.o-reject', + "there should one moderate button to reject messages pending moderation" + ); + assert.isNotVisible( + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-reject'), + "the moderate button 'Reject' should be invisible by default" + ); + assert.containsOnce( + document.body, + '.o_widget_Discuss_controlPanelButtonModeration.o-discard', + "there should one moderate button to discard messages pending moderation" + ); + assert.isNotVisible( + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-discard'), + "the moderate button 'Discard' should be invisible by default" + ); + + // click on message moderation checkbox + await afterNextRender(() => document.querySelector('.o_Message_checkbox').click()); + assert.ok( + document.querySelector('.o_Message_checkbox').checked, + "the moderation checkbox should become checked after click" + ); + // check select all (disabled) / unselect all buttons (enabled) + assert.hasClass( + document.querySelector('.o_widget_Discuss_controlPanelButtonSelectAll'), + 'disabled', + "the 'Select All' button should be disabled" + ); + assert.doesNotHaveClass( + document.querySelector('.o_widget_Discuss_controlPanelButtonUnselectAll'), + 'disabled', + "the 'Unselect All' button should not be disabled" + ); + // check moderate all buttons updated (visible) + assert.isVisible( + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept'), + "the moderate button 'Accept' should be visible" + ); + assert.isVisible( + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-reject'), + "the moderate button 'Reject' should be visible" + ); + assert.isVisible( + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-discard'), + "the moderate button 'Discard' should be visible" + ); + + // test select buttons + await afterNextRender(() => + document.querySelector('.o_widget_Discuss_controlPanelButtonUnselectAll').click() + ); + assert.notOk( + document.querySelector('.o_Message_checkbox').checked, + "the moderation checkbox should become unchecked after click" + ); + + await afterNextRender(() => + document.querySelector('.o_widget_Discuss_controlPanelButtonSelectAll').click() + ); + assert.ok( + document.querySelector('.o_Message_checkbox').checked, + "the moderation checkbox should become checked again after click" + ); + + // 2. go to channel 'general' + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).click() + ); + // check correct message + assert.containsOnce( + document.body, + '.o_Message', + "should be only one message in general channel" + ); + assert.containsOnce( + document.body, + '.o_Message_checkbox', + "there should be a moderation checkbox next to the message" + ); + assert.notOk( + document.querySelector('.o_Message_checkbox').checked, + "the moderation checkbox should not be checked here" + ); + await afterNextRender(() => document.querySelector('.o_Message_checkbox').click()); + // Don't test moderation actions visibility, since it is similar to moderation box. + + // 3. test discard button + await afterNextRender(() => + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-discard').click() + ); + assert.containsOnce( + document.body, + '.o_ModerationDiscardDialog', + "discard dialog should be open" + ); + // the dialog will be tested separately + await afterNextRender(() => + document.querySelector('.o_ModerationDiscardDialog .o-cancel').click() + ); + assert.containsNone( + document.body, + '.o_ModerationDiscardDialog', + "discard dialog should be closed" + ); + + // 4. test reject button + await afterNextRender(() => + document.querySelector(` + .o_widget_Discuss_controlPanelButtonModeration.o-reject + `).click() + ); + assert.containsOnce( + document.body, + '.o_ModerationRejectDialog', + "reject dialog should be open" + ); + // the dialog will be tested separately + await afterNextRender(() => + document.querySelector('.o_ModerationRejectDialog .o-cancel').click() + ); + assert.containsNone( + document.body, + '.o_ModerationRejectDialog', + "reject dialog should be closed" + ); + + // 5. test accept button + await afterNextRender(() => + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept').click() + ); + assert.containsOnce( + document.body, + '.o_Message', + "should still be only one message in general channel" + ); + assert.containsNone( + document.body, + '.o_Message_checkbox', + "there should not be a moderation checkbox next to the message" + ); +}); + +QUnit.test('as moderator, accept pending moderation message', async function (assert) { + assert.expect(12); + + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message and will be referenced in the test + is_moderator: true, // current user is expected to be moderator of channel + moderation: true, // for consistency, but not used in the scope of this test + name: "general", // random name, will be asserted in the test + }); + this.data['mail.message'].records.push({ + body: "<p>test</p>", // random body, will be asserted in the test + id: 100, // random unique id, will be asserted during the test + model: 'mail.channel', // expected value to link message to channel + moderation_status: 'pending_moderation', // message is expected to be pending moderation + res_id: 20, // id of the channel + }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'moderate') { + assert.step('moderate'); + const messageIDs = args.args[0]; + const decision = args.args[1]; + assert.strictEqual( + messageIDs.length, + 1, + "should moderate one message" + ); + assert.strictEqual( + messageIDs[0], + 100, + "should moderate message with ID 100" + ); + assert.strictEqual( + decision, + 'accept', + "should accept the message" + ); + } + return this._super(...arguments); + }, + }); + + // 1. go to moderation box + const moderationBox = document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.moderation.localId + }"] + `); + assert.ok( + moderationBox, + "should display the moderation box" + ); + + await afterNextRender(() => moderationBox.click()); + assert.ok( + document.querySelector(` + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `), + "should display the message to moderate" + ); + const acceptButton = document.querySelector(` + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + .o_Message_moderationAction.o-accept + `); + assert.ok(acceptButton, "should display the accept button"); + + await afterNextRender(() => acceptButton.click()); + assert.verifySteps(['moderate']); + assert.containsOnce( + document.body, + '.o_MessageList_emptyTitle', + "should now have no message displayed in moderation box" + ); + + // 2. go to channel 'general' + const channel = document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `); + assert.ok( + channel, + "should display the general channel" + ); + + await afterNextRender(() => channel.click()); + const message = document.querySelector(` + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `); + assert.ok( + message, + "should display the accepted message" + ); + assert.containsNone( + message, + '.o_Message_moderationPending', + "the message should not be pending moderation" + ); +}); + +QUnit.test('as moderator, reject pending moderation message (reject with explanation)', async function (assert) { + assert.expect(23); + + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message and will be referenced in the test + is_moderator: true, // current user is expected to be moderator of channel + moderation: true, // for consistency, but not used in the scope of this test + name: "general", // random name, will be asserted in the test + }); + this.data['mail.message'].records.push({ + body: "<p>test</p>", // random body, will be asserted in the test + id: 100, // random unique id, will be asserted during the test + model: 'mail.channel', // expected value to link message to channel + moderation_status: 'pending_moderation', // message is expected to be pending moderation + res_id: 20, // id of the channel + }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'moderate') { + assert.step('moderate'); + const messageIDs = args.args[0]; + const decision = args.args[1]; + const kwargs = args.kwargs; + assert.strictEqual( + messageIDs.length, + 1, + "should moderate one message" + ); + assert.strictEqual( + messageIDs[0], + 100, + "should moderate message with ID 100" + ); + assert.strictEqual( + decision, + 'reject', + "should reject the message" + ); + assert.strictEqual( + kwargs.title, + "Message Rejected", + "should have correct reject message title" + ); + assert.strictEqual( + kwargs.comment, + "Your message was rejected by moderator.", + "should have correct reject message body / comment" + ); + } + return this._super(...arguments); + }, + }); + + // 1. go to moderation box + const moderationBox = document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.moderation.localId + }"] + `); + assert.ok( + moderationBox, + "should display the moderation box" + ); + + await afterNextRender(() => moderationBox.click()); + const pendingMessage = document.querySelector(` + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `); + assert.ok( + pendingMessage, + "should display the message to moderate" + ); + const rejectButton = pendingMessage.querySelector(':scope .o_Message_moderationAction.o-reject'); + assert.ok( + rejectButton, + "should display the reject button" + ); + + await afterNextRender(() => rejectButton.click()); + const dialog = document.querySelector('.o_ModerationRejectDialog'); + assert.ok( + dialog, + "a dialog should be prompt to the moderator on click reject" + ); + assert.strictEqual( + dialog.querySelector('.modal-title').textContent, + "Send explanation to author", + "dialog should have correct title" + ); + + const messageTitle = dialog.querySelector(':scope .o_ModerationRejectDialog_title'); + assert.ok( + messageTitle, + "should have a title for rejecting" + ); + assert.hasAttrValue( + messageTitle, + 'placeholder', + "Subject", + "title for reject reason should have correct placeholder" + ); + assert.strictEqual( + messageTitle.value, + "Message Rejected", + "title for reject reason should have correct default value" + ); + + const messageComment = dialog.querySelector(':scope .o_ModerationRejectDialog_comment'); + assert.ok( + messageComment, + "should have a comment for rejecting" + ); + assert.hasAttrValue( + messageComment, + 'placeholder', + "Mail Body", + "comment for reject reason should have correct placeholder" + ); + assert.strictEqual( + messageComment.value, + "Your message was rejected by moderator.", + "comment for reject reason should have correct default text content" + ); + const confirmReject = dialog.querySelector(':scope .o-reject'); + assert.ok( + confirmReject, + "should have reject button" + ); + assert.strictEqual( + confirmReject.textContent, + "Reject" + ); + + await afterNextRender(() => confirmReject.click()); + assert.verifySteps(['moderate']); + assert.containsOnce( + document.body, + '.o_MessageList_emptyTitle', + "should now have no message displayed in moderation box" + ); + + // 2. go to channel 'general' + const channel = document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `); + assert.ok( + channel, + 'should display the general channel' + ); + + await afterNextRender(() => channel.click()); + assert.containsNone( + document.body, + '.o_Message', + "should now have no message in channel" + ); +}); + +QUnit.test('as moderator, discard pending moderation message (reject without explanation)', async function (assert) { + assert.expect(16); + + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message and will be referenced in the test + is_moderator: true, // current user is expected to be moderator of channel + moderation: true, // for consistency, but not used in the scope of this test + name: "general", // random name, will be asserted in the test + }); + this.data['mail.message'].records.push({ + body: "<p>test</p>", // random body, will be asserted in the test + id: 100, // random unique id, will be asserted during the test + model: 'mail.channel', // expected value to link message to channel + moderation_status: 'pending_moderation', // message is expected to be pending moderation + res_id: 20, // id of the channel + }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'moderate') { + assert.step('moderate'); + const messageIDs = args.args[0]; + const decision = args.args[1]; + assert.strictEqual(messageIDs.length, 1, "should moderate one message"); + assert.strictEqual(messageIDs[0], 100, "should moderate message with ID 100"); + assert.strictEqual(decision, 'discard', "should discard the message"); + } + return this._super(...arguments); + }, + }); + + // 1. go to moderation box + const moderationBox = document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.moderation.localId + }"] + `); + assert.ok( + moderationBox, + "should display the moderation box" + ); + + await afterNextRender(() => moderationBox.click()); + const pendingMessage = document.querySelector(` + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `); + assert.ok( + pendingMessage, + "should display the message to moderate" + ); + + const discardButton = pendingMessage.querySelector(` + :scope .o_Message_moderationAction.o-discard + `); + assert.ok( + discardButton, + "should display the discard button" + ); + + await afterNextRender(() => discardButton.click()); + const dialog = document.querySelector('.o_ModerationDiscardDialog'); + assert.ok( + dialog, + "a dialog should be prompt to the moderator on click discard" + ); + assert.strictEqual( + dialog.querySelector('.modal-title').textContent, + "Confirmation", + "dialog should have correct title" + ); + assert.strictEqual( + dialog.textContent, + "Confirmation×You are going to discard 1 message.Do you confirm the action?DiscardCancel", + "should warn the user on discard action" + ); + + const confirmDiscard = dialog.querySelector(':scope .o-discard'); + assert.ok( + confirmDiscard, + "should have discard button" + ); + assert.strictEqual( + confirmDiscard.textContent, + "Discard" + ); + + await afterNextRender(() => confirmDiscard.click()); + assert.verifySteps(['moderate']); + assert.containsOnce( + document.body, + '.o_MessageList_emptyTitle', + "should now have no message displayed in moderation box" + ); + + // 2. go to channel 'general' + const channel = document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `); + assert.ok( + channel, + "should display the general channel" + ); + + await afterNextRender(() => channel.click()); + assert.containsNone( + document.body, + '.o_Message', + "should now have no message in channel" + ); +}); + +QUnit.test('as author, send message in moderated channel', async function (assert) { + assert.expect(4); + + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message and will be referenced in the test + moderation: true, // channel must be moderated to test the feature + name: "general", // random name, will be asserted in the test + }); + await this.start(); + const channel = document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `); + assert.ok( + channel, + "should display the general channel" + ); + + // go to channel 'general' + await afterNextRender(() => channel.click()); + assert.containsNone( + document.body, + '.o_Message', + "should have no message in channel" + ); + + // post a message + await afterNextRender(() => { + const textInput = document.querySelector('.o_ComposerTextInput_textarea'); + textInput.focus(); + document.execCommand('insertText', false, "Some Text"); + }); + await afterNextRender(() => document.querySelector('.o_Composer_buttonSend').click()); + const messagePending = document.querySelector('.o_Message_moderationPending'); + assert.ok( + messagePending, + "should display the pending message with pending info" + ); + assert.hasClass( + messagePending, + 'o-author', + "the message should be pending moderation as author" + ); +}); + +QUnit.test('as author, sent message accepted in moderated channel', async function (assert) { + assert.expect(5); + + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message and will be referenced in the test + moderation: true, // for consistency, but not used in the scope of this test + name: "general", // random name, will be asserted in the test + }); + this.data['mail.message'].records.push({ + body: "not empty", + id: 100, // random unique id, will be referenced in the test + model: 'mail.channel', // expected value to link message to channel + moderation_status: 'pending_moderation', // message is expected to be pending + res_id: 20, // id of the channel + }); + await this.start(); + + const channel = document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `); + assert.ok( + channel, + "should display the general channel" + ); + + await afterNextRender(() => channel.click()); + const messagePending = document.querySelector(` + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + .o_Message_moderationPending + `); + assert.ok( + messagePending, + "should display the pending message with pending info" + ); + assert.hasClass( + messagePending, + 'o-author', + "the message should be pending moderation as author" + ); + + // simulate accepted message + await afterNextRender(() => { + const messageData = { + id: 100, + moderation_status: 'accepted', + }; + const notification = [[false, 'mail.channel', 20], messageData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + + // check message is accepted + const message = document.querySelector(` + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `); + assert.ok( + message, + "should still display the message" + ); + assert.containsNone( + message, + '.o_Message_moderationPending', + "the message should not be in pending moderation anymore" + ); +}); + +QUnit.test('as author, sent message rejected in moderated channel', async function (assert) { + assert.expect(4); + + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message and will be referenced in the test + moderation: true, // for consistency, but not used in the scope of this test + name: "general", // random name, will be asserted in the test + }); + this.data['mail.message'].records.push({ + body: "not empty", + id: 100, // random unique id, will be referenced in the test + model: 'mail.channel', // expected value to link message to channel + moderation_status: 'pending_moderation', // message is expected to be pending + res_id: 20, // id of the channel + }); + await this.start(); + + const channel = document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `); + assert.ok( + channel, + "should display the general channel" + ); + + await afterNextRender(() => channel.click()); + const messagePending = document.querySelector(` + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + .o_Message_moderationPending + `); + assert.ok( + messagePending, + "should display the pending message with pending info" + ); + assert.hasClass( + messagePending, + 'o-author', + "the message should be pending moderation as author" + ); + + // simulate reject from moderator + await afterNextRender(() => { + const notifData = { + type: 'deletion', + message_ids: [100], + }; + const notification = [[false, 'res.partner', this.env.messaging.currentPartner.id], notifData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + // check no message + assert.containsNone( + document.body, + '.o_Message', + "message should be removed from channel after reject" + ); +}); + +QUnit.test('as moderator, pending moderation message accessibility', async function (assert) { + // pending moderation message should appear in moderation box and in origin thread + assert.expect(3); + + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message and will be referenced in the test + is_moderator: true, // current user is expected to be moderator of channel + moderation: true, // channel must be moderated to test the feature + }); + this.data['mail.message'].records.push({ + body: "not empty", + id: 100, // random unique id, will be referenced in the test + model: 'mail.channel', // expected value to link message to channel + moderation_status: 'pending_moderation', // message is expected to be pending + res_id: 20, // id of the channel + }); + await this.start(); + + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ id: 20, model: 'mail.channel' }); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.moderation.localId + }"] + `), + "should display the moderation box in the sidebar" + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${thread.localId}"] + `).click() + ); + const message = this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }); + assert.containsOnce( + document.body, + `.o_Message[data-message-local-id="${message.localId}"]`, + "the pending moderation message should be in the channel" + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.moderation.localId + }"] + `).click() + ); + assert.containsOnce( + document.body, + `.o_Message[data-message-local-id="${message.localId}"]`, + "the pending moderation message should be in moderation box" + ); +}); + +QUnit.test('as author, pending moderation message should appear in origin thread', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message and will be referenced in the test + moderation: true, // channel must be moderated to test the feature + }); + this.data['mail.message'].records.push({ + author_id: this.data.currentPartnerId, // test as author of message + body: "not empty", + id: 100, // random unique id, will be referenced in the test + model: 'mail.channel', // expected value to link message to channel + moderation_status: 'pending_moderation', // message is expected to be pending + res_id: 20, // id of the channel + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ id: 20, model: 'mail.channel' }); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${thread.localId}"] + `).click() + ); + const message = this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }); + assert.containsOnce( + document.body, + `.o_Message[data-message-local-id="${message.localId}"]`, + "the pending moderation message should be in the channel" + ); +}); + +QUnit.test('as moderator, new pending moderation message posted by someone else', async function (assert) { + // the message should appear in origin thread and moderation box if I moderate it + assert.expect(3); + + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message and will be referenced in the test + is_moderator: true, // current user is expected to be moderator of channel + moderation: true, // channel must be moderated to test the feature + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ id: 20, model: 'mail.channel' }); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${thread.localId}"] + `).click() + ); + assert.containsNone( + document.body, + `.o_Message`, + "should have no message in the channel initially" + ); + + // simulate receiving the message + const messageData = { + author_id: [10, 'john doe'], // random id, different than current partner + body: "not empty", + channel_ids: [], // server do NOT return channel_id of the message if pending moderation + id: 1, // random unique id + model: 'mail.channel', // expected value to link message to channel + moderation_status: 'pending_moderation', // message is expected to be pending + res_id: 20, // id of the channel + }; + await afterNextRender(() => { + const notifications = [[ + ['my-db', 'res.partner', this.env.messaging.currentPartner.id], + { type: 'moderator', message: messageData }, + ]]; + this.widget.call('bus_service', 'trigger', 'notification', notifications); + }); + const message = this.env.models['mail.message'].findFromIdentifyingData({ id: 1 }); + assert.containsOnce( + document.body, + `.o_Message[data-message-local-id="${message.localId}"]`, + "the pending moderation message should be in the channel" + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.moderation.localId + }"] + `).click() + ); + assert.containsOnce( + document.body, + `.o_Message[data-message-local-id="${message.localId}"]`, + "the pending moderation message should be in moderation box" + ); +}); + +QUnit.test('accept multiple moderation messages', async function (assert) { + assert.expect(5); + + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message and will be referenced in the test + is_moderator: true, // current user is expected to be moderator of channel + moderation: true, // channel must be moderated to test the feature + }); + this.data['mail.message'].records.push( + { + body: "not empty", + model: 'mail.channel', + moderation_status: 'pending_moderation', + res_id: 20, + }, + { + body: "not empty", + model: 'mail.channel', + moderation_status: 'pending_moderation', + res_id: 20, + }, + { + body: "not empty", + model: 'mail.channel', + moderation_status: 'pending_moderation', + res_id: 20, + } + ); + + await this.start({ + discuss: { + params: { + default_active_id: 'mail.box_moderation', + }, + }, + }); + + assert.containsN( + document.body, + '.o_Message', + 3, + "should initially display 3 messages" + ); + + await afterNextRender(() => { + document.querySelectorAll('.o_Message_checkbox')[0].click(); + document.querySelectorAll('.o_Message_checkbox')[1].click(); + }); + assert.containsN( + document.body, + '.o_Message_checkbox:checked', + 2, + "2 messages should have been checked after clicking on their respective checkbox" + ); + assert.doesNotHaveClass( + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept'), + 'o_hidden', + "global accept button should be displayed as two messages are selected" + ); + + await afterNextRender(() => + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept').click() + ); + assert.containsN( + document.body, + '.o_Message', + 1, + "should display 1 message as the 2 others have been accepted" + ); + assert.hasClass( + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept'), + 'o_hidden', + "global accept button should no longer be displayed as messages have been unselected" + ); +}); + +QUnit.test('accept multiple moderation messages after having accepted other messages', async function (assert) { + assert.expect(5); + + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message and will be referenced in the test + is_moderator: true, // current user is expected to be moderator of channel + moderation: true, // channel must be moderated to test the feature + }); + this.data['mail.message'].records.push( + { + body: "not empty", + model: 'mail.channel', + moderation_status: 'pending_moderation', + res_id: 20, + }, + { + body: "not empty", + model: 'mail.channel', + moderation_status: 'pending_moderation', + res_id: 20, + }, + { + body: "not empty", + model: 'mail.channel', + moderation_status: 'pending_moderation', + res_id: 20, + } + ); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.box_moderation', + }, + }, + }); + assert.containsN( + document.body, + '.o_Message', + 3, + "should initially display 3 messages" + ); + + await afterNextRender(() => { + document.querySelectorAll('.o_Message_checkbox')[0].click(); + }); + await afterNextRender(() => + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept').click() + ); + await afterNextRender(() => document.querySelectorAll('.o_Message_checkbox')[0].click()); + assert.containsOnce( + document.body, + '.o_Message_checkbox:checked', + "a message should have been checked after clicking on its checkbox" + ); + assert.doesNotHaveClass( + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept'), + 'o_hidden', + "global accept button should be displayed as a message is selected" + ); + + await afterNextRender(() => + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept').click() + ); + assert.containsOnce( + document.body, + '.o_Message', + "should display only one message left after the two others has been accepted" + ); + assert.hasClass( + document.querySelector('.o_widget_Discuss_controlPanelButtonModeration.o-accept'), + 'o_hidden', + "global accept button should no longer be displayed as message has been unselected" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/discuss/tests/discuss_pinned_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_pinned_tests.js new file mode 100644 index 00000000..a24ce411 --- /dev/null +++ b/addons/mail/static/src/components/discuss/tests/discuss_pinned_tests.js @@ -0,0 +1,238 @@ +odoo.define('mail/static/src/components/discuss/tests/discuss_pinned_tests.js', function (require) { +'use strict'; + +const { + afterEach, + afterNextRender, + beforeEach, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('discuss', {}, function () { +QUnit.module('discuss_pinned_tests.js', { + beforeEach() { + beforeEach(this); + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + autoOpenDiscuss: true, + data: this.data, + hasDiscuss: true, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('sidebar: pinned channel 1: init with one pinned channel', async function (assert) { + assert.expect(2); + + // channel that is expected to be found in the sidebar + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + assert.containsOnce( + document.body, + `.o_Discuss_thread[data-thread-local-id="${this.env.messaging.inbox.localId}"]`, + "The Inbox is opened in discuss" + ); + assert.containsOnce( + document.body, + `.o_DiscussSidebarItem[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"]`, + "should have the only channel of which user is member in discuss sidebar" + ); +}); + +QUnit.test('sidebar: pinned channel 2: open pinned channel', async function (assert) { + assert.expect(1); + + // channel that is expected to be found in the sidebar + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + + const threadGeneral = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await afterNextRender(() => + document.querySelector(`.o_DiscussSidebarItem[data-thread-local-id="${ + threadGeneral.localId + }"]`).click() + ); + assert.containsOnce( + document.body, + `.o_Discuss_thread[data-thread-local-id="${threadGeneral.localId}"]`, + "The channel #General is displayed in discuss" + ); +}); + +QUnit.test('sidebar: pinned channel 3: open pinned channel and unpin it', async function (assert) { + assert.expect(8); + + // channel that is expected to be found in the sidebar + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ + id: 20, + is_minimized: true, + state: 'open', + }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'execute_command') { + assert.step('execute_command'); + assert.deepEqual(args.args[0], [20], + "The right id is sent to the server to remove" + ); + assert.strictEqual(args.kwargs.command, 'leave', + "The right command is sent to the server" + ); + } + if (args.method === 'channel_fold') { + assert.step('channel_fold'); + } + return this._super(...arguments); + }, + }); + + const threadGeneral = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await afterNextRender(() => + document.querySelector(`.o_DiscussSidebarItem[data-thread-local-id="${ + threadGeneral.localId + }"]`).click() + ); + assert.verifySteps([], "neither channel_fold nor execute_command are called yet"); + await afterNextRender(() => + document.querySelector('.o_DiscussSidebarItem_commandLeave').click() + ); + assert.verifySteps( + [ + 'channel_fold', + 'execute_command' + ], + "both channel_fold and execute_command have been called when unpinning a channel" + ); + assert.containsNone( + document.body, + `.o_DiscussSidebarItem[data-thread-local-id="${threadGeneral.localId}"]`, + "The channel must have been removed from discuss sidebar" + ); + assert.containsOnce( + document.body, + '.o_Discuss_noThread', + "should have no thread opened in discuss" + ); +}); + +QUnit.test('sidebar: unpin channel from bus', async function (assert) { + assert.expect(5); + + // channel that is expected to be found in the sidebar + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + const threadGeneral = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + + assert.containsOnce( + document.body, + `.o_Discuss_thread[data-thread-local-id="${this.env.messaging.inbox.localId}"]`, + "The Inbox is opened in discuss" + ); + assert.containsOnce( + document.body, + `.o_DiscussSidebarItem[data-thread-local-id="${threadGeneral.localId}"]`, + "1 channel is present in discuss sidebar and it is 'general'" + ); + + await afterNextRender(() => + document.querySelector(`.o_DiscussSidebarItem[data-thread-local-id="${ + threadGeneral.localId + }"]`).click() + ); + assert.containsOnce( + document.body, + `.o_Discuss_thread[data-thread-local-id="${threadGeneral.localId}"]`, + "The channel #General is opened in discuss" + ); + + // Simulate receiving a leave channel notification + // (e.g. from user interaction from another device or browser tab) + await afterNextRender(() => { + const notif = [ + ["dbName", 'res.partner', this.env.messaging.currentPartner.id], + { + channel_type: 'channel', + id: 20, + info: 'unsubscribe', + name: "General", + public: 'public', + state: 'open', + } + ]; + this.env.services.bus_service.trigger('notification', [notif]); + }); + assert.containsOnce( + document.body, + '.o_Discuss_noThread', + "should have no thread opened in discuss" + ); + assert.containsNone( + document.body, + `.o_DiscussSidebarItem[data-thread-local-id="${threadGeneral.localId}"]`, + "The channel must have been removed from discuss sidebar" + ); +}); + +QUnit.test('[technical] sidebar: channel group_based_subscription: mandatorily pinned', async function (assert) { + assert.expect(2); + + // FIXME: The following is admittedly odd. + // Fixing it should entail a deeper reflexion on the group_based_subscription + // and is_pinned functionalities, especially in python. + // task-2284357 + + // channel that is expected to be found in the sidebar + this.data['mail.channel'].records.push({ + group_based_subscription: true, // expected value for this test + id: 20, // random unique id, will be referenced in the test + is_pinned: false, // expected value for this test + }); + await this.start(); + const threadGeneral = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + assert.containsOnce( + document.body, + `.o_DiscussSidebarItem[data-thread-local-id="${threadGeneral.localId}"]`, + "The channel #General is in discuss sidebar" + ); + assert.containsNone( + document.body, + 'o_DiscussSidebarItem_commandLeave', + "The group_based_subscription channel is not unpinnable" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/discuss/tests/discuss_sidebar_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_sidebar_tests.js new file mode 100644 index 00000000..34c884eb --- /dev/null +++ b/addons/mail/static/src/components/discuss/tests/discuss_sidebar_tests.js @@ -0,0 +1,163 @@ +odoo.define('mail/static/src/components/discuss/tests/discuss_sidebar_tests.js', function (require) { +'use strict'; + +const { makeDeferred } = require('mail/static/src/utils/deferred/deferred.js'); +const { + afterEach, + afterNextRender, + beforeEach, + nextAnimationFrame, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('discuss', {}, function () { +QUnit.module('discuss_sidebar_tests.js', { + beforeEach() { + beforeEach(this); + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + autoOpenDiscuss: true, + data: this.data, + hasDiscuss: true, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('sidebar find shows channels matching search term', async function (assert) { + assert.expect(3); + + this.data['mail.channel'].records.push({ + channel_partner_ids: [], + channel_type: 'channel', + id: 20, + members: [], + name: 'test', + public: 'public', + }); + const searchReadDef = makeDeferred(); + await this.start({ + async mockRPC(route, args) { + const res = await this._super(...arguments); + if (args.method === 'search_read') { + searchReadDef.resolve(); + } + return res; + }, + }); + await afterNextRender(() => + document.querySelector(`.o_DiscussSidebar_groupHeaderItemAdd`).click() + ); + document.querySelector(`.o_DiscussSidebar_itemNew`).focus(); + document.execCommand('insertText', false, "test"); + document.querySelector(`.o_DiscussSidebar_itemNew`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_DiscussSidebar_itemNew`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + + await searchReadDef; + await nextAnimationFrame(); // ensures search_read rpc is rendered. + const results = document.querySelectorAll('.ui-autocomplete .ui-menu-item a'); + assert.ok( + results, + "should have autocomplete suggestion after typing on 'find or create channel' input" + ); + assert.strictEqual( + results.length, + // When searching for a single existing channel, the results list will have at least 3 lines: + // One for the existing channel itself + // One for creating a public channel with the search term + // One for creating a private channel with the search term + 3 + ); + assert.strictEqual( + results[0].textContent, + "test", + "autocomplete suggestion should target the channel matching search term" + ); +}); + +QUnit.test('sidebar find shows channels matching search term even when user is member', async function (assert) { + assert.expect(3); + + this.data['mail.channel'].records.push({ + channel_partner_ids: [this.data.currentPartnerId], + channel_type: 'channel', + id: 20, + members: [this.data.currentPartnerId], + name: 'test', + public: 'public', + }); + const searchReadDef = makeDeferred(); + await this.start({ + async mockRPC(route, args) { + const res = await this._super(...arguments); + if (args.method === 'search_read') { + searchReadDef.resolve(); + } + return res; + }, + }); + await afterNextRender(() => + document.querySelector(`.o_DiscussSidebar_groupHeaderItemAdd`).click() + ); + document.querySelector(`.o_DiscussSidebar_itemNew`).focus(); + document.execCommand('insertText', false, "test"); + document.querySelector(`.o_DiscussSidebar_itemNew`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_DiscussSidebar_itemNew`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + + await searchReadDef; + await nextAnimationFrame(); + const results = document.querySelectorAll('.ui-autocomplete .ui-menu-item a'); + assert.ok( + results, + "should have autocomplete suggestion after typing on 'find or create channel' input" + ); + assert.strictEqual( + results.length, + // When searching for a single existing channel, the results list will have at least 3 lines: + // One for the existing channel itself + // One for creating a public channel with the search term + // One for creating a private channel with the search term + 3 + ); + assert.strictEqual( + results[0].textContent, + "test", + "autocomplete suggestion should target the channel matching search term even if user is member" + ); +}); + +QUnit.test('sidebar channels should be ordered case insensitive alphabetically', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push( + { id: 19, name: "Xyz" }, + { id: 20, name: "abc" }, + { id: 21, name: "Abc" }, + { id: 22, name: "Xyz" } + ); + await this.start(); + const results = document.querySelectorAll('.o_DiscussSidebar_groupChannel .o_DiscussSidebarItem_name'); + assert.deepEqual( + [results[0].textContent, results[1].textContent, results[2].textContent, results[3].textContent], + ["abc", "Abc", "Xyz", "Xyz"], + "Channel name should be in case insensitive alphabetical order" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/discuss/tests/discuss_tests.js b/addons/mail/static/src/components/discuss/tests/discuss_tests.js new file mode 100644 index 00000000..dc2005e5 --- /dev/null +++ b/addons/mail/static/src/components/discuss/tests/discuss_tests.js @@ -0,0 +1,4447 @@ +odoo.define('mail/static/src/components/discuss/tests/discuss_tests.js', function (require) { +'use strict'; + +const BusService = require('bus.BusService'); + +const { + afterEach, + afterNextRender, + beforeEach, + nextAnimationFrame, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const Bus = require('web.Bus'); +const { makeTestPromise, file: { createFile, inputFiles } } = require('web.test_utils'); + +const { + applyFilter, + toggleAddCustomFilter, + toggleFilterMenu, +} = require('web.test_utils_control_panel'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('discuss', {}, function () { +QUnit.module('discuss_tests.js', { + beforeEach() { + beforeEach(this); + + this.start = async params => { + const { afterEvent, env, widget } = await start(Object.assign({}, params, { + autoOpenDiscuss: true, + data: this.data, + hasDiscuss: true, + })); + this.afterEvent = afterEvent; + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('messaging not initialized', async function (assert) { + assert.expect(1); + + await this.start({ + async mockRPC(route) { + const _super = this._super.bind(this, ...arguments); // limitation of class.js + if (route === '/mail/init_messaging') { + await makeTestPromise(); // simulate messaging never initialized + } + return _super(); + }, + waitUntilMessagingCondition: 'created', + }); + assert.strictEqual( + document.querySelectorAll('.o_Discuss_messagingNotInitialized').length, + 1, + "should display messaging not initialized" + ); +}); + +QUnit.test('messaging becomes initialized', async function (assert) { + assert.expect(2); + + const messagingInitializedProm = makeTestPromise(); + + await this.start({ + async mockRPC(route) { + const _super = this._super.bind(this, ...arguments); // limitation of class.js + if (route === '/mail/init_messaging') { + await messagingInitializedProm; + } + return _super(); + }, + waitUntilMessagingCondition: 'created', + }); + assert.strictEqual( + document.querySelectorAll('.o_Discuss_messagingNotInitialized').length, + 1, + "should display messaging not initialized" + ); + + await afterNextRender(() => messagingInitializedProm.resolve()); + assert.strictEqual( + document.querySelectorAll('.o_Discuss_messagingNotInitialized').length, + 0, + "should no longer display messaging not initialized" + ); +}); + +QUnit.test('basic rendering', async function (assert) { + assert.expect(4); + + await this.start(); + assert.strictEqual( + document.querySelectorAll('.o_Discuss_sidebar').length, + 1, + "should have a sidebar section" + ); + assert.strictEqual( + document.querySelectorAll('.o_Discuss_content').length, + 1, + "should have content section" + ); + assert.strictEqual( + document.querySelectorAll('.o_Discuss_thread').length, + 1, + "should have thread section inside content" + ); + assert.ok( + document.querySelector('.o_Discuss_thread').classList.contains('o_ThreadView'), + "thread section should use ThreadView component" + ); +}); + +QUnit.test('basic rendering: sidebar', async function (assert) { + assert.expect(20); + + await this.start(); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_group`).length, + 3, + "should have 3 groups in sidebar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupMailbox`).length, + 1, + "should have group 'Mailbox' in sidebar" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupMailbox .o_DiscussSidebar_groupHeader + `).length, + 0, + "mailbox category should not have any header" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupMailbox .o_DiscussSidebar_item + `).length, + 3, + "should have 3 mailbox items" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupMailbox + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + `).length, + 1, + "should have inbox mailbox item" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupMailbox + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + `).length, + 1, + "should have starred mailbox item" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupMailbox + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.history.localId + }"] + `).length, + 1, + "should have history mailbox item" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_sidebar .o_DiscussSidebar_separator`).length, + 1, + "should have separator (between mailboxes and channels, but that's not tested)" + ); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChannel`).length, + 1, + "should have group 'Channel' in sidebar" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupChannel .o_DiscussSidebar_groupHeader + `).length, + 1, + "channel category should have a header" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupChannel .o_DiscussSidebar_groupTitle + `).length, + 1, + "should have title in channel header" + ); + assert.strictEqual( + document.querySelector(` + .o_DiscussSidebar_groupChannel .o_DiscussSidebar_groupTitle + `).textContent.trim(), + "Channels" + ); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_list`).length, + 1, + "channel category should list items" + ); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length, + 0, + "channel category should have no item by default" + ); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChat`).length, + 1, + "should have group 'Chat' in sidebar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_groupHeader`).length, + 1, + "channel category should have a header" + ); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_groupTitle`).length, + 1, + "should have title in chat header" + ); + assert.strictEqual( + document.querySelector(` + .o_DiscussSidebar_groupChat .o_DiscussSidebar_groupTitle + `).textContent.trim(), + "Direct Messages" + ); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_list`).length, + 1, + "chat category should list items" + ); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`).length, + 0, + "chat category should have no item by default" + ); +}); + +QUnit.test('sidebar: basic mailbox rendering', async function (assert) { + assert.expect(6); + + await this.start(); + const inbox = document.querySelector(` + .o_DiscussSidebar_groupMailbox + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + `); + assert.strictEqual( + inbox.querySelectorAll(`:scope .o_DiscussSidebarItem_activeIndicator`).length, + 1, + "mailbox should have active indicator" + ); + assert.strictEqual( + inbox.querySelectorAll(`:scope .o_ThreadIcon`).length, + 1, + "mailbox should have an icon" + ); + assert.strictEqual( + inbox.querySelectorAll(`:scope .o_ThreadIcon_mailboxInbox`).length, + 1, + "inbox should have 'inbox' icon" + ); + assert.strictEqual( + inbox.querySelectorAll(`:scope .o_DiscussSidebarItem_name`).length, + 1, + "mailbox should have a name" + ); + assert.strictEqual( + inbox.querySelector(`:scope .o_DiscussSidebarItem_name`).textContent, + "Inbox", + "inbox should have name 'Inbox'" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + .o_DiscussSidebarItem_counter + `).length, + 0, + "should have no counter when equal to 0 (default value)" + ); +}); + +QUnit.test('sidebar: default active inbox', async function (assert) { + assert.expect(1); + + await this.start(); + const inbox = document.querySelector(` + .o_DiscussSidebar_groupMailbox + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + `); + assert.ok( + inbox.querySelector(` + :scope .o_DiscussSidebarItem_activeIndicator + `).classList.contains('o-item-active'), + "inbox should be active by default" + ); +}); + +QUnit.test('sidebar: change item', async function (assert) { + assert.expect(4); + + await this.start(); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + .o_DiscussSidebarItem_activeIndicator + `).classList.contains('o-item-active'), + "inbox should be active by default" + ); + assert.notOk( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + .o_DiscussSidebarItem_activeIndicator + `).classList.contains('o-item-active'), + "starred should be inactive by default" + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + `).click() + ); + assert.notOk( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + .o_DiscussSidebarItem_activeIndicator + `).classList.contains('o-item-active'), + "inbox mailbox should become inactive" + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + .o_DiscussSidebarItem_activeIndicator + `).classList.contains('o-item-active'), + "starred mailbox should become active"); +}); + +QUnit.test('sidebar: inbox with counter', async function (assert) { + assert.expect(2); + + // notification expected to be counted at init_messaging + this.data['mail.notification'].records.push({ res_partner_id: this.data.currentPartnerId }); + await this.start(); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + .o_DiscussSidebarItem_counter + `).length, + 1, + "should display a counter (= have a counter when different from 0)" + ); + assert.strictEqual( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + .o_DiscussSidebarItem_counter + `).textContent, + "1", + "should have counter value" + ); +}); + +QUnit.test('sidebar: add channel', async function (assert) { + assert.expect(3); + + await this.start(); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_groupHeaderItemAdd + `).length, + 1, + "should be able to add channel from header" + ); + assert.strictEqual( + document.querySelector(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_groupHeaderItemAdd + `).title, + "Add or join a channel"); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_groupChannel .o_DiscussSidebar_groupHeaderItemAdd + `).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_itemNew`).length, + 1, + "should have item to add a new channel" + ); +}); + +QUnit.test('sidebar: basic channel rendering', async function (assert) { + assert.expect(14); + + // channel expected to be found in the sidebar, + // with a random unique id and name that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20, name: "General" }); + await this.start(); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length, + 1, + "should have one channel item"); + let channel = document.querySelector(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_item + `); + assert.strictEqual( + channel.dataset.threadLocalId, + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId, + "should have channel with Id 20" + ); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_activeIndicator`).length, + 1, + "should have active indicator" + ); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_activeIndicator.o-item-active`).length, + 0, + "should not be active by default" + ); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_ThreadIcon`).length, + 1, + "should have an icon" + ); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_name`).length, + 1, + "should have a name" + ); + assert.strictEqual( + channel.querySelector(`:scope .o_DiscussSidebarItem_name`).textContent, + "General", + "should have name value" + ); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_commands`).length, + 1, + "should have commands" + ); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_command`).length, + 2, + "should have 2 commands" + ); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_commandSettings`).length, + 1, + "should have 'settings' command" + ); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_commandLeave`).length, + 1, + "should have 'leave' command" + ); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_counter`).length, + 0, + "should have a counter when equals 0 (default value)" + ); + + await afterNextRender(() => + document.querySelector(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).click() + ); + channel = document.querySelector(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_activeIndicator.o-item-active`).length, + 1, + "channel should become active" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_ThreadView_composer`).length, + 1, + "should have composer section inside thread content (can post message in channel)" + ); +}); + +QUnit.test('sidebar: channel rendering with needaction counter', async function (assert) { + assert.expect(5); + + // channel expected to be found in the sidebar + // with a random unique id that will be used to link message + this.data['mail.channel'].records.push({ id: 20 }); + // expected needaction message + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], // link message to channel + id: 100, // random unique id, useful to link notification + }); + // expected needaction notification + this.data['mail.notification'].records.push({ + mail_message_id: 100, // id of related message + res_partner_id: this.data.currentPartnerId, // must be for current partner + }); + await this.start(); + const channel = document.querySelector(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_counter`).length, + 1, + "should have a counter when different from 0" + ); + assert.strictEqual( + channel.querySelector(`:scope .o_DiscussSidebarItem_counter`).textContent, + "1", + "should have counter value" + ); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_command`).length, + 1, + "should have single command" + ); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_commandSettings`).length, + 1, + "should have 'settings' command" + ); + assert.strictEqual( + channel.querySelectorAll(`:scope .o_DiscussSidebarItem_commandLeave`).length, + 0, + "should not have 'leave' command" + ); +}); + +QUnit.test('sidebar: mailing channel', async function (assert) { + assert.expect(1); + + // channel that is expected to be in the sidebar, with proper mass_mailing value + this.data['mail.channel'].records.push({ mass_mailing: true }); + await this.start(); + assert.containsOnce( + document.querySelector(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`), + '.fa.fa-envelope-o', + "should have an icon to indicate that the channel is a mailing channel" + ); +}); + +QUnit.test('sidebar: public/private channel rendering', async function (assert) { + assert.expect(5); + + // channels that are expected to be found in the sidebar (one public, one private) + // with random unique id and name that will be referenced in the test + this.data['mail.channel'].records.push( + { id: 100, name: "channel1", public: 'public', }, + { id: 101, name: "channel2", public: 'private' } + ); + await this.start(); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length, + 2, + "should have 2 channel items" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 100, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "should have channel1 (Id 100)" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 101, + model: 'mail.channel' + }).localId + }"] + `).length, + 1, + "should have channel2 (Id 101)" + ); + const channel1 = document.querySelector(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 100, + model: 'mail.channel' + }).localId + }"] + `); + const channel2 = document.querySelector(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 101, + model: 'mail.channel' + }).localId + }"] + `); + assert.strictEqual( + channel1.querySelectorAll(`:scope .o_ThreadIcon_channelPublic`).length, + 1, + "channel1 (public) has hashtag icon" + ); + assert.strictEqual( + channel2.querySelectorAll(`:scope .o_ThreadIcon_channelPrivate`).length, + 1, + "channel2 (private) has lock icon" + ); +}); + +QUnit.test('sidebar: basic chat rendering', async function (assert) { + assert.expect(11); + + // expected correspondent, with a random unique id that will be used to link + // partner to chat and a random name that will be asserted in the test + this.data['res.partner'].records.push({ id: 17, name: "Demo" }); + // chat expected to be found in the sidebar + this.data['mail.channel'].records.push({ + channel_type: 'chat', // testing a chat is the goal of the test + id: 10, // random unique id, will be referenced in the test + members: [this.data.currentPartnerId, 17], // expected partners + public: 'private', // expected value for testing a chat + }); + await this.start(); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`).length, + 1, + "should have one chat item" + ); + const chat = document.querySelector(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`); + assert.strictEqual( + chat.dataset.threadLocalId, + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel' + }).localId, + "should have chat with Id 10" + ); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_DiscussSidebarItem_activeIndicator`).length, + 1, + "should have active indicator" + ); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_ThreadIcon`).length, + 1, + "should have an icon" + ); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_DiscussSidebarItem_name`).length, + 1, + "should have a name" + ); + assert.strictEqual( + chat.querySelector(`:scope .o_DiscussSidebarItem_name`).textContent, + "Demo", + "should have correspondent name as name" + ); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_DiscussSidebarItem_commands`).length, + 1, + "should have commands" + ); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_DiscussSidebarItem_command`).length, + 2, + "should have 2 commands" + ); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_DiscussSidebarItem_commandRename`).length, + 1, + "should have 'rename' command" + ); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_DiscussSidebarItem_commandUnpin`).length, + 1, + "should have 'unpin' command" + ); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_DiscussSidebarItem_counter`).length, + 0, + "should have a counter when equals 0 (default value)" + ); +}); + +QUnit.test('sidebar: chat rendering with unread counter', async function (assert) { + assert.expect(5); + + // chat expected to be found in the sidebar + this.data['mail.channel'].records.push({ + channel_type: 'chat', // testing a chat is the goal of the test + id: 10, // random unique id, will be referenced in the test + message_unread_counter: 100, + public: 'private', // expected value for testing a chat + }); + await this.start(); + const chat = document.querySelector(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_DiscussSidebarItem_counter`).length, + 1, + "should have a counter when different from 0" + ); + assert.strictEqual( + chat.querySelector(`:scope .o_DiscussSidebarItem_counter`).textContent, + "100", + "should have counter value" + ); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_DiscussSidebarItem_command`).length, + 1, + "should have single command" + ); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_DiscussSidebarItem_commandRename`).length, + 1, + "should have 'rename' command" + ); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_DiscussSidebarItem_commandUnpin`).length, + 0, + "should not have 'unpin' command" + ); +}); + +QUnit.test('sidebar: chat im_status rendering', async function (assert) { + assert.expect(7); + + // expected correspondent, with a random unique id that will be used to link + // partner to chat, and various im_status values to assert + this.data['res.partner'].records.push( + { id: 101, im_status: 'offline', name: "Partner1" }, + { id: 102, im_status: 'online', name: "Partner2" }, + { id: 103, im_status: 'away', name: "Partner3" } + ); + // chats expected to be found in the sidebar + this.data['mail.channel'].records.push( + { + channel_type: 'chat', // testing a chat is the goal of the test + id: 11, // random unique id, will be referenced in the test + members: [this.data.currentPartnerId, 101], // expected partners + public: 'private', // expected value for testing a chat + }, + { + channel_type: 'chat', // testing a chat is the goal of the test + id: 12, // random unique id, will be referenced in the test + members: [this.data.currentPartnerId, 102], // expected partners + public: 'private', // expected value for testing a chat + }, + { + channel_type: 'chat', // testing a chat is the goal of the test + id: 13, // random unique id, will be referenced in the test + members: [this.data.currentPartnerId, 103], // expected partners + public: 'private', // expected value for testing a chat + } + ); + await this.start(); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`).length, + 3, + "should have 3 chat items" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupChat + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 11, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "should have Partner1 (Id 11)" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupChat + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 12, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "should have Partner2 (Id 12)" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_groupChat + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 13, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "should have Partner3 (Id 13)" + ); + const chat1 = document.querySelector(` + .o_DiscussSidebar_groupChat + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 11, + model: 'mail.channel', + }).localId + }"] + `); + const chat2 = document.querySelector(` + .o_DiscussSidebar_groupChat + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 12, + model: 'mail.channel', + }).localId + }"] + `); + const chat3 = document.querySelector(` + .o_DiscussSidebar_groupChat + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 13, + model: 'mail.channel', + }).localId + }"] + `); + assert.strictEqual( + chat1.querySelectorAll(`:scope .o_ThreadIcon_offline`).length, + 1, + "chat1 should have offline icon" + ); + assert.strictEqual( + chat2.querySelectorAll(`:scope .o_ThreadIcon_online`).length, + 1, + "chat2 should have online icon" + ); + assert.strictEqual( + chat3.querySelectorAll(`:scope .o_ThreadIcon_away`).length, + 1, + "chat3 should have away icon" + ); +}); + +QUnit.test('sidebar: chat custom name', async function (assert) { + assert.expect(1); + + // expected correspondent, with a random unique id that will be used to link + // partner to chat, and a random name not used in the scope of this test but set for consistency + this.data['res.partner'].records.push({ id: 101, name: "Marc Demo" }); + // chat expected to be found in the sidebar + this.data['mail.channel'].records.push({ + channel_type: 'chat', // testing a chat is the goal of the test + custom_channel_name: "Marc", // testing a custom name is the goal of the test + members: [this.data.currentPartnerId, 101], // expected partners + public: 'private', // expected value for testing a chat + }); + await this.start(); + const chat = document.querySelector(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`); + assert.strictEqual( + chat.querySelector(`:scope .o_DiscussSidebarItem_name`).textContent, + "Marc", + "chat should have custom name as name" + ); +}); + +QUnit.test('sidebar: rename chat', async function (assert) { + assert.expect(8); + + // expected correspondent, with a random unique id that will be used to link + // partner to chat, and a random name not used in the scope of this test but set for consistency + this.data['res.partner'].records.push({ id: 101, name: "Marc Demo" }); + // chat expected to be found in the sidebar + this.data['mail.channel'].records.push({ + channel_type: 'chat', // testing a chat is the goal of the test + custom_channel_name: "Marc", // testing a custom name is the goal of the test + members: [this.data.currentPartnerId, 101], // expected partners + public: 'private', // expected value for testing a chat + }); + await this.start(); + const chat = document.querySelector(`.o_DiscussSidebar_groupChat .o_DiscussSidebar_item`); + assert.strictEqual( + chat.querySelector(`:scope .o_DiscussSidebarItem_name`).textContent, + "Marc", + "chat should have custom name as name" + ); + assert.notOk( + chat.querySelector(`:scope .o_DiscussSidebarItem_name`).classList.contains('o-editable'), + "chat name should not be editable" + ); + + await afterNextRender(() => + chat.querySelector(`:scope .o_DiscussSidebarItem_commandRename`).click() + ); + assert.ok( + chat.querySelector(`:scope .o_DiscussSidebarItem_name`).classList.contains('o-editable'), + "chat should have editable name" + ); + assert.strictEqual( + chat.querySelectorAll(`:scope .o_DiscussSidebarItem_nameInput`).length, + 1, + "chat should have editable name input" + ); + assert.strictEqual( + chat.querySelector(`:scope .o_DiscussSidebarItem_nameInput`).value, + "Marc", + "editable name input should have custom chat name as value by default" + ); + assert.strictEqual( + chat.querySelector(`:scope .o_DiscussSidebarItem_nameInput`).placeholder, + "Marc Demo", + "editable name input should have partner name as placeholder" + ); + + await afterNextRender(() => { + chat.querySelector(`:scope .o_DiscussSidebarItem_nameInput`).value = "Demo"; + const kevt = new window.KeyboardEvent('keydown', { key: "Enter" }); + chat.querySelector(`:scope .o_DiscussSidebarItem_nameInput`).dispatchEvent(kevt); + }); + assert.notOk( + chat.querySelector(`:scope .o_DiscussSidebarItem_name`).classList.contains('o-editable'), + "chat should no longer show editable name" + ); + assert.strictEqual( + chat.querySelector(`:scope .o_DiscussSidebarItem_name`).textContent, + "Demo", + "chat should have renamed name as name" + ); +}); + +QUnit.test('default thread rendering', async function (assert) { + assert.expect(16); + + // channel expected to be found in the sidebar, + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + await this.start(); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + `).length, + 1, + "should have inbox mailbox in the sidebar" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + `).length, + 1, + "should have starred mailbox in the sidebar" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.history.localId + }"] + `).length, + 1, + "should have history mailbox in the sidebar" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "should have channel 20 in the sidebar" + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + `).classList.contains('o-active'), + "inbox mailbox should be active thread" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty + `).length, + 1, + "should have empty thread in inbox" + ); + assert.strictEqual( + document.querySelector(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty + `).textContent.trim(), + "Congratulations, your inbox is empty New messages appear here." + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + `).click() + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + `).classList.contains('o-active'), + "starred mailbox should be active thread" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty + `).length, + 1, + "should have empty thread in starred" + ); + assert.strictEqual( + document.querySelector(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty + `).textContent.trim(), + "No starred messages You can mark any message as 'starred', and it shows up in this mailbox." + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.history.localId + }"] + `).click() + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.history.localId + }"] + `).classList.contains('o-active'), + "history mailbox should be active thread" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty + `).length, + 1, + "should have empty thread in starred" + ); + assert.strictEqual( + document.querySelector(`.o_Discuss_thread .o_MessageList_empty`).textContent.trim(), + "No history messages Messages marked as read will appear in the history." + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).click() + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).classList.contains('o-active'), + "channel 20 should be active thread" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty + `).length, + 1, + "should have empty thread in starred" + ); + assert.strictEqual( + document.querySelector(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_empty + `).textContent.trim(), + "There are no messages in this conversation." + ); +}); + +QUnit.test('initially load messages from inbox', async function (assert) { + assert.expect(4); + + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_fetch') { + assert.step('message_fetch'); + assert.strictEqual( + args.kwargs.limit, + 30, + "should fetch up to 30 messages" + ); + assert.deepEqual( + args.kwargs.domain, + [["needaction", "=", true]], + "should fetch needaction messages" + ); + } + return this._super(...arguments); + }, + }); + assert.verifySteps(['message_fetch']); +}); + +QUnit.test('default select thread in discuss params', async function (assert) { + assert.expect(1); + + await this.start({ + discuss: { + params: { + default_active_id: 'mail.box_starred', + }, + } + }); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + .o_DiscussSidebarItem_activeIndicator + `).classList.contains('o-item-active'), + "starred mailbox should become active" + ); +}); + +QUnit.test('auto-select thread in discuss context', async function (assert) { + assert.expect(1); + + await this.start({ + discuss: { + context: { + active_id: 'mail.box_starred', + }, + }, + }); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + .o_DiscussSidebarItem_activeIndicator + `).classList.contains('o-item-active'), + "starred mailbox should become active" + ); +}); + +QUnit.test('load single message from channel initially', async function (assert) { + assert.expect(7); + + // channel expected to be rendered, with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + date: "2019-04-20 10:00:00", + id: 100, + model: 'mail.channel', + res_id: 20, + }); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + async mockRPC(route, args) { + if (args.method === 'message_fetch') { + assert.strictEqual( + args.kwargs.limit, + 30, + "should fetch up to 30 messages" + ); + assert.deepEqual( + args.kwargs.domain, + [["channel_ids", "in", [20]]], + "should fetch messages from channel" + ); + } + return this._super(...arguments); + }, + }); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_ThreadView_messageList`).length, + 1, + "should have list of messages" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_MessageList_separatorDate`).length, + 1, + "should have a single date separator" // to check: may be client timezone dependent + ); + assert.strictEqual( + document.querySelector(`.o_Discuss_thread .o_MessageList_separatorLabelDate`).textContent, + "April 20, 2019", + "should display date day of messages" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_MessageList_message`).length, + 1, + "should have a single message" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread + .o_MessageList_message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `).length, + 1, + "should have message with Id 100" + ); +}); + +QUnit.test('open channel from active_id as channel id', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start({ + discuss: { + context: { + active_id: 20, + }, + } + }); + assert.containsOnce( + document.body, + ` + .o_Discuss_thread[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ id: 20, model: 'mail.channel' }).localId + }"] + `, + "should have channel with ID 20 open in Discuss when providing active_id 20" + ); +}); + +QUnit.test('basic rendering of message', async function (assert) { + // AKU TODO: should be in message-only tests + assert.expect(13); + + // channel expected to be rendered, with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + // partner to be set as author, with a random unique id that will be used to + // link message and a random name that will be asserted in the test + this.data['res.partner'].records.push({ id: 11, name: "Demo" }); + this.data['mail.message'].records.push({ + author_id: 11, + body: "<p>body</p>", + channel_ids: [20], + date: "2019-04-20 10:00:00", + id: 100, + model: 'mail.channel', + res_id: 20, + }); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + }); + const message = document.querySelector(` + .o_Discuss_thread + .o_ThreadView_messageList + .o_MessageList_message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_sidebar`).length, + 1, + "should have message sidebar of message" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_authorAvatar`).length, + 1, + "should have author avatar in sidebar of message" + ); + assert.strictEqual( + message.querySelector(`:scope .o_Message_authorAvatar`).dataset.src, + "/web/image/res.partner/11/image_128", + "should have url of message in author avatar sidebar" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_core`).length, + 1, + "should have core part of message" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_header`).length, + 1, + "should have header in core part of message" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_authorName`).length, + 1, + "should have author name in header of message" + ); + assert.strictEqual( + message.querySelector(`:scope .o_Message_authorName`).textContent, + "Demo", + "should have textually author name in header of message" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_header .o_Message_date`).length, + 1, + "should have date in header of message" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_header .o_Message_commands`).length, + 1, + "should have commands in header of message" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_header .o_Message_command`).length, + 1, + "should have a single command in header of message" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_commandStar`).length, + 1, + "should have command to star message" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_content`).length, + 1, + "should have content in core part of message" + ); + assert.strictEqual( + message.querySelector(`:scope .o_Message_content`).textContent.trim(), + "body", + "should have body of message in content part of message" + ); +}); + +QUnit.test('basic rendering of squashed message', async function (assert) { + // messages are squashed when "close", e.g. less than 1 minute has elapsed + // from messages of same author and same thread. Note that this should + // be working in non-mailboxes + // AKU TODO: should be message and/or message list-only tests + assert.expect(12); + + // channel expected to be rendered, with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + // partner to be set as author, with a random unique id that will be used to link message + this.data['res.partner'].records.push({ id: 11 }); + this.data['mail.message'].records.push( + { + author_id: 11, // must be same author as other message + body: "<p>body1</p>", // random body, set for consistency + channel_ids: [20], // to link message to channel + date: "2019-04-20 10:00:00", // date must be within 1 min from other message + id: 100, // random unique id, will be referenced in the test + message_type: 'comment', // must be a squash-able type- + model: 'mail.channel', // to link message to channel + res_id: 20, // id of related channel + }, + { + author_id: 11, // must be same author as other message + body: "<p>body2</p>", // random body, will be asserted in the test + channel_ids: [20], // to link message to channel + date: "2019-04-20 10:00:30", // date must be within 1 min from other message + id: 101, // random unique id, will be referenced in the test + message_type: 'comment', // must be a squash-able type + model: 'mail.channel', // to link message to channel + res_id: 20, // id of related channel + } + ); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + }); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message + `).length, + 2, + "should have 2 messages" + ); + const message1 = document.querySelector(` + .o_Discuss_thread + .o_ThreadView_messageList + .o_MessageList_message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `); + const message2 = document.querySelector(` + .o_Discuss_thread + .o_ThreadView_messageList + .o_MessageList_message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId + }"] + `); + assert.notOk( + message1.classList.contains('o-squashed'), + "message 1 should not be squashed" + ); + assert.notOk( + message1.querySelector(`:scope .o_Message_sidebar`).classList.contains('o-message-squashed'), + "message 1 should not have squashed sidebar" + ); + assert.ok( + message2.classList.contains('o-squashed'), + "message 2 should be squashed" + ); + assert.ok( + message2.querySelector(`:scope .o_Message_sidebar`).classList.contains('o-message-squashed'), + "message 2 should have squashed sidebar" + ); + assert.strictEqual( + message2.querySelectorAll(`:scope .o_Message_sidebar .o_Message_date`).length, + 1, + "message 2 should have date in sidebar" + ); + assert.strictEqual( + message2.querySelectorAll(`:scope .o_Message_sidebar .o_Message_commands`).length, + 1, + "message 2 should have some commands in sidebar" + ); + assert.strictEqual( + message2.querySelectorAll(`:scope .o_Message_sidebar .o_Message_commandStar`).length, + 1, + "message 2 should have star command in sidebar" + ); + assert.strictEqual( + message2.querySelectorAll(`:scope .o_Message_core`).length, + 1, + "message 2 should have core part" + ); + assert.strictEqual( + message2.querySelectorAll(`:scope .o_Message_header`).length, + 0, + "message 2 should have a header in core part" + ); + assert.strictEqual( + message2.querySelectorAll(`:scope .o_Message_content`).length, + 1, + "message 2 should have some content in core part" + ); + assert.strictEqual( + message2.querySelector(`:scope .o_Message_content`).textContent.trim(), + "body2", + "message 2 should have body in content part" + ); +}); + +QUnit.test('inbox messages are never squashed', async function (assert) { + assert.expect(3); + + // partner to be set as author, with a random unique id that will be used to link message + this.data['res.partner'].records.push({ id: 11 }); + this.data['mail.message'].records.push( + { + author_id: 11, // must be same author as other message + body: "<p>body1</p>", // random body, set for consistency + channel_ids: [20], // to link message to channel + date: "2019-04-20 10:00:00", // date must be within 1 min from other message + id: 100, // random unique id, will be referenced in the test + message_type: 'comment', // must be a squash-able type- + model: 'mail.channel', // to link message to channel + needaction: true, // necessary for message_fetch domain + needaction_partner_ids: [this.data.currentPartnerId], // for consistency + res_id: 20, // id of related channel + }, + { + author_id: 11, // must be same author as other message + body: "<p>body2</p>", // random body, will be asserted in the test + channel_ids: [20], // to link message to channel + date: "2019-04-20 10:00:30", // date must be within 1 min from other message + id: 101, // random unique id, will be referenced in the test + message_type: 'comment', // must be a squash-able type + model: 'mail.channel', // to link message to channel + needaction: true, // necessary for message_fetch domain + needaction_partner_ids: [this.data.currentPartnerId], // for consistency + res_id: 20, // id of related channel + } + ); + await this.start(); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message + `).length, + 2, + "should have 2 messages" + ); + const message1 = document.querySelector(` + .o_Discuss_thread + .o_ThreadView_messageList + .o_MessageList_message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `); + const message2 = document.querySelector(` + .o_Discuss_thread + .o_ThreadView_messageList + .o_MessageList_message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId + }"] + `); + assert.notOk( + message1.classList.contains('o-squashed'), + "message 1 should not be squashed" + ); + assert.notOk( + message2.classList.contains('o-squashed'), + "message 2 should not be squashed" + ); +}); + +QUnit.test('load all messages from channel initially, less than fetch limit (29 < 30)', async function (assert) { + // AKU TODO: thread specific test + assert.expect(5); + + // channel expected to be rendered, with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + // partner to be set as author, with a random unique id that will be used to link message + this.data['res.partner'].records.push({ id: 11 }); + for (let i = 28; i >= 0; i--) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + date: "2019-04-20 10:00:00", + model: 'mail.channel', + res_id: 20, + }); + } + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + async mockRPC(route, args) { + if (args.method === 'message_fetch') { + assert.strictEqual(args.kwargs.limit, 30, "should fetch up to 30 messages"); + } + return this._super(...arguments); + }, + }); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_separatorDate + `).length, + 1, + "should have a single date separator" // to check: may be client timezone dependent + ); + assert.strictEqual( + document.querySelector(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_separatorLabelDate + `).textContent, + "April 20, 2019", + "should display date day of messages" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message + `).length, + 29, + "should have 29 messages" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_loadMore + `).length, + 0, + "should not have load more link" + ); +}); + +QUnit.test('load more messages from channel', async function (assert) { + // AKU: thread specific test + assert.expect(6); + + // channel expected to be rendered, with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + // partner to be set as author, with a random unique id that will be used to link message + this.data['res.partner'].records.push({ id: 11 }); + for (let i = 0; i < 40; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + date: "2019-04-20 10:00:00", + model: 'mail.channel', + res_id: 20, + }); + } + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + }); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_separatorDate + `).length, + 1, + "should have a single date separator" // to check: may be client timezone dependent + ); + assert.strictEqual( + document.querySelector(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_separatorLabelDate + `).textContent, + "April 20, 2019", + "should display date day of messages" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message + `).length, + 30, + "should have 30 messages" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_loadMore + `).length, + 1, + "should have load more link" + ); + + await afterNextRender(() => + document.querySelector(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_loadMore + `).click() + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message + `).length, + 40, + "should have 40 messages" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_loadMore + `).length, + 0, + "should not longer have load more link (all messages loaded)" + ); +}); + +QUnit.test('auto-scroll to bottom of thread', async function (assert) { + // AKU TODO: thread specific test + assert.expect(2); + + // channel expected to be rendered, with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + for (let i = 1; i <= 25; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + model: 'mail.channel', + res_id: 20, + }); + } + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + waitUntilEvent: { + eventName: 'o-component-message-list-scrolled', + message: "should wait until channel 20 scrolled to its last message initially", + predicate: ({ scrollTop, thread }) => { + const messageList = document.querySelector('.o_ThreadView_messageList'); + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === messageList.scrollHeight - messageList.clientHeight + ); + }, + }, + }); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message + `).length, + 25, + "should have 25 messages" + ); + const messageList = document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`); + assert.strictEqual( + messageList.scrollTop, + messageList.scrollHeight - messageList.clientHeight, + "should have scrolled to bottom of thread" + ); +}); + +QUnit.test('load more messages from channel (auto-load on scroll)', async function (assert) { + // AKU TODO: thread specific test + assert.expect(3); + + this.data['mail.channel'].records.push({ id: 20 }); + for (let i = 0; i < 40; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + model: 'mail.channel', + res_id: 20, + }); + } + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + waitUntilEvent: { + eventName: 'o-component-message-list-scrolled', + message: "should wait until channel 20 scrolled to its last message initially", + predicate: ({ scrollTop, thread }) => { + const messageList = document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`); + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === messageList.scrollHeight - messageList.clientHeight + ); + }, + }, + }); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message + `).length, + 30, + "should have 30 messages" + ); + + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => document.querySelector('.o_ThreadView_messageList').scrollTop = 0, + message: "should wait until channel 20 loaded more messages after scrolling to top", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'more-messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 20 + ); + }, + }); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message + `).length, + 40, + "should have 40 messages" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Dsiscuss_thread .o_ThreadView_messageList .o_MessageList_loadMore + `).length, + 0, + "should not longer have load more link (all messages loaded)" + ); +}); + +QUnit.test('new messages separator [REQUIRE FOCUS]', async function (assert) { + // this test requires several messages so that the last message is not + // visible. This is necessary in order to display 'new messages' and not + // remove from DOM right away from seeing last message. + // AKU TODO: thread specific test + assert.expect(6); + + // Needed partner & user to allow simulation of message reception + this.data['res.partner'].records.push({ + id: 11, + name: "Foreigner partner", + }); + this.data['res.users'].records.push({ + id: 42, + name: "Foreigner user", + partner_id: 11, + }); + // channel expected to be rendered, with a random unique id that will be + // referenced in the test and the seen_message_id value set to last message + this.data['mail.channel'].records.push({ + id: 20, + seen_message_id: 125, + uuid: 'randomuuid', + }); + for (let i = 1; i <= 25; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + id: 100 + i, // for setting proper value for seen_message_id + model: 'mail.channel', + res_id: 20, + }); + } + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + waitUntilEvent: { + eventName: 'o-component-message-list-scrolled', + message: "should wait until channel 20 scrolled to its last message initially", + predicate: ({ scrollTop, thread }) => { + const messageList = document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`); + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === messageList.scrollHeight - messageList.clientHeight + ); + }, + }, + }); + assert.containsN( + document.body, + '.o_MessageList_message', + 25, + "should have 25 messages" + ); + assert.containsNone( + document.body, + '.o_MessageList_separatorNewMessages', + "should not display 'new messages' separator" + ); + // scroll to top + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => { + document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`).scrollTop = 0; + }, + message: "should wait until channel scrolled to top", + predicate: ({ scrollTop, thread }) => { + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === 0 + ); + }, + }); + // composer is focused by default, we remove that focus + document.querySelector('.o_ComposerTextInput_textarea').blur(); + // simulate receiving a message + await afterNextRender(async () => this.env.services.rpc({ + route: '/mail/chat_post', + params: { + context: { + mockedUserId: 42, + }, + message_content: "hu", + uuid: 'randomuuid', + }, + })); + + assert.containsN( + document.body, + '.o_MessageList_message', + 26, + "should have 26 messages" + ); + assert.containsOnce( + document.body, + '.o_MessageList_separatorNewMessages', + "should display 'new messages' separator" + ); + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => { + const messageList = document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`); + messageList.scrollTop = messageList.scrollHeight - messageList.clientHeight; + }, + message: "should wait until channel scrolled to bottom", + predicate: ({ scrollTop, thread }) => { + const messageList = document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`); + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === messageList.scrollHeight - messageList.clientHeight + ); + }, + }); + assert.containsOnce( + document.body, + '.o_MessageList_separatorNewMessages', + "should still display 'new messages' separator as composer is not focused" + ); + + await afterNextRender(() => + document.querySelector('.o_ComposerTextInput_textarea').focus() + ); + assert.containsNone( + document.body, + '.o_MessageList_separatorNewMessages', + "should no longer display 'new messages' separator (message seen)" + ); +}); + +QUnit.test('restore thread scroll position', async function (assert) { + assert.expect(6); + // channels expected to be rendered, with random unique id that will be referenced in the test + this.data['mail.channel'].records.push( + { + id: 11, + }, + { + id: 12, + }, + ); + for (let i = 1; i <= 25; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [11], + model: 'mail.channel', + res_id: 11, + }); + } + for (let i = 1; i <= 24; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [12], + model: 'mail.channel', + res_id: 12, + }); + } + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_11', + }, + }, + waitUntilEvent: { + eventName: 'o-component-message-list-scrolled', + message: "should wait until channel 11 scrolled to its last message", + predicate: ({ thread }) => { + return thread && thread.model === 'mail.channel' && thread.id === 11; + }, + }, + }); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message + `).length, + 25, + "should have 25 messages in channel 11" + ); + const initialMessageList = document.querySelector(` + .o_Discuss_thread + .o_ThreadView_messageList + `); + assert.strictEqual( + initialMessageList.scrollTop, + initialMessageList.scrollHeight - initialMessageList.clientHeight, + "should have scrolled to bottom of channel 11 initially" + ); + + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`).scrollTop = 0, + message: "should wait until channel 11 changed its scroll position to top", + predicate: ({ thread }) => { + return thread && thread.model === 'mail.channel' && thread.id === 11; + }, + }); + assert.strictEqual( + document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`).scrollTop, + 0, + "should have scrolled to top of channel 11", + ); + + // Ensure scrollIntoView of channel 12 has enough time to complete before + // going back to channel 11. Await is needed to prevent the scrollIntoView + // initially planned for channel 12 to actually apply on channel 11. + // task-2333535 + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => { + // select channel 12 + document.querySelector(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 12, + model: 'mail.channel', + }).localId + }"] + `).click(); + }, + message: "should wait until channel 12 scrolled to its last message", + predicate: ({ scrollTop, thread }) => { + const messageList = document.querySelector('.o_ThreadView_messageList'); + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 12 && + scrollTop === messageList.scrollHeight - messageList.clientHeight + ); + }, + }); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread .o_ThreadView_messageList .o_MessageList_message + `).length, + 24, + "should have 24 messages in channel 12" + ); + + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => { + // select channel 11 + document.querySelector(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 11, + model: 'mail.channel', + }).localId + }"] + `).click(); + }, + message: "should wait until channel 11 restored its scroll position", + predicate: ({ scrollTop, thread }) => { + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 11 && + scrollTop === 0 + ); + }, + }); + assert.strictEqual( + document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`).scrollTop, + 0, + "should have recovered scroll position of channel 11 (scroll to top)" + ); + + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => { + // select channel 12 + document.querySelector(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 12, + model: 'mail.channel', + }).localId + }"] + `).click(); + }, + message: "should wait until channel 12 recovered its scroll position (to bottom)", + predicate: ({ scrollTop, thread }) => { + const messageList = document.querySelector('.o_ThreadView_messageList'); + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 12 && + scrollTop === messageList.scrollHeight - messageList.clientHeight + ); + }, + }); + const messageList = document.querySelector('.o_ThreadView_messageList'); + assert.strictEqual( + messageList.scrollTop, + messageList.scrollHeight - messageList.clientHeight, + "should have recovered scroll position of channel 12 (scroll to bottom)" + ); +}); + +QUnit.test('message origin redirect to channel', async function (assert) { + assert.expect(15); + + // channels expected to be rendered, with random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 11 }, { id: 12 }); + this.data['mail.message'].records.push( + { + body: "not empty", + channel_ids: [11, 12], + id: 100, + model: 'mail.channel', + record_name: "channel11", + res_id: 11, + }, + { + body: "not empty", + channel_ids: [11, 12], + id: 101, + model: 'mail.channel', + record_name: "channel12", + res_id: 12, + } + ); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_11', + }, + }, + }); + assert.strictEqual( + document.querySelectorAll('.o_Discuss_thread .o_Message').length, + 2, + "should have 2 messages" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `).length, + 1, + "should have message1 (Id 100)" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId + }"] + `).length, + 1, + "should have message2 (Id 101)" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + .o_Message_originThread + `).length, + 0, + "message1 should not have origin part in channel11 (same origin as channel)" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId + }"] + .o_Message_originThread + `).length, + 1, + "message2 should have origin part (origin is channel12 !== channel11)" + ); + assert.strictEqual( + document.querySelector(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId + }"] + .o_Message_originThread + `).textContent.trim(), + "(from #channel12)", + "message2 should display name of origin channel" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId + }"] + .o_Message_originThreadLink + `).length, + 1, + "message2 should have link to redirect to origin" + ); + + // click on origin link of message2 (= channel12) + await afterNextRender(() => + document.querySelector(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId + }"] + .o_Message_originThreadLink + `).click() + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 12, + model: 'mail.channel', + }).localId + }"] + .o_DiscussSidebarItem_activeIndicator + `).classList.contains('o-item-active'), + "channel12 should be active channel on redirect from discuss app" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_Message`).length, + 2, + "should have 2 messages" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `).length, + 1, + "should have message1 (Id 100)" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId + }"] + `).length, + 1, + "should have message2 (Id 101)" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + .o_Message_originThread + `).length, + 1, + "message1 should have origin thread part (= channel11 !== channel12)" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId + }"] + .o_Message_originThread + `).length, + 0, + "message2 should not have origin thread part in channel12 (same as current channel)" + ); + assert.strictEqual( + document.querySelector(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + .o_Message_originThread + `).textContent.trim(), + "(from #channel11)", + "message1 should display name of origin channel" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + .o_Message_originThreadLink + `).length, + 1, + "message1 should have link to redirect to origin channel" + ); +}); + +QUnit.test('redirect to author (open chat)', async function (assert) { + assert.expect(7); + + // expected correspondent, with a random unique id that will be used to link + // partner to chat and a random name that will be asserted in the test + this.data['res.partner'].records.push({ id: 7, name: "Demo" }); + this.data['res.users'].records.push({ partner_id: 7 }); + this.data['mail.channel'].records.push( + // channel expected to be found in the sidebar + { + id: 1, // random unique id, will be referenced in the test + name: "General", // random name, will be asserted in the test + }, + // chat expected to be found in the sidebar + { + channel_type: 'chat', // testing a chat is the goal of the test + id: 10, // random unique id, will be referenced in the test + members: [this.data.currentPartnerId, 7], // expected partners + public: 'private', // expected value for testing a chat + } + ); + this.data['mail.message'].records.push( + { + author_id: 7, + body: "not empty", + channel_ids: [1], + id: 100, + model: 'mail.channel', + res_id: 1, + } + ); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_1', + }, + }, + }); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 1, + model: 'mail.channel', + }).localId + }"] + .o_DiscussSidebarItem_activeIndicator + `).classList.contains('o-item-active'), + "channel 'General' should be active" + ); + assert.notOk( + document.querySelector(` + .o_DiscussSidebar_groupChat + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + .o_DiscussSidebarItem_activeIndicator + `).classList.contains('o-item-active'), + "Chat 'Demo' should not be active" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_Message`).length, + 1, + "should have 1 message" + ); + const msg1 = document.querySelector(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `); + assert.strictEqual( + msg1.querySelectorAll(`:scope .o_Message_authorAvatar`).length, + 1, + "message1 should have author image" + ); + assert.ok( + msg1.querySelector(`:scope .o_Message_authorAvatar`).classList.contains('o_redirect'), + "message1 should have redirect to author" + ); + + await afterNextRender(() => + msg1.querySelector(`:scope .o_Message_authorAvatar`).click() + ); + assert.notOk( + document.querySelector(` + .o_DiscussSidebar_groupChannel + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 1, + model: 'mail.channel', + }).localId + }"] + .o_DiscussSidebarItem_activeIndicator + `).classList.contains('o-item-active'), + "channel 'General' should become inactive after author redirection" + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_groupChat + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + .o_DiscussSidebarItem_activeIndicator + `).classList.contains('o-item-active'), + "chat 'Demo' should become active after author redirection" + ); +}); + +QUnit.test('sidebar quick search', async function (assert) { + // feature enables at 20 or more channels + assert.expect(6); + + for (let id = 1; id <= 20; id++) { + this.data['mail.channel'].records.push({ id, name: `channel${id}` }); + } + await this.start(); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length, + 20, + "should have 20 channel items" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_sidebar input.o_DiscussSidebar_quickSearch`).length, + 1, + "should have quick search in sidebar" + ); + + const quickSearch = document.querySelector(` + .o_Discuss_sidebar input.o_DiscussSidebar_quickSearch + `); + await afterNextRender(() => { + quickSearch.value = "1"; + const kevt1 = new window.KeyboardEvent('input'); + quickSearch.dispatchEvent(kevt1); + }); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length, + 11, + "should have filtered to 11 channel items" + ); + + await afterNextRender(() => { + quickSearch.value = "12"; + const kevt2 = new window.KeyboardEvent('input'); + quickSearch.dispatchEvent(kevt2); + }); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length, + 1, + "should have filtered to a single channel item" + ); + assert.strictEqual( + document.querySelector(` + .o_DiscussSidebar_groupChannel .o_DiscussSidebar_item + `).dataset.threadLocalId, + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 12, + model: 'mail.channel', + }).localId, + "should have filtered to a single channel item with Id 12" + ); + + await afterNextRender(() => { + quickSearch.value = "123"; + const kevt3 = new window.KeyboardEvent('input'); + quickSearch.dispatchEvent(kevt3); + }); + assert.strictEqual( + document.querySelectorAll(`.o_DiscussSidebar_groupChannel .o_DiscussSidebar_item`).length, + 0, + "should have filtered to no channel item" + ); +}); + +QUnit.test('basic control panel rendering', async function (assert) { + assert.expect(8); + + // channel expected to be found in the sidebar + // with a random unique id and name that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20, name: "General" }); + await this.start(); + assert.strictEqual( + document.querySelector(` + .o_widget_Discuss .o_control_panel .breadcrumb + `).textContent, + "Inbox", + "display inbox in the breadcrumb" + ); + const markAllReadButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonMarkAllRead`); + assert.isVisible( + markAllReadButton, + "should have visible button 'Mark all read' in the control panel of inbox" + ); + assert.ok( + markAllReadButton.disabled, + "should have disabled button 'Mark all read' in the control panel of inbox (no messages)" + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + `).click() + ); + assert.strictEqual( + document.querySelector(` + .o_widget_Discuss .o_control_panel .breadcrumb + `).textContent, + "Starred", + "display starred in the breadcrumb" + ); + const unstarAllButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonUnstarAll`); + assert.isVisible( + unstarAllButton, + "should have visible button 'Unstar all' in the control panel of starred" + ); + assert.ok( + unstarAllButton.disabled, + "should have disabled button 'Unstar all' in the control panel of starred (no messages)" + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).click() + ); + assert.strictEqual( + document.querySelector(` + .o_widget_Discuss .o_control_panel .breadcrumb + `).textContent, + "#General", + "display general in the breadcrumb" + ); + const inviteButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonInvite`); + assert.isVisible( + inviteButton, + "should have visible button 'Invite' in the control panel of channel" + ); +}); + +QUnit.test('inbox: mark all messages as read', async function (assert) { + assert.expect(8); + + // channel expected to be found in the sidebar, + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + this.data['mail.message'].records.push( + // first expected message + { + body: "not empty", + channel_ids: [20], // link message to channel + id: 100, // random unique id, useful to link notification + model: 'mail.channel', + // needaction needs to be set here for message_fetch domain, because + // mocked models don't have computed fields + needaction: true, + res_id: 20, + }, + // second expected message + { + body: "not empty", + channel_ids: [20], // link message to channel + id: 101, // random unique id, useful to link notification + model: 'mail.channel', + // needaction needs to be set here for message_fetch domain, because + // mocked models don't have computed fields + needaction: true, + res_id: 20, + } + ); + this.data['mail.notification'].records.push( + // notification to have first message in inbox + { + mail_message_id: 100, // id of related message + res_partner_id: this.data.currentPartnerId, // must be for current partner + }, + // notification to have second message in inbox + { + mail_message_id: 101, // id of related message + res_partner_id: this.data.currentPartnerId, // must be for current partner + } + ); + await this.start(); + assert.strictEqual( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + .o_DiscussSidebarItem_counter + `).textContent, + "2", + "inbox should have counter of 2" + ); + assert.strictEqual( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + .o_DiscussSidebarItem_counter + `).textContent, + "2", + "channel should have counter of 2" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss .o_Message`).length, + 2, + "should have 2 messages in inbox" + ); + let markAllReadButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonMarkAllRead`); + assert.notOk( + markAllReadButton.disabled, + "should have enabled button 'Mark all read' in the control panel of inbox (has messages)" + ); + + await afterNextRender(() => markAllReadButton.click()); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + .o_DiscussSidebarItem_counter + `).length, + 0, + "inbox should display no counter (= 0)" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + .o_DiscussSidebarItem_counter + `).length, + 0, + "channel should display no counter (= 0)" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss .o_Message`).length, + 0, + "should have no message in inbox" + ); + markAllReadButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonMarkAllRead`); + assert.ok( + markAllReadButton.disabled, + "should have disabled button 'Mark all read' in the control panel of inbox (no messages)" + ); +}); + +QUnit.test('starred: unstar all', async function (assert) { + assert.expect(6); + + // messages expected to be starred + this.data['mail.message'].records.push( + { body: "not empty", starred_partner_ids: [this.data.currentPartnerId] }, + { body: "not empty", starred_partner_ids: [this.data.currentPartnerId] } + ); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.box_starred', + }, + }, + }); + assert.strictEqual( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + .o_DiscussSidebarItem_counter + `).textContent, + "2", + "starred should have counter of 2" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss .o_Message`).length, + 2, + "should have 2 messages in starred" + ); + let unstarAllButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonUnstarAll`); + assert.notOk( + unstarAllButton.disabled, + "should have enabled button 'Unstar all' in the control panel of starred (has messages)" + ); + + await afterNextRender(() => unstarAllButton.click()); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + .o_DiscussSidebarItem_counter + `).length, + 0, + "starred should display no counter (= 0)" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss .o_Message`).length, + 0, + "should have no message in starred" + ); + unstarAllButton = document.querySelector(`.o_widget_Discuss_controlPanelButtonUnstarAll`); + assert.ok( + unstarAllButton.disabled, + "should have disabled button 'Unstar all' in the control panel of starred (no messages)" + ); +}); + +QUnit.test('toggle_star message', async function (assert) { + assert.expect(16); + + // channel expected to be initially rendered + // with a random unique id, will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + id: 100, + model: 'mail.channel', + res_id: 20, + }); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + async mockRPC(route, args) { + if (args.method === 'toggle_message_starred') { + assert.step('rpc:toggle_message_starred'); + assert.strictEqual( + args.args[0][0], + 100, + "should have message Id in args" + ); + } + return this._super(...arguments); + }, + }); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + .o_DiscussSidebarItem_counter + `).length, + 0, + "starred should display no counter (= 0)" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss .o_Message`).length, + 1, + "should have 1 message in channel" + ); + let message = document.querySelector(`.o_Discuss .o_Message`); + assert.notOk( + message.classList.contains('o-starred'), + "message should not be starred" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_commandStar`).length, + 1, + "message should have star command" + ); + + await afterNextRender(() => message.querySelector(`:scope .o_Message_commandStar`).click()); + assert.verifySteps(['rpc:toggle_message_starred']); + assert.strictEqual( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + .o_DiscussSidebarItem_counter + `).textContent, + "1", + "starred should display a counter of 1" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss .o_Message`).length, + 1, + "should have kept 1 message in channel" + ); + message = document.querySelector(`.o_Discuss .o_Message`); + assert.ok( + message.classList.contains('o-starred'), + "message should be starred" + ); + + await afterNextRender(() => message.querySelector(`:scope .o_Message_commandStar`).click()); + assert.verifySteps(['rpc:toggle_message_starred']); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.starred.localId + }"] + .o_DiscussSidebarItem_counter + `).length, + 0, + "starred should no longer display a counter (= 0)" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss .o_Message`).length, + 1, + "should still have 1 message in channel" + ); + message = document.querySelector(`.o_Discuss .o_Message`); + assert.notOk( + message.classList.contains('o-starred'), + "message should no longer be starred" + ); +}); + +QUnit.test('composer state: text save and restore', async function (assert) { + assert.expect(2); + + // channels expected to be found in the sidebar, + // with random unique id and name that will be referenced in the test + this.data['mail.channel'].records.push( + { id: 20, name: "General" }, + { id: 21, name: "Special" } + ); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + }); + // Write text in composer for #general + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "A message"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('input')); + }); + await afterNextRender(() => + document.querySelector(`.o_DiscussSidebarItem[data-thread-name="Special"]`).click() + ); + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "An other message"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('input')); + }); + // Switch back to #general + await afterNextRender(() => + document.querySelector(`.o_DiscussSidebarItem[data-thread-name="General"]`).click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "A message", + "should restore the input text" + ); + + await afterNextRender(() => + document.querySelector(`.o_DiscussSidebarItem[data-thread-name="Special"]`).click() + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "An other message", + "should restore the input text" + ); +}); + +QUnit.test('composer state: attachments save and restore', async function (assert) { + assert.expect(6); + + // channels expected to be found in the sidebar + // with random unique id and name that will be referenced in the test + this.data['mail.channel'].records.push( + { id: 20, name: "General" }, + { id: 21, name: "Special" } + ); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + }); + const channels = document.querySelectorAll(` + .o_DiscussSidebar_groupChannel .o_DiscussSidebar_item + `); + // Add attachment in a message for #general + await afterNextRender(async () => { + const file = await createFile({ + content: 'hello, world', + contentType: 'text/plain', + name: 'text.txt', + }); + inputFiles( + document.querySelector('.o_FileUploader_input'), + [file] + ); + }); + // Switch to #special + await afterNextRender(() => channels[1].click()); + // Add attachments in a message for #special + const files = [ + await createFile({ + content: 'hello2, world', + contentType: 'text/plain', + name: 'text2.txt', + }), + await createFile({ + content: 'hello3, world', + contentType: 'text/plain', + name: 'text3.txt', + }), + await createFile({ + content: 'hello4, world', + contentType: 'text/plain', + name: 'text4.txt', + }), + ]; + await afterNextRender(() => + inputFiles( + document.querySelector('.o_FileUploader_input'), + files + ) + ); + // Switch back to #general + await afterNextRender(() => channels[0].click()); + // Check attachment is reloaded + assert.strictEqual( + document.querySelectorAll(`.o_Composer .o_Attachment`).length, + 1, + "should have 1 attachment in the composer" + ); + assert.strictEqual( + document.querySelector(`.o_Composer .o_Attachment`).dataset.attachmentLocalId, + this.env.models['mail.attachment'].findFromIdentifyingData({ id: 1 }).localId, + "should have correct 1st attachment in the composer" + ); + + // Switch back to #special + await afterNextRender(() => channels[1].click()); + // Check attachments are reloaded + assert.strictEqual( + document.querySelectorAll(`.o_Composer .o_Attachment`).length, + 3, + "should have 3 attachments in the composer" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Composer .o_Attachment`)[0].dataset.attachmentLocalId, + this.env.models['mail.attachment'].findFromIdentifyingData({ id: 2 }).localId, + "should have attachment with id 2 as 1st attachment" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Composer .o_Attachment`)[1].dataset.attachmentLocalId, + this.env.models['mail.attachment'].findFromIdentifyingData({ id: 3 }).localId, + "should have attachment with id 3 as 2nd attachment" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Composer .o_Attachment`)[2].dataset.attachmentLocalId, + this.env.models['mail.attachment'].findFromIdentifyingData({ id: 4 }).localId, + "should have attachment with id 4 as 3rd attachment" + ); +}); + +QUnit.test('post a simple message', async function (assert) { + assert.expect(15); + + // channel expected to be found in the sidebar + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + let postedMessageId; + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + async mockRPC(route, args) { + const res = await this._super(...arguments); + if (args.method === 'message_post') { + assert.step('message_post'); + assert.strictEqual( + args.args[0], + 20, + "should post message to channel Id 20" + ); + assert.strictEqual( + args.kwargs.body, + "Test", + "should post with provided content in composer input" + ); + assert.strictEqual( + args.kwargs.message_type, + "comment", + "should set message type as 'comment'" + ); + assert.strictEqual( + args.kwargs.subtype_xmlid, + "mail.mt_comment", + "should set subtype_xmlid as 'comment'" + ); + postedMessageId = res; + } + return res; + }, + }); + assert.strictEqual( + document.querySelectorAll(`.o_MessageList_empty`).length, + 1, + "should display thread with no message initially" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 0, + "should display no message initially" + ); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "should have empty content initially" + ); + + // insert some HTML in editable + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "Test"); + }); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "Test", + "should have inserted text in editable" + ); + + await afterNextRender(() => + document.querySelector('.o_Composer_buttonSend').click() + ); + assert.verifySteps(['message_post']); + assert.strictEqual( + document.querySelector(`.o_ComposerTextInput_textarea`).value, + "", + "should have no content in composer input after posting message" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 1, + "should display a message after posting message" + ); + const message = document.querySelector(`.o_Message`); + assert.strictEqual( + message.dataset.messageLocalId, + this.env.models['mail.message'].findFromIdentifyingData({ id: postedMessageId }).localId, + "new message in thread should be linked to newly created message from message post" + ); + assert.strictEqual( + message.querySelector(`:scope .o_Message_authorName`).textContent, + "Mitchell Admin", + "new message in thread should be from current partner name" + ); + assert.strictEqual( + message.querySelector(`:scope .o_Message_content`).textContent, + "Test", + "new message in thread should have content typed from composer text input" + ); +}); + +QUnit.test('post message on non-mailing channel with "Enter" keyboard shortcut', async function (assert) { + assert.expect(2); + + // channel expected to be found in the sidebar + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20, mass_mailing: false }); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + }); + assert.containsNone( + document.body, + '.o_Message', + "should not have any message initially in channel" + ); + + // insert some HTML in editable + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "Test"); + }); + await afterNextRender(() => { + const kevt = new window.KeyboardEvent('keydown', { key: "Enter" }); + document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt); + }); + assert.containsOnce( + document.body, + '.o_Message', + "should now have single message in channel after posting message from pressing 'Enter' in text input of composer" + ); +}); + +QUnit.test('do not post message on non-mailing channel with "SHIFT-Enter" keyboard shortcut', async function (assert) { + // Note that test doesn't assert SHIFT-Enter makes a newline, because this + // default browser cannot be simulated with just dispatching + // programmatically crafted events... + assert.expect(2); + + // channel expected to be found in the sidebar + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20, mass_mailing: true }); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + }); + assert.containsNone( + document.body, + '.o_Message', + "should not have any message initially in channel" + ); + + // insert some HTML in editable + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "Test"); + }); + const kevt = new window.KeyboardEvent('keydown', { key: "Enter", shiftKey: true }); + document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt); + await nextAnimationFrame(); + assert.containsNone( + document.body, + '.o_Message', + "should still not have any message in channel after pressing 'Shift-Enter' in text input of composer" + ); +}); + +QUnit.test('post message on mailing channel with "CTRL-Enter" keyboard shortcut', async function (assert) { + assert.expect(2); + + // channel expected to be found in the sidebar + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20, mass_mailing: true }); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + }); + assert.containsNone( + document.body, + '.o_Message', + "should not have any message initially in channel" + ); + + // insert some HTML in editable + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "Test"); + }); + await afterNextRender(() => { + const kevt = new window.KeyboardEvent('keydown', { ctrlKey: true, key: "Enter" }); + document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt); + }); + assert.containsOnce( + document.body, + '.o_Message', + "should now have single message in channel after posting message from pressing 'CTRL-Enter' in text input of composer" + ); +}); + +QUnit.test('post message on mailing channel with "META-Enter" keyboard shortcut', async function (assert) { + assert.expect(2); + + // channel expected to be found in the sidebar + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20, mass_mailing: true }); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + }); + assert.containsNone( + document.body, + '.o_Message', + "should not have any message initially in channel" + ); + + // insert some HTML in editable + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "Test"); + }); + await afterNextRender(() => { + const kevt = new window.KeyboardEvent('keydown', { key: "Enter", metaKey: true }); + document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt); + }); + assert.containsOnce( + document.body, + '.o_Message', + "should now have single message in channel after posting message from pressing 'META-Enter' in text input of composer" + ); +}); + +QUnit.test('do not post message on mailing channel with "Enter" keyboard shortcut', async function (assert) { + // Note that test doesn't assert Enter makes a newline, because this + // default browser cannot be simulated with just dispatching + // programmatically crafted events... + assert.expect(2); + + // channel expected to be found in the sidebar + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20, mass_mailing: true }); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.channel_20', + }, + }, + }); + assert.containsNone( + document.body, + '.o_Message', + "should not have any message initially in mailing channel" + ); + + // insert some HTML in editable + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "Test"); + }); + const kevt = new window.KeyboardEvent('keydown', { key: "Enter" }); + document.querySelector('.o_ComposerTextInput_textarea').dispatchEvent(kevt); + await nextAnimationFrame(); + assert.containsNone( + document.body, + '.o_Message', + "should still not have any message in mailing channel after pressing 'Enter' in text input of composer" + ); +}); + +QUnit.test('rendering of inbox message', async function (assert) { + // AKU TODO: kinda message specific test + assert.expect(7); + + this.data['mail.message'].records.push({ + body: "not empty", + model: 'res.partner', // random existing model + needaction: true, // for message_fetch domain + needaction_partner_ids: [this.data.currentPartnerId], // for consistency + record_name: 'Refactoring', // random name, will be asserted in the test + res_id: 20, // random related id + }); + await this.start(); + assert.strictEqual( + document.querySelectorAll('.o_Message').length, + 1, + "should display a message" + ); + const message = document.querySelector('.o_Message'); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_originThread`).length, + 1, + "should display origin thread of message" + ); + assert.strictEqual( + message.querySelector(`:scope .o_Message_originThread`).textContent, + " on Refactoring", + "should display origin thread name" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_command`).length, + 3, + "should display 3 commands" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_commandStar`).length, + 1, + "should display star command" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_commandReply`).length, + 1, + "should display reply command" + ); + assert.strictEqual( + message.querySelectorAll(`:scope .o_Message_commandMarkAsRead`).length, + 1, + "should display mark as read command" + ); +}); + +QUnit.test('mark channel as seen on last message visible [REQUIRE FOCUS]', async function (assert) { + assert.expect(3); + + // channel expected to be found in the sidebar, with the expected message_unread_counter + // and a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 10, message_unread_counter: 1 }); + this.data['mail.message'].records.push({ + id: 12, + body: "not empty", + channel_ids: [10], + model: 'mail.channel', + res_id: 10, + }); + await this.start(); + assert.containsOnce( + document.body, + `.o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"]`, + "should have discuss sidebar item with the channel" + ); + assert.hasClass( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `), + 'o-unread', + "sidebar item of channel ID 10 should be unread" + ); + + await afterNextRender(() => this.afterEvent({ + eventName: 'o-thread-last-seen-by-current-partner-message-id-changed', + func: () => { + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `).click(); + }, + message: "should wait until last seen by current partner message id changed", + predicate: ({ thread }) => { + return ( + thread.id === 10 && + thread.model === 'mail.channel' && + thread.lastSeenByCurrentPartnerMessageId === 12 + ); + }, + })); + assert.doesNotHaveClass( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `), + 'o-unread', + "sidebar item of channel ID 10 should not longer be unread" + ); +}); + +QUnit.test('receive new needaction messages', async function (assert) { + assert.expect(12); + + await this.start(); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + `), + "should have inbox in sidebar" + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + `).classList.contains('o-active'), + "inbox should be current discuss thread" + ); + assert.notOk( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + .o_DiscussSidebarItem_counter + `), + "inbox item in sidebar should not have any counter" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_Message`).length, + 0, + "should have no messages in inbox initially" + ); + + // simulate receiving a new needaction message + await afterNextRender(() => { + const data = { + body: "not empty", + id: 100, + needaction_partner_ids: [3], + model: 'res.partner', + res_id: 20, + }; + const notifications = [[['my-db', 'ir.needaction', 3], data]]; + this.widget.call('bus_service', 'trigger', 'notification', notifications); + }); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + .o_DiscussSidebarItem_counter + `), + "inbox item in sidebar should now have counter" + ); + assert.strictEqual( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + .o_DiscussSidebarItem_counter + `).textContent, + '1', + "inbox item in sidebar should have counter of '1'" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_Message`).length, + 1, + "should have one message in inbox" + ); + assert.strictEqual( + document.querySelector(`.o_Discuss_thread .o_Message`).dataset.messageLocalId, + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId, + "should display newly received needaction message" + ); + + // simulate receiving another new needaction message + await afterNextRender(() => { + const data2 = { + body: "not empty", + id: 101, + needaction_partner_ids: [3], + model: 'res.partner', + res_id: 20, + }; + const notifications2 = [[['my-db', 'ir.needaction', 3], data2]]; + this.widget.call('bus_service', 'trigger', 'notification', notifications2); + }); + assert.strictEqual( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + .o_DiscussSidebarItem_counter + `).textContent, + '2', + "inbox item in sidebar should have counter of '2'" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_Message`).length, + 2, + "should have 2 messages in inbox" + ); + assert.ok( + document.querySelector(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `), + "should still display 1st needaction message" + ); + assert.ok( + document.querySelector(` + .o_Discuss_thread + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 101 }).localId + }"] + `), + "should display 2nd needaction message" + ); +}); + +QUnit.test('reply to message from inbox (message linked to document)', async function (assert) { + assert.expect(19); + + // message that is expected to be found in Inbox + this.data['mail.message'].records.push({ + body: "<p>Test</p>", + date: "2019-04-20 11:00:00", + id: 100, // random unique id, will be used to link notification to message + message_type: 'comment', + // needaction needs to be set here for message_fetch domain, because + // mocked models don't have computed fields + needaction: true, + model: 'res.partner', + record_name: 'Refactoring', + res_id: 20, + }); + // notification to have message in Inbox + this.data['mail.notification'].records.push({ + mail_message_id: 100, // id of related message + res_partner_id: this.data.currentPartnerId, // must be for current partner + }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_post') { + assert.step('message_post'); + assert.strictEqual( + args.model, + 'res.partner', + "should post message to record with model 'res.partner'" + ); + assert.strictEqual( + args.args[0], + 20, + "should post message to record with Id 20" + ); + assert.strictEqual( + args.kwargs.body, + "Test", + "should post with provided content in composer input" + ); + assert.strictEqual( + args.kwargs.message_type, + "comment", + "should set message type as 'comment'" + ); + } + return this._super(...arguments); + }, + }); + assert.strictEqual( + document.querySelectorAll('.o_Message').length, + 1, + "should display a single message" + ); + assert.strictEqual( + document.querySelector('.o_Message').dataset.messageLocalId, + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId, + "should display message with ID 100" + ); + assert.strictEqual( + document.querySelector('.o_Message_originThread').textContent, + " on Refactoring", + "should display message originates from record 'Refactoring'" + ); + + await afterNextRender(() => + document.querySelector('.o_Message_commandReply').click() + ); + assert.ok( + document.querySelector('.o_Message').classList.contains('o-selected'), + "message should be selected after clicking on reply icon" + ); + assert.ok( + document.querySelector('.o_Composer'), + "should have composer after clicking on reply to message" + ); + assert.strictEqual( + document.querySelector(`.o_Composer_threadName`).textContent, + " on: Refactoring", + "composer should display origin thread name of message" + ); + assert.strictEqual( + document.activeElement, + document.querySelector(`.o_ComposerTextInput_textarea`), + "composer text input should be auto-focus" + ); + + await afterNextRender(() => + document.execCommand('insertText', false, "Test") + ); + await afterNextRender(() => + document.querySelector('.o_Composer_buttonSend').click() + ); + assert.verifySteps(['message_post']); + assert.notOk( + document.querySelector('.o_Composer'), + "should no longer have composer after posting reply to message" + ); + assert.strictEqual( + document.querySelectorAll('.o_Message').length, + 1, + "should still display a single message after posting reply" + ); + assert.strictEqual( + document.querySelector('.o_Message').dataset.messageLocalId, + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId, + "should still display message with ID 100 after posting reply" + ); + assert.notOk( + document.querySelector('.o_Message').classList.contains('o-selected'), + "message should not longer be selected after posting reply" + ); + assert.ok( + document.querySelector('.o_notification'), + "should display a notification after posting reply" + ); + assert.strictEqual( + document.querySelector('.o_notification_content').textContent, + "Message posted on \"Refactoring\"", + "notification should tell that message has been posted to the record 'Refactoring'" + ); +}); + +QUnit.test('load recent messages from thread (already loaded some old messages)', async function (assert) { + assert.expect(6); + + // channel expected to be found in the sidebar, + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + for (let i = 0; i < 50; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], // id of related channel + id: 100 + i, // random unique id, will be referenced in the test + model: 'mail.channel', // expected value to link message to channel + // needaction needs to be set here for message_fetch domain, because + // mocked models don't have computed fields + needaction: i === 0, + // the goal is to have only the first (oldest) message in Inbox + needaction_partner_ids: i === 0 ? [this.data.currentPartnerId] : [], + res_id: 20, // id of related channel + }); + } + await this.start(); + assert.strictEqual( + document.querySelectorAll('.o_Message').length, + 1, + "Inbox should have a single message initially" + ); + assert.strictEqual( + document.querySelector('.o_Message').dataset.messageLocalId, + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId, + "the only message initially should be the one marked as 'needaction'" + ); + + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => { + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).click(); + }, + message: "should wait until channel scrolled to bottom after opening it from the discuss sidebar", + predicate: ({ scrollTop, thread }) => { + const messageList = document.querySelector('.o_ThreadView_messageList'); + return ( + thread && + thread.model === 'mail.channel' && + thread.id === 20 && + scrollTop === messageList.scrollHeight - messageList.clientHeight + ); + }, + }); + assert.strictEqual( + document.querySelectorAll('.o_Message').length, + 31, + `should display 31 messages inside the channel after clicking on it (the previously known + message from Inbox and the 30 most recent messages that have been fetched)` + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `).length, + 1, + "should display the message from Inbox inside the channel too" + ); + + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => document.querySelector('.o_Discuss_thread .o_ThreadView_messageList').scrollTop = 0, + message: "should wait until channel 20 loaded more messages after scrolling to top", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'more-messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 20 + ); + }, + }); + assert.strictEqual( + document.querySelectorAll('.o_Message').length, + 50, + "should display 50 messages inside the channel after scrolling to load more (all messages fetched)" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId + }"] + `).length, + 1, + "should still display the message from Inbox inside the channel too" + ); +}); + +QUnit.test('messages marked as read move to "History" mailbox', async function (assert) { + assert.expect(10); + + // channel expected to be found in the sidebar + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20 }); + // expected messages + this.data['mail.message'].records.push( + { + body: "not empty", + id: 100, // random unique id, useful to link notification + model: 'mail.channel', // value to link message to channel + // needaction needs to be set here for message_fetch domain, because + // mocked models don't have computed fields + needaction: true, + res_id: 20, // id of related channel + }, + { + body: "not empty", + id: 101, // random unique id, useful to link notification + model: 'mail.channel', // value to link message to channel + // needaction needs to be set here for message_fetch domain, because + // mocked models don't have computed fields + needaction: true, + res_id: 20, // id of related channel + } + ); + this.data['mail.notification'].records.push( + // notification to have first message in inbox + { + mail_message_id: 100, // id of related message + res_partner_id: this.data.currentPartnerId, // must be for current partner + }, + // notification to have second message in inbox + { + mail_message_id: 101, // id of related message + res_partner_id: this.data.currentPartnerId, // must be for current partner + } + ); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.box_history', + }, + }, + }); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.history.localId + }"] + `).classList.contains('o-active'), + "history mailbox should be active thread" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_MessageList_empty`).length, + 1, + "should have empty thread in history" + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + `).click() + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + `).classList.contains('o-active'), + "inbox mailbox should be active thread" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_MessageList_empty`).length, + 0, + "inbox mailbox should not be empty" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_MessageList_message`).length, + 2, + "inbox mailbox should have 2 messages" + ); + + await afterNextRender(() => + document.querySelector('.o_widget_Discuss_controlPanelButtonMarkAllRead').click() + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + `).classList.contains('o-active'), + "inbox mailbox should still be active after mark as read" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_MessageList_empty`).length, + 1, + "inbox mailbox should now be empty after mark as read" + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.history.localId + }"] + `).click() + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.history.localId + }"] + `).classList.contains('o-active'), + "history mailbox should be active" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_MessageList_empty`).length, + 0, + "history mailbox should not be empty after mark as read" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Discuss_thread .o_MessageList_message`).length, + 2, + "history mailbox should have 2 messages" + ); +}); + +QUnit.test('mark a single message as read should only move this message to "History" mailbox', async function (assert) { + assert.expect(9); + + this.data['mail.message'].records.push( + { + body: "not empty", + id: 1, + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + }, + { + body: "not empty", + id: 2, + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + } + ); + this.data['mail.notification'].records.push( + { + mail_message_id: 1, + res_partner_id: this.data.currentPartnerId, + }, + { + mail_message_id: 2, + res_partner_id: this.data.currentPartnerId, + } + ); + await this.start({ + discuss: { + params: { + default_active_id: 'mail.box_history', + }, + }, + }); + assert.hasClass( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.history.localId + }"] + `), + 'o-active', + "history mailbox should initially be the active thread" + ); + assert.containsOnce( + document.body, + '.o_MessageList_empty', + "history mailbox should initially be empty" + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + `).click() + ); + assert.hasClass( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.inbox.localId + }"] + `), + 'o-active', + "inbox mailbox should be active thread after clicking on it" + ); + assert.containsN( + document.body, + '.o_Message', + 2, + "inbox mailbox should have 2 messages" + ); + + await afterNextRender(() => + document.querySelector(` + .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 1 }).localId + }"] .o_Message_commandMarkAsRead + `).click() + ); + assert.containsOnce( + document.body, + '.o_Message', + "inbox mailbox should have one less message after clicking mark as read" + ); + assert.containsOnce( + document.body, + `.o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 2 }).localId + }"]`, + "message still in inbox should be the one not marked as read" + ); + + await afterNextRender(() => + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.history.localId + }"] + `).click() + ); + assert.hasClass( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.messaging.history.localId + }"] + `), + 'o-active', + "history mailbox should be active after clicking on it" + ); + assert.containsOnce( + document.body, + '.o_Message', + "history mailbox should have only 1 message after mark as read" + ); + assert.containsOnce( + document.body, + `.o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 1 }).localId + }"]`, + "message moved in history should be the one marked as read" + ); +}); + +QUnit.test('all messages in "Inbox" in "History" after marked all as read', async function (assert) { + assert.expect(2); + + const messageOffset = 200; + for (let id = messageOffset; id < messageOffset + 40; id++) { + // message expected to be found in Inbox + this.data['mail.message'].records.push({ + body: "not empty", + id, // will be used to link notification to message + // needaction needs to be set here for message_fetch domain, because + // mocked models don't have computed fields + needaction: true, + }); + // notification to have message in Inbox + this.data['mail.notification'].records.push({ + mail_message_id: id, // id of related message + res_partner_id: this.data.currentPartnerId, // must be for current partner + }); + + } + await this.start({ + waitUntilEvent: { + eventName: 'o-component-message-list-scrolled', + message: "should wait until inbox scrolled to its last message initially", + predicate: ({ orderedMessages, scrollTop, thread }) => { + const messageList = document.querySelector(`.o_Discuss_thread .o_ThreadView_messageList`); + return ( + thread && + thread.model === 'mail.box' && + thread.id === 'inbox' && + orderedMessages.length === 30 && + scrollTop === messageList.scrollHeight - messageList.clientHeight + ); + }, + }, + }); + + await afterNextRender(async () => { + const markAllReadButton = document.querySelector('.o_widget_Discuss_controlPanelButtonMarkAllRead'); + markAllReadButton.click(); + }); + assert.containsNone( + document.body, + '.o_Message', + "there should no message in Inbox anymore" + ); + + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => { + document.querySelector(` + .o_DiscussSidebarItem[data-thread-local-id="${ + this.env.messaging.history.localId + }"] + `).click(); + }, + message: "should wait until history scrolled to its last message after opening it from the discuss sidebar", + predicate: ({ orderedMessages, scrollTop, thread }) => { + const messageList = document.querySelector('.o_MessageList'); + return ( + thread && + thread.model === 'mail.box' && + thread.id === 'history' && + orderedMessages.length === 30 && + scrollTop === messageList.scrollHeight - messageList.clientHeight + ); + }, + }); + + // simulate a scroll to top to load more messages + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => document.querySelector('.o_MessageList').scrollTop = 0, + message: "should wait until mailbox history loaded more messages after scrolling to top", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'more-messages-loaded' && + threadViewer.thread.model === 'mail.box' && + threadViewer.thread.id === 'history' + ); + }, + }); + assert.containsN( + document.body, + '.o_Message', + 40, + "there should be 40 messages in History" + ); +}); + +QUnit.test('receive new chat message: out of odoo focus (notification, channel)', async function (assert) { + assert.expect(4); + + // channel expected to be found in the sidebar + // with a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ id: 20, channel_type: 'chat' }); + const bus = new Bus(); + bus.on('set_title_part', null, payload => { + assert.step('set_title_part'); + assert.strictEqual(payload.part, '_chat'); + assert.strictEqual(payload.title, "1 Message"); + }); + await this.start({ + env: { bus }, + services: { + bus_service: BusService.extend({ + _beep() {}, // Do nothing + _poll() {}, // Do nothing + _registerWindowUnload() {}, // Do nothing + isOdooFocused: () => false, + updateOption() {}, + }), + }, + }); + + // simulate receiving a new message with odoo focused + await afterNextRender(() => { + const messageData = { + channel_ids: [20], + id: 126, + model: 'mail.channel', + res_id: 20, + }; + const notifications = [[['my-db', 'mail.channel', 20], messageData]]; + this.widget.call('bus_service', 'trigger', 'notification', notifications); + }); + assert.verifySteps(['set_title_part']); +}); + +QUnit.test('receive new chat message: out of odoo focus (notification, chat)', async function (assert) { + assert.expect(4); + + // chat expected to be found in the sidebar with the proper channel_type + // and a random unique id that will be referenced in the test + this.data['mail.channel'].records.push({ channel_type: "chat", id: 10 }); + const bus = new Bus(); + bus.on('set_title_part', null, payload => { + assert.step('set_title_part'); + assert.strictEqual(payload.part, '_chat'); + assert.strictEqual(payload.title, "1 Message"); + }); + await this.start({ + env: { bus }, + services: { + bus_service: BusService.extend({ + _beep() {}, // Do nothing + _poll() {}, // Do nothing + _registerWindowUnload() {}, // Do nothing + isOdooFocused: () => false, + updateOption() {}, + }), + }, + }); + + // simulate receiving a new message with odoo focused + await afterNextRender(() => { + const messageData = { + channel_ids: [10], + id: 126, + model: 'mail.channel', + res_id: 10, + }; + const notifications = [[['my-db', 'mail.channel', 10], messageData]]; + this.widget.call('bus_service', 'trigger', 'notification', notifications); + }); + assert.verifySteps(['set_title_part']); +}); + +QUnit.test('receive new chat messages: out of odoo focus (tab title)', async function (assert) { + assert.expect(12); + + let step = 0; + // channel and chat expected to be found in the sidebar + // with random unique id and name that will be referenced in the test + this.data['mail.channel'].records.push( + { channel_type: 'chat', id: 20, public: 'private' }, + { channel_type: 'chat', id: 10, public: 'private' }, + ); + const bus = new Bus(); + bus.on('set_title_part', null, payload => { + step++; + assert.step('set_title_part'); + assert.strictEqual(payload.part, '_chat'); + if (step === 1) { + assert.strictEqual(payload.title, "1 Message"); + } + if (step === 2) { + assert.strictEqual(payload.title, "2 Messages"); + } + if (step === 3) { + assert.strictEqual(payload.title, "3 Messages"); + } + }); + await this.start({ + env: { bus }, + services: { + bus_service: BusService.extend({ + _beep() {}, // Do nothing + _poll() {}, // Do nothing + _registerWindowUnload() {}, // Do nothing + isOdooFocused: () => false, + updateOption() {}, + }), + }, + }); + + // simulate receiving a new message in chat 20 with odoo focused + await afterNextRender(() => { + const messageData1 = { + channel_ids: [20], + id: 126, + model: 'mail.channel', + res_id: 20, + }; + const notifications1 = [[['my-db', 'mail.channel', 20], messageData1]]; + this.widget.call('bus_service', 'trigger', 'notification', notifications1); + }); + assert.verifySteps(['set_title_part']); + + // simulate receiving a new message in chat 10 with odoo focused + await afterNextRender(() => { + const messageData2 = { + channel_ids: [10], + id: 127, + model: 'mail.channel', + res_id: 10, + }; + const notifications2 = [[['my-db', 'mail.channel', 10], messageData2]]; + this.widget.call('bus_service', 'trigger', 'notification', notifications2); + }); + assert.verifySteps(['set_title_part']); + + // simulate receiving another new message in chat 10 with odoo focused + await afterNextRender(() => { + const messageData3 = { + channel_ids: [10], + id: 128, + model: 'mail.channel', + res_id: 10, + }; + const notifications3 = [[['my-db', 'mail.channel', 10], messageData3]]; + this.widget.call('bus_service', 'trigger', 'notification', notifications3); + }); + assert.verifySteps(['set_title_part']); +}); + +QUnit.test('auto-focus composer on opening thread', async function (assert) { + assert.expect(14); + + // expected correspondent, with a random unique id that will be used to link + // partner to chat and a random name that will be asserted in the test + this.data['res.partner'].records.push({ id: 7, name: "Demo User" }); + this.data['mail.channel'].records.push( + // channel expected to be found in the sidebar + { + id: 20, // random unique id, will be referenced in the test + name: "General", // random name, will be asserted in the test + }, + // chat expected to be found in the sidebar + { + channel_type: 'chat', // testing a chat is the goal of the test + id: 10, // random unique id, will be referenced in the test + members: [this.data.currentPartnerId, 7], // expected partners + public: 'private', // expected value for testing a chat + } + ); + await this.start(); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-name="Inbox"] + `).length, + 1, + "should have mailbox 'Inbox' in the sidebar" + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-name="Inbox"] + `).classList.contains('o-active'), + "mailbox 'Inbox' should be active initially" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-name="General"] + `).length, + 1, + "should have channel 'General' in the sidebar" + ); + assert.notOk( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-name="General"] + `).classList.contains('o-active'), + "channel 'General' should not be active initially" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_DiscussSidebar_item[data-thread-name="Demo User"] + `).length, + 1, + "should have chat 'Demo User' in the sidebar" + ); + assert.notOk( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-name="Demo User"] + `).classList.contains('o-active'), + "chat 'Demo User' should not be active initially" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Composer`).length, + 0, + "there should be no composer when active thread of discuss is mailbox 'Inbox'" + ); + + await afterNextRender(() => + document.querySelector(`.o_DiscussSidebar_item[data-thread-name="General"]`).click() + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-name="General"] + `).classList.contains('o-active'), + "channel 'General' should become active after selecting it from the sidebar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Composer`).length, + 1, + "there should be a composer when active thread of discuss is channel 'General'" + ); + assert.strictEqual( + document.activeElement, + document.querySelector(`.o_ComposerTextInput_textarea`), + "composer of channel 'General' should be automatically focused on opening" + ); + + document.querySelector(`.o_ComposerTextInput_textarea`).blur(); + assert.notOk( + document.activeElement === document.querySelector(`.o_ComposerTextInput_textarea`), + "composer of channel 'General' should no longer focused on click away" + ); + + await afterNextRender(() => + document.querySelector(`.o_DiscussSidebar_item[data-thread-name="Demo User"]`).click() + ); + assert.ok( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-name="Demo User"] + `).classList.contains('o-active'), + "chat 'Demo User' should become active after selecting it from the sidebar" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Composer`).length, + 1, + "there should be a composer when active thread of discuss is chat 'Demo User'" + ); + assert.strictEqual( + document.activeElement, + document.querySelector(`.o_ComposerTextInput_textarea`), + "composer of chat 'Demo User' should be automatically focused on opening" + ); +}); + +QUnit.test('mark channel as seen if last message is visible when switching channels when the previous channel had a more recent last message than the current channel [REQUIRE FOCUS]', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push( + { id: 10, message_unread_counter: 1, name: 'Bla' }, + { id: 11, message_unread_counter: 1, name: 'Blu' }, + ); + this.data['mail.message'].records.push({ + body: 'oldest message', + channel_ids: [10], + id: 10, + }, { + body: 'newest message', + channel_ids: [11], + id: 11, + }); + await this.start({ + discuss: { + context: { + active_id: 'mail.channel_11', + }, + }, + waitUntilEvent: { + eventName: 'o-thread-view-hint-processed', + message: "should wait until channel 11 loaded its messages initially", + predicate: ({ hint, threadViewer }) => { + return ( + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 11 && + hint.type === 'messages-loaded' + ); + }, + }, + }); + await afterNextRender(() => this.afterEvent({ + eventName: 'o-thread-last-seen-by-current-partner-message-id-changed', + func: () => { + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `).click(); + }, + message: "should wait until last seen by current partner message id changed", + predicate: ({ thread }) => { + return ( + thread.id === 10 && + thread.model === 'mail.channel' && + thread.lastSeenByCurrentPartnerMessageId === 10 + ); + }, + })); + assert.doesNotHaveClass( + document.querySelector(` + .o_DiscussSidebar_item[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `), + 'o-unread', + "sidebar item of channel ID 10 should no longer be unread" + ); +}); + +QUnit.test('add custom filter should filter messages accordingly to selected filter', async function (assert) { + assert.expect(4); + + this.data['mail.channel'].records.push({ + id: 20, + name: "General" + }); + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_fetch') { + const domainsAsStr = args.kwargs.domain.map(domain => domain.join('')); + assert.step(`message_fetch:${domainsAsStr.join(',')}`); + } + return this._super(...arguments); + }, + }); + assert.verifySteps(['message_fetch:needaction=true'], "A message_fetch request should have been done for needaction messages as inbox is selected by default"); + + // Open filter menu of control panel and select a custom filter (id = 0, the only one available) + await toggleFilterMenu(document.body); + await toggleAddCustomFilter(document.body); + await applyFilter(document.body); + assert.verifySteps(['message_fetch:id=0,needaction=true'], "A message_fetch request should have been done for selected filter & domain of current thread (inbox)"); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.js b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.js new file mode 100644 index 00000000..b78faa67 --- /dev/null +++ b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.js @@ -0,0 +1,95 @@ +odoo.define('mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class DiscussMobileMailboxSelection extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + return { + allOrderedAndPinnedMailboxes: this.orderedMailboxes.map(mailbox => mailbox.__state), + discussThread: this.env.messaging.discuss.thread + ? this.env.messaging.discuss.thread.__state + : undefined, + }; + }, { + compareDepth: { + allOrderedAndPinnedMailboxes: 1, + }, + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.thread[]} + */ + get orderedMailboxes() { + return this.env.models['mail.thread'] + .all(thread => thread.isPinned && thread.model === 'mail.box') + .sort((mailbox1, mailbox2) => { + if (mailbox1 === this.env.messaging.inbox) { + return -1; + } + if (mailbox2 === this.env.messaging.inbox) { + return 1; + } + if (mailbox1 === this.env.messaging.starred) { + return -1; + } + if (mailbox2 === this.env.messaging.starred) { + return 1; + } + const mailbox1Name = mailbox1.displayName; + const mailbox2Name = mailbox2.displayName; + mailbox1Name < mailbox2Name ? -1 : 1; + }); + } + + /** + * @returns {mail.discuss} + */ + get discuss() { + return this.env.messaging && this.env.messaging.discuss; + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Called when clicking on a mailbox selection item. + * + * @private + * @param {MouseEvent} ev + */ + _onClick(ev) { + const { mailboxLocalId } = ev.currentTarget.dataset; + const mailbox = this.env.models['mail.thread'].get(mailboxLocalId); + if (!mailbox) { + return; + } + mailbox.open(); + } + +} + +Object.assign(DiscussMobileMailboxSelection, { + props: {}, + template: 'mail.DiscussMobileMailboxSelection', +}); + +return DiscussMobileMailboxSelection; + +}); diff --git a/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.scss b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.scss new file mode 100644 index 00000000..b620e2f1 --- /dev/null +++ b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.scss @@ -0,0 +1,26 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_DiscussMobileMailboxSelection { + display: flex; + flex: 0 0 auto; +} + +.o_DiscussMobileMailboxSelection_button { + flex: 1 1 0; + padding: 8px; + z-index: 1; + + &.o-active { + z-index: 2; + } +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_DiscussMobileMailboxSelection_button { + box-shadow: 0 2px 4px gray('400'); +} diff --git a/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.xml b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.xml new file mode 100644 index 00000000..e996a203 --- /dev/null +++ b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection.xml @@ -0,0 +1,20 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.DiscussMobileMailboxSelection" owl="1"> + <div class="o_DiscussMobileMailboxSelection"> + <t t-foreach="orderedMailboxes" t-as="mailbox" t-key="mailbox.localId"> + <button class="o_DiscussMobileMailboxSelection_button btn" + t-att-class="{ + 'btn-primary': discuss.thread === mailbox, + 'btn-secondary': discuss.thread !== mailbox, + 'o-active': discuss.thread === mailbox, + }" t-on-click="_onClick" t-att-data-mailbox-local-id="mailbox.localId" type="button" + > + <t t-esc="mailbox.name"/> + </button> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection_tests.js b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection_tests.js new file mode 100644 index 00000000..0d145c13 --- /dev/null +++ b/addons/mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection_tests.js @@ -0,0 +1,130 @@ +odoo.define('mail/static/src/components/discuss_mobile_mailbox_selection/discuss_mobile_mailbox_selection_tests.js', function (require) { +'use strict'; + +const { + afterEach, + afterNextRender, + beforeEach, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('discuss_mobile_mailbox_selection', {}, function () { +QUnit.module('discuss_mobile_mailbox_selection_tests.js', { + beforeEach() { + beforeEach(this); + + this.start = async params => { + const { env, widget } = await start(Object.assign( + { + autoOpenDiscuss: true, + data: this.data, + env: { + browser: { + innerHeight: 640, + innerWidth: 360, + }, + device: { + isMobile: true, + }, + }, + hasDiscuss: true, + }, + params, + )); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('select another mailbox', async function (assert) { + assert.expect(7); + + await this.start(); + assert.containsOnce( + document.body, + '.o_Discuss', + "should display discuss initially" + ); + assert.hasClass( + document.querySelector('.o_Discuss'), + 'o-mobile', + "discuss should be opened in mobile mode" + ); + assert.containsOnce( + document.body, + '.o_Discuss_thread', + "discuss should display a thread initially" + ); + assert.strictEqual( + document.querySelector('.o_Discuss_thread').dataset.threadLocalId, + this.env.messaging.inbox.localId, + "inbox mailbox should be opened initially" + ); + assert.containsOnce( + document.body, + `.o_DiscussMobileMailboxSelection_button[ + data-mailbox-local-id="${this.env.messaging.starred.localId}" + ]`, + "should have a button to open starred mailbox" + ); + + await afterNextRender(() => + document.querySelector(`.o_DiscussMobileMailboxSelection_button[ + data-mailbox-local-id="${this.env.messaging.starred.localId}"] + `).click() + ); + assert.containsOnce( + document.body, + '.o_Discuss_thread', + "discuss should still have a thread after clicking on starred mailbox" + ); + assert.strictEqual( + document.querySelector('.o_Discuss_thread').dataset.threadLocalId, + this.env.messaging.starred.localId, + "starred mailbox should be opened after clicking on it" + ); +}); + +QUnit.test('auto-select "Inbox" when discuss had channel as active thread', async function (assert) { + assert.expect(3); + + this.data['mail.channel'].records.push({ id: 20 }); + await this.start({ + discuss: { + context: { + active_id: 20, + }, + } + }); + assert.hasClass( + document.querySelector('.o_MobileMessagingNavbar_tab[data-tab-id="channel"]'), + 'o-active', + "'channel' tab should be active initially when loading discuss with channel id as active_id" + ); + + await afterNextRender(() => document.querySelector('.o_MobileMessagingNavbar_tab[data-tab-id="mailbox"]').click()); + assert.hasClass( + document.querySelector('.o_MobileMessagingNavbar_tab[data-tab-id="mailbox"]'), + 'o-active', + "'mailbox' tab should be selected after click on mailbox tab" + ); + assert.hasClass( + document.querySelector(`.o_DiscussMobileMailboxSelection_button[data-mailbox-local-id="${ + this.env.messaging.inbox.localId + }"]`), + 'o-active', + "'Inbox' mailbox should be auto-selected after click on mailbox tab" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.js b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.js new file mode 100644 index 00000000..d12d0353 --- /dev/null +++ b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.js @@ -0,0 +1,308 @@ +odoo.define('mail/static/src/components/discuss_sidebar/discuss_sidebar.js', function (require) { +'use strict'; + +const components = { + AutocompleteInput: require('mail/static/src/components/autocomplete_input/autocomplete_input.js'), + DiscussSidebarItem: require('mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class DiscussSidebar extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore( + (...args) => this._useStoreSelector(...args), + { compareDepth: this._useStoreCompareDepth() } + ); + useUpdate({ func: () => this._update() }); + /** + * Reference of the quick search input. Useful to filter channels and + * chats based on this input content. + */ + this._quickSearchInputRef = useRef('quickSearchInput'); + + // bind since passed as props + this._onAddChannelAutocompleteSelect = this._onAddChannelAutocompleteSelect.bind(this); + this._onAddChannelAutocompleteSource = this._onAddChannelAutocompleteSource.bind(this); + this._onAddChatAutocompleteSelect = this._onAddChatAutocompleteSelect.bind(this); + this._onAddChatAutocompleteSource = this._onAddChatAutocompleteSource.bind(this); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.discuss} + */ + get discuss() { + return this.env.messaging && this.env.messaging.discuss; + } + + /** + * @returns {string} + */ + get FIND_OR_CREATE_CHANNEL() { + return this.env._t("Find or create a channel..."); + } + + /** + * @returns {mail.thread[]} + */ + get orderedMailboxes() { + return this.env.models['mail.thread'] + .all(thread => thread.isPinned && thread.model === 'mail.box') + .sort((mailbox1, mailbox2) => { + if (mailbox1 === this.env.messaging.inbox) { + return -1; + } + if (mailbox2 === this.env.messaging.inbox) { + return 1; + } + if (mailbox1 === this.env.messaging.starred) { + return -1; + } + if (mailbox2 === this.env.messaging.starred) { + return 1; + } + const mailbox1Name = mailbox1.displayName; + const mailbox2Name = mailbox2.displayName; + mailbox1Name < mailbox2Name ? -1 : 1; + }); + } + + /** + * Return the list of chats that match the quick search value input. + * + * @returns {mail.thread[]} + */ + get quickSearchPinnedAndOrderedChats() { + const allOrderedAndPinnedChats = this.env.models['mail.thread'] + .all(thread => + thread.channel_type === 'chat' && + thread.isPinned && + thread.model === 'mail.channel' + ) + .sort((c1, c2) => c1.displayName < c2.displayName ? -1 : 1); + if (!this.discuss.sidebarQuickSearchValue) { + return allOrderedAndPinnedChats; + } + const qsVal = this.discuss.sidebarQuickSearchValue.toLowerCase(); + return allOrderedAndPinnedChats.filter(chat => { + const nameVal = chat.displayName.toLowerCase(); + return nameVal.includes(qsVal); + }); + } + + /** + * Return the list of channels that match the quick search value input. + * + * @returns {mail.thread[]} + */ + get quickSearchOrderedAndPinnedMultiUserChannels() { + const allOrderedAndPinnedMultiUserChannels = this.env.models['mail.thread'] + .all(thread => + thread.channel_type === 'channel' && + thread.isPinned && + thread.model === 'mail.channel' + ) + .sort((c1, c2) => { + if (c1.displayName && !c2.displayName) { + return -1; + } else if (!c1.displayName && c2.displayName) { + return 1; + } else if (c1.displayName && c2.displayName && c1.displayName !== c2.displayName) { + return c1.displayName.toLowerCase() < c2.displayName.toLowerCase() ? -1 : 1; + } else { + return c1.id - c2.id; + } + }); + if (!this.discuss.sidebarQuickSearchValue) { + return allOrderedAndPinnedMultiUserChannels; + } + const qsVal = this.discuss.sidebarQuickSearchValue.toLowerCase(); + return allOrderedAndPinnedMultiUserChannels.filter(channel => { + const nameVal = channel.displayName.toLowerCase(); + return nameVal.includes(qsVal); + }); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _update() { + if (!this.discuss) { + return; + } + if (this._quickSearchInputRef.el) { + this._quickSearchInputRef.el.value = this.discuss.sidebarQuickSearchValue; + } + } + + /** + * @private + * @returns {Object} + */ + _useStoreCompareDepth() { + return { + allOrderedAndPinnedChats: 1, + allOrderedAndPinnedMailboxes: 1, + allOrderedAndPinnedMultiUserChannels: 1, + }; + } + + /** + * @private + * @param {Object} props + * @returns {Object} + */ + _useStoreSelector(props) { + const discuss = this.env.messaging.discuss; + return { + allOrderedAndPinnedChats: this.quickSearchPinnedAndOrderedChats, + allOrderedAndPinnedMailboxes: this.orderedMailboxes, + allOrderedAndPinnedMultiUserChannels: this.quickSearchOrderedAndPinnedMultiUserChannels, + allPinnedChannelAmount: + this.env.models['mail.thread'] + .all(thread => + thread.isPinned && + thread.model === 'mail.channel' + ).length, + discussIsAddingChannel: discuss && discuss.isAddingChannel, + discussIsAddingChat: discuss && discuss.isAddingChat, + discussSidebarQuickSearchValue: discuss && discuss.sidebarQuickSearchValue, + }; + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {Event} ev + * @param {Object} ui + * @param {Object} ui.item + * @param {integer} ui.item.id + */ + _onAddChannelAutocompleteSelect(ev, ui) { + this.discuss.handleAddChannelAutocompleteSelect(ev, ui); + } + + /** + * @private + * @param {Object} req + * @param {string} req.term + * @param {function} res + */ + _onAddChannelAutocompleteSource(req, res) { + this.discuss.handleAddChannelAutocompleteSource(req, res); + } + + /** + * @private + * @param {Event} ev + * @param {Object} ui + * @param {Object} ui.item + * @param {integer} ui.item.id + */ + _onAddChatAutocompleteSelect(ev, ui) { + this.discuss.handleAddChatAutocompleteSelect(ev, ui); + } + + /** + * @private + * @param {Object} req + * @param {string} req.term + * @param {function} res + */ + _onAddChatAutocompleteSource(req, res) { + this.discuss.handleAddChatAutocompleteSource(req, res); + } + + /** + * Called when clicking on add channel icon. + * + * @private + * @param {MouseEvent} ev + */ + _onClickChannelAdd(ev) { + ev.stopPropagation(); + this.discuss.update({ isAddingChannel: true }); + } + + /** + * Called when clicking on channel title. + * + * @private + * @param {MouseEvent} ev + */ + _onClickChannelTitle(ev) { + ev.stopPropagation(); + return this.env.bus.trigger('do-action', { + action: { + name: this.env._t("Public Channels"), + type: 'ir.actions.act_window', + res_model: 'mail.channel', + views: [[false, 'kanban'], [false, 'form']], + domain: [['public', '!=', 'private']] + }, + }); + } + + /** + * Called when clicking on add chat icon. + * + * @private + * @param {MouseEvent} ev + */ + _onClickChatAdd(ev) { + ev.stopPropagation(); + this.discuss.update({ isAddingChat: true }); + } + + /** + * @private + * @param {CustomEvent} ev + */ + _onHideAddingItem(ev) { + ev.stopPropagation(); + this.discuss.clearIsAddingItem(); + } + + /** + * @private + * @param {KeyboardEvent} ev + */ + _onInputQuickSearch(ev) { + ev.stopPropagation(); + this.discuss.update({ + sidebarQuickSearchValue: this._quickSearchInputRef.el.value, + }); + } + +} + +Object.assign(DiscussSidebar, { + components, + props: {}, + template: 'mail.DiscussSidebar', +}); + +return DiscussSidebar; + +}); diff --git a/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.scss b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.scss new file mode 100644 index 00000000..3e49cddf --- /dev/null +++ b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.scss @@ -0,0 +1,110 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_DiscussSidebar { + display: flex; + flex-flow: column; + width: $o-mail-chat-sidebar-width; + + @include media-breakpoint-up(xl) { + width: $o-mail-chat-sidebar-width + 50px; + } +} + +.o_DiscussSidebar_group { + display: flex; + flex-flow: column; + flex: 0 0 auto; +} + +.o_DiscussSidebar_groupHeader { + display: flex; + align-items: center; + margin: 5px 0; +} + +.o_DiscussSidebar_groupHeaderItem { + margin-left: 3px; + margin-right: 3px; + + &:first-child { + margin-left: $o-mail-discuss-sidebar-active-indicator-margin-right; + } + + &:last-child { + margin-right: $o-mail-discuss-sidebar-scrollbar-width; + } +} + +.o_DiscussSidebar_itemNew { + display: flex; + justify-content: center; +} + +.o_DiscussSidebar_itemNewInput { + flex: 1 1 auto; + margin-left: $o-mail-discuss-sidebar-active-indicator-margin-right + 3px; + margin-right: $o-mail-discuss-sidebar-scrollbar-width; +} + +.o_DiscussSidebar_quickSearch { + border-radius: 10px; + margin: 0 $o-mail-discuss-sidebar-scrollbar-width 10px; + padding: 3px 10px; +} + +.o_DiscussSidebar_separator { + width: 100%; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_DiscussSidebar { + background-color: gray('900'); + color: gray('300'); +} + +.o_DiscussSidebar_groupHeader { + font-size: $font-size-sm; + text-transform: uppercase; + font-weight: bolder; +} + +.o_DiscussSidebar_groupHeaderItemAdd { + cursor: pointer; + + &:not(:hover) { + color: gray('600'); + } +} + +.o_DiscussSidebar_groupTitle { + + &:not(.o-clickable) { + color: gray('600'); + } + + &.o-clickable { + cursor: pointer; + + &:not(:hover) { + color: gray('600'); + } + } +} + +.o_DiscussSidebar_itemNewInput { + outline: none; +} + +.o_DiscussSidebar_quickSearch { + border: none; + outline: none; +} + +.o_DiscussSidebar_separator { + background-color: gray('600'); +} diff --git a/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml new file mode 100644 index 00000000..4f9c10e5 --- /dev/null +++ b/addons/mail/static/src/components/discuss_sidebar/discuss_sidebar.xml @@ -0,0 +1,81 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.DiscussSidebar" owl="1"> + <div name="root" class="o_DiscussSidebar"> + <div class="o_DiscussSidebar_group o_DiscussSidebar_groupMailbox"> + <t t-foreach="orderedMailboxes" t-as="mailbox" t-key="mailbox.localId"> + <DiscussSidebarItem + class="o_DiscussSidebar_item" + threadLocalId="mailbox.localId" + /> + </t> + </div> + <hr class="o_DiscussSidebar_separator"/> + <t t-if="env.models['mail.thread'].all(thread => thread.isPinned and thread.model === 'mail.channel').length > 19"> + <input class="o_DiscussSidebar_quickSearch" t-on-input="_onInputQuickSearch" placeholder="Quick search..." t-ref="quickSearchInput" t-esc="discuss.sidebarQuickSearchValue"/> + </t> + <div class="o_DiscussSidebar_group o_DiscussSidebar_groupChannel"> + <div class="o_DiscussSidebar_groupHeader"> + <div class="o_DiscussSidebar_groupHeaderItem o_DiscussSidebar_groupTitle o-clickable" t-on-click="_onClickChannelTitle"> + Channels + </div> + <div class="o-autogrow"/> + <div class="o_DiscussSidebar_groupHeaderItem o_DiscussSidebar_groupHeaderItemAdd fa fa-plus" t-on-click="_onClickChannelAdd" title="Add or join a channel"/> + </div> + <div class="o_DiscussSidebar_list"> + <t t-if="discuss.isAddingChannel"> + <div class="o_DiscussSidebar_item o_DiscussSidebar_itemNew"> + <AutocompleteInput + class="o_DiscussSidebar_itemNewInput" + customClass="'o_DiscussSidebar_newChannelAutocompleteSuggestions'" + isFocusOnMount="true" + isHtml="true" + placeholder="FIND_OR_CREATE_CHANNEL" + select="_onAddChannelAutocompleteSelect" + source="_onAddChannelAutocompleteSource" + t-on-o-hide="_onHideAddingItem" + /> + </div> + </t> + <t t-foreach="quickSearchOrderedAndPinnedMultiUserChannels" t-as="channel" t-key="channel.localId"> + <DiscussSidebarItem + class="o_DiscussSidebar_item" + threadLocalId="channel.localId" + /> + </t> + </div> + </div> + <div class="o_DiscussSidebar_group o_DiscussSidebar_groupChat"> + <div class="o_DiscussSidebar_groupHeader"> + <div class="o_DiscussSidebar_groupHeaderItem o_DiscussSidebar_groupTitle"> + Direct Messages + </div> + <div class="o-autogrow"/> + <div class="o_DiscussSidebar_groupHeaderItem o_DiscussSidebar_groupHeaderItemAdd fa fa-plus" t-on-click="_onClickChatAdd" title="Start a conversation"/> + </div> + <div class="o_DiscussSidebar_list"> + <t t-if="discuss.isAddingChat"> + <div class="o_DiscussSidebar_item o_DiscussSidebar_itemNew"> + <AutocompleteInput + class="o_DiscussSidebar_itemNewInput" + isFocusOnMount="true" + placeholder="'Find or start a conversation...'" + select="_onAddChatAutocompleteSelect" + source="_onAddChatAutocompleteSource" + t-on-o-hide="_onHideAddingItem" + /> + </div> + </t> + <t t-foreach="quickSearchPinnedAndOrderedChats" t-as="chat" t-key="chat.localId"> + <DiscussSidebarItem + class="o_DiscussSidebar_item" + threadLocalId="chat.localId" + /> + </t> + </div> + </div> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js new file mode 100644 index 00000000..0226035c --- /dev/null +++ b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js @@ -0,0 +1,220 @@ +odoo.define('mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.js', function (require) { +'use strict'; + +const components = { + EditableText: require('mail/static/src/components/editable_text/editable_text.js'), + ThreadIcon: require('mail/static/src/components/thread_icon/thread_icon.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const { isEventHandled } = require('mail/static/src/utils/utils.js'); + +const Dialog = require('web.Dialog'); + +const { Component } = owl; + +class DiscussSidebarItem extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const discuss = this.env.messaging.discuss; + const thread = this.env.models['mail.thread'].get(props.threadLocalId); + const correspondent = thread ? thread.correspondent : undefined; + return { + correspondentName: correspondent && correspondent.name, + discussIsRenamingThread: discuss && discuss.renamingThreads.includes(thread), + isDiscussThread: discuss && discuss.thread === thread, + starred: this.env.messaging.starred, + thread, + threadChannelType: thread && thread.channel_type, + threadCounter: thread && thread.counter, + threadDisplayName: thread && thread.displayName, + threadGroupBasedSubscription: thread && thread.group_based_subscription, + threadLocalMessageUnreadCounter: thread && thread.localMessageUnreadCounter, + threadMassMailing: thread && thread.mass_mailing, + threadMessageNeedactionCounter: thread && thread.message_needaction_counter, + threadModel: thread && thread.model, + }; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * Get the counter of this discuss item, which is based on the thread type. + * + * @returns {integer} + */ + get counter() { + if (this.thread.model === 'mail.box') { + return this.thread.counter; + } else if (this.thread.channel_type === 'channel') { + return this.thread.message_needaction_counter; + } else if (this.thread.channel_type === 'chat') { + return this.thread.localMessageUnreadCounter; + } + return 0; + } + + /** + * @returns {mail.discuss} + */ + get discuss() { + return this.env.messaging && this.env.messaging.discuss; + } + + /** + * @returns {boolean} + */ + hasUnpin() { + return this.thread.channel_type === 'chat'; + } + + /** + * @returns {mail.thread} + */ + get thread() { + return this.env.models['mail.thread'].get(this.props.threadLocalId); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + * @returns {Promise} + */ + _askAdminConfirmation() { + return new Promise(resolve => { + Dialog.confirm(this, + this.env._t("You are the administrator of this channel. Are you sure you want to leave?"), + { + buttons: [ + { + text: this.env._t("Leave"), + classes: 'btn-primary', + close: true, + click: resolve + }, + { + text: this.env._t("Discard"), + close: true + } + ] + } + ); + }); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {Event} ev + */ + _onCancelRenaming(ev) { + this.discuss.cancelThreadRenaming(this.thread); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClick(ev) { + if (isEventHandled(ev, 'EditableText.click')) { + return; + } + this.thread.open(); + } + + /** + * Stop propagation to prevent selecting this item. + * + * @private + * @param {CustomEvent} ev + */ + _onClickedEditableText(ev) { + ev.stopPropagation(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + async _onClickLeave(ev) { + ev.stopPropagation(); + if (this.thread.creator === this.env.messaging.currentUser) { + await this._askAdminConfirmation(); + } + this.thread.unsubscribe(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickRename(ev) { + ev.stopPropagation(); + this.discuss.setThreadRenaming(this.thread); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickSettings(ev) { + ev.stopPropagation(); + return this.env.bus.trigger('do-action', { + action: { + type: 'ir.actions.act_window', + res_model: this.thread.model, + res_id: this.thread.id, + views: [[false, 'form']], + target: 'current' + }, + }); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickUnpin(ev) { + ev.stopPropagation(); + this.thread.unsubscribe(); + } + + /** + * @private + * @param {CustomEvent} ev + * @param {Object} ev.detail + * @param {string} ev.detail.newName + */ + _onValidateEditableText(ev) { + ev.stopPropagation(); + this.discuss.renameThread(this.thread, ev.detail.newName); + } + +} + +Object.assign(DiscussSidebarItem, { + components, + props: { + threadLocalId: String, + }, + template: 'mail.DiscussSidebarItem', +}); + +return DiscussSidebarItem; + +}); diff --git a/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.scss b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.scss new file mode 100644 index 00000000..aebc4b9a --- /dev/null +++ b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.scss @@ -0,0 +1,109 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_DiscussSidebarItem { + display: flex; + align-items: center; + padding: map-get($spacers, 1) 0; + + &:hover .o_DiscussSidebarItem_commands { + display: flex; + } +} + +.o_DiscussSidebarItem_activeIndicator { + width: $o-mail-discuss-sidebar-active-indicator-width; + align-self: stretch; + flex: 0 0 auto; +} + +.o_DiscussSidebarItem_command { + margin-left: 3px; + margin-right: 3px; + + &:first-child { + margin-left: 0px; + } + + &:last-child { + margin-right: 0px; + } +} + +.o_DiscussSidebarItem_commands { + display: none; +} + +.o_DiscussSidebarItem_item { + margin-left: 3px; + margin-right: 3px; + + &:first-child { + margin-left: 0px; + margin-right: $o-mail-discuss-sidebar-active-indicator-margin-right; + } + + &:last-child { + margin-right: $o-mail-discuss-sidebar-scrollbar-width; + } +} + +.o_DiscussSidebarItem_name { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + &.o-editable { + margin-left: $o-mail-discuss-sidebar-active-indicator-width + $o-mail-discuss-sidebar-active-indicator-margin-right; + margin-right: $o-mail-discuss-sidebar-scrollbar-width; + } +} + +.o_DiscussSidebarItem_nameInput { + width: 100%; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_DiscussSidebarItem { + cursor: pointer; + + &:hover { + background-color: darken(gray('900'), 5%); + } + + &.o-starred-box { + .o_DiscussSidebarItem_counter { + border-color: gray('600'); + background-color: gray('600'); + } + } +} + +.o_DiscussSidebarItem_activeIndicator.o-item-active { + background-color: $o-brand-primary; +} + +.o_DiscussSidebarItem_command:not(:hover) { + color: gray('600'); +} + +.o_DiscussSidebarItem_counter { + background-color: $o-brand-primary; +} + +.o_DiscussSidebarItem_name { + + &.o-item-unread { + font-weight: bold; + } +} + +.o_DiscussSidebarItem_nameInput { + outline: none; + border: none; + border-radius: 2px; +} diff --git a/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.xml b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.xml new file mode 100644 index 00000000..74aace21 --- /dev/null +++ b/addons/mail/static/src/components/discuss_sidebar_item/discuss_sidebar_item.xml @@ -0,0 +1,63 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.DiscussSidebarItem" owl="1"> + <div class="o_DiscussSidebarItem" + t-att-class="{ + 'o-active': thread and discuss.thread === thread, + 'o-starred-box': thread and thread === env.messaging.starred, + 'o-unread': thread and thread.localMessageUnreadCounter > 0, + }" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined" t-att-data-thread-name="thread ? thread.displayName : undefined" + > + <t t-if="thread"> + <div class=" o_DiscussSidebarItem_activeIndicator o_DiscussSidebarItem_item" t-att-class="{ 'o-item-active': discuss.thread === thread }"/> + <ThreadIcon class="o_DiscussSidebarItem_item" threadLocalId="thread.localId"/> + <t t-if="thread.channel_type === 'chat' and discuss.renamingThreads.includes(thread)"> + <div class="o_DiscussSidebarItem_item o_DiscussSidebarItem_name o-editable"> + <EditableText + class="o_DiscussSidebarItem_nameInput" + placeholder="thread.correspondent ? thread.correspondent.name : thread.name" + value="thread.displayName" + t-on-o-cancel="_onCancelRenaming" + t-on-o-clicked="_onClickedEditableText" + t-on-o-validate="_onValidateEditableText" + /> + </div> + </t> + <t t-else=""> + <div class="o_DiscussSidebarItem_item o_DiscussSidebarItem_name" t-att-class="{ 'o-item-unread': thread.localMessageUnreadCounter > 0 }"> + <t t-esc="thread.displayName"/> + </div> + <t t-if="thread.mass_mailing"> + <i class="fa fa-envelope-o" title="Messages are sent by email" role="img"/> + </t> + </t> + <div class="o-autogrow o_DiscussSidebarItem_item"/> + <t t-if="thread.model !== 'mail.box'"> + <div class="o_DiscussSidebarItem_commands o_DiscussSidebarItem_item"> + <t t-if="thread.channel_type === 'channel'"> + <div class="fa fa-cog o_DiscussSidebarItem_command o_DiscussSidebarItem_commandSettings" t-on-click="_onClickSettings" title="Channel settings" role="img"/> + <t t-if="!thread.message_needaction_counter and !thread.group_based_subscription"> + <div class="o_DiscussSidebarItem_command o_DiscussSidebarItem_commandLeave fa fa-times" t-on-click="_onClickLeave" title="Leave this channel" role="img"/> + </t> + </t> + <t t-if="thread.channel_type === 'chat'"> + <div class="o_DiscussSidebarItem_command o_DiscussSidebarItem_commandRename fa fa-cog" t-on-click="_onClickRename" title="Rename conversation" role="img"/> + </t> + <t t-if="hasUnpin()"> + <t t-if="!thread.localMessageUnreadCounter"> + <div class="fa fa-times o_DiscussSidebarItem_command o_DiscussSidebarItem_commandUnpin" t-on-click="_onClickUnpin" title="Unpin conversation" role="img"/> + </t> + </t> + </div> + </t> + <t t-if="counter > 0"> + <div class="o_DiscussSidebarItem_counter o_DiscussSidebarItem_item badge badge-pill"> + <t t-esc="counter"/> + </div> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/drop_zone/drop_zone.js b/addons/mail/static/src/components/drop_zone/drop_zone.js new file mode 100644 index 00000000..dcbb7019 --- /dev/null +++ b/addons/mail/static/src/components/drop_zone/drop_zone.js @@ -0,0 +1,139 @@ +odoo.define('mail/static/src/components/drop_zone/drop_zone.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); + +const { Component, useState } = owl; + +class DropZone extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + this.state = useState({ + /** + * Determine whether the user is dragging files over the dropzone. + * Useful to provide visual feedback in that case. + */ + isDraggingInside: false, + }); + /** + * Counts how many drag enter/leave happened on self and children. This + * ensures the drop effect stays active when dragging over a child. + */ + this._dragCount = 0; + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * Returns whether the given node is self or a children of self. + * + * @param {Node} node + * @returns {boolean} + */ + contains(node) { + return this.el.contains(node); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * Making sure that dragging content is external files. + * Ignoring other content dragging like text. + * + * @private + * @param {DataTransfer} dataTransfer + * @returns {boolean} + */ + _isDragSourceExternalFile(dataTransfer) { + const dragDataType = dataTransfer.types; + if (dragDataType.constructor === window.DOMStringList) { + return dragDataType.contains('Files'); + } + if (dragDataType.constructor === Array) { + return dragDataType.includes('Files'); + } + return false; + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Shows a visual drop effect when dragging inside the dropzone. + * + * @private + * @param {DragEvent} ev + */ + _onDragenter(ev) { + ev.preventDefault(); + if (this._dragCount === 0) { + this.state.isDraggingInside = true; + } + this._dragCount++; + } + + /** + * Hides the visual drop effect when dragging outside the dropzone. + * + * @private + * @param {DragEvent} ev + */ + _onDragleave(ev) { + this._dragCount--; + if (this._dragCount === 0) { + this.state.isDraggingInside = false; + } + } + + /** + * Prevents default (from the template) in order to receive the drop event. + * The drop effect cursor works only when set on dragover. + * + * @private + * @param {DragEvent} ev + */ + _onDragover(ev) { + ev.preventDefault(); + ev.dataTransfer.dropEffect = 'copy'; + } + + /** + * Triggers the `o-dropzone-files-dropped` event when new files are dropped + * on the dropzone, and then removes the visual drop effect. + * + * The parents should handle this event to process the files as they wish, + * such as uploading them. + * + * @private + * @param {DragEvent} ev + */ + _onDrop(ev) { + ev.preventDefault(); + if (this._isDragSourceExternalFile(ev.dataTransfer)) { + this.trigger('o-dropzone-files-dropped', { + files: ev.dataTransfer.files, + }); + } + this.state.isDraggingInside = false; + } + +} + +Object.assign(DropZone, { + props: {}, + template: 'mail.DropZone', +}); + +return DropZone; + +}); diff --git a/addons/mail/static/src/components/drop_zone/drop_zone.scss b/addons/mail/static/src/components/drop_zone/drop_zone.scss new file mode 100644 index 00000000..202e4ceb --- /dev/null +++ b/addons/mail/static/src/components/drop_zone/drop_zone.scss @@ -0,0 +1,29 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_DropZone { + display: flex; + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 1; + align-items: center; + justify-content: center; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_DropZone { + color: $o-enterprise-primary-color; + background: rgba(255, 255, 255, 0.9); + border: 2px dashed $o-enterprise-primary-color; + + &.o-dragging-inside { + border-width: 5px; + } +} diff --git a/addons/mail/static/src/components/drop_zone/drop_zone.xml b/addons/mail/static/src/components/drop_zone/drop_zone.xml new file mode 100644 index 00000000..b3db940f --- /dev/null +++ b/addons/mail/static/src/components/drop_zone/drop_zone.xml @@ -0,0 +1,12 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.DropZone" owl="1"> + <div class="o_DropZone" t-att-class="{ 'o-dragging-inside': state.isDraggingInside }" t-on-dragenter="_onDragenter" t-on-dragleave="_onDragleave" t-on-dragover="_onDragover" t-on-drop="_onDrop"> + <h4> + Drag Files Here <i class="fa fa-download"/> + </h4> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/editable_text/editable_text.js b/addons/mail/static/src/components/editable_text/editable_text.js new file mode 100644 index 00000000..be7e7ddc --- /dev/null +++ b/addons/mail/static/src/components/editable_text/editable_text.js @@ -0,0 +1,91 @@ +odoo.define('mail/static/src/components/editable_text/editable_text.js', function (require) { +'use strict'; + +const { markEventHandled } = require('mail/static/src/utils/utils.js'); +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); + +const { Component } = owl; + +class EditableText extends Component { + + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + } + + mounted() { + this.el.focus(); + this.el.setSelectionRange(0, (this.el.value && this.el.value.length) || 0); + } + + willUnmount() { + this.trigger('o-cancel'); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onBlur(ev) { + this.trigger('o-cancel'); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClick(ev) { + markEventHandled(ev, 'EditableText.click'); + this.trigger('o-clicked'); + } + + /** + * @private + * @param {KeyboardEvent} ev + */ + _onKeydown(ev) { + switch (ev.key) { + case 'Enter': + this._onKeydownEnter(ev); + break; + case 'Escape': + this.trigger('o-cancel'); + break; + } + } + + /** + * @private + * @param {KeyboardEvent} ev + */ + _onKeydownEnter(ev) { + const value = this.el.value; + const newName = value || this.props.placeholder; + if (this.props.value !== newName) { + this.trigger('o-validate', { newName }); + } else { + this.trigger('o-cancel'); + } + } + +} + +Object.assign(EditableText, { + defaultProps: { + placeholder: "", + value: "", + }, + props: { + placeholder: String, + value: String, + }, + template: 'mail.EditableText', +}); + +return EditableText; + +}); diff --git a/addons/mail/static/src/components/editable_text/editable_text.xml b/addons/mail/static/src/components/editable_text/editable_text.xml new file mode 100644 index 00000000..5e3aa52a --- /dev/null +++ b/addons/mail/static/src/components/editable_text/editable_text.xml @@ -0,0 +1,8 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.EditableText" owl="1"> + <input class="o_EditableText" t-att-value="props.value" t-on-blur="_onBlur" t-on-click="_onClick" t-on-keydown="_onKeydown" t-att-placeholder="props.placeholder"/> + </t> + +</templates> diff --git a/addons/mail/static/src/components/emojis_popover/emojis_popover.js b/addons/mail/static/src/components/emojis_popover/emojis_popover.js new file mode 100644 index 00000000..a312eed4 --- /dev/null +++ b/addons/mail/static/src/components/emojis_popover/emojis_popover.js @@ -0,0 +1,78 @@ +odoo.define('mail/static/src/components/emojis_popover/emojis_popover.js', function (require) { +'use strict'; + +const emojis = require('mail.emojis'); +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js'); + +const { Component } = owl; + +class EmojisPopover extends Component { + + /** + * @param {...any} args + */ + constructor(...args) { + super(...args); + this.emojis = emojis; + useShouldUpdateBasedOnProps(); + useUpdate({ func: () => this._update() }); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _update() { + this.trigger('o-popover-compute'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + close() { + this.trigger('o-popover-close'); + } + + /** + * Returns whether the given node is self or a children of self. + * + * @param {Node} node + * @returns {boolean} + */ + contains(node) { + if (!this.el) { + return false; + } + return this.el.contains(node); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickEmoji(ev) { + this.close(); + this.trigger('o-emoji-selection', { + unicode: ev.currentTarget.dataset.unicode, + }); + } + +} + +Object.assign(EmojisPopover, { + props: {}, + template: 'mail.EmojisPopover', +}); + +return EmojisPopover; + +}); diff --git a/addons/mail/static/src/components/emojis_popover/emojis_popover.scss b/addons/mail/static/src/components/emojis_popover/emojis_popover.scss new file mode 100644 index 00000000..3a4559ae --- /dev/null +++ b/addons/mail/static/src/components/emojis_popover/emojis_popover.scss @@ -0,0 +1,22 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_EmojisPopover { + display: flex; + flex-flow: row wrap; + max-width: 200px; +} + +.o_EmojisPopover_emoji { + font-size: 1.1em; + margin: 3px; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_EmojisPopover_emoji { + cursor: pointer; +} diff --git a/addons/mail/static/src/components/emojis_popover/emojis_popover.xml b/addons/mail/static/src/components/emojis_popover/emojis_popover.xml new file mode 100644 index 00000000..cac840bb --- /dev/null +++ b/addons/mail/static/src/components/emojis_popover/emojis_popover.xml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.EmojisPopover" owl="1"> + <div class="o_EmojisPopover"> + <t t-foreach="emojis" t-as="emoji" t-key="emoji.unicode"> + <span class="o_EmojisPopover_emoji" t-on-click="_onClickEmoji" t-att-title="emoji.description" t-att-data-source="emoji.sources[0]" t-att-data-unicode="emoji.unicode"> + <t t-esc="emoji.unicode"/> + </span> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/file_uploader/file_uploader.js b/addons/mail/static/src/components/file_uploader/file_uploader.js new file mode 100644 index 00000000..4e57eadd --- /dev/null +++ b/addons/mail/static/src/components/file_uploader/file_uploader.js @@ -0,0 +1,241 @@ +odoo.define('mail/static/src/components/file_uploader/file_uploader.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); + +const core = require('web.core'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class FileUploader extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + this._fileInputRef = useRef('fileInput'); + this._fileUploadId = _.uniqueId('o_FileUploader_fileupload'); + this._onAttachmentUploaded = this._onAttachmentUploaded.bind(this); + useShouldUpdateBasedOnProps({ + compareDepth: { + attachmentLocalIds: 1, + newAttachmentExtraData: 3, + }, + }); + } + + mounted() { + $(window).on(this._fileUploadId, this._onAttachmentUploaded); + } + + willUnmount() { + $(window).off(this._fileUploadId); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @param {FileList|Array} files + * @returns {Promise} + */ + async uploadFiles(files) { + await this._unlinkExistingAttachments(files); + this._createTemporaryAttachments(files); + await this._performUpload(files); + this._fileInputRef.el.value = ''; + } + + openBrowserFileUploader() { + this._fileInputRef.el.click(); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @deprecated + * @private + * @param {Object} fileData + * @returns {mail.attachment} + */ + _createAttachment(fileData) { + return this.env.models['mail.attachment'].create(Object.assign( + {}, + fileData, + this.props.newAttachmentExtraData + )); + } + + /** + * @private + * @param {File} file + * @returns {FormData} + */ + _createFormData(file) { + let formData = new window.FormData(); + formData.append('callback', this._fileUploadId); + formData.append('csrf_token', core.csrf_token); + formData.append('id', this.props.uploadId); + formData.append('model', this.props.uploadModel); + formData.append('ufile', file, file.name); + return formData; + } + + /** + * @private + * @param {FileList|Array} files + */ + _createTemporaryAttachments(files) { + for (const file of files) { + this.env.models['mail.attachment'].create( + Object.assign( + { + filename: file.name, + isTemporary: true, + name: file.name + }, + this.props.newAttachmentExtraData + ), + ); + } + } + /** + * @private + * @param {FileList|Array} files + * @returns {Promise} + */ + async _performUpload(files) { + for (const file of files) { + const uploadingAttachment = this.env.models['mail.attachment'].find(attachment => + attachment.isTemporary && + attachment.filename === file.name + ); + if (!uploadingAttachment) { + // Uploading attachment no longer exists. + // This happens when an uploading attachment is being deleted by user. + continue; + } + try { + const response = await this.env.browser.fetch('/web/binary/upload_attachment', { + method: 'POST', + body: this._createFormData(file), + signal: uploadingAttachment.uploadingAbortController.signal, + }); + let html = await response.text(); + const template = document.createElement('template'); + template.innerHTML = html.trim(); + window.eval(template.content.firstChild.textContent); + } catch (e) { + if (e.name !== 'AbortError') { + throw e; + } + } + } + } + + /** + * @private + * @param {FileList|Array} files + * @returns {Promise} + */ + async _unlinkExistingAttachments(files) { + for (const file of files) { + const attachment = this.props.attachmentLocalIds + .map(attachmentLocalId => this.env.models['mail.attachment'].get(attachmentLocalId)) + .find(attachment => attachment.name === file.name && attachment.size === file.size); + // if the files already exits, delete the file before upload + if (attachment) { + attachment.remove(); + } + } + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {jQuery.Event} ev + * @param {...Object} filesData + */ + async _onAttachmentUploaded(ev, ...filesData) { + for (const fileData of filesData) { + const { error, filename, id, mimetype, name, size } = fileData; + if (error || !id) { + this.env.services['notification'].notify({ + type: 'danger', + message: owl.utils.escape(error), + }); + const relatedTemporaryAttachments = this.env.models['mail.attachment'] + .find(attachment => + attachment.filename === filename && + attachment.isTemporary + ); + for (const attachment of relatedTemporaryAttachments) { + attachment.delete(); + } + return; + } + // FIXME : needed to avoid problems on uploading + // Without this the useStore selector of component could be not called + // E.g. in attachment_box_tests.js + await new Promise(resolve => setTimeout(resolve)); + const attachment = this.env.models['mail.attachment'].insert( + Object.assign( + { + filename, + id, + mimetype, + name, + size, + }, + this.props.newAttachmentExtraData + ), + ); + this.trigger('o-attachment-created', { attachment }); + } + } + + /** + * Called when there are changes in the file input. + * + * @private + * @param {Event} ev + * @param {EventTarget} ev.target + * @param {FileList|Array} ev.target.files + */ + async _onChangeAttachment(ev) { + await this.uploadFiles(ev.target.files); + } + +} + +Object.assign(FileUploader, { + defaultProps: { + uploadId: 0, + uploadModel: 'mail.compose.message' + }, + props: { + attachmentLocalIds: { + type: Array, + element: String, + }, + newAttachmentExtraData: { + type: Object, + optional: true, + }, + uploadId: Number, + uploadModel: String, + }, + template: 'mail.FileUploader', +}); + +return FileUploader; + +}); diff --git a/addons/mail/static/src/components/file_uploader/file_uploader.scss b/addons/mail/static/src/components/file_uploader/file_uploader.scss new file mode 100644 index 00000000..32792313 --- /dev/null +++ b/addons/mail/static/src/components/file_uploader/file_uploader.scss @@ -0,0 +1,3 @@ +.o_FileUploader_input { + display: none !important; +} diff --git a/addons/mail/static/src/components/file_uploader/file_uploader.xml b/addons/mail/static/src/components/file_uploader/file_uploader.xml new file mode 100644 index 00000000..bf144037 --- /dev/null +++ b/addons/mail/static/src/components/file_uploader/file_uploader.xml @@ -0,0 +1,10 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.FileUploader" owl="1"> + <div class="o_FileUploader"> + <input class="o_FileUploader_input" t-on-change="_onChangeAttachment" multiple="true" type="file" t-ref="fileInput" t-key="'fileInput'"/> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/file_uploader/file_uploader_tests.js b/addons/mail/static/src/components/file_uploader/file_uploader_tests.js new file mode 100644 index 00000000..4bf528f1 --- /dev/null +++ b/addons/mail/static/src/components/file_uploader/file_uploader_tests.js @@ -0,0 +1,94 @@ +odoo.define('mail/static/src/components/file_uploader/file_uploader_tests.js', function (require) { +"use strict"; + +const components = { + FileUploader: require('mail/static/src/components/file_uploader/file_uploader.js'), +}; +const { + afterEach, + beforeEach, + createRootComponent, + nextAnimationFrame, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const { + file: { + createFile, + inputFiles, + }, +} = require('web.test_utils'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('file_uploader', {}, function () { +QUnit.module('file_uploader_tests.js', { + beforeEach() { + beforeEach(this); + this.components = []; + + this.createFileUploaderComponent = async otherProps => { + const props = Object.assign({ attachmentLocalIds: [] }, otherProps); + return createRootComponent(this, components.FileUploader, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('no conflicts between file uploaders', async function (assert) { + assert.expect(2); + + await this.start(); + const fileUploader1 = await this.createFileUploaderComponent(); + const fileUploader2 = await this.createFileUploaderComponent(); + const file1 = await createFile({ + name: 'text1.txt', + content: 'hello, world', + contentType: 'text/plain', + }); + inputFiles( + fileUploader1.el.querySelector('.o_FileUploader_input'), + [file1] + ); + await nextAnimationFrame(); // we can't use afterNextRender as fileInput are display:none + assert.strictEqual( + this.env.models['mail.attachment'].all().length, + 1, + 'Uploaded file should be the only attachment created' + ); + + const file2 = await createFile({ + name: 'text2.txt', + content: 'hello, world', + contentType: 'text/plain', + }); + inputFiles( + fileUploader2.el.querySelector('.o_FileUploader_input'), + [file2] + ); + await nextAnimationFrame(); + assert.strictEqual( + this.env.models['mail.attachment'].all().length, + 2, + 'Uploaded file should be the only attachment added' + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/follow_button/follow_button.js b/addons/mail/static/src/components/follow_button/follow_button.js new file mode 100644 index 00000000..3c1808cb --- /dev/null +++ b/addons/mail/static/src/components/follow_button/follow_button.js @@ -0,0 +1,93 @@ +odoo.define('mail/static/src/components/follow_button/follow_button.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; +const { useState } = owl.hooks; + +class FollowButton extends Component { + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + this.state = useState({ + /** + * Determine whether the unfollow button is highlighted or not. + */ + isUnfollowButtonHighlighted: false, + }); + useStore(props => { + const thread = this.env.models['mail.thread'].get(props.threadLocalId); + return { + threadIsCurrentPartnerFollowing: thread && thread.isCurrentPartnerFollowing, + }; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @return {mail.thread} + */ + get thread() { + return this.env.models['mail.thread'].get(this.props.threadLocalId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickFollow(ev) { + this.thread.follow(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickUnfollow(ev) { + this.thread.unfollow(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onMouseLeaveUnfollow(ev) { + this.state.isUnfollowButtonHighlighted = false; + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onMouseEnterUnfollow(ev) { + this.state.isUnfollowButtonHighlighted = true; + } + +} + +Object.assign(FollowButton, { + defaultProps: { + isDisabled: false, + }, + props: { + isDisabled: Boolean, + threadLocalId: String, + }, + template: 'mail.FollowButton', +}); + +return FollowButton; + +}); diff --git a/addons/mail/static/src/components/follow_button/follow_button.scss b/addons/mail/static/src/components/follow_button/follow_button.scss new file mode 100644 index 00000000..36fb60e7 --- /dev/null +++ b/addons/mail/static/src/components/follow_button/follow_button.scss @@ -0,0 +1,27 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_FollowButton { + display: flex; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_FollowButton_follow { + color: gray('600'); +} + +.o_FollowButton_unfollow { + color: gray('600'); + + &.o-following { + color: $green; + } + + &.o-unfollow { + color: $orange; + } +} diff --git a/addons/mail/static/src/components/follow_button/follow_button.xml b/addons/mail/static/src/components/follow_button/follow_button.xml new file mode 100644 index 00000000..00fc8d65 --- /dev/null +++ b/addons/mail/static/src/components/follow_button/follow_button.xml @@ -0,0 +1,24 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.FollowButton" owl="1"> + <div class="o_FollowButton"> + <t t-if="thread.isCurrentPartnerFollowing"> + <button class="o_FollowButton_unfollow btn btn-link" t-att-class="{ 'o-following': !state.isUnfollowButtonHighlighted, 'o-unfollow': state.isUnfollowButtonHighlighted }" t-att-disabled="props.isDisabled" t-on-click="_onClickUnfollow" t-on-mouseenter="_onMouseEnterUnfollow" t-on-mouseleave="_onMouseLeaveUnfollow"> + <t t-if="state.isUnfollowButtonHighlighted"> + <i class="fa fa-times"/> Unfollow + </t> + <t t-else=""> + <i class="fa fa-check"/> Following + </t> + </button> + </t> + <t t-else=""> + <button class="o_FollowButton_follow btn btn-link" t-att-disabled="props.isDisabled" t-on-click="_onClickFollow"> + Follow + </button> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/follow_button/follow_button_tests.js b/addons/mail/static/src/components/follow_button/follow_button_tests.js new file mode 100644 index 00000000..0c4553c6 --- /dev/null +++ b/addons/mail/static/src/components/follow_button/follow_button_tests.js @@ -0,0 +1,278 @@ +odoo.define('mail/static/src/components/follow_button/follow_button_tests.js', function (require) { +'use strict'; + +const components = { + FollowButton: require('mail/static/src/components/follow_button/follow_button.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('follow_button', {}, function () { +QUnit.module('follow_button_tests.js', { + beforeEach() { + beforeEach(this); + + this.createFollowButtonComponent = async (thread, otherProps = {}) => { + const props = Object.assign({ threadLocalId: thread.localId }, otherProps); + await createRootComponent(this, components.FollowButton, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('base rendering not editable', async function (assert) { + assert.expect(3); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + await this.createFollowButtonComponent(thread, { isDisabled: true }); + assert.containsOnce( + document.body, + '.o_FollowButton', + "should have follow button component" + ); + assert.containsOnce( + document.body, + '.o_FollowButton_follow', + "should have 'Follow' button" + ); + assert.ok( + document.querySelector('.o_FollowButton_follow').disabled, + "'Follow' button should be disabled" + ); +}); + +QUnit.test('base rendering editable', async function (assert) { + assert.expect(3); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + await this.createFollowButtonComponent(thread); + assert.containsOnce( + document.body, + '.o_FollowButton', + "should have follow button component" + ); + assert.containsOnce( + document.body, + '.o_FollowButton_follow', + "should have 'Follow' button" + ); + assert.notOk( + document.querySelector('.o_FollowButton_follow').disabled, + "'Follow' button should be disabled" + ); +}); + +QUnit.test('hover following button', async function (assert) { + assert.expect(8); + + this.data['res.partner'].records.push({ id: 100, message_follower_ids: [1] }); + this.data['mail.followers'].records.push({ + id: 1, + is_active: true, + is_editable: true, + partner_id: this.data.currentPartnerId, + res_id: 100, + res_model: 'res.partner', + }); + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + thread.follow(); + await this.createFollowButtonComponent(thread); + assert.containsOnce( + document.body, + '.o_FollowButton', + "should have follow button component" + ); + assert.containsOnce( + document.body, + '.o_FollowButton_unfollow', + "should have 'Unfollow' button" + ); + assert.strictEqual( + document.querySelector('.o_FollowButton_unfollow').textContent.trim(), + 'Following', + "'unfollow' button should display 'Following' as text when not hovered" + ); + assert.containsNone( + document.querySelector('.o_FollowButton_unfollow'), + '.fa-times', + "'unfollow' button should not contain a cross icon when not hovered" + ); + assert.containsOnce( + document.querySelector('.o_FollowButton_unfollow'), + '.fa-check', + "'unfollow' button should contain a check icon when not hovered" + ); + + await afterNextRender(() => { + document + .querySelector('.o_FollowButton_unfollow') + .dispatchEvent(new window.MouseEvent('mouseenter')); + } + ); + assert.strictEqual( + document.querySelector('.o_FollowButton_unfollow').textContent.trim(), + 'Unfollow', + "'unfollow' button should display 'Unfollow' as text when hovered" + ); + assert.containsOnce( + document.querySelector('.o_FollowButton_unfollow'), + '.fa-times', + "'unfollow' button should contain a cross icon when hovered" + ); + assert.containsNone( + document.querySelector('.o_FollowButton_unfollow'), + '.fa-check', + "'unfollow' button should not contain a check icon when hovered" + ); +}); + +QUnit.test('click on "follow" button', async function (assert) { + assert.expect(7); + + this.data['res.partner'].records.push({ id: 100, message_follower_ids: [1] }); + this.data['mail.followers'].records.push({ + id: 1, + is_active: true, + is_editable: true, + partner_id: this.data.currentPartnerId, + res_id: 100, + res_model: 'res.partner', + }); + await this.start({ + async mockRPC(route, args) { + if (route.includes('message_subscribe')) { + assert.step('rpc:message_subscribe'); + } else if (route.includes('mail/read_followers')) { + assert.step('rpc:mail/read_followers'); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + await this.createFollowButtonComponent(thread); + assert.containsOnce( + document.body, + '.o_FollowButton', + "should have follow button component" + ); + assert.containsOnce( + document.body, + '.o_FollowButton_follow', + "should have button follow" + ); + + await afterNextRender(() => { + document.querySelector('.o_FollowButton_follow').click(); + }); + assert.verifySteps([ + 'rpc:message_subscribe', + 'rpc:mail/read_followers', + ]); + assert.containsNone( + document.body, + '.o_FollowButton_follow', + "should not have follow button after clicked on follow" + ); + assert.containsOnce( + document.body, + '.o_FollowButton_unfollow', + "should have unfollow button after clicked on follow" + ); +}); + +QUnit.test('click on "unfollow" button', async function (assert) { + assert.expect(7); + + this.data['res.partner'].records.push({ id: 100, message_follower_ids: [1] }); + this.data['mail.followers'].records.push({ + id: 1, + is_active: true, + is_editable: true, + partner_id: this.data.currentPartnerId, + res_id: 100, + res_model: 'res.partner', + }); + await this.start({ + async mockRPC(route, args) { + if (route.includes('message_unsubscribe')) { + assert.step('rpc:message_unsubscribe'); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + thread.follow(); + await this.createFollowButtonComponent(thread); + assert.containsOnce( + document.body, + '.o_FollowButton', + "should have follow button component" + ); + assert.containsNone( + document.body, + '.o_FollowButton_follow', + "should not have button follow" + ); + assert.containsOnce( + document.body, + '.o_FollowButton_unfollow', + "should have button unfollow" + ); + + await afterNextRender(() => document.querySelector('.o_FollowButton_unfollow').click()); + assert.verifySteps(['rpc:message_unsubscribe']); + assert.containsOnce( + document.body, + '.o_FollowButton_follow', + "should have follow button after clicked on unfollow" + ); + assert.containsNone( + document.body, + '.o_FollowButton_unfollow', + "should not have unfollow button after clicked on unfollow" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/follower/follower.js b/addons/mail/static/src/components/follower/follower.js new file mode 100644 index 00000000..bafcd88a --- /dev/null +++ b/addons/mail/static/src/components/follower/follower.js @@ -0,0 +1,80 @@ +odoo.define('mail/static/src/components/follower/follower.js', function (require) { +'use strict'; + +const components = { + FollowerSubtypeList: require('mail/static/src/components/follower_subtype_list/follower_subtype_list.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class Follower extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const follower = this.env.models['mail.follower'].get(props.followerLocalId); + return [follower ? follower.__state : undefined]; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.follower} + */ + get follower() { + return this.env.models['mail.follower'].get(this.props.followerLocalId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickDetails(ev) { + ev.preventDefault(); + ev.stopPropagation(); + this.follower.openProfile(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickEdit(ev) { + ev.preventDefault(); + this.follower.showSubtypes(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickRemove(ev) { + this.follower.remove(); + } + +} + +Object.assign(Follower, { + components, + props: { + followerLocalId: String, + }, + template: 'mail.Follower', +}); + +return Follower; + +}); diff --git a/addons/mail/static/src/components/follower/follower.scss b/addons/mail/static/src/components/follower/follower.scss new file mode 100644 index 00000000..509a119f --- /dev/null +++ b/addons/mail/static/src/components/follower/follower.scss @@ -0,0 +1,55 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_Follower { + display: flex; + flex-flow: row; + justify-content: space-between; + padding: map-get($spacers, 0); +} + +.o_Follower_avatar { + width: 24px; + height: 24px; + margin-inline-end: map-get($spacers, 2); +} + +.o_Follower_details { + align-items: center; + display: flex; + flex: 1; + padding-left: map-get($spacers, 3); + padding-right: map-get($spacers, 3); +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_Follower_avatar { + border-radius: 50%; +} + +.o_Follower_button { + border-radius: 0; + + &:hover { + background: gray('400'); + color: $black; + } +} + +.o_Follower_details { + color: gray('700'); + + &:hover { + background: gray('400'); + color: $black; + } + + &.o-inactive { + opacity: 0.25; + font-style: italic; + } +} diff --git a/addons/mail/static/src/components/follower/follower.xml b/addons/mail/static/src/components/follower/follower.xml new file mode 100644 index 00000000..5cdc89d7 --- /dev/null +++ b/addons/mail/static/src/components/follower/follower.xml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.Follower" owl="1"> + <div class="o_Follower"> + <t t-if="follower"> + <a class="o_Follower_details" t-att-class="{ 'o-inactive': !follower.isActive }" href="#" t-on-click="_onClickDetails"> + <img class="o_Follower_avatar" t-attf-src="/web/image/{{ follower.resModel }}/{{ follower.resId }}/image_128" alt="Avatar"/> + <span class="o_Follower_name" t-esc="follower.name or follower.displayName"/> + </a> + <t t-if="follower.isEditable"> + <button class="btn btn-icon o_Follower_button o_Follower_editButton" title="Edit subscription" t-on-click="_onClickEdit"> + <i class="fa fa-pencil"/> + </button> + <button class="btn btn-icon o_Follower_button o_Follower_removeButton" title="Remove this follower" t-on-click="_onClickRemove"> + <i class="fa fa-remove"/> + </button> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/follower/follower_tests.js b/addons/mail/static/src/components/follower/follower_tests.js new file mode 100644 index 00000000..28058fc9 --- /dev/null +++ b/addons/mail/static/src/components/follower/follower_tests.js @@ -0,0 +1,380 @@ +odoo.define('mail/static/src/components/follower/follower_tests.js', function (require) { +'use strict'; + +const components = { + Follower: require('mail/static/src/components/follower/follower.js'), +}; +const { makeDeferred } = require('mail/static/src/utils/deferred/deferred.js'); +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const Bus = require('web.Bus'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('follower', {}, function () { +QUnit.module('follower_tests.js', { + beforeEach() { + beforeEach(this); + + this.createFollowerComponent = async (follower) => { + await createRootComponent(this, components.Follower, { + props: { followerLocalId: follower.localId }, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('base rendering not editable', async function (assert) { + assert.expect(5); + + await this.start(); + + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + const follower = await this.env.models['mail.follower'].create({ + channel: [['insert', { id: 1, model: 'mail.channel', name: "François Perusse" }]], + followedThread: [['link', thread]], + id: 2, + isActive: true, + isEditable: false, + }); + await this.createFollowerComponent(follower); + assert.containsOnce( + document.body, + '.o_Follower', + "should have follower component" + ); + assert.containsOnce( + document.body, + '.o_Follower_details', + "should display a details part" + ); + assert.containsOnce( + document.body, + '.o_Follower_avatar', + "should display the avatar of the follower" + ); + assert.containsOnce( + document.body, + '.o_Follower_name', + "should display the name of the follower" + ); + assert.containsNone( + document.body, + '.o_Follower_button', + "should have no button as follower is not editable" + ); +}); + +QUnit.test('base rendering editable', async function (assert) { + assert.expect(6); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + const follower = await this.env.models['mail.follower'].create({ + channel: [['insert', { id: 1, model: 'mail.channel', name: "François Perusse" }]], + followedThread: [['link', thread]], + id: 2, + isActive: true, + isEditable: true, + }); + await this.createFollowerComponent(follower); + assert.containsOnce( + document.body, + '.o_Follower', + "should have follower component" + ); + assert.containsOnce( + document.body, + '.o_Follower_details', + "should display a details part" + ); + assert.containsOnce( + document.body, + '.o_Follower_avatar', + "should display the avatar of the follower" + ); + assert.containsOnce( + document.body, + '.o_Follower_name', + "should display the name of the follower" + ); + assert.containsOnce( + document.body, + '.o_Follower_editButton', + "should have an edit button" + ); + assert.containsOnce( + document.body, + '.o_Follower_removeButton', + "should have a remove button" + ); +}); + +QUnit.test('click on channel follower details', async function (assert) { + assert.expect(7); + + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('do_action'); + assert.strictEqual( + payload.action.res_id, + 10, + "The redirect action should redirect to the right res id (10)" + ); + assert.strictEqual( + payload.action.res_model, + 'mail.channel', + "The redirect action should redirect to the right res model (mail.channel)" + ); + assert.strictEqual( + payload.action.type, + "ir.actions.act_window", + "The redirect action should be of type 'ir.actions.act_window'" + ); + }); + this.data['res.partner'].records.push({ id: 100 }); + this.data['mail.channel'].records.push({ id: 10 }); + await this.start({ + env: { bus }, + }); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + const follower = await this.env.models['mail.follower'].create({ + channel: [['insert', { id: 10, model: 'mail.channel', name: "channel" }]], + followedThread: [['link', thread]], + id: 2, + isActive: true, + isEditable: true, + }); + await this.createFollowerComponent(follower); + assert.containsOnce( + document.body, + '.o_Follower', + "should have follower component" + ); + assert.containsOnce( + document.body, + '.o_Follower_details', + "should display a details part" + ); + + document.querySelector('.o_Follower_details').click(); + assert.verifySteps( + ['do_action'], + "clicking on channel should redirect to channel form view" + ); +}); + +QUnit.test('click on partner follower details', async function (assert) { + assert.expect(7); + + const openFormDef = makeDeferred(); + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('do_action'); + assert.strictEqual( + payload.action.res_id, + 3, + "The redirect action should redirect to the right res id (3)" + ); + assert.strictEqual( + payload.action.res_model, + 'res.partner', + "The redirect action should redirect to the right res model (res.partner)" + ); + assert.strictEqual( + payload.action.type, + "ir.actions.act_window", + "The redirect action should be of type 'ir.actions.act_window'" + ); + openFormDef.resolve(); + }); + this.data['res.partner'].records.push({ id: 100 }); + await this.start({ + env: { bus }, + }); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + const follower = await this.env.models['mail.follower'].create({ + followedThread: [['link', thread]], + id: 2, + isActive: true, + isEditable: true, + partner: [['insert', { + email: "bla@bla.bla", + id: this.env.messaging.currentPartner.id, + name: "François Perusse", + }]], + }); + await this.createFollowerComponent(follower); + assert.containsOnce( + document.body, + '.o_Follower', + "should have follower component" + ); + assert.containsOnce( + document.body, + '.o_Follower_details', + "should display a details part" + ); + + document.querySelector('.o_Follower_details').click(); + await openFormDef; + assert.verifySteps( + ['do_action'], + "clicking on follower should redirect to partner form view" + ); +}); + +QUnit.test('click on edit follower', async function (assert) { + assert.expect(5); + + this.data['res.partner'].records.push({ id: 100, message_follower_ids: [2] }); + this.data['mail.followers'].records.push({ + id: 2, + is_active: true, + is_editable: true, + partner_id: this.data.currentPartnerId, + res_id: 100, + res_model: 'res.partner', + }); + await this.start({ + hasDialog: true, + async mockRPC(route, args) { + if (route.includes('/mail/read_subscription_data')) { + assert.step('fetch_subtypes'); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + await thread.refreshFollowers(); + await this.createFollowerComponent(thread.followers[0]); + assert.containsOnce( + document.body, + '.o_Follower', + "should have follower component" + ); + assert.containsOnce( + document.body, + '.o_Follower_editButton', + "should display an edit button" + ); + + await afterNextRender(() => document.querySelector('.o_Follower_editButton').click()); + assert.verifySteps( + ['fetch_subtypes'], + "clicking on edit follower should fetch subtypes" + ); + assert.containsOnce( + document.body, + '.o_FollowerSubtypeList', + "A dialog allowing to edit follower subtypes should have been created" + ); +}); + +QUnit.test('edit follower and close subtype dialog', async function (assert) { + assert.expect(6); + + this.data['res.partner'].records.push({ id: 100 }); + await this.start({ + hasDialog: true, + async mockRPC(route, args) { + if (route.includes('/mail/read_subscription_data')) { + assert.step('fetch_subtypes'); + return [{ + default: true, + followed: true, + internal: false, + id: 1, + name: "Dummy test", + res_model: 'res.partner' + }]; + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + const follower = await this.env.models['mail.follower'].create({ + followedThread: [['link', thread]], + id: 2, + isActive: true, + isEditable: true, + partner: [['insert', { + email: "bla@bla.bla", + id: this.env.messaging.currentPartner.id, + name: "François Perusse", + }]], + }); + await this.createFollowerComponent(follower); + assert.containsOnce( + document.body, + '.o_Follower', + "should have follower component" + ); + assert.containsOnce( + document.body, + '.o_Follower_editButton', + "should display an edit button" + ); + + await afterNextRender(() => document.querySelector('.o_Follower_editButton').click()); + assert.verifySteps( + ['fetch_subtypes'], + "clicking on edit follower should fetch subtypes" + ); + assert.containsOnce( + document.body, + '.o_FollowerSubtypeList', + "dialog allowing to edit follower subtypes should have been created" + ); + + await afterNextRender( + () => document.querySelector('.o_FollowerSubtypeList_closeButton').click() + ); + assert.containsNone( + document.body, + '.o_DialogManager_dialog', + "follower subtype dialog should be closed after clicking on close button" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js new file mode 100644 index 00000000..996ef1f5 --- /dev/null +++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.js @@ -0,0 +1,154 @@ +odoo.define('mail/static/src/components/follower_list_menu/follower_list_menu.js', function (require) { +'use strict'; + +const components = { + Follower: require('mail/static/src/components/follower/follower.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; +const { useRef, useState } = owl.hooks; + +class FollowerListMenu extends Component { + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + this.state = useState({ + /** + * Determine whether the dropdown is open or not. + */ + isDropdownOpen: false, + }); + useStore(props => { + const thread = this.env.models['mail.thread'].get(props.threadLocalId); + const followers = thread ? thread.followers : []; + return { + followers, + threadChannelType: thread && thread.channel_type, + }; + }, { + compareDepth: { + followers: 1, + }, + }); + this._dropdownRef = useRef('dropdown'); + this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this); + } + + mounted() { + document.addEventListener('click', this._onClickCaptureGlobal, true); + } + + willUnmount() { + document.removeEventListener('click', this._onClickCaptureGlobal, true); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @return {mail.thread} + */ + get thread() { + return this.env.models['mail.thread'].get(this.props.threadLocalId); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _hide() { + this.state.isDropdownOpen = false; + } + + /** + * @private + * @param {KeyboardEvent} ev + */ + _onKeydown(ev) { + ev.stopPropagation(); + switch (ev.key) { + case 'Escape': + ev.preventDefault(); + this._hide(); + break; + } + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickAddChannels(ev) { + ev.preventDefault(); + this._hide(); + this.thread.promptAddChannelFollower(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickAddFollowers(ev) { + ev.preventDefault(); + this._hide(); + this.thread.promptAddPartnerFollower(); + } + + /** + * Close the dropdown when clicking outside of it. + * + * @private + * @param {MouseEvent} ev + */ + _onClickCaptureGlobal(ev) { + // since dropdown is conditionally shown based on state, dropdownRef can be null + if (this._dropdownRef.el && !this._dropdownRef.el.contains(ev.target)) { + this._hide(); + } + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickFollowersButton(ev) { + this.state.isDropdownOpen = !this.state.isDropdownOpen; + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickFollower(ev) { + this._hide(); + } +} + +Object.assign(FollowerListMenu, { + components, + defaultProps: { + isDisabled: false, + }, + props: { + isDisabled: Boolean, + threadLocalId: String, + }, + template: 'mail.FollowerListMenu', +}); + +return FollowerListMenu; + +}); diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss new file mode 100644 index 00000000..6e82134a --- /dev/null +++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.scss @@ -0,0 +1,17 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_FollowerListMenu { + position: relative; +} + +.o_FollowerListMenu_dropdown { + display: flex; + flex-flow: column; + overflow-y: auto; +} + +.o_FollowerListMenu_followers { + display: flex; +} diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml new file mode 100644 index 00000000..86b7f3a6 --- /dev/null +++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu.xml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.FollowerListMenu" owl="1"> + <div class="o_FollowerListMenu" t-on-keydown="_onKeydown"> + <div class="o_FollowerListMenu_followers" t-ref="dropdown"> + <button class="o_FollowerListMenu_buttonFollowers btn btn-link" t-att-disabled="props.isDisabled" t-on-click="_onClickFollowersButton" title="Show Followers"> + <i class="fa fa-user"/> + <span class="o_FollowerListMenu_buttonFollowersCount pl-1" t-esc="thread.followers.length"/> + </button> + + <t t-if="state.isDropdownOpen"> + <div class="o_FollowerListMenu_dropdown dropdown-menu dropdown-menu-right" role="menu"> + <t t-if="thread.channel_type !== 'chat'"> + <a class="o_FollowerListMenu_addFollowersButton dropdown-item" href="#" role="menuitem" t-on-click="_onClickAddFollowers"> + Add Followers + </a> + </t> + <a class="o_FollowerListMenu_addChannelsButton dropdown-item" href="#" role="menuitem" t-on-click="_onClickAddChannels"> + Add Channels + </a> + <t t-if="thread.followers.length > 0"> + <div role="separator" class="dropdown-divider"/> + <t t-foreach="thread.followers" t-as="follower" t-key="follower.localId"> + <Follower + class="o_FollowerMenu_follower dropdown-item" + followerLocalId="follower.localId" + t-on-click="_onClickFollower" + /> + </t> + </t> + </div> + </t> + </div> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/follower_list_menu/follower_list_menu_tests.js b/addons/mail/static/src/components/follower_list_menu/follower_list_menu_tests.js new file mode 100644 index 00000000..cf6fcf24 --- /dev/null +++ b/addons/mail/static/src/components/follower_list_menu/follower_list_menu_tests.js @@ -0,0 +1,424 @@ +odoo.define('mail/static/src/components/follower_list_menu/follower_list_menu_tests.js', function (require) { +'use strict'; + +const components = { + FollowerListMenu: require('mail/static/src/components/follower_list_menu/follower_list_menu.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const Bus = require('web.Bus'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('follower_list_menu', {}, function () { +QUnit.module('follower_list_menu_tests.js', { + beforeEach() { + beforeEach(this); + + this.createFollowerListMenuComponent = async (thread, otherProps = {}) => { + const props = Object.assign({ threadLocalId: thread.localId }, otherProps); + await createRootComponent(this, components.FollowerListMenu, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('base rendering not editable', async function (assert) { + assert.expect(5); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + await this.createFollowerListMenuComponent(thread, { isDisabled: true }); + assert.containsOnce( + document.body, + '.o_FollowerListMenu', + "should have followers menu component" + ); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_buttonFollowers', + "should have followers button" + ); + assert.ok( + document.querySelector('.o_FollowerListMenu_buttonFollowers').disabled, + "followers button should be disabled" + ); + assert.containsNone( + document.body, + '.o_FollowerListMenu_dropdown', + "followers dropdown should not be opened" + ); + + document.querySelector('.o_FollowerListMenu_buttonFollowers').click(); + assert.containsNone( + document.body, + '.o_FollowerListMenu_dropdown', + "followers dropdown should still be closed as button is disabled" + ); +}); + +QUnit.test('base rendering editable', async function (assert) { + assert.expect(5); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + await this.createFollowerListMenuComponent(thread); + + assert.containsOnce( + document.body, + '.o_FollowerListMenu', + "should have followers menu component" + ); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_buttonFollowers', + "should have followers button" + ); + assert.notOk( + document.querySelector('.o_FollowerListMenu_buttonFollowers').disabled, + "followers button should not be disabled" + ); + assert.containsNone( + document.body, + '.o_FollowerListMenu_dropdown', + "followers dropdown should not be opened" + ); + + await afterNextRender(() => { + document.querySelector('.o_FollowerListMenu_buttonFollowers').click(); + }); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_dropdown', + "followers dropdown should be opened" + ); +}); + +QUnit.test('click on "add followers" button', async function (assert) { + assert.expect(16); + + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('action:open_view'); + assert.strictEqual( + payload.action.context.default_res_model, + 'res.partner', + "'The 'add followers' action should contain thread model in context'" + ); + assert.notOk( + payload.action.context.mail_invite_follower_channel_only, + "The 'add followers' action should not be restricted to channels only" + ); + assert.strictEqual( + payload.action.context.default_res_id, + 100, + "The 'add followers' action should contain thread id in context" + ); + assert.strictEqual( + payload.action.res_model, + 'mail.wizard.invite', + "The 'add followers' action should be a wizard invite of mail module" + ); + assert.strictEqual( + payload.action.type, + "ir.actions.act_window", + "The 'add followers' action should be of type 'ir.actions.act_window'" + ); + const partner = this.data['res.partner'].records.find( + partner => partner.id === payload.action.context.default_res_id + ); + partner.message_follower_ids.push(1); + payload.options.on_close(); + }); + this.data['res.partner'].records.push({ id: 100 }); + this.data['mail.followers'].records.push({ + partner_id: 42, + email: "bla@bla.bla", + id: 1, + is_active: true, + is_editable: true, + name: "François Perusse", + res_id: 100, + res_model: 'res.partner', + }); + await this.start({ + env: { bus }, + }); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + await this.createFollowerListMenuComponent(thread); + + assert.containsOnce( + document.body, + '.o_FollowerListMenu', + "should have followers menu component" + ); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_buttonFollowers', + "should have followers button" + ); + assert.strictEqual( + document.querySelector('.o_FollowerListMenu_buttonFollowersCount').textContent, + "0", + "Followers counter should be equal to 0" + ); + + await afterNextRender(() => { + document.querySelector('.o_FollowerListMenu_buttonFollowers').click(); + }); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_dropdown', + "followers dropdown should be opened" + ); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_addFollowersButton', + "followers dropdown should contain a 'Add followers' button" + ); + + await afterNextRender(() => { + document.querySelector('.o_FollowerListMenu_addFollowersButton').click(); + }); + assert.containsNone( + document.body, + '.o_FollowerListMenu_dropdown', + "followers dropdown should be closed after click on 'Add followers'" + ); + assert.verifySteps([ + 'action:open_view', + ]); + assert.strictEqual( + document.querySelector('.o_FollowerListMenu_buttonFollowersCount').textContent, + "1", + "Followers counter should now be equal to 1" + ); + + await afterNextRender(() => { + document.querySelector('.o_FollowerListMenu_buttonFollowers').click(); + }); + assert.containsOnce( + document.body, + '.o_FollowerMenu_follower', + "Follower list should be refreshed and contain a follower" + ); + assert.strictEqual( + document.querySelector('.o_Follower_name').textContent, + "François Perusse", + "Follower added in follower list should be the one added" + ); +}); + +QUnit.test('click on "add channels" button', async function (assert) { + assert.expect(16); + + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('action:open_view'); + assert.strictEqual( + payload.action.context.default_res_model, + 'res.partner', + "'The 'add channels' action should contain thread model in context'" + ); + assert.ok( + payload.action.context.mail_invite_follower_channel_only, + "The 'add channels' action should be restricted to channels only" + ); + assert.strictEqual( + payload.action.context.default_res_id, + 100, + "The 'add channels' action should contain thread id in context" + ); + assert.strictEqual( + payload.action.res_model, + 'mail.wizard.invite', + "The 'add channels' action should be a wizard invite of mail module" + ); + assert.strictEqual( + payload.action.type, + "ir.actions.act_window", + "The 'add channels' action should be of type 'ir.actions.act_window'" + ); + const partner = this.data['res.partner'].records.find( + partner => partner.id === payload.action.context.default_res_id + ); + partner.message_follower_ids.push(1); + payload.options.on_close(); + }); + this.data['res.partner'].records.push({ id: 100 }); + this.data['mail.followers'].records.push({ + channel_id: 42, + email: "bla@bla.bla", + id: 1, + is_active: true, + is_editable: true, + name: "Supa channel", + res_id: 100, + res_model: 'res.partner', + }); + await this.start({ + env: { bus }, + }); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + await this.createFollowerListMenuComponent(thread); + + assert.containsOnce( + document.body, + '.o_FollowerListMenu', + "should have followers menu component" + ); + assert.strictEqual( + document.querySelector('.o_FollowerListMenu_buttonFollowersCount').textContent, + "0", + "Followers counter should be equal to 0" + ); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_buttonFollowers', + "should have followers button" + ); + + await afterNextRender(() => { + document.querySelector('.o_FollowerListMenu_buttonFollowers').click(); + }); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_dropdown', + "followers dropdown should be opened" + ); + assert.containsOnce( + document.body, + '.o_FollowerListMenu_addChannelsButton', + "followers dropdown should contain a 'Add channels' button" + ); + + await afterNextRender(() => { + document.querySelector('.o_FollowerListMenu_addChannelsButton').click(); + }); + assert.containsNone( + document.body, + '.o_FollowerListMenu_dropdown', + "followers dropdown should be closed after click on 'add channels'" + ); + assert.verifySteps([ + 'action:open_view', + ]); + assert.strictEqual( + document.querySelector('.o_FollowerListMenu_buttonFollowersCount').textContent, + "1", + "Followers counter should now be equal to 1" + ); + + await afterNextRender(() => { + document.querySelector('.o_FollowerListMenu_buttonFollowers').click(); + }); + assert.containsOnce( + document.body, + '.o_FollowerMenu_follower', + "Follower list should be refreshed and contain a follower" + ); + assert.strictEqual( + document.querySelector('.o_Follower_name').textContent, + "Supa channel", + "Follower added in follower list should be the one added" + ); +}); + +QUnit.test('click on remove follower', async function (assert) { + assert.expect(6); + + const self = this; + await this.start({ + async mockRPC(route, args) { + if (route.includes('message_unsubscribe')) { + assert.step('message_unsubscribe'); + assert.deepEqual( + args.args, + [[100], [self.env.messaging.currentPartner.id], []], + "message_unsubscribe should be called with right argument" + ); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + await this.env.models['mail.follower'].create({ + followedThread: [['link', thread]], + id: 2, + isActive: true, + isEditable: true, + partner: [['insert', { + email: "bla@bla.bla", + id: this.env.messaging.currentPartner.id, + name: "François Perusse", + }]], + }); + await this.createFollowerListMenuComponent(thread); + + await afterNextRender(() => { + document.querySelector('.o_FollowerListMenu_buttonFollowers').click(); + }); + assert.containsOnce( + document.body, + '.o_Follower', + "should have follower component" + ); + assert.containsOnce( + document.body, + '.o_Follower_removeButton', + "should display a remove button" + ); + + await afterNextRender(() => { + document.querySelector('.o_Follower_removeButton').click(); + }); + assert.verifySteps( + ['message_unsubscribe'], + "clicking on remove button should call 'message_unsubscribe' route" + ); + assert.containsNone( + document.body, + '.o_Follower', + "should no longer have follower component" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/follower_subtype/follower_subtype.js b/addons/mail/static/src/components/follower_subtype/follower_subtype.js new file mode 100644 index 00000000..ae3ba321 --- /dev/null +++ b/addons/mail/static/src/components/follower_subtype/follower_subtype.js @@ -0,0 +1,71 @@ +odoo.define('mail/static/src/components/follower_subtype/follower_subtype.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class FollowerSubtype extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const followerSubtype = this.env.models['mail.follower_subtype'].get(props.followerSubtypeLocalId); + return [followerSubtype ? followerSubtype.__state : undefined]; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.follower|undefined} + */ + get follower() { + return this.env.models['mail.follower'].get(this.props.followerLocalId); + } + + /** + * @returns {mail.follower_subtype} + */ + get followerSubtype() { + return this.env.models['mail.follower_subtype'].get(this.props.followerSubtypeLocalId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Called when clicking on cancel button. + * + * @private + * @param {Event} ev + */ + _onChangeCheckbox(ev) { + if (ev.target.checked) { + this.follower.selectSubtype(this.followerSubtype); + } else { + this.follower.unselectSubtype(this.followerSubtype); + } + } + +} + +Object.assign(FollowerSubtype, { + props: { + followerLocalId: String, + followerSubtypeLocalId: String, + }, + template: 'mail.FollowerSubtype', +}); + +return FollowerSubtype; + +}); diff --git a/addons/mail/static/src/components/follower_subtype/follower_subtype.scss b/addons/mail/static/src/components/follower_subtype/follower_subtype.scss new file mode 100644 index 00000000..3be0ad46 --- /dev/null +++ b/addons/mail/static/src/components/follower_subtype/follower_subtype.scss @@ -0,0 +1,27 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_FollowerSubtype_checkbox { + margin-inline-end: map-get($spacers, 2); +} + +.o_FollowerSubtype_label { + display: flex; + flex: 1; + flex-direction: row; + align-items: center; + margin-bottom: map-get($spacers, 0); + padding: map-get($spacers, 2); +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_FollowerSubtype_label { + cursor: pointer; + &:hover { + background-color: gray('200'); + } +} diff --git a/addons/mail/static/src/components/follower_subtype/follower_subtype.xml b/addons/mail/static/src/components/follower_subtype/follower_subtype.xml new file mode 100644 index 00000000..b2380009 --- /dev/null +++ b/addons/mail/static/src/components/follower_subtype/follower_subtype.xml @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.FollowerSubtype" owl="1"> + <div class="o_FollowerSubtype"> + <label class="o_FollowerSubtype_label"> + <input class="o_FollowerSubtype_checkbox" type="checkbox" t-att-checked="follower.selectedSubtypes.includes(followerSubtype) ? 'checked': ''" t-on-change="_onChangeCheckbox"/> + <t t-esc="followerSubtype.name"/> + </label> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/follower_subtype/follower_subtype_tests.js b/addons/mail/static/src/components/follower_subtype/follower_subtype_tests.js new file mode 100644 index 00000000..7c802a7a --- /dev/null +++ b/addons/mail/static/src/components/follower_subtype/follower_subtype_tests.js @@ -0,0 +1,233 @@ +odoo.define('mail/static/src/components/follower_subtype/follower_subtype_tests.js', function (require) { +'use strict'; + +const components = { + FollowerSubtype: require('mail/static/src/components/follower_subtype/follower_subtype.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('follower_subtype', {}, function () { +QUnit.module('follower_subtype_tests.js', { + beforeEach() { + beforeEach(this); + + this.createFollowerSubtypeComponent = async ({ follower, followerSubtype }) => { + const props = { + followerLocalId: follower.localId, + followerSubtypeLocalId: followerSubtype.localId, + }; + await createRootComponent(this, components.FollowerSubtype, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('simplest layout of a followed subtype', async function (assert) { + assert.expect(5); + + await this.start(); + + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + const follower = this.env.models['mail.follower'].create({ + channel: [['insert', { + id: 1, + model: 'mail.channel', + name: "François Perusse", + }]], + followedThread: [['link', thread]], + id: 2, + isActive: true, + isEditable: true, + }); + const followerSubtype = this.env.models['mail.follower_subtype'].create({ + id: 1, + isDefault: true, + isInternal: false, + name: "Dummy test", + resModel: 'res.partner' + }); + follower.update({ + selectedSubtypes: [['link', followerSubtype]], + subtypes: [['link', followerSubtype]], + }); + await this.createFollowerSubtypeComponent({ + follower, + followerSubtype, + }); + assert.containsOnce( + document.body, + '.o_FollowerSubtype', + "should have follower subtype component" + ); + assert.containsOnce( + document.body, + '.o_FollowerSubtype_label', + "should have a label" + ); + assert.containsOnce( + document.body, + '.o_FollowerSubtype_checkbox', + "should have a checkbox" + ); + assert.strictEqual( + document.querySelector('.o_FollowerSubtype_label').textContent, + "Dummy test", + "should have the name of the subtype as label" + ); + assert.ok( + document.querySelector('.o_FollowerSubtype_checkbox').checked, + "checkbox should be checked as follower subtype is followed" + ); +}); + +QUnit.test('simplest layout of a not followed subtype', async function (assert) { + assert.expect(5); + + await this.start(); + + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + const follower = this.env.models['mail.follower'].create({ + channel: [['insert', { + id: 1, + model: 'mail.channel', + name: "François Perusse", + }]], + followedThread: [['link', thread]], + id: 2, + isActive: true, + isEditable: true, + }); + const followerSubtype = this.env.models['mail.follower_subtype'].create({ + id: 1, + isDefault: true, + isInternal: false, + name: "Dummy test", + resModel: 'res.partner' + }); + follower.update({ subtypes: [['link', followerSubtype]] }); + await this.createFollowerSubtypeComponent({ + follower, + followerSubtype, + }); + assert.containsOnce( + document.body, + '.o_FollowerSubtype', + "should have follower subtype component" + ); + assert.containsOnce( + document.body, + '.o_FollowerSubtype_label', + "should have a label" + ); + assert.containsOnce( + document.body, + '.o_FollowerSubtype_checkbox', + "should have a checkbox" + ); + assert.strictEqual( + document.querySelector('.o_FollowerSubtype_label').textContent, + "Dummy test", + "should have the name of the subtype as label" + ); + assert.notOk( + document.querySelector('.o_FollowerSubtype_checkbox').checked, + "checkbox should not be checked as follower subtype is not followed" + ); +}); + +QUnit.test('toggle follower subtype checkbox', async function (assert) { + assert.expect(5); + + await this.start(); + + const thread = this.env.models['mail.thread'].create({ + id: 100, + model: 'res.partner', + }); + const follower = this.env.models['mail.follower'].create({ + channel: [['insert', { + id: 1, + model: 'mail.channel', + name: "François Perusse", + }]], + followedThread: [['link', thread]], + id: 2, + isActive: true, + isEditable: true, + }); + const followerSubtype = this.env.models['mail.follower_subtype'].create({ + id: 1, + isDefault: true, + isInternal: false, + name: "Dummy test", + resModel: 'res.partner' + }); + follower.update({ subtypes: [['link', followerSubtype]] }); + await this.createFollowerSubtypeComponent({ + follower, + followerSubtype, + }); + assert.containsOnce( + document.body, + '.o_FollowerSubtype', + "should have follower subtype component" + ); + assert.containsOnce( + document.body, + '.o_FollowerSubtype_checkbox', + "should have a checkbox" + ); + assert.notOk( + document.querySelector('.o_FollowerSubtype_checkbox').checked, + "checkbox should not be checked as follower subtype is not followed" + ); + + await afterNextRender(() => + document.querySelector('.o_FollowerSubtype_checkbox').click() + ); + assert.ok( + document.querySelector('.o_FollowerSubtype_checkbox').checked, + "checkbox should now be checked" + ); + + await afterNextRender(() => + document.querySelector('.o_FollowerSubtype_checkbox').click() + ); + assert.notOk( + document.querySelector('.o_FollowerSubtype_checkbox').checked, + "checkbox should be no more checked" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.js b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.js new file mode 100644 index 00000000..d5cca5b5 --- /dev/null +++ b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.js @@ -0,0 +1,89 @@ +odoo.define('mail/static/src/components/follower_subtype_list/follower_subtype_list.js', function (require) { +'use strict'; + +const components = { + FollowerSubtype: require('mail/static/src/components/follower_subtype/follower_subtype.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component, QWeb } = owl; + +class FollowerSubtypeList extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const followerSubtypeList = this.env.models['mail.follower_subtype_list'].get(props.localId); + const follower = followerSubtypeList + ? followerSubtypeList.follower + : undefined; + const followerSubtypes = follower ? follower.subtypes : []; + return { + follower: follower ? follower.__state : undefined, + followerSubtypeList: followerSubtypeList + ? followerSubtypeList.__state + : undefined, + followerSubtypes: followerSubtypes.map(subtype => subtype.__state), + }; + }, { + compareDepth: { + followerSubtypes: 1, + }, + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.follower_subtype_list} + */ + get followerSubtypeList() { + return this.env.models['mail.follower_subtype_list'].get(this.props.localId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Called when clicking on cancel button. + * + * @private + * @param {MouseEvent} ev + */ + _onClickCancel(ev) { + this.followerSubtypeList.follower.closeSubtypes(); + } + + /** + * Called when clicking on apply button. + * + * @private + * @param {MouseEvent} ev + */ + _onClickApply(ev) { + this.followerSubtypeList.follower.updateSubtypes(); + } + +} + +Object.assign(FollowerSubtypeList, { + components, + props: { + localId: String, + }, + template: 'mail.FollowerSubtypeList', +}); + +QWeb.registerComponent('FollowerSubtypeList', FollowerSubtypeList); + +return FollowerSubtypeList; + +}); diff --git a/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.scss b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.scss new file mode 100644 index 00000000..82aef9fc --- /dev/null +++ b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.scss @@ -0,0 +1,8 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_FollowerSubtypeList_subtypes { + display: flex; + flex-flow: column; +} diff --git a/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.xml b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.xml new file mode 100644 index 00000000..ad477d9d --- /dev/null +++ b/addons/mail/static/src/components/follower_subtype_list/follower_subtype_list.xml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.FollowerSubtypeList" owl="1"> + <div class="o_FollowerSubtypeList modal-dialog"> + <t t-if="followerSubtypeList"> + <div class="modal-content"> + <header class="modal-header"> + <h4 class="modal-title"> + Edit Subscription of <t t-esc="followerSubtypeList.follower.name"/> + </h4> + <i class="o_FollowerSubtypeList_closeButton close fa fa-times" aria-label="Close" t-on-click="_onClickCancel"/> + </header> + <main class="modal-body"> + <div class="o_FollowerSubtypeList_subtypes"> + <t t-foreach="followerSubtypeList.follower.subtypes" t-as="subtype" t-key="subtype.id"> + <FollowerSubtype + class="o_FollowerSubtypeList_subtype" + followerLocalId="followerSubtypeList.follower.localId" + followerSubtypeLocalId="subtype.localId" + /> + </t> + </div> + </main> + <div class="modal-footer"> + <button class="o-apply btn btn-primary" t-on-click="_onClickApply"> + Apply + </button> + <button class="o-cancel btn btn-secondary" t-on-click="_onClickCancel"> + Cancel + </button> + </div> + </div> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/mail_template/mail_template.js b/addons/mail/static/src/components/mail_template/mail_template.js new file mode 100644 index 00000000..32c334be --- /dev/null +++ b/addons/mail/static/src/components/mail_template/mail_template.js @@ -0,0 +1,81 @@ +odoo.define('mail/static/src/components/mail_template/mail_template.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class MailTemplate extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const activity = this.env.models['mail.activity'].get(props.activityLocalId); + const mailTemplate = this.env.models['mail.mail_template'].get(props.mailTemplateLocalId); + return { + activity: activity ? activity.__state : undefined, + mailTemplate: mailTemplate ? mailTemplate.__state : undefined, + }; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.activity} + */ + get activity() { + return this.env.models['mail.activity'].get(this.props.activityLocalId); + } + + /** + * @returns {mail.mail_template} + */ + get mailTemplate() { + return this.env.models['mail.mail_template'].get(this.props.mailTemplateLocalId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickPreview(ev) { + ev.stopPropagation(); + ev.preventDefault(); + this.mailTemplate.preview(this.activity); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickSend(ev) { + ev.stopPropagation(); + ev.preventDefault(); + this.mailTemplate.send(this.activity); + } + +} + +Object.assign(MailTemplate, { + props: { + activityLocalId: String, + mailTemplateLocalId: String, + }, + template: 'mail.MailTemplate', +}); + +return MailTemplate; + +}); diff --git a/addons/mail/static/src/components/mail_template/mail_template.scss b/addons/mail/static/src/components/mail_template/mail_template.scss new file mode 100644 index 00000000..7800ab62 --- /dev/null +++ b/addons/mail/static/src/components/mail_template/mail_template.scss @@ -0,0 +1,27 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_MailTemplate { + display: flex; + flex: 0 0 auto; + align-items: center; +} + +.o_MailTemplate_button { + padding-top: map-get($spacers, 0); + padding-bottom: map-get($spacers, 0); +} + +.o_MailTemplate_name { + margin-inline-start: map-get($spacers, 2); +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_MailTemplate_text { + color: gray('500'); + font-style: italic; +} diff --git a/addons/mail/static/src/components/mail_template/mail_template.xml b/addons/mail/static/src/components/mail_template/mail_template.xml new file mode 100644 index 00000000..48f7c050 --- /dev/null +++ b/addons/mail/static/src/components/mail_template/mail_template.xml @@ -0,0 +1,29 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.MailTemplate" owl="1"> + <div class="o_MailTemplate"> + <t t-if="mailTemplate"> + <i class="fa fa-envelope-o" title="Mail" role="img"/> + <span class="o_MailTemplate_name" t-esc="mailTemplate.name"/> + <span>:</span> + <button + class="o_MailTemplate_button o_MailTemplate_preview btn btn-link" + t-att-data-mail-template-id="mailTemplate.id" + t-on-click="_onClickPreview" + > + Preview + </button> + <span class="o_MailTemplate_text">or</span> + <button + class="o_MailTemplate_button o_MailTemplate_send btn btn-link" + t-att-data-mail-template-id="mailTemplate.id" + t-on-click="_onClickSend" + > + Send Now + </button> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/message/message.js b/addons/mail/static/src/components/message/message.js new file mode 100644 index 00000000..a357c024 --- /dev/null +++ b/addons/mail/static/src/components/message/message.js @@ -0,0 +1,680 @@ +odoo.define('mail/static/src/components/message/message.js', function (require) { +'use strict'; + +const components = { + AttachmentList: require('mail/static/src/components/attachment_list/attachment_list.js'), + MessageSeenIndicator: require('mail/static/src/components/message_seen_indicator/message_seen_indicator.js'), + ModerationBanDialog: require('mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.js'), + ModerationDiscardDialog: require('mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js'), + ModerationRejectDialog: require('mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js'), + NotificationPopover: require('mail/static/src/components/notification_popover/notification_popover.js'), + PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js'); + +const { _lt } = require('web.core'); +const { format } = require('web.field_utils'); +const { getLangDatetimeFormat } = require('web.time'); + +const { Component, useState } = owl; +const { useRef } = owl.hooks; + +const READ_MORE = _lt("read more"); +const READ_LESS = _lt("read less"); +const { isEventHandled, markEventHandled } = require('mail/static/src/utils/utils.js'); + +class Message extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + this.state = useState({ + // Determine if the moderation ban dialog is displayed. + hasModerationBanDialog: false, + // Determine if the moderation discard dialog is displayed. + hasModerationDiscardDialog: false, + // Determine if the moderation reject dialog is displayed. + hasModerationRejectDialog: false, + /** + * Determine whether the message is clicked. When message is in + * clicked state, it keeps displaying the commands. + */ + isClicked: false, + }); + useShouldUpdateBasedOnProps(); + useStore(props => { + const message = this.env.models['mail.message'].get(props.messageLocalId); + const author = message ? message.author : undefined; + const partnerRoot = this.env.messaging.partnerRoot; + const originThread = message ? message.originThread : undefined; + const threadView = this.env.models['mail.thread_view'].get(props.threadViewLocalId); + const thread = threadView ? threadView.thread : undefined; + return { + attachments: message + ? message.attachments.map(attachment => attachment.__state) + : [], + author, + authorAvatarUrl: author && author.avatarUrl, + authorImStatus: author && author.im_status, + authorNameOrDisplayName: author && author.nameOrDisplayName, + correspondent: thread && thread.correspondent, + hasMessageCheckbox: message ? message.hasCheckbox : false, + isDeviceMobile: this.env.messaging.device.isMobile, + isMessageChecked: message && threadView + ? message.isChecked(thread, threadView.stringifiedDomain) + : false, + message: message ? message.__state : undefined, + notifications: message ? message.notifications.map(notif => notif.__state) : [], + originThread, + originThreadModel: originThread && originThread.model, + originThreadName: originThread && originThread.name, + originThreadUrl: originThread && originThread.url, + partnerRoot, + thread, + threadHasSeenIndicators: thread && thread.hasSeenIndicators, + threadMassMailing: thread && thread.mass_mailing, + }; + }, { + compareDepth: { + attachments: 1, + notifications: 1, + }, + }); + useUpdate({ func: () => this._update() }); + /** + * The intent of the reply button depends on the last rendered state. + */ + this._wasSelected; + /** + * Value of the last rendered prettyBody. Useful to compare to new value + * to decide if it has to be updated. + */ + this._lastPrettyBody; + /** + * Reference to element containing the prettyBody. Useful to be able to + * replace prettyBody with new value in JS (which is faster than t-raw). + */ + this._prettyBodyRef = useRef('prettyBody'); + /** + * Reference to the content of the message. + */ + this._contentRef = useRef('content'); + /** + * To get checkbox state. + */ + this._checkboxRef = useRef('checkbox'); + /** + * Id of setInterval used to auto-update time elapsed of message at + * regular time. + */ + this._intervalId = undefined; + this._constructor(); + } + + /** + * Allows patching constructor. + */ + _constructor() {} + + willUnmount() { + clearInterval(this._intervalId); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {string} + */ + get avatar() { + if ( + this.message.author && + this.message.author === this.env.messaging.partnerRoot + ) { + return '/mail/static/src/img/odoobot.png'; + } else if (this.message.author) { + // TODO FIXME for public user this might not be accessible. task-2223236 + // we should probably use the correspondig attachment id + access token + // or create a dedicated route to get message image, checking the access right of the message + return this.message.author.avatarUrl; + } else if (this.message.message_type === 'email') { + return '/mail/static/src/img/email_icon.png'; + } + return '/mail/static/src/img/smiley/avatar.jpg'; + } + + /** + * Get the date time of the message at current user locale time. + * + * @returns {string} + */ + get datetime() { + return this.message.date.format(getLangDatetimeFormat()); + } + + /** + * Determines whether author open chat feature is enabled on message. + * + * @returns {boolean} + */ + get hasAuthorOpenChat() { + if (!this.message.author) { + return false; + } + if ( + this.threadView && + this.threadView.thread && + this.threadView.thread.correspondent === this.message.author + ) { + return false; + } + return true; + } + + /** + * Tell whether the bottom of this message is visible or not. + * + * @param {Object} param0 + * @param {integer} [offset=0] + * @returns {boolean} + */ + isBottomVisible({ offset=0 } = {}) { + if (!this.el) { + return false; + } + const elRect = this.el.getBoundingClientRect(); + if (!this.el.parentNode) { + return false; + } + const parentRect = this.el.parentNode.getBoundingClientRect(); + // bottom with (double) 10px offset + return ( + elRect.bottom < parentRect.bottom + offset && + parentRect.top < elRect.bottom + offset + ); + } + + /** + * Tell whether the message is partially visible on browser window or not. + * + * @returns {boolean} + */ + isPartiallyVisible() { + const elRect = this.el.getBoundingClientRect(); + if (!this.el.parentNode) { + return false; + } + const parentRect = this.el.parentNode.getBoundingClientRect(); + // intersection with 5px offset + return ( + elRect.top < parentRect.bottom + 5 && + parentRect.top < elRect.bottom + 5 + ); + } + + /** + * @returns {mail.message} + */ + get message() { + return this.env.models['mail.message'].get(this.props.messageLocalId); + } + /** + * @returns {string} + */ + get OPEN_CHAT() { + return this.env._t("Open chat"); + } + + /** + * Make this message viewable in its enclosing scroll environment (usually + * message list). + * + * @param {Object} [param0={}] + * @param {string} [param0.behavior='auto'] + * @param {string} [param0.block='end'] + * @returns {Promise} + */ + async scrollIntoView({ behavior = 'auto', block = 'end' } = {}) { + this.el.scrollIntoView({ + behavior, + block, + inline: 'nearest', + }); + if (behavior === 'smooth') { + return new Promise(resolve => setTimeout(resolve, 500)); + } else { + return Promise.resolve(); + } + } + + /** + * Get the shorttime format of the message date. + * + * @returns {string} + */ + get shortTime() { + return this.message.date.format('hh:mm'); + } + + /** + * @returns {mail.thread_view} + */ + get threadView() { + return this.env.models['mail.thread_view'].get(this.props.threadViewLocalId); + } + + /** + * @returns {Object} + */ + get trackingValues() { + return this.message.tracking_value_ids.map(trackingValue => { + const value = Object.assign({}, trackingValue); + value.changed_field = _.str.sprintf(this.env._t("%s:"), value.changed_field); + /** + * Maps tracked field type to a JS formatter. Tracking values are + * not always stored in the same field type as their origin type. + * Field types that are not listed here are not supported by + * tracking in Python. Also see `create_tracking_values` in Python. + */ + switch (value.field_type) { + case 'boolean': + value.old_value = format.boolean(value.old_value, undefined, { forceString: true }); + value.new_value = format.boolean(value.new_value, undefined, { forceString: true }); + break; + /** + * many2one formatter exists but is expecting id/name_get or data + * object but only the target record name is known in this context. + * + * Selection formatter exists but requires knowing all + * possibilities and they are not given in this context. + */ + case 'char': + case 'many2one': + case 'selection': + value.old_value = format.char(value.old_value); + value.new_value = format.char(value.new_value); + break; + case 'date': + if (value.old_value) { + value.old_value = moment.utc(value.old_value); + } + if (value.new_value) { + value.new_value = moment.utc(value.new_value); + } + value.old_value = format.date(value.old_value); + value.new_value = format.date(value.new_value); + break; + case 'datetime': + if (value.old_value) { + value.old_value = moment.utc(value.old_value); + } + if (value.new_value) { + value.new_value = moment.utc(value.new_value); + } + value.old_value = format.datetime(value.old_value); + value.new_value = format.datetime(value.new_value); + break; + case 'float': + value.old_value = format.float(value.old_value); + value.new_value = format.float(value.new_value); + break; + case 'integer': + value.old_value = format.integer(value.old_value); + value.new_value = format.integer(value.new_value); + break; + case 'monetary': + value.old_value = format.monetary(value.old_value, undefined, { forceString: true }); + value.new_value = format.monetary(value.new_value, undefined, { forceString: true }); + break; + case 'text': + value.old_value = format.text(value.old_value); + value.new_value = format.text(value.new_value); + break; + } + return value; + }); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * Modifies the message to add the 'read more/read less' functionality + * All element nodes with 'data-o-mail-quote' attribute are concerned. + * All text nodes after a ``#stopSpelling`` element are concerned. + * Those text nodes need to be wrapped in a span (toggle functionality). + * All consecutive elements are joined in one 'read more/read less'. + * + * FIXME This method should be rewritten (task-2308951) + * + * @private + * @param {jQuery} $element + */ + _insertReadMoreLess($element) { + const groups = []; + let readMoreNodes; + + // nodeType 1: element_node + // nodeType 3: text_node + const $children = $element.contents() + .filter((index, content) => + content.nodeType === 1 || (content.nodeType === 3 && content.nodeValue.trim()) + ); + + for (const child of $children) { + let $child = $(child); + + // Hide Text nodes if "stopSpelling" + if ( + child.nodeType === 3 && + $child.prevAll('[id*="stopSpelling"]').length > 0 + ) { + // Convert Text nodes to Element nodes + $child = $('<span>', { + text: child.textContent, + 'data-o-mail-quote': '1', + }); + child.parentNode.replaceChild($child[0], child); + } + + // Create array for each 'read more' with nodes to toggle + if ( + $child.attr('data-o-mail-quote') || + ( + $child.get(0).nodeName === 'BR' && + $child.prev('[data-o-mail-quote="1"]').length > 0 + ) + ) { + if (!readMoreNodes) { + readMoreNodes = []; + groups.push(readMoreNodes); + } + $child.hide(); + readMoreNodes.push($child); + } else { + readMoreNodes = undefined; + this._insertReadMoreLess($child); + } + } + + for (const group of groups) { + // Insert link just before the first node + const $readMoreLess = $('<a>', { + class: 'o_Message_readMoreLess', + href: '#', + text: READ_MORE, + }).insertBefore(group[0]); + + // Toggle All next nodes + let isReadMore = true; + $readMoreLess.click(e => { + e.preventDefault(); + isReadMore = !isReadMore; + for (const $child of group) { + $child.hide(); + $child.toggle(!isReadMore); + } + $readMoreLess.text(isReadMore ? READ_MORE : READ_LESS); + }); + } + } + + /** + * @private + */ + _update() { + if (!this.message) { + return; + } + if (this._prettyBodyRef.el && this.message.prettyBody !== this._lastPrettyBody) { + this._prettyBodyRef.el.innerHTML = this.message.prettyBody; + this._lastPrettyBody = this.message.prettyBody; + } + // Remove all readmore before if any before reinsert them with _insertReadMoreLess. + // This is needed because _insertReadMoreLess is working with direct DOM mutations + // which are not sync with Owl. + if (this._contentRef.el) { + for (const el of [...this._contentRef.el.querySelectorAll(':scope .o_Message_readMoreLess')]) { + el.remove(); + } + this._insertReadMoreLess($(this._contentRef.el)); + this.env.messagingBus.trigger('o-component-message-read-more-less-inserted', { + message: this.message, + }); + } + this._wasSelected = this.props.isSelected; + this.message.refreshDateFromNow(); + clearInterval(this._intervalId); + this._intervalId = setInterval(() => { + this.message.refreshDateFromNow(); + }, 60 * 1000); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onChangeCheckbox() { + this.message.toggleCheck(this.threadView.thread, this.threadView.stringifiedDomain); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClick(ev) { + if (ev.target.closest('.o_channel_redirect')) { + this.env.messaging.openProfile({ + id: Number(ev.target.dataset.oeId), + model: 'mail.channel', + }); + // avoid following dummy href + ev.preventDefault(); + return; + } + if (ev.target.tagName === 'A') { + if (ev.target.dataset.oeId && ev.target.dataset.oeModel) { + this.env.messaging.openProfile({ + id: Number(ev.target.dataset.oeId), + model: ev.target.dataset.oeModel, + }); + // avoid following dummy href + ev.preventDefault(); + } + return; + } + if ( + !isEventHandled(ev, 'Message.ClickAuthorAvatar') && + !isEventHandled(ev, 'Message.ClickAuthorName') && + !isEventHandled(ev, 'Message.ClickFailure') + ) { + this.state.isClicked = !this.state.isClicked; + } + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickAuthorAvatar(ev) { + markEventHandled(ev, 'Message.ClickAuthorAvatar'); + if (!this.hasAuthorOpenChat) { + return; + } + this.message.author.openChat(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickAuthorName(ev) { + markEventHandled(ev, 'Message.ClickAuthorName'); + if (!this.message.author) { + return; + } + this.message.author.openProfile(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickFailure(ev) { + markEventHandled(ev, 'Message.ClickFailure'); + this.message.openResendAction(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickModerationAccept(ev) { + ev.preventDefault(); + this.message.moderate('accept'); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickModerationAllow(ev) { + ev.preventDefault(); + this.message.moderate('allow'); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickModerationBan(ev) { + ev.preventDefault(); + this.state.hasModerationBanDialog = true; + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickModerationDiscard(ev) { + ev.preventDefault(); + this.state.hasModerationDiscardDialog = true; + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickModerationReject(ev) { + ev.preventDefault(); + this.state.hasModerationRejectDialog = true; + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickOriginThread(ev) { + // avoid following dummy href + ev.preventDefault(); + this.message.originThread.open(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickStar(ev) { + ev.stopPropagation(); + this.message.toggleStar(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickMarkAsRead(ev) { + ev.stopPropagation(); + this.message.markAsRead(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickReply(ev) { + // Use this._wasSelected because this.props.isSelected might be changed + // by a global capture click handler (for example the one from Composer) + // before the current handler is executed. Indeed because it does a + // toggle it needs to take into account the value before the click. + if (this._wasSelected) { + this.env.messaging.discuss.clearReplyingToMessage(); + } else { + this.message.replyTo(); + } + } + + /** + * @private + */ + _onDialogClosedModerationBan() { + this.state.hasModerationBanDialog = false; + } + + /** + * @private + */ + _onDialogClosedModerationDiscard() { + this.state.hasModerationDiscardDialog = false; + } + + /** + * @private + */ + _onDialogClosedModerationReject() { + this.state.hasModerationRejectDialog = false; + } + +} + +Object.assign(Message, { + components, + defaultProps: { + hasCheckbox: false, + hasMarkAsReadIcon: false, + hasReplyIcon: false, + isSelected: false, + isSquashed: false, + }, + props: { + attachmentsDetailsMode: { + type: String, + optional: true, + validate: prop => ['auto', 'card', 'hover', 'none'].includes(prop), + }, + hasCheckbox: Boolean, + hasMarkAsReadIcon: Boolean, + hasReplyIcon: Boolean, + isSelected: Boolean, + isSquashed: Boolean, + messageLocalId: String, + threadViewLocalId: { + type: String, + optional: true, + }, + }, + template: 'mail.Message', +}); + +return Message; + +}); diff --git a/addons/mail/static/src/components/message/message.scss b/addons/mail/static/src/components/message/message.scss new file mode 100644 index 00000000..16d9c790 --- /dev/null +++ b/addons/mail/static/src/components/message/message.scss @@ -0,0 +1,381 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_Message { + display: flex; + flex: 0 0 auto; + padding: map-get($spacers, 2); +} + +.o_Message_authorAvatar { + height: 100%; + width: 100%; + object-fit: cover; +} + +.o_Message_authorAvatarContainer { + position: relative; + height: 36px; + width: 36px; +} + +.o_Message_authorName { + margin-inline-end: map-get($spacers, 2); +} + +.o_Message_checkbox { + margin-inline-end: map-get($spacers, 2); +} + +.o_Message_commandStar { + font-size: 1.3em; +} + +.o_Message_Composer { + flex: 1 1 auto; +} + +.o_Message_commands { + display: flex; + align-items: center; +} + +.o_Message_content { + word-wrap: break-word; + word-break: break-word; + + *:not(li):not(li div) { + // Message content can contain arbitrary HTML that might overflow and break + // the style without this rule. + // Lists are ignored because otherwise bullet style become hidden from overflow. + // It's acceptable not to manage overflow of these tags for the moment. + // It also excludes all div in li because 1st leaf and div child of list overflow + // may impact the bullet point (at least it does on Safari). + max-width: 100%; + overflow-x: auto; + } + + img { + max-width: 100%; + height: auto; + } +} + +.o_Message_core { + min-width: 0; // allows this flex child to shrink more than its content + margin-inline-end: map-get($spacers, 3); +} + +.o_Message_footer { + display: flex; + flex-direction: column; +} + +.o_Message_header { + display: flex; + flex-flow: row wrap; + align-items: baseline; +} + +.o_Message_headerCommands { + margin-inline-end: map-get($spacers, 2); + align-self: center; + + .o_Message_headerCommand { + padding-left: map-get($spacers, 2); + padding-right: map-get($spacers, 2); + + &.o-mobile { + padding-left: map-get($spacers, 3); + padding-right: map-get($spacers, 3); + + &:first-child { + padding-left: map-get($spacers, 2); + } + + &:last-child { + padding-right: map-get($spacers, 2); + } + } + } +} + +.o_Message_headerDate { + margin-inline-end: map-get($spacers, 2); + font-size: 0.8em; +} + +.o_Message_moderationAction { + margin-inline-end: map-get($spacers, 3); +} + +.o_Message_moderationPending { + margin-inline-end: map-get($spacers, 3); +} + +.o_Message_moderationSubHeader { + display: flex; + flex-flow: row wrap; + align-items: center; +} + +.o_Message_originThread { + margin-inline-end: map-get($spacers, 2); +} + +.o_Message_partnerImStatusIcon { + @include o-position-absolute($bottom: 0, $right: 0); + display: flex; + align-items: center; + justify-content: center; +} + +.o_Message_prettyBody { + + > p:last-of-type { + margin-bottom: 0; + } + +} + +.o_Message_readMoreLess { + display: block; +} + +.o_Message_seenIndicator { + margin-inline-end: map-get($spacers, 1); +} + +.o_Message_sidebar { + flex: 0 0 $o-mail-message-sidebar-width; + max-width: $o-mail-message-sidebar-width; + display: flex; + margin-inline-end: map-get($spacers, 2); + justify-content: center; + + &.o-message-squashed { + align-items: flex-start; + } +} + +.o_Message_sidebarItem { + margin-left: map-get($spacers, 1); + margin-right: map-get($spacers, 1); + + &.o-message-squashed { + display: flex; + } +} + +.o_Message_trackingValues { + margin-top: map-get($spacers, 2); +} + +.o_Message_trackingValue { + display: flex; + align-items: center; + flex-wrap: wrap; +} + +.o_Message_trackingValueItem { + margin-inline-end: map-get($spacers, 1); +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_Message { + background-color: white; + + &:hover, &.o-clicked { + + .o_Message_commands { + opacity: 1; + } + + .o_Message_sidebarItem.o-message-squashed { + display: flex; + } + + .o_Message_seenIndicator.o-message-squashed { + display: none; + } + } + + .o_Message_partnerImStatusIcon { + color: white; + } + + &.o-not-discussion { + background-color: lighten(gray('300'), 5%); + border-bottom: 1px solid darken(gray('300'), 5%); + + .o_Message_partnerImStatusIcon { + color: lighten(gray('300'), 5%); + } + + &.o-selected { + border-bottom: 1px solid darken(gray('400'), 5%); + } + } + + &.o-selected { + background-color: gray('400'); + + .o_Message_partnerImStatusIcon { + color: gray('400'); + } + } + + &.o-starred { + + .o_Message_commandStar { + display: flex; + } + + .o_Message_commands { + display: flex; + } + } +} + +.o_Message_authorName { + font-weight: bold; +} + +.o_Message_authorRedirect { + cursor: pointer; +} + +.o_Message_command { + cursor: pointer; + color: gray('400'); + + &:not(.o-mobile) { + &:hover { + filter: brightness(0.8); + } + } + + &.o-mobile { + filter: brightness(0.8); + + &:hover { + filter: brightness(0.75); + } + } + + &.o-message-selected { + color: gray('500'); + } +} + +.o_Message_commandStar { + + &.o-message-starred { + color: gold; + + &:hover { + filter: brightness(0.9); + } + } +} + +.o_Message_content .o_mention { + color: $o-brand-primary; + cursor: pointer; + + &:hover { + color: darken($o-brand-primary, 15%); + } +} + +.o_Message_date { + color: gray('500'); + + &.o-message-selected { + color: gray('600'); + } +} + +.o_Message_headerCommands:not(.o-mobile) { + opacity: 0; +} + +.o_Message_originThread { + font-size: 0.8em; + color: gray('500'); + + &.o-message-selected { + color: gray('600'); + } +} + +.o_Message_originThreadLink { + font-size: 1.25em; // original size +} + +.o_Message_partnerImStatusIcon:not(.o_Message_partnerImStatusIcon-mobile) { + font-size: x-small; +} + +.o_Message_moderationAction { + font-weight: bold; + font-style: italic; + + &.o-accept, + &.o-allow { + color: $o-mail-moderation-accept-color; + @include hover-focus { + color: darken($o-mail-moderation-accept-color, $emphasized-link-hover-darken-percentage); + } + } + + &.o-ban, + &.o-discard, + &.o-reject { + color: $o-mail-moderation-reject-color; + @include hover-focus { + color: darken($o-mail-moderation-reject-color, $emphasized-link-hover-darken-percentage); + } + } +} + +.o_Message_moderationPending { + font-style: italic; + + &.o-author { + color: theme-color('danger'); + font-weight: bold; + } +} + +.o_Message_notificationIconClickable { + color: gray('600'); + cursor: pointer; + + &.o-error { + color: $red; + } +} + +.o_Message_sidebarCommands { + display: none; +} + +.o_Message_sidebarItem.o-message-squashed { + display: none; +} + +.o_Message_subject { + font-style: italic; +} + +// Used to hide buttons on rating emails in chatter +// FIXME: should use a better approach for not having such buttons +// in chatter of such messages, but keep having them in emails. +.o_Message_content [summary~="o_mail_notification"] { + display: none; +} diff --git a/addons/mail/static/src/components/message/message.xml b/addons/mail/static/src/components/message/message.xml new file mode 100644 index 00000000..32687ea6 --- /dev/null +++ b/addons/mail/static/src/components/message/message.xml @@ -0,0 +1,210 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.Message" owl="1"> + <div class="o_Message" + t-att-class="{ + 'o-clicked': state.isClicked, + 'o-discussion': message and (message.is_discussion or message.is_notification), + 'o-mobile': env.messaging.device.isMobile, + 'o-not-discussion': message and !(message.is_discussion or message.is_notification), + 'o-notification': message and message.message_type === 'notification', + 'o-selected': props.isSelected, + 'o-squashed': props.isSquashed, + 'o-starred': message and message.isStarred, + }" t-on-click="_onClick" t-att-data-message-local-id="message and message.localId" + > + <t t-if="message" name="rootCondition"> + <div class="o_Message_sidebar" t-att-class="{ 'o-message-squashed': props.isSquashed }"> + <t t-if="!props.isSquashed"> + <div class="o_Message_authorAvatarContainer o_Message_sidebarItem"> + <img class="o_Message_authorAvatar rounded-circle" t-att-class="{ o_Message_authorRedirect: hasAuthorOpenChat, o_redirect: hasAuthorOpenChat }" t-att-src="avatar" t-on-click="_onClickAuthorAvatar" t-att-title="hasAuthorOpenChat ? OPEN_CHAT : ''" alt="Avatar"/> + <t t-if="message.author and message.author.im_status"> + <PartnerImStatusIcon + class="o_Message_partnerImStatusIcon" + t-att-class="{ + 'o-message-not-discussion': !(message.is_discussion or message.is_notification), + 'o-message-selected': props.isSelected, + 'o_Message_partnerImStatusIcon-mobile': env.messaging.device.isMobile, + }" + hasOpenChat="hasAuthorOpenChat" + partnerLocalId="message.author.localId" + /> + </t> + </div> + </t> + <t t-else=""> + <div class="o_Message_date o_Message_sidebarItem o-message-squashed" t-att-class="{ 'o-message-selected': props.isSelected }"> + <t t-esc="shortTime"/> + </div> + <div class="o_Message_commands o_Message_sidebarCommands o_Message_sidebarItem o-message-squashed" t-att-class="{ 'o-message-selected': props.isSelected, 'o-mobile': env.messaging.device.isMobile }"> + <t t-if="message.message_type !== 'notification'"> + <div class="o_Message_command o_Message_commandStar fa" + t-att-class="{ + 'fa-star': message.isStarred, + 'fa-star-o': !message.isStarred, + 'o-message-selected': props.isSelected, + 'o-message-starred': message.isStarred, + 'o-mobile': env.messaging.device.isMobile, + }" t-on-click="_onClickStar" + /> + </t> + </div> + <t t-if="message.isCurrentPartnerAuthor and threadView and threadView.thread and threadView.thread.hasSeenIndicators"> + <MessageSeenIndicator class="o_Message_seenIndicator o-message-squashed" messageLocalId="message.localId" threadLocalId="threadView.thread.localId"/> + </t> + </t> + </div> + <div class="o_Message_core"> + <t t-if="!props.isSquashed"> + <div class="o_Message_header"> + <t t-if="message.author"> + <div class="o_Message_authorName o_Message_authorRedirect o_redirect" t-on-click="_onClickAuthorName" title="Open profile"> + <t t-esc="message.author.nameOrDisplayName"/> + </div> + </t> + <t t-elif="message.email_from"> + <a class="o_Message_authorName" t-attf-href="mailto:{{ message.email_from }}?subject=Re: {{ message.subject ? message.subject : '' }}"> + <t t-esc="message.email_from"/> + </a> + </t> + <t t-else=""> + <div class="o_Message_authorName"> + Anonymous + </div> + </t> + <div class="o_Message_date o_Message_headerDate" t-att-class="{ 'o-message-selected': props.isSelected }" t-att-title="datetime"> + - <t t-esc="message.dateFromNow"/> + </div> + <t t-if="message.isCurrentPartnerAuthor and threadView and threadView.thread and threadView.thread.hasSeenIndicators"> + <MessageSeenIndicator class="o_Message_seenIndicator" messageLocalId="message.localId" threadLocalId="threadView.thread.localId"/> + </t> + <t t-if="threadView and message.originThread and message.originThread !== threadView.thread"> + <div class="o_Message_originThread" t-att-class="{ 'o-message-selected': props.isSelected }"> + <t t-if="message.originThread.model === 'mail.channel'"> + (from <a class="o_Message_originThreadLink" t-att-href="message.originThread.url" t-on-click="_onClickOriginThread"><t t-if="message.originThread.name">#<t t-esc="message.originThread.name"/></t><t t-else="">channel</t></a>) + </t> + <t t-else=""> + on <a class="o_Message_originThreadLink" t-att-href="message.originThread.url" t-on-click="_onClickOriginThread"><t t-if="message.originThread.name"><t t-esc="message.originThread.name"/></t><t t-else="">document</t></a> + </t> + </div> + </t> + <t t-if="message.moderation_status === 'pending_moderation' and !message.isModeratedByCurrentPartner"> + <span class="o_Message_moderationPending o-author" title="Your message is pending moderation.">Pending moderation</span> + </t> + <t t-if="threadView and message.originThread and message.originThread === threadView.thread and message.notifications.length > 0"> + <t t-if="message.failureNotifications.length > 0"> + <span class="o_Message_notificationIconClickable o-error" t-on-click="_onClickFailure"> + <i name="failureIcon" class="o_Message_notificationIcon fa fa-envelope"/> + </span> + </t> + <t t-else=""> + <Popover> + <span class="o_Message_notificationIconClickable"> + <i name="notificationIcon" class="o_Message_notificationIcon fa fa-envelope-o"/> + </span> + <t t-set="opened"> + <NotificationPopover + notificationLocalIds="message.notifications.map(notification => notification.localId)" + /> + </t> + </Popover> + </t> + </t> + <div class="o_Message_commands o_Message_headerCommands" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }"> + <t t-if="!message.isTemporary and ((message.message_type !== 'notification' and message.originThread and message.originThread.model === 'mail.channel') or !message.isTransient) and message.moderation_status !== 'pending_moderation'"> + <span class="o_Message_command o_Message_commandStar o_Message_headerCommand fa" + t-att-class="{ + 'fa-star': message.isStarred, + 'fa-star-o': !message.isStarred, + 'o-message-selected': props.isSelected, + 'o-message-starred': message.isStarred, + 'o-mobile': env.messaging.device.isMobile, + }" t-on-click="_onClickStar" title="Mark as Todo" + /> + </t> + <t t-if="props.hasReplyIcon"> + <span class="o_Message_command o_Message_commandReply o_Message_headerCommand fa fa-reply" + t-att-class="{ + 'o-message-selected': props.isSelected, + 'o-mobile': env.messaging.device.isMobile, + }" t-on-click="_onClickReply" title="Reply" + /> + </t> + <t t-if="props.hasMarkAsReadIcon"> + <span class="o_Message_command o_Message_commandMarkAsRead o_Message_headerCommand fa fa-check" + t-att-class="{ + 'o-message-selected': props.isSelected, + 'o-mobile': env.messaging.device.isMobile, + }" t-on-click="_onClickMarkAsRead" title="Mark as Read" + /> + </t> + </div> + </div> + <t t-if="message.isModeratedByCurrentPartner"> + <div class="o_Message_moderationSubHeader"> + <t t-if="threadView and props.hasCheckbox and message.hasCheckbox"> + <input class="o_Message_checkbox" type="checkbox" t-att-checked="message.isChecked(threadView.thread, threadView.stringifiedDomain) ? 'checked': ''" t-on-change="_onChangeCheckbox" t-ref="checkbox"/> + </t> + <span class="o_Message_moderationPending">Pending moderation:</span> + <a class="o_Message_moderationAction o-accept" href="#" title="Accept" t-on-click="_onClickModerationAccept">Accept</a> + <a class="o_Message_moderationAction o-reject" href="#" title="Remove message with explanation" t-on-click="_onClickModerationReject">Reject</a> + <a class="o_Message_moderationAction o-discard" href="#" title="Remove message without explanation" t-on-click="_onClickModerationDiscard">Discard</a> + <a class="o_Message_moderationAction o-allow" href="#" title="Add this email address to white list of people" t-on-click="_onClickModerationAllow">Always Allow</a> + <a class="o_Message_moderationAction o-ban" href="#" title="Ban this email address" t-on-click="_onClickModerationBan">Ban</a> + </div> + </t> + </t> + <div class="o_Message_content" t-ref="content"> + <div class="o_Message_prettyBody" t-ref="prettyBody"/><!-- message.prettyBody is inserted here from _update() --> + <t t-if="message.subtype_description and !message.isBodyEqualSubtypeDescription"> + <p t-esc="message.subtype_description"/> + </t> + <t t-if="trackingValues.length > 0"> + <ul class="o_Message_trackingValues"> + <t t-foreach="trackingValues" t-as="value" t-key="value.id"> + <li> + <div class="o_Message_trackingValue"> + <div class="o_Message_trackingValueFieldName o_Message_trackingValueItem" t-esc="value.changed_field"/> + <t t-if="value.old_value"> + <div class="o_Message_trackingValueOldValue o_Message_trackingValueItem" t-esc="value.old_value"/> + </t> + <div class="o_Message_trackingValueSeparator o_Message_trackingValueItem fa fa-long-arrow-right" title="Changed" role="img"/> + <t t-if="value.new_value"> + <div class="o_Message_trackingValueNewValue o_Message_trackingValueItem" t-esc="value.new_value"/> + </t> + </div> + </li> + </t> + </ul> + </t> + </div> + <t t-if="message.subject and !message.isSubjectSimilarToOriginThreadName and threadView and threadView.thread and (threadView.thread.mass_mailing or [env.messaging.inbox, env.messaging.history].includes(threadView.thread))"> + <p class="o_Message_subject">Subject: <t t-esc="message.subject"/></p> + </t> + <t t-if="message.attachments and message.attachments.length > 0"> + <div class="o_Message_footer"> + <AttachmentList + class="o_Message_attachmentList" + areAttachmentsDownloadable="true" + areAttachmentsEditable="message.author === env.messaging.currentPartner" + attachmentLocalIds="message.attachments.map(attachment => attachment.localId)" + attachmentsDetailsMode="props.attachmentsDetailsMode" + /> + </div> + </t> + </div> + <t t-if="state.hasModerationBanDialog"> + <ModerationBanDialog messageLocalIds="[message.localId]" t-on-dialog-closed="_onDialogClosedModerationBan"/> + </t> + <t t-if="state.hasModerationDiscardDialog"> + <ModerationDiscardDialog messageLocalIds="[message.localId]" t-on-dialog-closed="_onDialogClosedModerationDiscard"/> + </t> + <t t-if="state.hasModerationRejectDialog"> + <ModerationRejectDialog messageLocalIds="[message.localId]" t-on-dialog-closed="_onDialogClosedModerationReject"/> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/message/message_tests.js b/addons/mail/static/src/components/message/message_tests.js new file mode 100644 index 00000000..67fa9b96 --- /dev/null +++ b/addons/mail/static/src/components/message/message_tests.js @@ -0,0 +1,1580 @@ +odoo.define('mail/static/src/components/message/message_tests.js', function (require) { +'use strict'; + +const components = { + Message: require('mail/static/src/components/message/message.js'), +}; +const { makeDeferred } = require('mail/static/src/utils/deferred/deferred.js'); +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + nextAnimationFrame, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const Bus = require('web.Bus'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('message', {}, function () { +QUnit.module('message_tests.js', { + beforeEach() { + beforeEach(this); + + this.createMessageComponent = async (message, otherProps) => { + const props = Object.assign({ messageLocalId: message.localId }, otherProps); + await createRootComponent(this, components.Message, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('basic rendering', async function (assert) { + assert.expect(12); + + await this.start(); + const message = this.env.models['mail.message'].create({ + author: [['insert', { id: 7, display_name: "Demo User" }]], + body: "<p>Test</p>", + id: 100, + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelectorAll('.o_Message').length, + 1, + "should display a message component" + ); + const messageEl = document.querySelector('.o_Message'); + assert.strictEqual( + messageEl.dataset.messageLocalId, + this.env.models['mail.message'].findFromIdentifyingData({ id: 100 }).localId, + "message component should be linked to message store model" + ); + assert.strictEqual( + messageEl.querySelectorAll(`:scope .o_Message_sidebar`).length, + 1, + "message should have a sidebar" + ); + assert.strictEqual( + messageEl.querySelectorAll(`:scope .o_Message_sidebar .o_Message_authorAvatar`).length, + 1, + "message should have author avatar in the sidebar" + ); + assert.strictEqual( + messageEl.querySelector(`:scope .o_Message_authorAvatar`).tagName, + 'IMG', + "message author avatar should be an image" + ); + assert.strictEqual( + messageEl.querySelector(`:scope .o_Message_authorAvatar`).dataset.src, + '/web/image/res.partner/7/image_128', + "message author avatar should GET image of the related partner" + ); + assert.strictEqual( + messageEl.querySelectorAll(`:scope .o_Message_authorName`).length, + 1, + "message should display author name" + ); + assert.strictEqual( + messageEl.querySelector(`:scope .o_Message_authorName`).textContent, + "Demo User", + "message should display correct author name" + ); + assert.strictEqual( + messageEl.querySelectorAll(`:scope .o_Message_date`).length, + 1, + "message should display date" + ); + assert.strictEqual( + messageEl.querySelectorAll(`:scope .o_Message_commands`).length, + 1, + "message should display list of commands" + ); + assert.strictEqual( + messageEl.querySelectorAll(`:scope .o_Message_content`).length, + 1, + "message should display the content" + ); + assert.strictEqual( + messageEl.querySelector(`:scope .o_Message_prettyBody`).innerHTML, + "<p>Test</p>", + "message should display the correct content" + ); +}); + +QUnit.test('moderation: as author, moderated channel with pending moderation message', async function (assert) { + assert.expect(1); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 20, + model: 'mail.channel', + }); + const message = this.env.models['mail.message'].create({ + author: [['insert', { id: 1, display_name: "Admin" }]], + body: "<p>Test</p>", + id: 100, + moderation_status: 'pending_moderation', + originThread: [['link', thread]], + }); + await this.createMessageComponent(message); + + assert.strictEqual( + document.querySelectorAll(`.o_Message_moderationPending.o-author`).length, + 1, + "should have the message pending moderation" + ); +}); + +QUnit.test('moderation: as moderator, moderated channel with pending moderation message', async function (assert) { + assert.expect(9); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 20, + model: 'mail.channel', + moderators: [['link', this.env.messaging.currentPartner]], + }); + const message = this.env.models['mail.message'].create({ + author: [['insert', { id: 7, display_name: "Demo User" }]], + body: "<p>Test</p>", + id: 100, + moderation_status: 'pending_moderation', + originThread: [['link', thread]], + }); + await this.createMessageComponent(message); + const messageEl = document.querySelector('.o_Message'); + assert.ok(messageEl, "should display a message"); + assert.containsOnce(messageEl, `.o_Message_moderationSubHeader`, + "should have the message pending moderation" + ); + assert.containsNone(messageEl, `.o_Message_checkbox`, + "should not have the moderation checkbox by default" + ); + assert.containsN(messageEl, '.o_Message_moderationAction', 5, + "there should be 5 contextual moderation decisions next to the message" + ); + assert.containsOnce(messageEl, '.o_Message_moderationAction.o-accept', + "there should be a contextual moderation decision to accept the message" + ); + assert.containsOnce(messageEl, '.o_Message_moderationAction.o-reject', + "there should be a contextual moderation decision to reject the message" + ); + assert.containsOnce(messageEl, '.o_Message_moderationAction.o-discard', + "there should be a contextual moderation decision to discard the message" + ); + assert.containsOnce(messageEl, '.o_Message_moderationAction.o-allow', + "there should be a contextual moderation decision to allow the user of the message)" + ); + assert.containsOnce(messageEl, '.o_Message_moderationAction.o-ban', + "there should be a contextual moderation decision to ban the user of the message" + ); + // The actions are tested as part of discuss tests. +}); + +QUnit.test('Notification Sent', async function (assert) { + assert.expect(9); + + await this.start(); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['create', { + id: 11, + model: 'mail.channel', + }]], + }); + const message = this.env.models['mail.message'].create({ + id: 10, + message_type: 'email', + notifications: [['insert', { + id: 11, + notification_status: 'sent', + notification_type: 'email', + partner: [['insert', { id: 12, name: "Someone" }]], + }]], + originThread: [['link', threadViewer.thread]], + }); + await this.createMessageComponent(message, { + threadViewLocalId: threadViewer.threadView.localId + }); + + assert.containsOnce( + document.body, + '.o_Message', + "should display a message component" + ); + assert.containsOnce( + document.body, + '.o_Message_notificationIconClickable', + "should display the notification icon container" + ); + assert.containsOnce( + document.body, + '.o_Message_notificationIcon', + "should display the notification icon" + ); + assert.hasClass( + document.querySelector('.o_Message_notificationIcon'), + 'fa-envelope-o', + "icon should represent email success" + ); + + await afterNextRender(() => { + document.querySelector('.o_Message_notificationIconClickable').click(); + }); + assert.containsOnce( + document.body, + '.o_NotificationPopover', + "notification popover should be open" + ); + assert.containsOnce( + document.body, + '.o_NotificationPopover_notificationIcon', + "popover should have one icon" + ); + assert.hasClass( + document.querySelector('.o_NotificationPopover_notificationIcon'), + 'fa-check', + "popover should have the sent icon" + ); + assert.containsOnce( + document.body, + '.o_NotificationPopover_notificationPartnerName', + "popover should have the partner name" + ); + assert.strictEqual( + document.querySelector('.o_NotificationPopover_notificationPartnerName').textContent.trim(), + "Someone", + "partner name should be correct" + ); +}); + +QUnit.test('Notification Error', async function (assert) { + assert.expect(8); + + const openResendActionDef = makeDeferred(); + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('do_action'); + assert.strictEqual( + payload.action, + 'mail.mail_resend_message_action', + "action should be the one to resend email" + ); + assert.strictEqual( + payload.options.additional_context.mail_message_to_resend, + 10, + "action should have correct message id" + ); + openResendActionDef.resolve(); + }); + + await this.start({ env: { bus } }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['create', { + id: 11, + model: 'mail.channel', + }]], + }); + const message = this.env.models['mail.message'].create({ + id: 10, + message_type: 'email', + notifications: [['insert', { + id: 11, + notification_status: 'exception', + notification_type: 'email', + }]], + originThread: [['link', threadViewer.thread]], + }); + await this.createMessageComponent(message, { + threadViewLocalId: threadViewer.threadView.localId + }); + + assert.containsOnce( + document.body, + '.o_Message', + "should display a message component" + ); + assert.containsOnce( + document.body, + '.o_Message_notificationIconClickable', + "should display the notification icon container" + ); + assert.containsOnce( + document.body, + '.o_Message_notificationIcon', + "should display the notification icon" + ); + assert.hasClass( + document.querySelector('.o_Message_notificationIcon'), + 'fa-envelope', + "icon should represent email error" + ); + document.querySelector('.o_Message_notificationIconClickable').click(); + await openResendActionDef; + assert.verifySteps( + ['do_action'], + "should do an action to display the resend email dialog" + ); +}); + +QUnit.test("'channel_fetch' notification received is correctly handled", async function (assert) { + assert.expect(3); + + await this.start(); + const currentPartner = this.env.models['mail.partner'].insert({ + id: this.env.messaging.currentPartner.id, + display_name: "Demo User", + }); + const thread = this.env.models['mail.thread'].create({ + channel_type: 'chat', + id: 11, + members: [ + [['link', currentPartner]], + [['insert', { id: 11, display_name: "Recipient" }]] + ], + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + const message = this.env.models['mail.message'].create({ + author: [['link', currentPartner]], + body: "<p>Test</p>", + id: 100, + originThread: [['link', thread]], + }); + + await this.createMessageComponent(message, { + threadViewLocalId: threadViewer.threadView.localId, + }); + + assert.containsOnce( + document.body, + '.o_Message', + "should display a message component" + ); + assert.containsNone( + document.body, + '.o_MessageSeenIndicator_icon', + "message component should not have any check (V) as message is not yet received" + ); + + // Simulate received channel fetched notification + const notifications = [ + [['myDB', 'mail.channel', 11], { + info: 'channel_fetched', + last_message_id: 100, + partner_id: 11, + }], + ]; + await afterNextRender(() => { + this.widget.call('bus_service', 'trigger', 'notification', notifications); + }); + + assert.containsOnce( + document.body, + '.o_MessageSeenIndicator_icon', + "message seen indicator component should only contain one check (V) as message is just received" + ); +}); + +QUnit.test("'channel_seen' notification received is correctly handled", async function (assert) { + assert.expect(3); + + await this.start(); + const currentPartner = this.env.models['mail.partner'].insert({ + id: this.env.messaging.currentPartner.id, + display_name: "Demo User", + }); + const thread = this.env.models['mail.thread'].create({ + channel_type: 'chat', + id: 11, + members: [ + [['link', currentPartner]], + [['insert', { id: 11, display_name: "Recipient" }]] + ], + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + const message = this.env.models['mail.message'].create({ + author: [['link', currentPartner]], + body: "<p>Test</p>", + id: 100, + originThread: [['link', thread]], + }); + await this.createMessageComponent(message, { + threadViewLocalId: threadViewer.threadView.localId, + }); + + assert.containsOnce( + document.body, + '.o_Message', + "should display a message component" + ); + assert.containsNone( + document.body, + '.o_MessageSeenIndicator_icon', + "message component should not have any check (V) as message is not yet received" + ); + + // Simulate received channel seen notification + const notifications = [ + [['myDB', 'mail.channel', 11], { + info: 'channel_seen', + last_message_id: 100, + partner_id: 11, + }], + ]; + await afterNextRender(() => { + this.widget.call('bus_service', 'trigger', 'notification', notifications); + }); + assert.containsN( + document.body, + '.o_MessageSeenIndicator_icon', + 2, + "message seen indicator component should contain two checks (V) as message is seen" + ); +}); + +QUnit.test("'channel_fetch' notification then 'channel_seen' received are correctly handled", async function (assert) { + assert.expect(4); + + await this.start(); + const currentPartner = this.env.models['mail.partner'].insert({ + id: this.env.messaging.currentPartner.id, + display_name: "Demo User", + }); + const thread = this.env.models['mail.thread'].create({ + channel_type: 'chat', + id: 11, + members: [ + [['link', currentPartner]], + [['insert', { id: 11, display_name: "Recipient" }]] + ], + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + const message = this.env.models['mail.message'].create({ + author: [['link', currentPartner]], + body: "<p>Test</p>", + id: 100, + originThread: [['link', thread]], + }); + await this.createMessageComponent(message, { + threadViewLocalId: threadViewer.threadView.localId, + }); + + assert.containsOnce( + document.body, + '.o_Message', + "should display a message component" + ); + assert.containsNone( + document.body, + '.o_MessageSeenIndicator_icon', + "message component should not have any check (V) as message is not yet received" + ); + + // Simulate received channel fetched notification + let notifications = [ + [['myDB', 'mail.channel', 11], { + info: 'channel_fetched', + last_message_id: 100, + partner_id: 11, + }], + ]; + await afterNextRender(() => { + this.widget.call('bus_service', 'trigger', 'notification', notifications); + }); + assert.containsOnce( + document.body, + '.o_MessageSeenIndicator_icon', + "message seen indicator component should only contain one check (V) as message is just received" + ); + + // Simulate received channel seen notification + notifications = [ + [['myDB', 'mail.channel', 11], { + info: 'channel_seen', + last_message_id: 100, + partner_id: 11, + }], + ]; + await afterNextRender(() => { + this.widget.call('bus_service', 'trigger', 'notification', notifications); + }); + assert.containsN( + document.body, + '.o_MessageSeenIndicator_icon', + 2, + "message seen indicator component should contain two checks (V) as message is now seen" + ); +}); + +QUnit.test('do not show messaging seen indicator if not authored by me', async function (assert) { + assert.expect(2); + + await this.start(); + const author = this.env.models['mail.partner'].create({ + id: 100, + display_name: "Demo User" + }); + const thread = this.env.models['mail.thread'].create({ + channel_type: 'chat', + id: 11, + partnerSeenInfos: [['create', [ + { + channelId: 11, + lastFetchedMessage: [['insert', { id: 100 }]], + partnerId: this.env.messaging.currentPartner.id, + }, + { + channelId: 11, + lastFetchedMessage: [['insert', { id: 100 }]], + partnerId: author.id, + }, + ]]], + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + const message = this.env.models['mail.message'].insert({ + author: [['link', author]], + body: "<p>Test</p>", + id: 100, + originThread: [['link', thread]], + }); + await this.createMessageComponent(message, { threadViewLocalId: threadViewer.threadView.localId }); + + assert.containsOnce( + document.body, + '.o_Message', + "should display a message component" + ); + assert.containsNone( + document.body, + '.o_Message_seenIndicator', + "message component should not have any message seen indicator" + ); +}); + +QUnit.test('do not show messaging seen indicator if before last seen by all message', async function (assert) { + assert.expect(3); + + await this.start(); + const currentPartner = this.env.models['mail.partner'].insert({ + id: this.env.messaging.currentPartner.id, + display_name: "Demo User", + }); + const thread = this.env.models['mail.thread'].create({ + channel_type: 'chat', + id: 11, + messageSeenIndicators: [['insert', { + channelId: 11, + messageId: 99, + }]], + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + const lastSeenMessage = this.env.models['mail.message'].create({ + author: [['link', currentPartner]], + body: "<p>You already saw me</p>", + id: 100, + originThread: [['link', thread]], + }); + const message = this.env.models['mail.message'].insert({ + author: [['link', currentPartner]], + body: "<p>Test</p>", + id: 99, + originThread: [['link', thread]], + }); + thread.update({ + partnerSeenInfos: [['create', [ + { + channelId: 11, + lastSeenMessage: [['link', lastSeenMessage]], + partnerId: this.env.messaging.currentPartner.id, + }, + { + channelId: 11, + lastSeenMessage: [['link', lastSeenMessage]], + partnerId: 100, + }, + ]]], + }); + await this.createMessageComponent(message, { + threadViewLocalId: threadViewer.threadView.localId, + }); + + assert.containsOnce( + document.body, + '.o_Message', + "should display a message component" + ); + assert.containsOnce( + document.body, + '.o_Message_seenIndicator', + "message component should have a message seen indicator" + ); + assert.containsNone( + document.body, + '.o_MessageSeenIndicator_icon', + "message component should not have any check (V)" + ); +}); + +QUnit.test('only show messaging seen indicator if authored by me, after last seen by all message', async function (assert) { + assert.expect(3); + + await this.start(); + const currentPartner = this.env.models['mail.partner'].insert({ + id: this.env.messaging.currentPartner.id, + display_name: "Demo User" + }); + const thread = this.env.models['mail.thread'].create({ + channel_type: 'chat', + id: 11, + partnerSeenInfos: [['create', [ + { + channelId: 11, + lastSeenMessage: [['insert', { id: 100 }]], + partnerId: this.env.messaging.currentPartner.id, + }, + { + channelId: 11, + lastFetchedMessage: [['insert', { id: 100 }]], + lastSeenMessage: [['insert', { id: 99 }]], + partnerId: 100, + }, + ]]], + messageSeenIndicators: [['insert', { + channelId: 11, + messageId: 100, + }]], + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + const message = this.env.models['mail.message'].insert({ + author: [['link', currentPartner]], + body: "<p>Test</p>", + id: 100, + originThread: [['link', thread]], + }); + await this.createMessageComponent(message, { + threadViewLocalId: threadViewer.threadView.localId, + }); + + assert.containsOnce( + document.body, + '.o_Message', + "should display a message component" + ); + assert.containsOnce( + document.body, + '.o_Message_seenIndicator', + "message component should have a message seen indicator" + ); + assert.containsN( + document.body, + '.o_MessageSeenIndicator_icon', + 1, + "message component should have one check (V) because the message was fetched by everyone but no other member than author has seen the message" + ); +}); + +QUnit.test('allow attachment delete on authored message', async function (assert) { + assert.expect(5); + + await this.start(); + const message = this.env.models['mail.message'].create({ + attachments: [['insert-and-replace', { + filename: "BLAH.jpg", + id: 10, + name: "BLAH", + }]], + author: [['link', this.env.messaging.currentPartner]], + body: "<p>Test</p>", + id: 100, + }); + await this.createMessageComponent(message); + + assert.containsOnce( + document.body, + '.o_Attachment', + "should have an attachment", + ); + assert.containsOnce( + document.body, + '.o_Attachment_asideItemUnlink', + "should have delete attachment button" + ); + + await afterNextRender(() => document.querySelector('.o_Attachment_asideItemUnlink').click()); + assert.containsOnce( + document.body, + '.o_AttachmentDeleteConfirmDialog', + "An attachment delete confirmation dialog should have been opened" + ); + assert.strictEqual( + document.querySelector('.o_AttachmentDeleteConfirmDialog_mainText').textContent, + `Do you really want to delete "BLAH"?`, + "Confirmation dialog should contain the attachment delete confirmation text" + ); + + await afterNextRender(() => + document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click() + ); + assert.containsNone( + document.body, + '.o_Attachment', + "should no longer have an attachment", + ); +}); + +QUnit.test('prevent attachment delete on non-authored message', async function (assert) { + assert.expect(2); + + await this.start(); + const message = this.env.models['mail.message'].create({ + attachments: [['insert-and-replace', { + filename: "BLAH.jpg", + id: 10, + name: "BLAH", + }]], + author: [['insert', { id: 11, display_name: "Guy" }]], + body: "<p>Test</p>", + id: 100, + }); + await this.createMessageComponent(message); + + assert.containsOnce( + document.body, + '.o_Attachment', + "should have an attachment", + ); + assert.containsNone( + document.body, + '.o_Attachment_asideItemUnlink', + "delete attachment button should not be printed" + ); +}); + +QUnit.test('subtype description should be displayed if it is different than body', async function (assert) { + assert.expect(2); + + await this.start(); + const message = this.env.models['mail.message'].create({ + body: "<p>Hello</p>", + id: 100, + subtype_description: 'Bonjour', + }); + await this.createMessageComponent(message); + assert.containsOnce( + document.body, + '.o_Message_content', + "message should have content" + ); + assert.strictEqual( + document.querySelector(`.o_Message_content`).textContent, + "HelloBonjour", + "message content should display both body and subtype description when they are different" + ); +}); + +QUnit.test('subtype description should not be displayed if it is similar to body', async function (assert) { + assert.expect(2); + + await this.start(); + const message = this.env.models['mail.message'].create({ + body: "<p>Hello</p>", + id: 100, + subtype_description: 'hello', + }); + await this.createMessageComponent(message); + assert.containsOnce( + document.body, + '.o_Message_content', + "message should have content" + ); + assert.strictEqual( + document.querySelector(`.o_Message_content`).textContent, + "Hello", + "message content should display only body when subtype description is similar" + ); +}); + +QUnit.test('data-oe-id & data-oe-model link redirection on click', async function (assert) { + assert.expect(7); + + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.strictEqual( + payload.action.type, + 'ir.actions.act_window', + "action should open view" + ); + assert.strictEqual( + payload.action.res_model, + 'some.model', + "action should open view on 'some.model' model" + ); + assert.strictEqual( + payload.action.res_id, + 250, + "action should open view on 250" + ); + assert.step('do-action:openFormView_some.model_250'); + }); + await this.start({ env: { bus } }); + const message = this.env.models['mail.message'].create({ + body: `<p><a href="#" data-oe-id="250" data-oe-model="some.model">some.model_250</a></p>`, + id: 100, + }); + await this.createMessageComponent(message); + assert.containsOnce( + document.body, + '.o_Message_content', + "message should have content" + ); + assert.containsOnce( + document.querySelector('.o_Message_content'), + 'a', + "message content should have a link" + ); + + document.querySelector(`.o_Message_content a`).click(); + assert.verifySteps( + ['do-action:openFormView_some.model_250'], + "should have open form view on related record after click on link" + ); +}); + +QUnit.test('chat with author should be opened after clicking on his avatar', async function (assert) { + assert.expect(4); + + this.data['res.partner'].records.push({ id: 10 }); + this.data['res.users'].records.push({ partner_id: 10 }); + await this.start({ + hasChatWindow: true, + }); + const message = this.env.models['mail.message'].create({ + author: [['insert', { id: 10 }]], + id: 10, + }); + await this.createMessageComponent(message); + assert.containsOnce( + document.body, + '.o_Message_authorAvatar', + "message should have the author avatar" + ); + assert.hasClass( + document.querySelector('.o_Message_authorAvatar'), + 'o_redirect', + "author avatar should have the redirect style" + ); + + await afterNextRender(() => + document.querySelector('.o_Message_authorAvatar').click() + ); + assert.containsOnce( + document.body, + '.o_ChatWindow_thread', + "chat window with thread should be opened after clicking on author avatar" + ); + assert.strictEqual( + document.querySelector('.o_ChatWindow_thread').dataset.correspondentId, + message.author.id.toString(), + "chat with author should be opened after clicking on his avatar" + ); +}); + +QUnit.test('chat with author should be opened after clicking on his im status icon', async function (assert) { + assert.expect(4); + + this.data['res.partner'].records.push({ id: 10 }); + this.data['res.users'].records.push({ partner_id: 10 }); + await this.start({ + hasChatWindow: true, + }); + const message = this.env.models['mail.message'].create({ + author: [['insert', { id: 10, im_status: 'online' }]], + id: 10, + }); + await this.createMessageComponent(message); + assert.containsOnce( + document.body, + '.o_Message_partnerImStatusIcon', + "message should have the author im status icon" + ); + assert.hasClass( + document.querySelector('.o_Message_partnerImStatusIcon'), + 'o-has-open-chat', + "author im status icon should have the open chat style" + ); + + await afterNextRender(() => + document.querySelector('.o_Message_partnerImStatusIcon').click() + ); + assert.containsOnce( + document.body, + '.o_ChatWindow_thread', + "chat window with thread should be opened after clicking on author im status icon" + ); + assert.strictEqual( + document.querySelector('.o_ChatWindow_thread').dataset.correspondentId, + message.author.id.toString(), + "chat with author should be opened after clicking on his im status icon" + ); +}); + +QUnit.test('open chat with author on avatar click should be disabled when currently chatting with the author', async function (assert) { + assert.expect(3); + + this.data['mail.channel'].records.push({ + channel_type: 'chat', + members: [this.data.currentPartnerId, 10], + public: 'private', + }); + this.data['res.partner'].records.push({ id: 10 }); + this.data['res.users'].records.push({ partner_id: 10 }); + await this.start({ + hasChatWindow: true, + }); + const correspondent = this.env.models['mail.partner'].insert({ id: 10 }); + const message = this.env.models['mail.message'].create({ + author: [['link', correspondent]], + id: 10, + }); + const thread = await correspondent.getChat(); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createMessageComponent(message, { + threadViewLocalId: threadViewer.threadView.localId, + }); + assert.containsOnce( + document.body, + '.o_Message_authorAvatar', + "message should have the author avatar" + ); + assert.doesNotHaveClass( + document.querySelector('.o_Message_authorAvatar'), + 'o_redirect', + "author avatar should not have the redirect style" + ); + + document.querySelector('.o_Message_authorAvatar').click(); + await nextAnimationFrame(); + assert.containsNone( + document.body, + '.o_ChatWindow', + "should have no thread opened after clicking on author avatar when currently chatting with the author" + ); +}); + +QUnit.test('basic rendering of tracking value (float type)', async function (assert) { + assert.expect(8); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Total", + field_type: "float", + id: 6, + new_value: 45.67, + old_value: 12.3, + }], + }); + await this.createMessageComponent(message); + assert.containsOnce( + document.body, + '.o_Message_trackingValue', + "should display a tracking value" + ); + assert.containsOnce( + document.body, + '.o_Message_trackingValueFieldName', + "should display the name of the tracked field" + ); + assert.strictEqual( + document.querySelector('.o_Message_trackingValueFieldName').textContent, + "Total:", + "should display the correct tracked field name (Total)", + ); + assert.containsOnce( + document.body, + '.o_Message_trackingValueOldValue', + "should display the old value" + ); + assert.strictEqual( + document.querySelector('.o_Message_trackingValueOldValue').textContent, + "12.30", + "should display the correct old value (12.30)", + ); + assert.containsOnce( + document.body, + '.o_Message_trackingValueSeparator', + "should display the separator" + ); + assert.containsOnce( + document.body, + '.o_Message_trackingValueNewValue', + "should display the new value" + ); + assert.strictEqual( + document.querySelector('.o_Message_trackingValueNewValue').textContent, + "45.67", + "should display the correct new value (45.67)", + ); +}); + +QUnit.test('rendering of tracked field of type integer: from non-0 to 0', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Total", + field_type: "integer", + id: 6, + new_value: 0, + old_value: 1, + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Total:10", + "should display the correct content of tracked field of type integer: from non-0 to 0 (Total: 1 -> 0)" + ); +}); + +QUnit.test('rendering of tracked field of type integer: from 0 to non-0', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Total", + field_type: "integer", + id: 6, + new_value: 1, + old_value: 0, + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Total:01", + "should display the correct content of tracked field of type integer: from 0 to non-0 (Total: 0 -> 1)" + ); +}); + +QUnit.test('rendering of tracked field of type float: from non-0 to 0', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Total", + field_type: "float", + id: 6, + new_value: 0, + old_value: 1, + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Total:1.000.00", + "should display the correct content of tracked field of type float: from non-0 to 0 (Total: 1.00 -> 0.00)" + ); +}); + +QUnit.test('rendering of tracked field of type float: from 0 to non-0', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Total", + field_type: "float", + id: 6, + new_value: 1, + old_value: 0, + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Total:0.001.00", + "should display the correct content of tracked field of type float: from 0 to non-0 (Total: 0.00 -> 1.00)" + ); +}); + +QUnit.test('rendering of tracked field of type monetary: from non-0 to 0', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Total", + field_type: "monetary", + id: 6, + new_value: 0, + old_value: 1, + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Total:1.000.00", + "should display the correct content of tracked field of type monetary: from non-0 to 0 (Total: 1.00 -> 0.00)" + ); +}); + +QUnit.test('rendering of tracked field of type monetary: from 0 to non-0', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Total", + field_type: "monetary", + id: 6, + new_value: 1, + old_value: 0, + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Total:0.001.00", + "should display the correct content of tracked field of type monetary: from 0 to non-0 (Total: 0.00 -> 1.00)" + ); +}); + +QUnit.test('rendering of tracked field of type boolean: from true to false', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Is Ready", + field_type: "boolean", + id: 6, + new_value: false, + old_value: true, + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Is Ready:TrueFalse", + "should display the correct content of tracked field of type boolean: from true to false (Is Ready: True -> False)" + ); +}); + +QUnit.test('rendering of tracked field of type boolean: from false to true', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Is Ready", + field_type: "boolean", + id: 6, + new_value: true, + old_value: false, + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Is Ready:FalseTrue", + "should display the correct content of tracked field of type boolean: from false to true (Is Ready: False -> True)" + ); +}); + +QUnit.test('rendering of tracked field of type char: from a string to empty string', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Name", + field_type: "char", + id: 6, + new_value: "", + old_value: "Marc", + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Name:Marc", + "should display the correct content of tracked field of type char: from a string to empty string (Name: Marc ->)" + ); +}); + +QUnit.test('rendering of tracked field of type char: from empty string to a string', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Name", + field_type: "char", + id: 6, + new_value: "Marc", + old_value: "", + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Name:Marc", + "should display the correct content of tracked field of type char: from empty string to a string (Name: -> Marc)" + ); +}); + +QUnit.test('rendering of tracked field of type date: from no date to a set date', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Deadline", + field_type: "date", + id: 6, + new_value: "2018-12-14", + old_value: false, + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Deadline:12/14/2018", + "should display the correct content of tracked field of type date: from no date to a set date (Deadline: -> 12/14/2018)" + ); +}); + +QUnit.test('rendering of tracked field of type date: from a set date to no date', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Deadline", + field_type: "date", + id: 6, + new_value: false, + old_value: "2018-12-14", + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Deadline:12/14/2018", + "should display the correct content of tracked field of type date: from a set date to no date (Deadline: 12/14/2018 ->)" + ); +}); + +QUnit.test('rendering of tracked field of type datetime: from no date and time to a set date and time', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Deadline", + field_type: "datetime", + id: 6, + new_value: "2018-12-14 13:42:28", + old_value: false, + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Deadline:12/14/2018 13:42:28", + "should display the correct content of tracked field of type datetime: from no date and time to a set date and time (Deadline: -> 12/14/2018 13:42:28)" + ); +}); + +QUnit.test('rendering of tracked field of type datetime: from a set date and time to no date and time', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Deadline", + field_type: "datetime", + id: 6, + new_value: false, + old_value: "2018-12-14 13:42:28", + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Deadline:12/14/2018 13:42:28", + "should display the correct content of tracked field of type datetime: from a set date and time to no date and time (Deadline: 12/14/2018 13:42:28 ->)" + ); +}); + +QUnit.test('rendering of tracked field of type text: from some text to empty', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Name", + field_type: "text", + id: 6, + new_value: "", + old_value: "Marc", + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Name:Marc", + "should display the correct content of tracked field of type text: from some text to empty (Name: Marc ->)" + ); +}); + +QUnit.test('rendering of tracked field of type text: from empty to some text', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Name", + field_type: "text", + id: 6, + new_value: "Marc", + old_value: "", + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Name:Marc", + "should display the correct content of tracked field of type text: from empty to some text (Name: -> Marc)" + ); +}); + +QUnit.test('rendering of tracked field of type selection: from a selection to no selection', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "State", + field_type: "selection", + id: 6, + new_value: "", + old_value: "ok", + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "State:ok", + "should display the correct content of tracked field of type selection: from a selection to no selection (State: ok ->)" + ); +}); + +QUnit.test('rendering of tracked field of type selection: from no selection to a selection', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "State", + field_type: "selection", + id: 6, + new_value: "ok", + old_value: "", + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "State:ok", + "should display the correct content of tracked field of type selection: from no selection to a selection (State: -> ok)" + ); +}); + +QUnit.test('rendering of tracked field of type many2one: from having a related record to no related record', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Author", + field_type: "many2one", + id: 6, + new_value: "", + old_value: "Marc", + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Author:Marc", + "should display the correct content of tracked field of type many2one: from having a related record to no related record (Author: Marc ->)" + ); +}); + +QUnit.test('rendering of tracked field of type many2one: from no related record to having a related record', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + id: 11, + tracking_value_ids: [{ + changed_field: "Author", + field_type: "many2one", + id: 6, + new_value: "Marc", + old_value: "", + }], + }); + await this.createMessageComponent(message); + assert.strictEqual( + document.querySelector('.o_Message_trackingValue').textContent, + "Author:Marc", + "should display the correct content of tracked field of type many2one: from no related record to having a related record (Author: -> Marc)" + ); +}); + +QUnit.test('message should not be considered as "clicked" after clicking on its author name', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + author: [['insert', { id: 7, display_name: "Demo User" }]], + body: "<p>Test</p>", + id: 100, + }); + await this.createMessageComponent(message); + document.querySelector(`.o_Message_authorName`).click(); + await nextAnimationFrame(); + assert.doesNotHaveClass( + document.querySelector(`.o_Message`), + 'o-clicked', + "message should not be considered as 'clicked' after clicking on its author name" + ); +}); + +QUnit.test('message should not be considered as "clicked" after clicking on its author avatar', async function (assert) { + assert.expect(1); + + await this.start(); + const message = this.env.models['mail.message'].create({ + author: [['insert', { id: 7, display_name: "Demo User" }]], + body: "<p>Test</p>", + id: 100, + }); + await this.createMessageComponent(message); + document.querySelector(`.o_Message_authorAvatar`).click(); + await nextAnimationFrame(); + assert.doesNotHaveClass( + document.querySelector(`.o_Message`), + 'o-clicked', + "message should not be considered as 'clicked' after clicking on its author avatar" + ); +}); + +QUnit.test('message should not be considered as "clicked" after clicking on notification failure icon', async function (assert) { + assert.expect(1); + + await this.start(); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['create', { + id: 11, + model: 'mail.channel', + }]], + }); + const message = this.env.models['mail.message'].create({ + id: 10, + message_type: 'email', + notifications: [['insert', { + id: 11, + notification_status: 'exception', + notification_type: 'email', + }]], + originThread: [['link', threadViewer.thread]], + }); + await this.createMessageComponent(message, { + threadViewLocalId: threadViewer.threadView.localId + }); + document.querySelector('.o_Message_notificationIconClickable.o-error').click(); + await nextAnimationFrame(); + assert.doesNotHaveClass( + document.querySelector(`.o_Message`), + 'o-clicked', + "message should not be considered as 'clicked' after clicking on notification failure icon" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/message_author_prefix/message_author_prefix.js b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.js new file mode 100644 index 00000000..21fb18a5 --- /dev/null +++ b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.js @@ -0,0 +1,67 @@ +odoo.define('mail/static/src/components/message_author_prefix/message_author_prefix.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class MessageAuthorPrefix extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const message = this.env.models['mail.message'].get(props.messageLocalId); + const author = message ? message.author : undefined; + const thread = props.threadLocalId + ? this.env.models['mail.thread'].get(props.threadLocalId) + : undefined; + return { + author: author ? author.__state : undefined, + currentPartner: this.env.messaging.currentPartner + ? this.env.messaging.currentPartner.__state + : undefined, + message: message ? message.__state : undefined, + thread: thread ? thread.__state : undefined, + }; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.message} + */ + get message() { + return this.env.models['mail.message'].get(this.props.messageLocalId); + } + + /** + * @returns {mail.thread|undefined} + */ + get thread() { + return this.env.models['mail.thread'].get(this.props.threadLocalId); + } + +} + +Object.assign(MessageAuthorPrefix, { + props: { + messageLocalId: String, + threadLocalId: { + type: String, + optional: true, + }, + }, + template: 'mail.MessageAuthorPrefix', +}); + +return MessageAuthorPrefix; + +}); diff --git a/addons/mail/static/src/components/message_author_prefix/message_author_prefix.scss b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.scss new file mode 100644 index 00000000..362eaeb5 --- /dev/null +++ b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.scss @@ -0,0 +1,11 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_MessageAuthorPrefixIcon { + margin-right: 3px; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ diff --git a/addons/mail/static/src/components/message_author_prefix/message_author_prefix.xml b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.xml new file mode 100644 index 00000000..eddc2b01 --- /dev/null +++ b/addons/mail/static/src/components/message_author_prefix/message_author_prefix.xml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.MessageAuthorPrefix" owl="1"> + <span class="o_MessageAuthorPrefix"> + <t t-if="message"> + <t t-if="message.author and message.author === env.messaging.currentPartner"> + <i class="o_MessageAuthorPrefixIcon fa fa-mail-reply"/>You: + </t> + <t t-elif="thread and message.author !== thread.correspondent"> + <t t-esc="message.author.nameOrDisplayName"/>: + </t> + </t> + </span> + </t> + +</templates> diff --git a/addons/mail/static/src/components/message_list/message_list.js b/addons/mail/static/src/components/message_list/message_list.js new file mode 100644 index 00000000..245fd335 --- /dev/null +++ b/addons/mail/static/src/components/message_list/message_list.js @@ -0,0 +1,600 @@ +odoo.define('mail/static/src/components/message_list/message_list.js', function (require) { +'use strict'; + +const components = { + Message: require('mail/static/src/components/message/message.js'), +}; +const useRefs = require('mail/static/src/component_hooks/use_refs/use_refs.js'); +const useRenderedValues = require('mail/static/src/component_hooks/use_rendered_values/use_rendered_values.js'); +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class MessageList extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const threadView = this.env.models['mail.thread_view'].get(props.threadViewLocalId); + const thread = threadView ? threadView.thread : undefined; + const threadCache = threadView ? threadView.threadCache : undefined; + return { + isDeviceMobile: this.env.messaging.device.isMobile, + thread, + threadCache, + threadCacheIsAllHistoryLoaded: threadCache && threadCache.isAllHistoryLoaded, + threadCacheIsLoaded: threadCache && threadCache.isLoaded, + threadCacheIsLoadingMore: threadCache && threadCache.isLoadingMore, + threadCacheLastMessage: threadCache && threadCache.lastMessage, + threadCacheOrderedMessages: threadCache ? threadCache.orderedMessages : [], + threadIsTemporary: thread && thread.isTemporary, + threadMainCache: thread && thread.mainCache, + threadMessageAfterNewMessageSeparator: thread && thread.messageAfterNewMessageSeparator, + threadViewComponentHintList: threadView ? threadView.componentHintList : [], + threadViewNonEmptyMessagesLength: threadView && threadView.nonEmptyMessages.length, + }; + }, { + compareDepth: { + threadCacheOrderedMessages: 1, + threadViewComponentHintList: 1, + }, + }); + this._getRefs = useRefs(); + /** + * States whether there was at least one programmatic scroll since the + * last scroll event was handled (which is particularly async due to + * throttled behavior). + * Useful to avoid loading more messages or to incorrectly disabling the + * auto-scroll feature when the scroll was not made by the user. + */ + this._isLastScrollProgrammatic = false; + /** + * Reference of the "load more" item. Useful to trigger load more + * on scroll when it becomes visible. + */ + this._loadMoreRef = useRef('loadMore'); + /** + * Snapshot computed during willPatch, which is used by patched. + */ + this._willPatchSnapshot = undefined; + this._onScrollThrottled = _.throttle(this._onScrollThrottled.bind(this), 100); + /** + * State used by the component at the time of the render. Useful to + * properly handle async code. + */ + this._lastRenderedValues = useRenderedValues(() => { + const threadView = this.threadView; + const thread = threadView && threadView.thread; + const threadCache = threadView && threadView.threadCache; + return { + componentHintList: threadView ? [...threadView.componentHintList] : [], + hasAutoScrollOnMessageReceived: threadView && threadView.hasAutoScrollOnMessageReceived, + hasScrollAdjust: this.props.hasScrollAdjust, + mainCache: thread && thread.mainCache, + order: this.props.order, + orderedMessages: threadCache ? [...threadCache.orderedMessages] : [], + thread, + threadCache, + threadCacheInitialScrollHeight: threadView && threadView.threadCacheInitialScrollHeight, + threadCacheInitialScrollPosition: threadView && threadView.threadCacheInitialScrollPosition, + threadView, + threadViewer: threadView && threadView.threadViewer, + }; + }); + // useUpdate must be defined after useRenderedValues to guarantee proper + // call order + useUpdate({ func: () => this._update() }); + } + + willPatch() { + const lastMessageRef = this.lastMessageRef; + this._willPatchSnapshot = { + isLastMessageVisible: + lastMessageRef && + lastMessageRef.isBottomVisible({ offset: 10 }), + scrollHeight: this._getScrollableElement().scrollHeight, + scrollTop: this._getScrollableElement().scrollTop, + }; + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * Update the scroll position of the message list. + * This is not done in patched/mounted hooks because scroll position is + * dependent on UI globally. To illustrate, imagine following UI: + * + * +----------+ < viewport top = scrollable top + * | message | + * | list | + * | | + * +----------+ < scrolltop = viewport bottom = scrollable bottom + * + * Now if a composer is mounted just below the message list, it is shrinked + * and scrolltop is altered as a result: + * + * +----------+ < viewport top = scrollable top + * | message | + * | list | < scrolltop = viewport bottom <-+ + * | | |-- dist = composer height + * +----------+ < scrollable bottom <-+ + * +----------+ + * | composer | + * +----------+ + * + * Because of this, the scroll position must be changed when whole UI + * is rendered. To make this simpler, this is done when <ThreadView/> + * component is patched. This is acceptable when <ThreadView/> has a + * fixed height, which is the case for the moment. task-2358066 + */ + adjustFromComponentHints() { + const { componentHintList, threadView } = this._lastRenderedValues(); + for (const hint of componentHintList) { + switch (hint.type) { + case 'change-of-thread-cache': + case 'home-menu-hidden': + case 'home-menu-shown': + // thread just became visible, the goal is to restore its + // saved position if it exists or scroll to the end + this._adjustScrollFromModel(); + break; + case 'message-received': + case 'messages-loaded': + case 'new-messages-loaded': + // messages have been added at the end, either scroll to the + // end or keep the current position + this._adjustScrollForExtraMessagesAtTheEnd(); + break; + case 'more-messages-loaded': + // messages have been added at the start, keep the current + // position + this._adjustScrollForExtraMessagesAtTheStart(); + break; + } + if (threadView && threadView.exists()) { + threadView.markComponentHintProcessed(hint); + } + } + this._willPatchSnapshot = undefined; + } + + /** + * @param {mail.message} message + * @returns {string} + */ + getDateDay(message) { + const date = message.date.format('YYYY-MM-DD'); + if (date === moment().format('YYYY-MM-DD')) { + return this.env._t("Today"); + } else if ( + date === moment() + .subtract(1, 'days') + .format('YYYY-MM-DD') + ) { + return this.env._t("Yesterday"); + } + return message.date.format('LL'); + } + + /** + * @returns {integer} + */ + getScrollHeight() { + return this._getScrollableElement().scrollHeight; + } + + /** + * @returns {integer} + */ + getScrollTop() { + return this._getScrollableElement().scrollTop; + } + + /** + * @returns {mail/static/src/components/message/message.js|undefined} + */ + get mostRecentMessageRef() { + const { order } = this._lastRenderedValues(); + if (order === 'desc') { + return this.messageRefs[0]; + } + const { length: l, [l - 1]: mostRecentMessageRef } = this.messageRefs; + return mostRecentMessageRef; + } + + /** + * @param {integer} messageId + * @returns {mail/static/src/components/message/message.js|undefined} + */ + messageRefFromId(messageId) { + return this.messageRefs.find(ref => ref.message.id === messageId); + } + + /** + * Get list of sub-components Message, ordered based on prop `order` + * (ASC/DESC). + * + * The asynchronous nature of OWL rendering pipeline may reveal disparity + * between knowledgeable state of store between components. Use this getter + * with extreme caution! + * + * Let's illustrate the disparity with a small example: + * + * - Suppose this component is aware of ordered (record) messages with + * following IDs: [1, 2, 3, 4, 5], and each (sub-component) messages map + * each of these records. + * - Now let's assume a change in store that translate to ordered (record) + * messages with following IDs: [2, 3, 4, 5, 6]. + * - Because store changes trigger component re-rendering by their "depth" + * (i.e. from parents to children), this component may be aware of + * [2, 3, 4, 5, 6] but not yet sub-components, so that some (component) + * messages should be destroyed but aren't yet (the ref with message ID 1) + * and some do not exist yet (no ref with message ID 6). + * + * @returns {mail/static/src/components/message/message.js[]} + */ + get messageRefs() { + const { order } = this._lastRenderedValues(); + const refs = this._getRefs(); + const ascOrderedMessageRefs = Object.entries(refs) + .filter(([refId, ref]) => ( + // Message refs have message local id as ref id, and message + // local ids contain name of model 'mail.message'. + refId.includes(this.env.models['mail.message'].modelName) && + // Component that should be destroyed but haven't just yet. + ref.message + ) + ) + .map(([refId, ref]) => ref) + .sort((ref1, ref2) => (ref1.message.id < ref2.message.id ? -1 : 1)); + if (order === 'desc') { + return ascOrderedMessageRefs.reverse(); + } + return ascOrderedMessageRefs; + } + + /** + * @returns {mail.message[]} + */ + get orderedMessages() { + const threadCache = this.threadView.threadCache; + if (this.props.order === 'desc') { + return [...threadCache.orderedMessages].reverse(); + } + return threadCache.orderedMessages; + } + + /** + * @param {integer} value + */ + setScrollTop(value) { + if (this._getScrollableElement().scrollTop === value) { + return; + } + this._isLastScrollProgrammatic = true; + this._getScrollableElement().scrollTop = value; + } + + /** + * @param {mail.message} prevMessage + * @param {mail.message} message + * @returns {boolean} + */ + shouldMessageBeSquashed(prevMessage, message) { + if (!this.props.hasSquashCloseMessages) { + return false; + } + if (Math.abs(message.date.diff(prevMessage.date)) > 60000) { + // more than 1 min. elasped + return false; + } + if (prevMessage.message_type !== 'comment' || message.message_type !== 'comment') { + return false; + } + if (prevMessage.author !== message.author) { + // from a different author + return false; + } + if (prevMessage.originThread !== message.originThread) { + return false; + } + if ( + prevMessage.moderation_status === 'pending_moderation' || + message.moderation_status === 'pending_moderation' + ) { + return false; + } + if ( + prevMessage.notifications.length > 0 || + message.notifications.length > 0 + ) { + // visual about notifications is restricted to non-squashed messages + return false; + } + const prevOriginThread = prevMessage.originThread; + const originThread = message.originThread; + if ( + prevOriginThread && + originThread && + prevOriginThread.model === originThread.model && + originThread.model !== 'mail.channel' && + prevOriginThread.id !== originThread.id + ) { + // messages linked to different document thread + return false; + } + return true; + } + + /** + * @returns {mail.thread_view} + */ + get threadView() { + return this.env.models['mail.thread_view'].get(this.props.threadViewLocalId); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * @private + */ + _adjustScrollForExtraMessagesAtTheEnd() { + const { + hasAutoScrollOnMessageReceived, + hasScrollAdjust, + order, + } = this._lastRenderedValues(); + if (!this._getScrollableElement() || !hasScrollAdjust) { + return; + } + if (!hasAutoScrollOnMessageReceived) { + if (order === 'desc' && this._willPatchSnapshot) { + const { scrollHeight, scrollTop } = this._willPatchSnapshot; + this.setScrollTop(this._getScrollableElement().scrollHeight - scrollHeight + scrollTop); + } + return; + } + this._scrollToEnd(); + } + + /** + * @private + */ + _adjustScrollForExtraMessagesAtTheStart() { + const { + hasScrollAdjust, + order, + } = this._lastRenderedValues(); + if ( + !this._getScrollableElement() || + !hasScrollAdjust || + !this._willPatchSnapshot || + order === 'desc' + ) { + return; + } + const { scrollHeight, scrollTop } = this._willPatchSnapshot; + this.setScrollTop(this._getScrollableElement().scrollHeight - scrollHeight + scrollTop); + } + + /** + * @private + */ + _adjustScrollFromModel() { + const { + hasScrollAdjust, + threadCacheInitialScrollHeight, + threadCacheInitialScrollPosition, + } = this._lastRenderedValues(); + if (!this._getScrollableElement() || !hasScrollAdjust) { + return; + } + if ( + threadCacheInitialScrollPosition !== undefined && + this._getScrollableElement().scrollHeight === threadCacheInitialScrollHeight + ) { + this.setScrollTop(threadCacheInitialScrollPosition); + return; + } + this._scrollToEnd(); + return; + } + + /** + * @private + */ + _checkMostRecentMessageIsVisible() { + const { + mainCache, + threadCache, + threadView, + } = this._lastRenderedValues(); + if (!threadView || !threadView.exists()) { + return; + } + const lastMessageIsVisible = + threadCache && + this.mostRecentMessageRef && + threadCache === mainCache && + this.mostRecentMessageRef.isPartiallyVisible(); + if (lastMessageIsVisible) { + threadView.handleVisibleMessage(this.mostRecentMessageRef.message); + } + } + + /** + * @private + * @returns {Element|undefined} Scrollable Element + */ + _getScrollableElement() { + if (this.props.getScrollableElement) { + return this.props.getScrollableElement(); + } else { + return this.el; + } + } + + /** + * @private + * @returns {boolean} + */ + _isLoadMoreVisible() { + const loadMore = this._loadMoreRef.el; + if (!loadMore) { + return false; + } + const loadMoreRect = loadMore.getBoundingClientRect(); + const elRect = this._getScrollableElement().getBoundingClientRect(); + const isInvisible = loadMoreRect.top > elRect.bottom || loadMoreRect.bottom < elRect.top; + return !isInvisible; + } + + /** + * @private + */ + _loadMore() { + const { threadCache } = this._lastRenderedValues(); + if (!threadCache || !threadCache.exists()) { + return; + } + threadCache.loadMoreMessages(); + } + + /** + * Scrolls to the end of the list. + * + * @private + */ + _scrollToEnd() { + const { order } = this._lastRenderedValues(); + this.setScrollTop(order === 'asc' ? this._getScrollableElement().scrollHeight - this._getScrollableElement().clientHeight : 0); + } + + /** + * @private + */ + _update() { + this._checkMostRecentMessageIsVisible(); + this.adjustFromComponentHints(); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickLoadMore(ev) { + ev.preventDefault(); + this._loadMore(); + } + + /** + * @private + * @param {ScrollEvent} ev + */ + onScroll(ev) { + this._onScrollThrottled(ev); + } + + /** + * @private + * @param {ScrollEvent} ev + */ + _onScrollThrottled(ev) { + const { + order, + orderedMessages, + thread, + threadCache, + threadView, + threadViewer, + } = this._lastRenderedValues(); + if (!this._getScrollableElement()) { + // could be unmounted in the meantime (due to throttled behavior) + return; + } + const scrollTop = this._getScrollableElement().scrollTop; + this.env.messagingBus.trigger('o-component-message-list-scrolled', { + orderedMessages, + scrollTop, + thread, + threadViewer, + }); + if (!this._isLastScrollProgrammatic && threadView && threadView.exists()) { + // Margin to compensate for inaccurate scrolling to bottom and height + // flicker due height change of composer area. + const margin = 30; + // Automatically scroll to new received messages only when the list is + // currently fully scrolled. + const hasAutoScrollOnMessageReceived = (order === 'asc') + ? scrollTop >= this._getScrollableElement().scrollHeight - this._getScrollableElement().clientHeight - margin + : scrollTop <= margin; + threadView.update({ hasAutoScrollOnMessageReceived }); + } + if (threadViewer && threadViewer.exists()) { + threadViewer.saveThreadCacheScrollHeightAsInitial(this._getScrollableElement().scrollHeight, threadCache); + threadViewer.saveThreadCacheScrollPositionsAsInitial(scrollTop, threadCache); + } + if (!this._isLastScrollProgrammatic && this._isLoadMoreVisible()) { + this._loadMore(); + } + this._checkMostRecentMessageIsVisible(); + this._isLastScrollProgrammatic = false; + } + +} + +Object.assign(MessageList, { + components, + defaultProps: { + hasMessageCheckbox: false, + hasScrollAdjust: true, + hasSquashCloseMessages: false, + haveMessagesMarkAsReadIcon: false, + haveMessagesReplyIcon: false, + order: 'asc', + }, + props: { + hasMessageCheckbox: Boolean, + hasSquashCloseMessages: Boolean, + haveMessagesMarkAsReadIcon: Boolean, + haveMessagesReplyIcon: Boolean, + hasScrollAdjust: Boolean, + /** + * Function returns the exact scrollable element from the parent + * to manage proper scroll heights which affects the load more messages. + */ + getScrollableElement: { + type: Function, + optional: true, + }, + order: { + type: String, + validate: prop => ['asc', 'desc'].includes(prop), + }, + selectedMessageLocalId: { + type: String, + optional: true, + }, + threadViewLocalId: String, + }, + template: 'mail.MessageList', +}); + +return MessageList; + +}); diff --git a/addons/mail/static/src/components/message_list/message_list.scss b/addons/mail/static/src/components/message_list/message_list.scss new file mode 100644 index 00000000..cb06adda --- /dev/null +++ b/addons/mail/static/src/components/message_list/message_list.scss @@ -0,0 +1,135 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_MessageList { + display: flex; + flex-flow: column; + overflow: auto; + + &.o-empty { + align-items: center; + justify-content: center; + } + + &:not(.o-empty) { + padding-bottom: 15px; + } +} + +.o_MessageList_empty { + flex: 1 1 auto; + height: 100%; + width: 100%; + align-self: center; + display: flex; + flex-flow: column; + align-items: center; + justify-content: center; + padding: 20px; + line-height: 2.5rem; +} + +.o_MessageList_isLoadingMore { + align-self: center; +} + +.o_MessageList_isLoadingMoreIcon { + margin-right: 3px; +} + +.o_MessageList_loadMore { + align-self: center; +} + +.o_MessageList_separator { + display: flex; + align-items: center; + padding: 0 0; + flex: 0 0 auto; +} + +.o_MessageList_separatorDate { + padding: 15px 0; +} + +.o_MessageList_separatorLine { + flex: 1 1 auto; + width: auto; +} + +.o_MessageList_separatorNewMessages { + // bug with safari: container does not auto-grow from child size + padding: 0 0; + margin-right: 15px; +} + +.o_MessageList_separatorLabel { + padding: 0 10px; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_MessageList { + background-color: white; +} + +.o_MessageList_empty { + text-align: center; +} + +.o_MessageList_emptyTitle { + font-weight: bold; + font-size: 1.3rem; + + &.o-neutral-face-icon:before { + @extend %o-nocontent-init-image; + @include size(120px, 140px); + background: transparent url(/web/static/src/img/neutral_face.svg) no-repeat center; + } +} + +.o_MessageList_loadMore { + cursor: pointer; +} + +.o_MessageList_message.o-has-message-selection:not(.o-selected) { + opacity: 0.5; +} + +.o_MessageList_separator { + font-weight: bold; +} + +.o_MessageList_separatorLine { + border-color: gray('400'); +} + +.o_MessageList_separatorLineNewMessages { + border-color: lighten($o-brand-odoo, 15%); +} + +.o_MessageList_separatorNewMessages { + color: lighten($o-brand-odoo, 15%); + +} + +.o_MessageList_separatorLabel { + background-color: white; +} + +// ------------------------------------------------------------------ +// Animation +// ------------------------------------------------------------------ + +.o_MessageList_separatorNewMessages:not(.o-disable-animation) { + &.fade-leave-active { + transition: opacity 0.5s; + } + + &.fade-leave-to { + opacity: 0; + } +} diff --git a/addons/mail/static/src/components/message_list/message_list.xml b/addons/mail/static/src/components/message_list/message_list.xml new file mode 100644 index 00000000..c0aff715 --- /dev/null +++ b/addons/mail/static/src/components/message_list/message_list.xml @@ -0,0 +1,103 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.MessageList" owl="1"> + <div class="o_MessageList" t-att-class="{ 'o-empty': threadView and threadView.messages.length === 0, 'o-has-message-selection': props.selectedMessageLocalId }" t-on-scroll="onScroll"> + <t t-if="threadView"> + <!-- No result messages --> + <t t-if="threadView.nonEmptyMessages.length === 0"> + <div class="o_MessageList_empty o_MessageList_item"> + <t t-if="threadView.thread === env.messaging.inbox"> + <div class="o_MessageList_emptyTitle"> + Congratulations, your inbox is empty + </div> + New messages appear here. + </t> + <t t-elif="threadView.thread === env.messaging.starred"> + <div class="o_MessageList_emptyTitle"> + No starred messages + </div> + You can mark any message as 'starred', and it shows up in this mailbox. + </t> + <t t-elif="threadView.thread === env.messaging.history"> + <div class="o_MessageList_emptyTitle o-neutral-face-icon"> + No history messages + </div> + Messages marked as read will appear in the history. + </t> + <t t-elif="threadView.thread === env.messaging.moderation"> + <div class="o_MessageList_emptyTitle"> + You have no messages to moderate. + </div> + Messages pending moderation appear here. + </t> + <t t-else=""> + There are no messages in this conversation. + </t> + </div> + </t> + <!-- LOADING (if order asc)--> + <t t-if="props.order === 'asc' and orderedMessages.length > 0"> + <t t-call="mail.MessageList.loadMore"/> + </t> + <!-- MESSAGES --> + <t t-set="current_day" t-value="0"/> + <t t-set="prev_message" t-value="0"/> + <t t-foreach="orderedMessages" t-as="message" t-key="message.localId"> + <t t-if="message === threadView.thread.messageAfterNewMessageSeparator"> + <div class="o_MessageList_separator o_MessageList_separatorNewMessages o_MessageList_item" t-att-class="{ 'o-disable-animation': env.disableAnimation }" t-transition="fade"> + <hr class="o_MessageList_separatorLine o_MessageList_separatorLineNewMessages"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelNewMessages">New messages</span> + </div> + </t> + <t t-if="!message.isEmpty"> + <t t-set="message_day" t-value="getDateDay(message)"/> + <t t-if="current_day !== message_day"> + <div class="o_MessageList_separator o_MessageList_separatorDate o_MessageList_item"> + <hr class="o_MessageList_separatorLine"/><span class="o_MessageList_separatorLabel o_MessageList_separatorLabelDate"><t t-esc="message_day"/></span><hr class="o_MessageList_separatorLine"/> + <t t-set="current_day" t-value="message_day"/> + <t t-set="isMessageSquashed" t-value="false"/> + </div> + </t> + <t t-else=""> + <t t-set="isMessageSquashed" t-value="shouldMessageBeSquashed(prev_message, message)"/> + </t> + <Message + class="o_MessageList_item o_MessageList_message" + t-att-class="{ + 'o-has-message-selection': props.selectedMessageLocalId, + }" + hasMarkAsReadIcon="props.haveMessagesMarkAsReadIcon" + hasCheckbox="props.hasMessageCheckbox" + hasReplyIcon="props.haveMessagesReplyIcon" + isSelected="props.selectedMessageLocalId === message.localId" + isSquashed="isMessageSquashed" + messageLocalId="message.localId" + threadViewLocalId="threadView.localId" + t-ref="{{ message.localId }}" + /> + <t t-set="prev_message" t-value="message"/> + </t> + </t> + <!-- LOADING (if order desc)--> + <t t-if="props.order === 'desc' and orderedMessages.length > 0"> + <t t-call="mail.MessageList.loadMore"/> + </t> + </t> + </div> + </t> + + <t t-name="mail.MessageList.loadMore" owl="1"> + <t t-if="threadView.threadCache.isLoadingMore"> + <div class="o_MessageList_item o_MessageList_isLoadingMore"> + <i class="o_MessageList_isLoadingMoreIcon fa fa-spin fa-spinner"/> + Loading... + </div> + </t> + <t t-elif="!threadView.threadCache.isAllHistoryLoaded and !threadView.thread.isTemporary"> + <a class="o_MessageList_item o_MessageList_loadMore" href="#" t-on-click="_onClickLoadMore" t-ref="loadMore"> + Load more + </a> + </t> + </t> + +</templates> diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.js b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.js new file mode 100644 index 00000000..ed555b0c --- /dev/null +++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.js @@ -0,0 +1,136 @@ +odoo.define('mail/static/src/components/message_seen_indicator/message_seen_indicator.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class MessageSeenIndicator extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const message = this.env.models['mail.message'].get(props.messageLocalId); + const thread = this.env.models['mail.thread'].get(props.threadLocalId); + const messageSeenIndicator = thread && thread.model === 'mail.channel' + ? this.env.models['mail.message_seen_indicator'].findFromIdentifyingData({ + channelId: thread.id, + messageId: message.id, + }) + : undefined; + return { + messageSeenIndicator: messageSeenIndicator ? messageSeenIndicator.__state : undefined, + }; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {string} + */ + get indicatorTitle() { + if (!this.messageSeenIndicator) { + return ''; + } + if (this.messageSeenIndicator.hasEveryoneSeen) { + return this.env._t("Seen by Everyone"); + } + if (this.messageSeenIndicator.hasSomeoneSeen) { + const partnersThatHaveSeen = this.messageSeenIndicator.partnersThatHaveSeen.map( + partner => partner.name + ); + if (partnersThatHaveSeen.length === 1) { + return _.str.sprintf( + this.env._t("Seen by %s"), + partnersThatHaveSeen[0] + ); + } + if (partnersThatHaveSeen.length === 2) { + return _.str.sprintf( + this.env._t("Seen by %s and %s"), + partnersThatHaveSeen[0], + partnersThatHaveSeen[1] + ); + } + return _.str.sprintf( + this.env._t("Seen by %s, %s and more"), + partnersThatHaveSeen[0], + partnersThatHaveSeen[1] + ); + } + if (this.messageSeenIndicator.hasEveryoneFetched) { + return this.env._t("Received by Everyone"); + } + if (this.messageSeenIndicator.hasSomeoneFetched) { + const partnersThatHaveFetched = this.messageSeenIndicator.partnersThatHaveFetched.map( + partner => partner.name + ); + if (partnersThatHaveFetched.length === 1) { + return _.str.sprintf( + this.env._t("Received by %s"), + partnersThatHaveFetched[0] + ); + } + if (partnersThatHaveFetched.length === 2) { + return _.str.sprintf( + this.env._t("Received by %s and %s"), + partnersThatHaveFetched[0], + partnersThatHaveFetched[1] + ); + } + return _.str.sprintf( + this.env._t("Received by %s, %s and more"), + partnersThatHaveFetched[0], + partnersThatHaveFetched[1] + ); + } + return ''; + } + + /** + * @returns {mail.message} + */ + get message() { + return this.env.models['mail.message'].get(this.props.messageLocalId); + } + + /** + * @returns {mail.message_seen_indicator} + */ + get messageSeenIndicator() { + if (!this.thread || this.thread.model !== 'mail.channel') { + return undefined; + } + return this.env.models['mail.message_seen_indicator'].findFromIdentifyingData({ + channelId: this.thread.id, + messageId: this.message.id, + }); + } + + /** + * @returns {mail.Thread} + */ + get thread() { + return this.env.models['mail.thread'].get(this.props.threadLocalId); + } +} + +Object.assign(MessageSeenIndicator, { + props: { + messageLocalId: String, + threadLocalId: String, + }, + template: 'mail.MessageSeenIndicator', +}); + +return MessageSeenIndicator; + +}); diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.scss b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.scss new file mode 100644 index 00000000..3a9d566e --- /dev/null +++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.scss @@ -0,0 +1,39 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_MessageSeenIndicator { + display: flex; + position: relative; + flex-wrap: nowrap; +} + +.o_MessageSeenIndicator_icon { + + &.o-first { + padding-left: map-get($spacers, 1); + } + + &.o-second { + position: absolute; + top: -1px; + left: -1px; + } +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_MessageSeenIndicator { + opacity: 0.6; + + &.o-all-seen { + color: $o-brand-odoo; + } + + &:hover { + cursor: pointer; + opacity: 0.8; + } +} diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml new file mode 100644 index 00000000..e905afaa --- /dev/null +++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator.xml @@ -0,0 +1,16 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.MessageSeenIndicator" owl="1"> + <span class="o_MessageSeenIndicator" t-att-class="{ 'o-all-seen': messageSeenIndicator and messageSeenIndicator.hasEveryoneSeen }" t-att-title="indicatorTitle"> + <t t-if="messageSeenIndicator and !messageSeenIndicator.isMessagePreviousToLastCurrentPartnerMessageSeenByEveryone"> + <t t-if="messageSeenIndicator.hasSomeoneFetched or messageSeenIndicator.hasSomeoneSeen"> + <i class="o_MessageSeenIndicator_icon o-first fa fa-check"/> + </t> + <t t-if="messageSeenIndicator.hasSomeoneSeen"> + <i class="o_MessageSeenIndicator_icon o-second fa fa-check"/> + </t> + </t> + </span> + </t> +</templates> diff --git a/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator_tests.js b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator_tests.js new file mode 100644 index 00000000..fb9c6b8b --- /dev/null +++ b/addons/mail/static/src/components/message_seen_indicator/message_seen_indicator_tests.js @@ -0,0 +1,294 @@ +odoo.define('mail/static/src/components/message_seen_indicator/message_seen_indicator_tests', function (require) { +'use strict'; + +const components = { + MessageSendIndicator: require('mail/static/src/components/message_seen_indicator/message_seen_indicator.js'), +}; +const { + afterEach, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('message_seen_indicator', {}, function () { +QUnit.module('message_seen_indicator_tests.js', { + beforeEach() { + beforeEach(this); + + this.createMessageSeenIndicatorComponent = async ({ message, thread }, otherProps) => { + const props = Object.assign( + { messageLocalId: message.localId, threadLocalId: thread.localId }, + otherProps + ); + await createRootComponent(this, components.MessageSendIndicator, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('rendering when just one has received the message', async function (assert) { + assert.expect(3); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 1000, + model: 'mail.channel', + partnerSeenInfos: [['create', [ + { + channelId: 1000, + lastFetchedMessage: [['insert', { id: 100 }]], + partnerId: 10, + }, + { + channelId: 1000, + partnerId: 100, + }, + ]]], + messageSeenIndicators: [['insert', { + channelId: 1000, + messageId: 100, + }]], + }); + const message = this.env.models['mail.message'].insert({ + author: [['insert', { id: this.env.messaging.currentPartner.id, display_name: "Demo User" }]], + body: "<p>Test</p>", + id: 100, + originThread: [['link', thread]], + }); + await this.createMessageSeenIndicatorComponent({ message, thread }); + assert.containsOnce( + document.body, + '.o_MessageSeenIndicator', + "should display a message seen indicator component" + ); + assert.doesNotHaveClass( + document.querySelector('.o_MessageSeenIndicator'), + 'o-all-seen', + "indicator component should not be considered as all seen" + ); + assert.containsOnce( + document.body, + '.o_MessageSeenIndicator_icon', + "should display only one seen indicator icon" + ); +}); + +QUnit.test('rendering when everyone have received the message', async function (assert) { + assert.expect(3); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 1000, + model: 'mail.channel', + partnerSeenInfos: [['create', [ + { + channelId: 1000, + lastFetchedMessage: [['insert', { id: 100 }]], + partnerId: 10, + }, + { + channelId: 1000, + lastFetchedMessage: [['insert', { id: 99 }]], + partnerId: 100, + }, + ]]], + messageSeenIndicators: [['insert', { + channelId: 1000, + messageId: 100, + }]], + }); + const message = this.env.models['mail.message'].insert({ + author: [['insert', { id: this.env.messaging.currentPartner.id, display_name: "Demo User" }]], + body: "<p>Test</p>", + id: 100, + originThread: [['link', thread]], + }); + await this.createMessageSeenIndicatorComponent({ message, thread }); + assert.containsOnce( + document.body, + '.o_MessageSeenIndicator', + "should display a message seen indicator component" + ); + assert.doesNotHaveClass( + document.querySelector('.o_MessageSeenIndicator'), + 'o-all-seen', + "indicator component should not be considered as all seen" + ); + assert.containsOnce( + document.body, + '.o_MessageSeenIndicator_icon', + "should display only one seen indicator icon" + ); +}); + +QUnit.test('rendering when just one has seen the message', async function (assert) { + assert.expect(3); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 1000, + model: 'mail.channel', + partnerSeenInfos: [['create', [ + { + channelId: 1000, + lastFetchedMessage: [['insert', { id: 100 }]], + lastSeenMessage: [['insert', { id: 100 }]], + partnerId: 10, + }, + { + channelId: 1000, + lastFetchedMessage: [['insert', { id: 99 }]], + partnerId: 100, + }, + ]]], + messageSeenIndicators: [['insert', { + channelId: 1000, + messageId: 100, + }]], + }); + const message = this.env.models['mail.message'].insert({ + author: [['insert', { id: this.env.messaging.currentPartner.id, display_name: "Demo User" }]], + body: "<p>Test</p>", + id: 100, + originThread: [['link', thread]], + }); + await this.createMessageSeenIndicatorComponent({ message, thread }); + assert.containsOnce( + document.body, + '.o_MessageSeenIndicator', + "should display a message seen indicator component" + ); + assert.doesNotHaveClass( + document.querySelector('.o_MessageSeenIndicator'), + 'o-all-seen', + "indicator component should not be considered as all seen" + ); + assert.containsN( + document.body, + '.o_MessageSeenIndicator_icon', + 2, + "should display two seen indicator icon" + ); +}); + +QUnit.test('rendering when just one has seen & received the message', async function (assert) { + assert.expect(3); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 1000, + model: 'mail.channel', + partnerSeenInfos: [['create', [ + { + channelId: 1000, + lastFetchedMessage: [['insert', { id: 100 }]], + lastSeenMessage: [['insert', { id: 100 }]], + partnerId: 10, + }, + { + channelId: 1000, + partnerId: 100, + }, + ]]], + messageSeenIndicators: [['insert', { + channelId: 1000, + messageId: 100, + }]], + }); + const message = this.env.models['mail.message'].insert({ + author: [['insert', { id: this.env.messaging.currentPartner.id, display_name: "Demo User" }]], + body: "<p>Test</p>", + id: 100, + originThread: [['link', thread]], + }); + await this.createMessageSeenIndicatorComponent({ message, thread }); + assert.containsOnce( + document.body, + '.o_MessageSeenIndicator', + "should display a message seen indicator component" + ); + assert.doesNotHaveClass( + document.querySelector('.o_MessageSeenIndicator'), + 'o-all-seen', + "indicator component should not be considered as all seen" + ); + assert.containsN( + document.body, + '.o_MessageSeenIndicator_icon', + 2, + "should display two seen indicator icon" + ); +}); + +QUnit.test('rendering when just everyone has seen the message', async function (assert) { + assert.expect(3); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + id: 1000, + model: 'mail.channel', + partnerSeenInfos: [['create', [ + { + channelId: 1000, + lastFetchedMessage: [['insert', { id: 100 }]], + lastSeenMessage: [['insert', { id: 100 }]], + partnerId: 10, + }, + { + channelId: 1000, + lastFetchedMessage: [['insert', { id: 100 }]], + lastSeenMessage: [['insert', { id: 100 }]], + partnerId: 100, + }, + ]]], + messageSeenIndicators: [['insert', { + channelId: 1000, + messageId: 100, + }]], + }); + const message = this.env.models['mail.message'].insert({ + author: [['insert', { id: this.env.messaging.currentPartner.id, display_name: "Demo User" }]], + body: "<p>Test</p>", + id: 100, + originThread: [['link', thread]], + }); + await this.createMessageSeenIndicatorComponent({ message, thread }); + assert.containsOnce( + document.body, + '.o_MessageSeenIndicator', + "should display a message seen indicator component" + ); + assert.hasClass( + document.querySelector('.o_MessageSeenIndicator'), + 'o-all-seen', + "indicator component should not considered as all seen" + ); + assert.containsN( + document.body, + '.o_MessageSeenIndicator_icon', + 2, + "should display two seen indicator icon" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.js b/addons/mail/static/src/components/messaging_menu/messaging_menu.js new file mode 100644 index 00000000..9eb7fd71 --- /dev/null +++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.js @@ -0,0 +1,234 @@ +odoo.define('mail/static/src/components/messaging_menu/messaging_menu.js', function (require) { +'use strict'; + +const components = { + AutocompleteInput: require('mail/static/src/components/autocomplete_input/autocomplete_input.js'), + MobileMessagingNavbar: require('mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js'), + NotificationList: require('mail/static/src/components/notification_list/notification_list.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const patchMixin = require('web.patchMixin'); + +const { Component } = owl; + +class MessagingMenu extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + /** + * global JS generated ID for this component. Useful to provide a + * custom class to autocomplete input, so that click in an autocomplete + * item is not considered as a click away from messaging menu in mobile. + */ + this.id = _.uniqueId('o_messagingMenu_'); + useShouldUpdateBasedOnProps(); + useStore(props => { + return { + isDeviceMobile: this.env.messaging && this.env.messaging.device.isMobile, + isDiscussOpen: this.env.messaging && this.env.messaging.discuss.isOpen, + isMessagingInitialized: this.env.isMessagingInitialized(), + messagingMenu: this.env.messaging && this.env.messaging.messagingMenu.__state, + }; + }); + + // bind since passed as props + this._onMobileNewMessageInputSelect = this._onMobileNewMessageInputSelect.bind(this); + this._onMobileNewMessageInputSource = this._onMobileNewMessageInputSource.bind(this); + this._onClickCaptureGlobal = this._onClickCaptureGlobal.bind(this); + this._constructor(...args); + } + + /** + * Allows patching constructor. + */ + _constructor() {} + + mounted() { + document.addEventListener('click', this._onClickCaptureGlobal, true); + } + + willUnmount() { + document.removeEventListener('click', this._onClickCaptureGlobal, true); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.discuss} + */ + get discuss() { + return this.env.messaging && this.env.messaging.discuss; + } + + /** + * @returns {mail.messaging_menu} + */ + get messagingMenu() { + return this.env.messaging && this.env.messaging.messagingMenu; + } + + /** + * @returns {string} + */ + get mobileNewMessageInputPlaceholder() { + return this.env._t("Search user..."); + } + + /** + * @returns {Object[]} + */ + get tabs() { + return [{ + icon: 'fa fa-envelope', + id: 'all', + label: this.env._t("All"), + }, { + icon: 'fa fa-user', + id: 'chat', + label: this.env._t("Chat"), + }, { + icon: 'fa fa-users', + id: 'channel', + label: this.env._t("Channel"), + }]; + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Closes the menu when clicking outside, if appropriate. + * + * @private + * @param {MouseEvent} ev + */ + _onClickCaptureGlobal(ev) { + if (!this.env.messaging) { + /** + * Messaging not created, which means essential models like + * messaging menu are not ready, so user interactions are omitted + * during this (short) period of time. + */ + return; + } + // ignore click inside the menu + if (this.el.contains(ev.target)) { + return; + } + // in all other cases: close the messaging menu when clicking outside + this.messagingMenu.close(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickDesktopTabButton(ev) { + this.messagingMenu.update({ activeTabId: ev.currentTarget.dataset.tabId }); + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickNewMessage(ev) { + if (!this.env.messaging.device.isMobile) { + this.env.messaging.chatWindowManager.openNewMessage(); + this.messagingMenu.close(); + } else { + this.messagingMenu.toggleMobileNewMessage(); + } + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickToggler(ev) { + // avoid following dummy href + ev.preventDefault(); + if (!this.env.messaging) { + /** + * Messaging not created, which means essential models like + * messaging menu are not ready, so user interactions are omitted + * during this (short) period of time. + */ + return; + } + this.messagingMenu.toggleOpen(); + } + + /** + * @private + * @param {CustomEvent} ev + */ + _onHideMobileNewMessage(ev) { + ev.stopPropagation(); + this.messagingMenu.toggleMobileNewMessage(); + } + + /** + * @private + * @param {Event} ev + * @param {Object} ui + * @param {Object} ui.item + * @param {integer} ui.item.id + */ + _onMobileNewMessageInputSelect(ev, ui) { + this.env.messaging.openChat({ partnerId: ui.item.id }); + } + + /** + * @private + * @param {Object} req + * @param {string} req.term + * @param {function} res + */ + _onMobileNewMessageInputSource(req, res) { + const value = _.escape(req.term); + this.env.models['mail.partner'].imSearch({ + callback: partners => { + const suggestions = partners.map(partner => { + return { + id: partner.id, + value: partner.nameOrDisplayName, + label: partner.nameOrDisplayName, + }; + }); + res(_.sortBy(suggestions, 'label')); + }, + keyword: value, + limit: 10, + }); + } + + /** + * @private + * @param {CustomEvent} ev + * @param {Object} ev.detail + * @param {string} ev.detail.tabId + */ + _onSelectMobileNavbarTab(ev) { + ev.stopPropagation(); + this.messagingMenu.update({ activeTabId: ev.detail.tabId }); + } + +} + +Object.assign(MessagingMenu, { + components, + props: {}, + template: 'mail.MessagingMenu', +}); + +return patchMixin(MessagingMenu); + +}); diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.scss b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss new file mode 100644 index 00000000..e578218a --- /dev/null +++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.scss @@ -0,0 +1,143 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_MessagingMenu_counter { + position: relative; + transform: translate(-5px, -5px); + margin-right: -10px; // "cancel" right padding of systray items +} + +.o_MessagingMenu_dropdownMenu { + display: flex; + flex-flow: column; + padding-top: 0; + padding-bottom: 0; + overflow-y: auto; + /** + * Override from bootstrap .dropdown-menu to fix top alignment with other + * systray menu. + */ + margin-top: map-get($spacers, 0); + + &.o-messaging-not-initialized { + align-items: center; + justify-content: center; + } + + &:not(.o-mobile) { + flex: 0 1 auto; + width: 350px; + min-height: 50px; + max-height: 400px; + z-index: 1100; // on top of chat windows + } + + &.o-mobile { + flex: 1 1 auto; + position: fixed; + top: $o-mail-chat-window-header-height-mobile; + bottom: 0; + left: 0; + right: 0; + width: 100%; + margin: 0; + max-height: none; + } +} + +.o_MessagingMenu_dropdownMenuHeader { + + &:not(.o-mobile) { + display: flex; + flex-shrink: 0; // Forces Safari to not shrink below fit content + } + + &.o-mobile { + display: grid; + grid-template-areas: + "top" + "bottom"; + grid-template-rows: auto auto; + padding: 5px + } +} + +.o_MessagingMenu_dropdownLoadingIcon { + margin-right: 3px; +} + +.o_MessagingMenu_icon { + font-size: larger +} + +.o_MessagingMenu_loading { + font-size: small; + position: absolute; + bottom: 50%; + right: 0; +} + +.o_MessagingMenu_newMessageButton.o-mobile { + grid-area: top; + justify-self: start; +} + +.o_MessagingMenu_mobileNewMessageInput { + grid-area: bottom; + padding: 8px; + margin-top: 10px +} + +.o_MessagingMenu_notificationList.o-mobile { + flex: 1 1 auto; + overflow-y: auto; +} + + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +// Make hightlight more consistent, due to messaging menu looking quite similar to discuss app in mobile +.o_MessagingMenu.o-is-open { + background-color: rgba(black, 0.1); +} + +.o_MessagingMenu_counter { + background-color: $o-enterprise-primary-color; +} + +.o_MessagingMenu_dropdownMenu.o-mobile { + border: 0; +} + +.o_MessagingMenu_dropdownMenuHeader { + border-bottom: 1px solid gray('400'); + z-index: 1; +} + +.o_MessagingMenu_mobileNewMessageInput { + appearance: none; + border: 1px solid gray('400'); + border-radius: 5px; + outline: none; +} + +.o_MessagingMenu_tabButton.o-desktop { + + &.o-active { + font-weight: bold; + } + + &:not(:hover) { + + &:not(.o-active) { + color: gray('500'); + } + } +} + +.o_MessagingMenu_toggler.o-no-notification { + @include o-mail-systray-no-notification-style(); +} diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu.xml b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml new file mode 100644 index 00000000..fc779231 --- /dev/null +++ b/addons/mail/static/src/components/messaging_menu/messaging_menu.xml @@ -0,0 +1,83 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.MessagingMenu" owl="1"> + <li class="o_MessagingMenu" t-att-class="{ 'o-is-open': messagingMenu ? messagingMenu.isOpen : false, 'o-mobile': env.messaging ? env.messaging.device.isMobile : false }"> + <a class="o_MessagingMenu_toggler" t-att-class="{ 'o-no-notification': messagingMenu ? !messagingMenu.counter : false }" href="#" title="Conversations" role="button" t-att-aria-expanded="messagingMenu and messagingMenu.isOpen ? 'true' : 'false'" aria-haspopup="true" t-on-click="_onClickToggler"> + <i class="o_MessagingMenu_icon fa fa-comments" role="img" aria-label="Messages"/> + <t t-if="!env.isMessagingInitialized()"> + <i class="o_MessagingMenu_loading fa fa-spinner fa-spin"/> + </t> + <t t-elif="messagingMenu.counter > 0"> + <span class="o_MessagingMenu_counter badge badge-pill"> + <t t-esc="messagingMenu.counter"/> + </span> + </t> + </a> + <t t-if="messagingMenu and messagingMenu.isOpen"> + <div class="o_MessagingMenu_dropdownMenu dropdown-menu dropdown-menu-right" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-messaging-not-initialized': !env.messaging.isInitialized }" role="menu"> + <t t-if="!env.messaging.isInitialized"> + <span><i class="o_MessagingMenu_dropdownLoadingIcon fa fa-spinner fa-spin"/>Please wait...</span> + </t> + <t t-else=""> + <div class="o_MessagingMenu_dropdownMenuHeader" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }"> + <t t-if="!env.messaging.device.isMobile"> + <t t-foreach="['all', 'chat', 'channel']" t-as="tabId" t-key="tabId"> + <button class="o_MessagingMenu_tabButton o-desktop btn btn-link" t-att-class="{ 'o-active': messagingMenu.activeTabId === tabId, }" t-on-click="_onClickDesktopTabButton" type="button" role="tab" t-att-data-tab-id="tabId"> + <t t-if="tabId === 'all'">All</t> + <t t-elif="tabId === 'chat'">Chat</t> + <t t-elif="tabId === 'channel'">Channels</t> + </button> + </t> + </t> + <t t-if="env.messaging.device.isMobile"> + <t t-call="mail.MessagingMenu.newMessageButton"/> + </t> + <div class="o-autogrow"/> + <t t-if="!env.messaging.device.isMobile and !discuss.isOpen"> + <t t-call="mail.MessagingMenu.newMessageButton"/> + </t> + <t t-if="env.messaging.device.isMobile and messagingMenu.isMobileNewMessageToggled"> + <AutocompleteInput + class="o_MessagingMenu_mobileNewMessageInput" + customClass="id + '_mobileNewMessageInputAutocomplete'" + isFocusOnMount="true" + placeholder="mobileNewMessageInputPlaceholder" + select="_onMobileNewMessageInputSelect" + source="_onMobileNewMessageInputSource" + t-on-o-hide="_onHideMobileNewMessage" + /> + </t> + </div> + <NotificationList + class="o_MessagingMenu_notificationList" + t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" + filter="messagingMenu.activeTabId" + /> + <t t-if="env.messaging.device.isMobile"> + <MobileMessagingNavbar + class="o_MessagingMenu_mobileNavbar" + activeTabId="messagingMenu.activeTabId" + tabs="tabs" + t-on-o-select-mobile-messaging-navbar-tab="_onSelectMobileNavbarTab" + /> + </t> + </t> + </div> + </t> + </li> + </t> + + <t t-name="mail.MessagingMenu.newMessageButton" owl="1"> + <button class="o_MessagingMenu_newMessageButton btn" + t-att-class="{ + 'btn-link': !env.messaging.device.isMobile, + 'btn-secondary': env.messaging.device.isMobile, + 'o-mobile': env.messaging.device.isMobile, + }" t-on-click="_onClickNewMessage" type="button" + > + New message + </button> + </t> + +</templates> diff --git a/addons/mail/static/src/components/messaging_menu/messaging_menu_tests.js b/addons/mail/static/src/components/messaging_menu/messaging_menu_tests.js new file mode 100644 index 00000000..d049ab7a --- /dev/null +++ b/addons/mail/static/src/components/messaging_menu/messaging_menu_tests.js @@ -0,0 +1,1039 @@ +odoo.define('mail/static/src/components/messaging_menu/messaging_menu_tests.js', function (require) { +'use strict'; + +const { + afterEach, + afterNextRender, + beforeEach, + nextAnimationFrame, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const { makeTestPromise } = require('web.test_utils'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('messaging_menu', {}, function () { +QUnit.module('messaging_menu_tests.js', { + beforeEach() { + beforeEach(this); + + this.start = async params => { + let { discussWidget, env, widget } = await start(Object.assign({}, params, { + data: this.data, + hasMessagingMenu: true, + })); + this.discussWidget = discussWidget; + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('[technical] messaging not created then becomes created', async function (assert) { + /** + * Creation of messaging in env is async due to generation of models being + * async. Generation of models is async because it requires parsing of all + * JS modules that contain pieces of model definitions. + * + * Time of having no messaging is very short, almost imperceptible by user + * on UI, but the display should not crash during this critical time period. + */ + assert.expect(2); + + const messagingBeforeCreationDeferred = makeTestPromise(); + await this.start({ + messagingBeforeCreationDeferred, + waitUntilMessagingCondition: 'none', + }); + assert.containsOnce( + document.body, + '.o_MessagingMenu', + "should have messaging menu even when messaging is not yet created" + ); + + // simulate messaging becoming created + messagingBeforeCreationDeferred.resolve(); + await nextAnimationFrame(); + assert.containsOnce( + document.body, + '.o_MessagingMenu', + "should still contain messaging menu after messaging has been created" + ); +}); + +QUnit.test('[technical] no crash on attempting opening messaging menu when messaging not created', async function (assert) { + /** + * Creation of messaging in env is async due to generation of models being + * async. Generation of models is async because it requires parsing of all + * JS modules that contain pieces of model definitions. + * + * Time of having no messaging is very short, almost imperceptible by user + * on UI, but the display should not crash during this critical time period. + * + * Messaging menu is not expected to be open on click because state of + * messaging menu requires messaging being created. + */ + assert.expect(2); + + await this.start({ + messagingBeforeCreationDeferred: new Promise(() => {}), // keep messaging not created + waitUntilMessagingCondition: 'none', + }); + assert.containsOnce( + document.body, + '.o_MessagingMenu', + "should have messaging menu even when messaging is not yet created" + ); + + let error; + try { + document.querySelector('.o_MessagingMenu_toggler').click(); + await nextAnimationFrame(); + } catch (err) { + error = err; + } + assert.notOk( + !!error, + "Should not crash on attempt to open messaging menu when messaging not created" + ); + if (error) { + throw error; + } +}); + +QUnit.test('messaging not initialized', async function (assert) { + assert.expect(2); + + await this.start({ + async mockRPC(route) { + if (route === '/mail/init_messaging') { + // simulate messaging never initialized + return new Promise(resolve => {}); + } + return this._super(...arguments); + }, + waitUntilMessagingCondition: 'created', + }); + assert.strictEqual( + document.querySelectorAll('.o_MessagingMenu_loading').length, + 1, + "should display loading icon on messaging menu when messaging not yet initialized" + ); + + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + assert.strictEqual( + document.querySelector('.o_MessagingMenu_dropdownMenu').textContent, + "Please wait...", + "should prompt loading when opening messaging menu" + ); +}); + +QUnit.test('messaging becomes initialized', async function (assert) { + assert.expect(2); + + const messagingInitializedProm = makeTestPromise(); + + await this.start({ + async mockRPC(route) { + const _super = this._super.bind(this, ...arguments); // limitation of class.js + if (route === '/mail/init_messaging') { + await messagingInitializedProm; + } + return _super(); + }, + waitUntilMessagingCondition: 'created', + }); + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + + // simulate messaging becomes initialized + await afterNextRender(() => messagingInitializedProm.resolve()); + assert.strictEqual( + document.querySelectorAll('.o_MessagingMenu_loading').length, + 0, + "should no longer display loading icon on messaging menu when messaging becomes initialized" + ); + assert.notOk( + document.querySelector('.o_MessagingMenu_dropdownMenu').textContent.includes("Please wait..."), + "should no longer prompt loading when opening messaging menu when messaging becomes initialized" + ); +}); + +QUnit.test('basic rendering', async function (assert) { + assert.expect(21); + + await this.start(); + assert.strictEqual( + document.querySelectorAll('.o_MessagingMenu').length, + 1, + "should have messaging menu" + ); + assert.notOk( + document.querySelector('.o_MessagingMenu').classList.contains('show'), + "should not mark messaging menu item as shown by default" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_toggler`).length, + 1, + "should have clickable element on messaging menu" + ); + assert.notOk( + document.querySelector(`.o_MessagingMenu_toggler`).classList.contains('show'), + "should not mark messaging menu clickable item as shown by default" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_icon`).length, + 1, + "should have icon on clickable element in messaging menu" + ); + assert.ok( + document.querySelector(`.o_MessagingMenu_icon`).classList.contains('fa-comments'), + "should have 'comments' icon on clickable element in messaging menu" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_dropdownMenu`).length, + 0, + "should not display any messaging menu dropdown by default" + ); + + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + assert.hasClass( + document.querySelector('.o_MessagingMenu'), + "o-is-open", + "should mark messaging menu as opened" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_dropdownMenu`).length, + 1, + "should display messaging menu dropdown after click" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_dropdownMenuHeader`).length, + 1, + "should have dropdown menu header" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenuHeader + .o_MessagingMenu_tabButton + `).length, + 3, + "should have 3 tab buttons to filter items in the header" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="all"]`).length, + 1, + "1 tab button should be 'All'" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`).length, + 1, + "1 tab button should be 'Chat'" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="channel"]`).length, + 1, + "1 tab button should be 'Channels'" + ); + assert.ok( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="all"] + `).classList.contains('o-active'), + "'all' tab button should be active" + ); + assert.notOk( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="chat"] + `).classList.contains('o-active'), + "'chat' tab button should not be active" + ); + assert.notOk( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="channel"] + `).classList.contains('o-active'), + "'channel' tab button should not be active" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_newMessageButton`).length, + 1, + "should have button to make a new message" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_NotificationList + `).length, + 1, + "should display thread preview list" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_NotificationList_noConversation + `).length, + 1, + "should display no conversation in thread preview list" + ); + + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + assert.doesNotHaveClass( + document.querySelector('.o_MessagingMenu'), + "o-is-open", + "should mark messaging menu as closed" + ); +}); + +QUnit.test('counter is taking into account failure notification', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ + id: 31, + seen_message_id: 11, + }); + // message that is expected to have a failure + this.data['mail.message'].records.push({ + id: 11, // random unique id, will be used to link failure to message + model: 'mail.channel', // expected value to link message to channel + res_id: 31, // id of a random channel + }); + // failure that is expected to be used in the test + this.data['mail.notification'].records.push({ + mail_message_id: 11, // id of the related message + notification_status: 'exception', // necessary value to have a failure + }); + await this.start(); + + assert.containsOnce( + document.body, + '.o_MessagingMenu_counter', + "should display a notification counter next to the messaging menu for one notification" + ); + assert.strictEqual( + document.querySelector('.o_MessagingMenu_counter').textContent, + "1", + "should display a counter of '1' next to the messaging menu" + ); +}); + +QUnit.test('switch tab', async function (assert) { + assert.expect(15); + + await this.start(); + + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="all"]`).length, + 1, + "1 tab button should be 'All'" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`).length, + 1, + "1 tab button should be 'Chat'" + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_tabButton[data-tab-id="channel"]`).length, + 1, + "1 tab button should be 'Channels'" + ); + assert.ok( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="all"] + `).classList.contains('o-active'), + "'all' tab button should be active" + ); + assert.notOk( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="chat"] + `).classList.contains('o-active'), + "'chat' tab button should not be active" + ); + assert.notOk( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="channel"] + `).classList.contains('o-active'), + "'channel' tab button should not be active" + ); + + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_tabButton[data-tab-id="chat"]`).click() + ); + assert.notOk( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="all"] + `).classList.contains('o-active'), + "'all' tab button should become inactive" + ); + assert.ok( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="chat"] + `).classList.contains('o-active'), + "'chat' tab button should not become active" + ); + assert.notOk( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="channel"] + `).classList.contains('o-active'), + "'channel' tab button should stay inactive" + ); + + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_tabButton[data-tab-id="channel"]`).click() + ); + assert.notOk( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="all"] + `).classList.contains('o-active'), + "'all' tab button should stay active" + ); + assert.notOk( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="chat"] + `).classList.contains('o-active'), + "'chat' tab button should become inactive" + ); + assert.ok( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="channel"] + `).classList.contains('o-active'), + "'channel' tab button should become active" + ); + + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_tabButton[data-tab-id="all"]`).click() + ); + assert.ok( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="all"] + `).classList.contains('o-active'), + "'all' tab button should become active" + ); + assert.notOk( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="chat"] + `).classList.contains('o-active'), + "'chat' tab button should stay inactive" + ); + assert.notOk( + document.querySelector(` + .o_MessagingMenu_tabButton[data-tab-id="channel"] + `).classList.contains('o-active'), + "'channel' tab button should become inactive" + ); +}); + +QUnit.test('new message', async function (assert) { + assert.expect(3); + + await this.start({ + hasChatWindow: true, + }); + + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_newMessageButton`).click() + ); + + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow`).length, + 1, + "should have open a chat window" + ); + assert.ok( + document.querySelector(`.o_ChatWindow`).classList.contains('o-new-message'), + "chat window should be for new message" + ); + assert.ok( + document.querySelector(`.o_ChatWindow`).classList.contains('o-focused'), + "chat window should be focused" + ); +}); + +QUnit.test('no new message when discuss is open', async function (assert) { + assert.expect(3); + + await this.start({ + autoOpenDiscuss: true, + hasDiscuss: true, + }); + + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_newMessageButton`).length, + 0, + "should not have 'new message' when discuss is open" + ); + + // simulate closing discuss app + await afterNextRender(() => this.discussWidget.on_detach_callback()); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_newMessageButton`).length, + 1, + "should have 'new message' when discuss is closed" + ); + + // simulate opening discuss app + await afterNextRender(() => this.discussWidget.on_attach_callback()); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_newMessageButton`).length, + 0, + "should not have 'new message' when discuss is open again" + ); +}); + +QUnit.test('channel preview: basic rendering', async function (assert) { + assert.expect(9); + + this.data['res.partner'].records.push({ + id: 7, // random unique id, to link message author + name: "Demo", // random name, will be asserted in the test + }); + // channel that is expected to be found in the test + this.data['mail.channel'].records.push({ + id: 20, // random unique id, will be used to link message to channel + name: "General", // random name, will be asserted in the test + }); + // message that is expected to be displayed in the test + this.data['mail.message'].records.push({ + author_id: 7, // not current partner, will be asserted in the test + body: "<p>test</p>", // random body, will be asserted in the test + channel_ids: [20], // id of related channel + model: 'mail.channel', // necessary to link message to channel + res_id: 20, // id of related channel + }); + await this.start(); + + await afterNextRender(() => document.querySelector(`.o_MessagingMenu_toggler`).click()); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu .o_ThreadPreview + `).length, + 1, + "should have one preview" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview_sidebar + `).length, + 1, + "preview should have a sidebar" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview_content + `).length, + 1, + "preview should have some content" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview_header + `).length, + 1, + "preview should have header in content" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview_header + .o_ThreadPreview_name + `).length, + 1, + "preview should have name in header of content" + ); + assert.strictEqual( + document.querySelector(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview_name + `).textContent, + "General", "preview should have name of channel" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview_content + .o_ThreadPreview_core + `).length, + 1, + "preview should have core in content" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview_core + .o_ThreadPreview_inlineText + `).length, + 1, + "preview should have inline text in core of content" + ); + assert.strictEqual( + document.querySelector(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview_core + .o_ThreadPreview_inlineText + `).textContent.trim(), + "Demo: test", + "preview should have message content as inline text of core content" + ); +}); + +QUnit.test('filtered previews', async function (assert) { + assert.expect(12); + + // chat and channel expected to be found in the menu + this.data['mail.channel'].records.push( + { channel_type: "chat", id: 10 }, + { id: 20 }, + ); + this.data['mail.message'].records.push( + { + channel_ids: [10], // id of related channel + model: 'mail.channel', // to link message to channel + res_id: 10, // id of related channel + }, + { + channel_ids: [20], // id of related channel + model: 'mail.channel', // to link message to channel + res_id: 20, // id of related channel + }, + ); + await this.start(); + + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_dropdownMenu .o_ThreadPreview`).length, + 2, + "should have 2 previews" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "should have preview of chat" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "should have preview of channel" + ); + + await afterNextRender(() => + document.querySelector('.o_MessagingMenu_tabButton[data-tab-id="chat"]').click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_dropdownMenu .o_ThreadPreview`).length, + 1, + "should have one preview" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "should have preview of chat" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).length, + 0, + "should not have preview of channel" + ); + + await afterNextRender(() => + document.querySelector('.o_MessagingMenu_tabButton[data-tab-id="channel"]').click() + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview + `).length, + 1, + "should have one preview" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `).length, + 0, + "should not have preview of chat" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "should have preview of channel" + ); + + await afterNextRender(() => + document.querySelector('.o_MessagingMenu_tabButton[data-tab-id="all"]').click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_MessagingMenu_dropdownMenu .o_ThreadPreview`).length, + 2, + "should have 2 previews" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 10, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "should have preview of chat" + ); + assert.strictEqual( + document.querySelectorAll(` + .o_MessagingMenu_dropdownMenu + .o_ThreadPreview[data-thread-local-id="${ + this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }).localId + }"] + `).length, + 1, + "should have preview of channel" + ); +}); + +QUnit.test('open chat window from preview', async function (assert) { + assert.expect(1); + + // channel expected to be found in the menu, only its existence matters, data are irrelevant + this.data['mail.channel'].records.push({}); + await this.start({ + hasChatWindow: true, + }); + + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_toggler`).click() + ); + await afterNextRender(() => + document.querySelector(`.o_MessagingMenu_dropdownMenu .o_ThreadPreview`).click() + ); + assert.strictEqual( + document.querySelectorAll(`.o_ChatWindow`).length, + 1, + "should have open a chat window" + ); +}); + +QUnit.test('no code injection in message body preview', async function (assert) { + assert.expect(5); + + this.data['mail.channel'].records.push({ id: 11 }); + this.data['mail.message'].records.push({ + body: "<p><em>&shoulnotberaised</em><script>throw new Error('CodeInjectionError');</script></p>", + channel_ids: [11], + }); + await this.start(); + + await afterNextRender(() => { + document.querySelector(`.o_MessagingMenu_toggler`).click(); + }); + assert.containsOnce( + document.body, + '.o_MessagingMenu_dropdownMenu .o_ThreadPreview', + "should display a preview", + ); + assert.containsOnce( + document.body, + '.o_ThreadPreview_core', + "preview should have core in content", + ); + assert.containsOnce( + document.body, + '.o_ThreadPreview_inlineText', + "preview should have inline text in core of content", + ); + assert.strictEqual( + document.querySelector('.o_ThreadPreview_inlineText') + .textContent.replace(/\s/g, ""), + "You:&shoulnotberaisedthrownewError('CodeInjectionError');", + "should display correct uninjected last message inline content" + ); + assert.containsNone( + document.querySelector('.o_ThreadPreview_inlineText'), + 'script', + "last message inline content should not have any code injection" + ); +}); + +QUnit.test('no code injection in message body preview from sanitized message', async function (assert) { + assert.expect(5); + + this.data['mail.channel'].records.push({ id: 11 }); + this.data['mail.message'].records.push({ + body: "<p><em>&shoulnotberaised</em><script>throw new Error('CodeInjectionError');</script></p>", + channel_ids: [11], + }); + await this.start(); + + await afterNextRender(() => { + document.querySelector(`.o_MessagingMenu_toggler`).click(); + }); + assert.containsOnce( + document.body, + '.o_MessagingMenu_dropdownMenu .o_ThreadPreview', + "should display a preview", + ); + assert.containsOnce( + document.body, + '.o_ThreadPreview_core', + "preview should have core in content", + ); + assert.containsOnce( + document.body, + '.o_ThreadPreview_inlineText', + "preview should have inline text in core of content", + ); + assert.strictEqual( + document.querySelector('.o_ThreadPreview_inlineText') + .textContent.replace(/\s/g, ""), + "You:<em>&shoulnotberaised</em><script>thrownewError('CodeInjectionError');</script>", + "should display correct uninjected last message inline content" + ); + assert.containsNone( + document.querySelector('.o_ThreadPreview_inlineText'), + 'script', + "last message inline content should not have any code injection" + ); +}); + +QUnit.test('<br/> tags in message body preview are transformed in spaces', async function (assert) { + assert.expect(4); + + this.data['mail.channel'].records.push({ id: 11 }); + this.data['mail.message'].records.push({ + body: "<p>a<br/>b<br>c<br />d<br ></p>", + channel_ids: [11], + }); + await this.start(); + + await afterNextRender(() => { + document.querySelector(`.o_MessagingMenu_toggler`).click(); + }); + assert.containsOnce( + document.body, + '.o_MessagingMenu_dropdownMenu .o_ThreadPreview', + "should display a preview", + ); + assert.containsOnce( + document.body, + '.o_ThreadPreview_core', + "preview should have core in content", + ); + assert.containsOnce( + document.body, + '.o_ThreadPreview_inlineText', + "preview should have inline text in core of content", + ); + assert.strictEqual( + document.querySelector('.o_ThreadPreview_inlineText').textContent, + "You: a b c d", + "should display correct last message inline content with brs replaced by spaces" + ); +}); + +QUnit.test('rendering with OdooBot has a request (default)', async function (assert) { + assert.expect(4); + + await this.start({ + env: { + browser: { + Notification: { + permission: 'default', + }, + }, + }, + }); + + assert.ok( + document.querySelector('.o_MessagingMenu_counter'), + "should display a notification counter next to the messaging menu for OdooBot request" + ); + assert.strictEqual( + document.querySelector('.o_MessagingMenu_counter').textContent, + "1", + "should display a counter of '1' next to the messaging menu" + ); + + await afterNextRender(() => + document.querySelector('.o_MessagingMenu_toggler').click() + ); + assert.containsOnce( + document.body, + '.o_NotificationRequest', + "should display a notification in the messaging menu" + ); + assert.strictEqual( + document.querySelector('.o_NotificationRequest_name').textContent.trim(), + 'OdooBot has a request', + "notification should display that OdooBot has a request" + ); +}); + +QUnit.test('rendering without OdooBot has a request (denied)', async function (assert) { + assert.expect(2); + + await this.start({ + env: { + browser: { + Notification: { + permission: 'denied', + }, + }, + }, + }); + + assert.containsNone( + document.body, + '.o_MessagingMenu_counter', + "should not display a notification counter next to the messaging menu" + ); + + await afterNextRender(() => + document.querySelector('.o_MessagingMenu_toggler').click() + ); + assert.containsNone( + document.body, + '.o_NotificationRequest', + "should display no notification in the messaging menu" + ); +}); + +QUnit.test('rendering without OdooBot has a request (accepted)', async function (assert) { + assert.expect(2); + + await this.start({ + env: { + browser: { + Notification: { + permission: 'granted', + }, + }, + }, + }); + + assert.containsNone( + document.body, + '.o_MessagingMenu_counter', + "should not display a notification counter next to the messaging menu" + ); + + await afterNextRender(() => + document.querySelector('.o_MessagingMenu_toggler').click() + ); + assert.containsNone( + document.body, + '.o_NotificationRequest', + "should display no notification in the messaging menu" + ); +}); + +QUnit.test('respond to notification prompt (denied)', async function (assert) { + assert.expect(3); + + await this.start({ + env: { + browser: { + Notification: { + permission: 'default', + async requestPermission() { + this.permission = 'denied'; + return this.permission; + }, + }, + }, + }, + }); + + await afterNextRender(() => + document.querySelector('.o_MessagingMenu_toggler').click() + ); + await afterNextRender(() => + document.querySelector('.o_NotificationRequest').click() + ); + assert.containsOnce( + document.body, + '.toast .o_notification_content', + "should display a toast notification with the deny confirmation" + ); + assert.containsNone( + document.body, + '.o_MessagingMenu_counter', + "should not display a notification counter next to the messaging menu" + ); + + await afterNextRender(() => + document.querySelector('.o_MessagingMenu_toggler').click() + ); + assert.containsNone( + document.body, + '.o_NotificationRequest', + "should display no notification in the messaging menu" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js new file mode 100644 index 00000000..45b53e87 --- /dev/null +++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js @@ -0,0 +1,61 @@ +odoo.define('mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); + +const { Component } = owl; + +class MobileMessagingNavbar extends Component { + + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps({ + compareDepth: { + tabs: 2, + }, + }); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClick(ev) { + this.trigger('o-select-mobile-messaging-navbar-tab', { + tabId: ev.currentTarget.dataset.tabId, + }); + } + +} + +Object.assign(MobileMessagingNavbar, { + defaultProps: { + tabs: [], + }, + props: { + activeTabId: String, + tabs: { + type: Array, + element: { + type: Object, + shape: { + icon: { + type: String, + optional: true, + }, + id: String, + label: String, + }, + }, + }, + }, + template: 'mail.MobileMessagingNavbar', +}); + +return MobileMessagingNavbar; + +}); diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss new file mode 100644 index 00000000..df0611f9 --- /dev/null +++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.scss @@ -0,0 +1,43 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_MobileMessagingNavbar { + display: flex; + flex: 0 0 auto; + z-index: 1; +} + +.o_MobileMessagingNavbar_tab { + display: flex; + flex-flow: column; + align-items: center; + flex: 1 1 0; + padding: 8px; +} + +.o_MobileMessagingNavbar_tabIcon { + margin-bottom: 4%; + font-size: 1.3em; +} + +.o_MobileMessagingNavbar_tabLabel { + font-size: 0.8em; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_MobileMessagingNavbar { + background-color: white; + box-shadow: 0 0 8px gray('400'); +} + +.o_MobileMessagingNavbar_tab { + box-shadow: 1px 0 0 gray('400'); + + &.o-active { + color: $o-brand-primary; + } +} diff --git a/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml new file mode 100644 index 00000000..d60611bf --- /dev/null +++ b/addons/mail/static/src/components/mobile_messaging_navbar/mobile_messaging_navbar.xml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.MobileMessagingNavbar" owl="1"> + <div class="o_MobileMessagingNavbar"> + <t t-foreach="props.tabs" t-as="tab" t-key="tab.id"> + <div class="o_MobileMessagingNavbar_tab" t-att-class="{ 'o-active': props.activeTabId === tab.id }" t-on-click="_onClick" t-att-data-tab-id="tab.id"> + <t t-if="tab.icon"> + <span class="o_MobileMessagingNavbar_tabIcon" t-att-class="tab.icon"/> + </t> + <span class="o_MobileMessagingNavbar_tabLabel"><t t-esc="tab.label"/></span> + </div> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.js b/addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.js new file mode 100644 index 00000000..c96bd902 --- /dev/null +++ b/addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.js @@ -0,0 +1,94 @@ +odoo.define('mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const components = { + Dialog: require('web.OwlDialog'), +}; + +const { Component } = owl; +const { useRef } = owl.hooks; + +class ModerationBanDialog extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps({ + compareDepth: { + messageLocalIds: 1, + }, + }); + useStore(props => { + const messages = props.messageLocalIds.map(localId => + this.env.models['mail.message'].get(localId) + ); + return { + messages: messages.map(message => message ? message.__state : undefined), + }; + }, { + compareDepth: { + messages: 1, + }, + }); + // to manually trigger the dialog close event + this._dialogRef = useRef('dialog'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.message[]} + */ + get messages() { + return this.props.messageLocalIds.map(localId => this.env.models['mail.message'].get(localId)); + } + + /** + * @returns {string} + */ + get CONFIRMATION() { + return this.env._t("Confirmation"); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onClickBan() { + this._dialogRef.comp._close(); + this.env.models['mail.message'].moderate(this.messages, 'ban'); + } + + /** + * @private + */ + _onClickCancel() { + this._dialogRef.comp._close(); + } + +} + +Object.assign(ModerationBanDialog, { + components, + props: { + messageLocalIds: { + type: Array, + element: String, + }, + }, + template: 'mail.ModerationBanDialog', +}); + +return ModerationBanDialog; + +}); diff --git a/addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.xml b/addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.xml new file mode 100644 index 00000000..1e29f731 --- /dev/null +++ b/addons/mail/static/src/components/moderation_ban_dialog/moderation_ban_dialog.xml @@ -0,0 +1,23 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + <t t-name="mail.ModerationBanDialog" owl="1"> + <Dialog contentClass="'o_ModerationBanDialog'" title="CONFIRMATION" size="'medium'" t-ref="dialog"> + <t t-if="messages.length === 1"> + <p>You are going to ban the following user:</p> + </t> + <t t-else=""> + <p>You are going to ban the following users:</p> + </t> + <ul class="my-5"> + <t t-foreach="messages" t-as="message" t-key="message.localId"> + <li t-esc="message.email_from"/> + </t> + </ul> + <p>Do you confirm the action?</p> + <t t-set-slot="buttons"> + <button class="o-ban btn btn-primary" t-on-click="_onClickBan">Ban</button> + <button class="o-cancel btn btn-secondary" t-on-click="_onClickCancel">Cancel</button> + </t> + </Dialog> + </t> +</templates> diff --git a/addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js b/addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js new file mode 100644 index 00000000..4c444683 --- /dev/null +++ b/addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js @@ -0,0 +1,109 @@ +odoo.define('mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const components = { + Dialog: require('web.OwlDialog'), +}; + +const { Component } = owl; +const { useRef } = owl.hooks; + +class ModerationDiscardDialog extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps({ + compareDepth: { + messageLocalIds: 1, + }, + }); + useStore(props => { + const messages = props.messageLocalIds.map(localId => + this.env.models['mail.message'].get(localId) + ); + return { + messages: messages.map(message => message ? message.__state : undefined), + }; + }, { + compareDepth: { + messages: 1, + }, + }); + // to manually trigger the dialog close event + this._dialogRef = useRef('dialog'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {string} + */ + getBody() { + if (this.messages.length === 1) { + return this.env._t("You are going to discard 1 message."); + } + return _.str.sprintf( + this.env._t("You are going to discard %s messages."), + this.messages.length + ); + } + + /** + * @returns {mail.message[]} + */ + get messages() { + return this.props.messageLocalIds.map(localId => + this.env.models['mail.message'].get(localId) + ); + } + + /** + * @returns {string} + */ + getTitle() { + return this.env._t("Confirmation"); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onClickCancel() { + this._dialogRef.comp._close(); + } + + /** + * @private + */ + _onClickDiscard() { + this._dialogRef.comp._close(); + this.env.models['mail.message'].moderate(this.messages, 'discard'); + } + +} + +Object.assign(ModerationDiscardDialog, { + components, + props: { + messageLocalIds: { + type: Array, + element: String, + }, + }, + template: 'mail.ModerationDiscardDialog', +}); + +return ModerationDiscardDialog; + +}); diff --git a/addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.xml b/addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.xml new file mode 100644 index 00000000..58dbc14d --- /dev/null +++ b/addons/mail/static/src/components/moderation_discard_dialog/moderation_discard_dialog.xml @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + <t t-name="mail.ModerationDiscardDialog" owl="1"> + <Dialog contentClass="'o_ModerationDiscardDialog'" title="getTitle()" size="'medium'" t-ref="dialog"> + <p t-esc="getBody()"/> + <p>Do you confirm the action?</p> + <t t-set-slot="buttons"> + <button class="o-discard btn btn-primary" t-on-click="_onClickDiscard">Discard</button> + <button class="o-cancel btn btn-secondary" t-on-click="_onClickCancel">Cancel</button> + </t> + </Dialog> + </t> +</templates> diff --git a/addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js b/addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js new file mode 100644 index 00000000..44b82bc6 --- /dev/null +++ b/addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js @@ -0,0 +1,104 @@ +odoo.define('mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const components = { + Dialog: require('web.OwlDialog'), +}; + +const { Component, useState } = owl; +const { useRef } = owl.hooks; + +class ModerationRejectDialog extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps({ + compareDepth: { + messageLocalIds: 1, + }, + }); + this.state = useState({ + title: this.env._t("Message Rejected"), + comment: this.env._t("Your message was rejected by moderator."), + }); + useStore(props => { + const messages = props.messageLocalIds.map(localId => + this.env.models['mail.message'].get(localId) + ); + return { + messages: messages.map(message => message ? message.__state : undefined), + }; + }, { + compareDepth: { + messages: 1, + }, + }); + // to manually trigger the dialog close event + this._dialogRef = useRef('dialog'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.message[]} + */ + get messages() { + return this.props.messageLocalIds.map(localId => + this.env.models['mail.message'].get(localId) + ); + } + + /** + * @returns {string} + */ + get SEND_EXPLANATION_TO_AUTHOR() { + return this.env._t("Send explanation to author"); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onClickCancel() { + this._dialogRef.comp._close(); + } + + /** + * @private + */ + _onClickReject() { + this._dialogRef.comp._close(); + const kwargs = { + title: this.state.title, + comment: this.state.comment, + }; + this.env.models['mail.message'].moderate(this.messages, 'reject', kwargs); + } + +} + +Object.assign(ModerationRejectDialog, { + components, + props: { + messageLocalIds: { + type: Array, + element: String, + }, + }, + template: 'mail.ModerationRejectDialog', +}); + +return ModerationRejectDialog; + +}); diff --git a/addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.xml b/addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.xml new file mode 100644 index 00000000..182ffc7e --- /dev/null +++ b/addons/mail/static/src/components/moderation_reject_dialog/moderation_reject_dialog.xml @@ -0,0 +1,13 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + <t t-name="mail.ModerationRejectDialog" owl="1"> + <Dialog contentClass="'o_ModerationRejectDialog'" title="SEND_EXPLANATION_TO_AUTHOR" size="'medium'" t-ref="dialog"> + <input class="o_ModerationRejectDialog_title form-control" type="text" placeholder="Subject" autofocus="autofocus" t-model="state.title"/> + <textarea class="o_ModerationRejectDialog_comment form-control mt16" placeholder="Mail Body" t-model="state.comment"/> + <t t-set-slot="buttons"> + <button class="o-reject btn btn-primary" t-on-click="_onClickReject">Reject</button> + <button class="o-cancel btn btn-secondary" t-on-click="_onClickCancel">Cancel</button> + </t> + </Dialog> + </t> +</templates> diff --git a/addons/mail/static/src/components/notification_alert/notification_alert.js b/addons/mail/static/src/components/notification_alert/notification_alert.js new file mode 100644 index 00000000..7ef9e3b1 --- /dev/null +++ b/addons/mail/static/src/components/notification_alert/notification_alert.js @@ -0,0 +1,54 @@ +odoo.define('mail/static/src/components/notification_alert/notification_alert.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class NotificationAlert extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const isMessagingInitialized = this.env.isMessagingInitialized(); + return { + isMessagingInitialized, + isNotificationBlocked: this.isNotificationBlocked, + }; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {boolean} + */ + get isNotificationBlocked() { + if (!this.env.isMessagingInitialized()) { + return false; + } + const windowNotification = this.env.browser.Notification; + return ( + windowNotification && + windowNotification.permission !== "granted" && + !this.env.messaging.isNotificationPermissionDefault() + ); + } + +} + +Object.assign(NotificationAlert, { + props: {}, + template: 'mail.NotificationAlert', +}); + +return NotificationAlert; + +}); diff --git a/addons/mail/static/src/components/notification_alert/notification_alert.xml b/addons/mail/static/src/components/notification_alert/notification_alert.xml new file mode 100644 index 00000000..3d80da13 --- /dev/null +++ b/addons/mail/static/src/components/notification_alert/notification_alert.xml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.NotificationAlert" owl="1"> + <div class="o_NotificationAlert"> + <t t-if="env.isMessagingInitialized()"> + <center t-if="isNotificationBlocked" class="o_notification_alert alert alert-primary"> + Odoo Push notifications have been blocked. Go to your browser settings to allow them. + </center> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/notification_group/notification_group.js b/addons/mail/static/src/components/notification_group/notification_group.js new file mode 100644 index 00000000..17936986 --- /dev/null +++ b/addons/mail/static/src/components/notification_group/notification_group.js @@ -0,0 +1,93 @@ +odoo.define('mail/static/src/components/notification_group/notification_group.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class NotificationGroup extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const group = this.env.models['mail.notification_group'].get(props.notificationGroupLocalId); + return { + group: group ? group.__state : undefined, + }; + }); + /** + * Reference of the "mark as read" button. Useful to disable the + * top-level click handler when clicking on this specific button. + */ + this._markAsReadRef = useRef('markAsRead'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.notification_group} + */ + get group() { + return this.env.models['mail.notification_group'].get(this.props.notificationGroupLocalId); + } + + /** + * @returns {string|undefined} + */ + image() { + if (this.group.notification_type === 'email') { + return '/mail/static/src/img/smiley/mailfailure.jpg'; + } + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClick(ev) { + const markAsRead = this._markAsReadRef.el; + if (markAsRead && markAsRead.contains(ev.target)) { + // handled in `_onClickMarkAsRead` + return; + } + this.group.openDocuments(); + if (!this.env.messaging.device.isMobile) { + this.env.messaging.messagingMenu.close(); + } + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickMarkAsRead(ev) { + this.group.openCancelAction(); + if (!this.env.messaging.device.isMobile) { + this.env.messaging.messagingMenu.close(); + } + } + +} + +Object.assign(NotificationGroup, { + props: { + notificationGroupLocalId: String, + }, + template: 'mail.NotificationGroup', +}); + +return NotificationGroup; + +}); diff --git a/addons/mail/static/src/components/notification_group/notification_group.scss b/addons/mail/static/src/components/notification_group/notification_group.scss new file mode 100644 index 00000000..88a67002 --- /dev/null +++ b/addons/mail/static/src/components/notification_group/notification_group.scss @@ -0,0 +1,93 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_NotificationGroup { + @include o-mail-notification-list-item-layout(); + + &:hover .o_NotificationGroup_markAsRead { + // TODO also mixin this + // task-2258605 + opacity: 1; + } +} + +.o_NotificationGroup_content { + @include o-mail-notification-list-item-content-layout(); +} + +.o_NotificationGroup_core { + @include o-mail-notification-list-item-core-layout(); +} + +.o_NotificationGroup_coreItem { + @include o-mail-notification-list-item-core-item-layout(); +} + +.o_NotificationGroup_counter { + @include o-mail-notification-list-item-counter-layout(); +} + +.o_NotificationGroup_date { + @include o-mail-notification-list-item-date-layout(); +} + +.o_NotificationGroup_header { + @include o-mail-notification-list-item-header-layout(); +} + +.o_NotificationGroup_image { + @include o-mail-notification-list-item-image-layout(); +} + +.o_NotificationGroup_imageContainer { + @include o-mail-notification-list-item-image-container-layout(); +} + +.o_NotificationGroup_inlineText { + @include o-mail-notification-list-item-inline-text-layout(); +} + +.o_NotificationGroup_markAsRead { + @include o-mail-notification-list-item-mark-as-read-layout(); +} + +.o_NotificationGroup_name { + @include o-mail-notification-list-item-name-layout(); +} + +.o_NotificationGroup_sidebar { + @include o-mail-notification-list-item-sidebar-layout(); +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_NotificationGroup { + @include o-mail-notification-list-item-style(); +} + +.o_NotificationGroup_core { + @include o-mail-notification-list-item-core-style(); +} + +.o_NotificationGroup_counter { + @include o-mail-notification-list-item-bold-style(); +} + +.o_NotificationGroup_date { + @include o-mail-notification-list-item-date-style(); +} + +.o_NotificationGroup_image { + @include o-mail-notification-list-item-image-style(); +} + +.o_NotificationGroup_markAsRead { + @include o-mail-notification-list-item-mark-as-read-style(); +} + +.o_NotificationGroup_name { + @include o-mail-notification-list-item-bold-style(); +} diff --git a/addons/mail/static/src/components/notification_group/notification_group.xml b/addons/mail/static/src/components/notification_group/notification_group.xml new file mode 100644 index 00000000..c2f3dceb --- /dev/null +++ b/addons/mail/static/src/components/notification_group/notification_group.xml @@ -0,0 +1,39 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.NotificationGroup" owl="1"> + <div class="o_NotificationGroup" t-on-click="_onClick"> + <t t-if="group"> + <div class="o_NotificationGroup_sidebar"> + <div class="o_NotificationGroup_imageContainer o_NotificationGroup_sidebarItem"> + <img class="o_NotificationGroup_image rounded-circle" t-att-src="image()" alt="Message delivery failure image"/> + </div> + </div> + <div class="o_NotificationGroup_content"> + <div class="o_NotificationGroup_header"> + <span class="o_NotificationGroup_name"> + <t t-esc="group.res_model_name"/> + </span> + <span class="o_NotificationGroup_counter"> + (<t t-esc="group.notifications.length"/>) + </span> + <span class="o-autogrow"/> + <span class="o_NotificationGroup_date"> + <t t-esc="group.date.fromNow()"/> + </span> + </div> + <div class="o_NotificationGroup_core"> + <span class="o_NotificationGroup_coreItem o_NotificationGroup_inlineText"> + <t t-if="group.notification_type === 'email'"> + An error occurred when sending an email. + </t> + </span> + <span class="o-autogrow"/> + <span class="o_NotificationGroup_coreItem o_NotificationGroup_markAsRead fa fa-check" title="Discard message delivery failures" t-on-click="_onClickMarkAsRead" t-ref="markAsRead"/> + </div> + </div> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/notification_list/notification_list.js b/addons/mail/static/src/components/notification_list/notification_list.js new file mode 100644 index 00000000..33737ba4 --- /dev/null +++ b/addons/mail/static/src/components/notification_list/notification_list.js @@ -0,0 +1,226 @@ +odoo.define('mail/static/src/components/notification_list/notification_list.js', function (require) { +'use strict'; + +const components = { + NotificationGroup: require('mail/static/src/components/notification_group/notification_group.js'), + NotificationRequest: require('mail/static/src/components/notification_request/notification_request.js'), + ThreadNeedactionPreview: require('mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js'), + ThreadPreview: require('mail/static/src/components/thread_preview/thread_preview.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class NotificationList extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + this.storeProps = useStore((...args) => this._useStoreSelector(...args), { + compareDepth: { + // list + notification object created in useStore + notifications: 2, + }, + }); + } + + mounted() { + this._loadPreviews(); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {Object[]} + */ + get notifications() { + const { notifications } = this.storeProps; + return notifications; + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * Load previews of given thread. Basically consists of fetching all missing + * last messages of each thread. + * + * @private + */ + async _loadPreviews() { + const threads = this.notifications + .filter(notification => notification.thread && notification.thread.exists()) + .map(notification => notification.thread); + this.env.models['mail.thread'].loadPreviews(threads); + } + + /** + * @private + * @param {Object} props + */ + _useStoreSelector(props) { + const threads = this._useStoreSelectorThreads(props); + let threadNeedactionNotifications = []; + if (props.filter === 'all') { + // threads with needactions + threadNeedactionNotifications = this.env.models['mail.thread'] + .all(t => t.model !== 'mail.box' && t.needactionMessagesAsOriginThread.length > 0) + .sort((t1, t2) => { + if (t1.needactionMessagesAsOriginThread.length > 0 && t2.needactionMessagesAsOriginThread.length === 0) { + return -1; + } + if (t1.needactionMessagesAsOriginThread.length === 0 && t2.needactionMessagesAsOriginThread.length > 0) { + return 1; + } + if (t1.lastNeedactionMessageAsOriginThread && t2.lastNeedactionMessageAsOriginThread) { + return t1.lastNeedactionMessageAsOriginThread.date.isBefore(t2.lastNeedactionMessageAsOriginThread.date) ? 1 : -1; + } + if (t1.lastNeedactionMessageAsOriginThread) { + return -1; + } + if (t2.lastNeedactionMessageAsOriginThread) { + return 1; + } + return t1.id < t2.id ? -1 : 1; + }) + .map(thread => { + return { + thread, + type: 'thread_needaction', + uniqueId: thread.localId + '_needaction', + }; + }); + } + // thread notifications + const threadNotifications = threads + .sort((t1, t2) => { + if (t1.localMessageUnreadCounter > 0 && t2.localMessageUnreadCounter === 0) { + return -1; + } + if (t1.localMessageUnreadCounter === 0 && t2.localMessageUnreadCounter > 0) { + return 1; + } + if (t1.lastMessage && t2.lastMessage) { + return t1.lastMessage.date.isBefore(t2.lastMessage.date) ? 1 : -1; + } + if (t1.lastMessage) { + return -1; + } + if (t2.lastMessage) { + return 1; + } + return t1.id < t2.id ? -1 : 1; + }) + .map(thread => { + return { + thread, + type: 'thread', + uniqueId: thread.localId, + }; + }); + let notifications = threadNeedactionNotifications.concat(threadNotifications); + if (props.filter === 'all') { + const notificationGroups = this.env.messaging.notificationGroupManager.groups; + notifications = Object.values(notificationGroups) + .sort((group1, group2) => + group1.date.isAfter(group2.date) ? -1 : 1 + ).map(notificationGroup => { + return { + notificationGroup, + uniqueId: notificationGroup.localId, + }; + }).concat(notifications); + } + // native notification request + if (props.filter === 'all' && this.env.messaging.isNotificationPermissionDefault()) { + notifications.unshift({ + type: 'odoobotRequest', + uniqueId: 'odoobotRequest', + }); + } + return { + isDeviceMobile: this.env.messaging.device.isMobile, + notifications, + }; + } + + /** + * @private + * @param {Object} props + * @throws {Error} in case `props.filter` is not supported + * @returns {mail.thread[]} + */ + _useStoreSelectorThreads(props) { + if (props.filter === 'mailbox') { + return this.env.models['mail.thread'] + .all(thread => thread.isPinned && thread.model === 'mail.box') + .sort((mailbox1, mailbox2) => { + if (mailbox1 === this.env.messaging.inbox) { + return -1; + } + if (mailbox2 === this.env.messaging.inbox) { + return 1; + } + if (mailbox1 === this.env.messaging.starred) { + return -1; + } + if (mailbox2 === this.env.messaging.starred) { + return 1; + } + const mailbox1Name = mailbox1.displayName; + const mailbox2Name = mailbox2.displayName; + mailbox1Name < mailbox2Name ? -1 : 1; + }); + } else if (props.filter === 'channel') { + return this.env.models['mail.thread'] + .all(thread => + thread.channel_type === 'channel' && + thread.isPinned && + thread.model === 'mail.channel' + ) + .sort((c1, c2) => c1.displayName < c2.displayName ? -1 : 1); + } else if (props.filter === 'chat') { + return this.env.models['mail.thread'] + .all(thread => + thread.isChatChannel && + thread.isPinned && + thread.model === 'mail.channel' + ) + .sort((c1, c2) => c1.displayName < c2.displayName ? -1 : 1); + } else if (props.filter === 'all') { + // "All" filter is for channels and chats + return this.env.models['mail.thread'] + .all(thread => thread.isPinned && thread.model === 'mail.channel') + .sort((c1, c2) => c1.displayName < c2.displayName ? -1 : 1); + } else { + throw new Error(`Unsupported filter ${props.filter}`); + } + } + +} + +Object.assign(NotificationList, { + _allowedFilters: ['all', 'mailbox', 'channel', 'chat'], + components, + defaultProps: { + filter: 'all', + }, + props: { + filter: { + type: String, + validate: prop => NotificationList._allowedFilters.includes(prop), + }, + }, + template: 'mail.NotificationList', +}); + +return NotificationList; + +}); diff --git a/addons/mail/static/src/components/notification_list/notification_list.scss b/addons/mail/static/src/components/notification_list/notification_list.scss new file mode 100644 index 00000000..18e31149 --- /dev/null +++ b/addons/mail/static/src/components/notification_list/notification_list.scss @@ -0,0 +1,37 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + + .o_NotificationList { + display: flex; + flex-flow: column; + overflow: auto; + + &.o-empty { + justify-content: center; + } +} + +.o_NotificationList_noConversation { + display: flex; + align-items: center; + justify-content: center; + padding: map-get($spacers, 4) map-get($spacers, 2); +} + +.o_NotificationList_separator { + flex: 0 0 auto; + width: map-get($sizes, 100); +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_NotificationList_separator { + border-bottom: $border-width solid $border-color; +} + +.o_NotificationList_noConversation { + color: $text-muted; +} diff --git a/addons/mail/static/src/components/notification_list/notification_list.xml b/addons/mail/static/src/components/notification_list/notification_list.xml new file mode 100644 index 00000000..e3bfbf38 --- /dev/null +++ b/addons/mail/static/src/components/notification_list/notification_list.xml @@ -0,0 +1,47 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.NotificationList" owl="1"> + <div class="o_NotificationList" t-att-class="{ 'o-empty': notifications.length === 0 }"> + <t t-if="notifications.length === 0"> + <div class="o_NotificationList_noConversation"> + No conversation yet... + </div> + </t> + <t t-else=""> + <t t-foreach="notifications" t-as="notification" t-key="notification.uniqueId"> + <t t-if="notification.type === 'thread' and notification.thread"> + <ThreadPreview + class="o_NotificationList_preview" + t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" + threadLocalId="notification.thread.localId" + /> + </t> + <t t-if="notification.type === 'thread_needaction' and notification.thread"> + <ThreadNeedactionPreview + class="o_NotificationList_preview" + t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" + threadLocalId="notification.thread.localId" + /> + </t> + <t t-if="notification.notificationGroup"> + <NotificationGroup + class="o_NotificationList_group" + notificationGroupLocalId="notification.notificationGroup.localId" + /> + </t> + <t t-if="notification.type === 'odoobotRequest'"> + <NotificationRequest + class="o_NotificationList_notificationRequest" + t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" + /> + </t> + <t t-if="!notification_last"> + <div class="o_NotificationList_separator"/> + </t> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/notification_list/notification_list_item.scss b/addons/mail/static/src/components/notification_list/notification_list_item.scss new file mode 100644 index 00000000..af98a9fb --- /dev/null +++ b/addons/mail/static/src/components/notification_list/notification_list_item.scss @@ -0,0 +1,179 @@ +// ----------------------------------------------------------------------------- +// Layout +// ----------------------------------------------------------------------------- + +@mixin o-mail-notification-list-item-layout { + display: flex; + flex: 0 0 auto; // Without this, Safari shrinks parent regardless of child content + align-items: center; + padding: map-get($spacers, 1); + + &.o-mobile { + padding: map-get($spacers, 2); + } +} + +@mixin o-mail-notification-list-item-content-layout { + display: flex; + flex-flow: column; + flex: 1 1 auto; + align-self: flex-start; + min-width: 0; // needed for flex to work correctly + margin: map-get($spacers, 2); +} + +@mixin o-mail-notification-list-item-core-layout { + display: flex; +} + +@mixin o-mail-notification-list-item-core-item-layout { + margin: map-get($spacers, 0) map-get($spacers, 2); + + &:first-child { + margin-inline-start: map-get($spacers, 0); + } + + &:last-child { + margin-inline-end: map-get($spacers, 0); + } +} + +@mixin o-mail-notification-list-item-counter-layout() { + margin: map-get($spacers, 0) map-get($spacers, 2); +} + +@mixin o-mail-notification-list-item-date-layout() { + flex: 0 0 auto; +} + +@mixin o-mail-notification-list-item-header-layout { + display: flex; + margin-bottom: map-get($spacers, 1); +} + +@mixin o-mail-notification-list-item-image-layout { + width: map-get($sizes, 100); + height: map-get($sizes, 100); +} + +@mixin o-mail-notification-list-item-image-container-layout { + position: relative; + width: 40px; + height: 40px; +} + +@mixin o-mail-notification-list-item-inline-text-layout { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &.o-empty::before { + content: '\00a0'; // keep line-height as if it had content + } +} + +@mixin o-mail-notification-list-item-mark-as-read-layout() { + display: flex; + flex: 0 0 auto; +} + +@mixin o-mail-notification-list-item-name-layout { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + + &.o-mobile { + font-size: 1.1em; + } +} + +@mixin o-mail-notification-list-item-partner-im-status-icon-layout { + @include o-position-absolute($bottom: 0, $right: 0); + display: flex; + align-items: center; + justify-content: center; +} + +@mixin o-mail-notification-list-item-sidebar-layout { + margin: map-get($spacers, 1); +} + +// ----------------------------------------------------------------------------- +// Style +// ----------------------------------------------------------------------------- + +$o-mail-notification-list-item-background-color: $white !default; +$o-mail-notification-list-item-hover-background-color: + darken($o-mail-notification-list-item-background-color, 7%) !default; + +$o-mail-notification-list-item-muted-background-color: gray('100') !default; +$o-mail-notification-list-item-muted-hover-background-color: + darken($o-mail-notification-list-item-muted-background-color, 7%) !default; + +@mixin o-mail-notification-list-item-style { + cursor: pointer; + user-select: none; + background-color: $o-mail-notification-list-item-background-color; + + &:hover { + background-color: $o-mail-notification-list-item-hover-background-color; + } + + &.o-muted { + background-color: $o-mail-notification-list-item-muted-background-color; + + &:hover { + background-color: $o-mail-notification-list-item-muted-hover-background-color; + } + } +} + +@mixin o-mail-notification-list-item-bold-style { + font-weight: bold; + + &.o-muted { + font-weight: initial; + } +} + +@mixin o-mail-notification-list-item-core-style { + color: gray('500'); +} + +@mixin o-mail-notification-list-item-date-style() { + @include o-mail-notification-list-item-bold-style(); + font-size: x-small; + color: $o-brand-primary; +} + +@mixin o-mail-notification-list-item-image-style { + object-fit: cover; +} + +@mixin o-mail-notification-list-item-mark-as-read-style() { + opacity: 0; + + &:hover { + color: gray('600'); + } +} + +@mixin o-mail-notification-list-item-hover-partner-im-status-icon-style { + color: $o-mail-notification-list-item-hover-background-color; +} + +@mixin o-mail-notification-list-item-muted-hover-partner-im-status-icon-style { + color: $o-mail-notification-list-item-muted-hover-background-color; +} + +@mixin o-mail-notification-list-item-partner-im-status-icon-style { + color: $o-mail-notification-list-item-background-color; + + &:not(.o-mobile) { + font-size: x-small; + } + + &.o-muted { + color: $o-mail-notification-list-item-muted-background-color; + } +} diff --git a/addons/mail/static/src/components/notification_list/notification_list_notification_group_tests.js b/addons/mail/static/src/components/notification_list/notification_list_notification_group_tests.js new file mode 100644 index 00000000..223ce363 --- /dev/null +++ b/addons/mail/static/src/components/notification_list/notification_list_notification_group_tests.js @@ -0,0 +1,546 @@ +odoo.define('mail/static/src/components/notification_list/notification_list_notification_group_tests.js', function (require) { +'use strict'; + +const components = { + NotificationList: require('mail/static/src/components/notification_list/notification_list.js'), +}; + +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const Bus = require('web.Bus'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('notification_list', {}, function () { +QUnit.module('notification_list_notification_group_tests.js', { + beforeEach() { + beforeEach(this); + + /** + * @param {Object} param0 + * @param {string} [param0.filter='all'] + */ + this.createNotificationListComponent = async ({ filter = 'all' } = {}) => { + await createRootComponent(this, components.NotificationList, { + props: { filter }, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('notification group basic layout', async function (assert) { + assert.expect(10); + + // message that is expected to have a failure + this.data['mail.message'].records.push({ + id: 11, // random unique id, will be used to link failure to message + message_type: 'email', // message must be email (goal of the test) + model: 'mail.channel', // expected value to link message to channel + res_id: 31, // id of a random channel + res_model_name: "Channel", // random res model name, will be asserted in the test + }); + // failure that is expected to be used in the test + this.data['mail.notification'].records.push({ + mail_message_id: 11, // id of the related message + notification_status: 'exception', // necessary value to have a failure + notification_type: 'email', // expected failure type for email message + }); + await this.start(); + await this.createNotificationListComponent(); + assert.containsOnce( + document.body, + '.o_NotificationGroup', + "should have 1 notification group" + ); + assert.containsOnce( + document.body, + '.o_NotificationGroup_name', + "should have 1 group name" + ); + assert.strictEqual( + document.querySelector('.o_NotificationGroup_name').textContent, + "Channel", + "should have model name as group name" + ); + assert.containsOnce( + document.body, + '.o_NotificationGroup_counter', + "should have 1 group counter" + ); + assert.strictEqual( + document.querySelector('.o_NotificationGroup_counter').textContent.trim(), + "(1)", + "should have only 1 notification in the group" + ); + assert.containsOnce( + document.body, + '.o_NotificationGroup_date', + "should have 1 group date" + ); + assert.strictEqual( + document.querySelector('.o_NotificationGroup_date').textContent, + "a few seconds ago", + "should have the group date corresponding to now" + ); + assert.containsOnce( + document.body, + '.o_NotificationGroup_inlineText', + "should have 1 group text" + ); + assert.strictEqual( + document.querySelector('.o_NotificationGroup_inlineText').textContent.trim(), + "An error occurred when sending an email.", + "should have the group text corresponding to email" + ); + assert.containsOnce( + document.body, + '.o_NotificationGroup_markAsRead', + "should have 1 mark as read button" + ); +}); + +QUnit.test('mark as read', async function (assert) { + assert.expect(6); + + // message that is expected to have a failure + this.data['mail.message'].records.push({ + id: 11, // random unique id, will be used to link failure to message + message_type: 'email', // message must be email (goal of the test) + model: 'mail.channel', // expected value to link message to channel + res_id: 31, // id of a random channel + res_model_name: "Channel", // random res model name, will be asserted in the test + }); + // failure that is expected to be used in the test + this.data['mail.notification'].records.push({ + mail_message_id: 11, // id of the related message + notification_status: 'exception', // necessary value to have a failure + notification_type: 'email', // expected failure type for email message + }); + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('do_action'); + assert.strictEqual( + payload.action, + 'mail.mail_resend_cancel_action', + "action should be the one to cancel email" + ); + assert.strictEqual( + payload.options.additional_context.default_model, + 'mail.channel', + "action should have the group model as default_model" + ); + assert.strictEqual( + payload.options.additional_context.unread_counter, + 1, + "action should have the group notification length as unread_counter" + ); + }); + await this.start({ env: { bus } }); + await this.createNotificationListComponent(); + assert.containsOnce( + document.body, + '.o_NotificationGroup_markAsRead', + "should have 1 mark as read button" + ); + + document.querySelector('.o_NotificationGroup_markAsRead').click(); + assert.verifySteps( + ['do_action'], + "should do an action to display the cancel email dialog" + ); +}); + +QUnit.test('grouped notifications by document', async function (assert) { + // If some failures linked to a document refers to a same document, a single + // notification should group all those failures. + assert.expect(5); + + this.data['mail.message'].records.push( + // first message that is expected to have a failure + { + id: 11, // random unique id, will be used to link failure to message + message_type: 'email', // message must be email (goal of the test) + model: 'res.partner', // same model as second message (and not `mail.channel`) + res_id: 31, // same res_id as second message + res_model_name: "Partner", // random related model name + }, + // second message that is expected to have a failure + { + id: 12, // random unique id, will be used to link failure to message + message_type: 'email', // message must be email (goal of the test) + model: 'res.partner', // same model as first message (and not `mail.channel`) + res_id: 31, // same res_id as first message + res_model_name: "Partner", // same related model name for consistency + } + ); + this.data['mail.notification'].records.push( + // first failure that is expected to be used in the test + { + mail_message_id: 11, // id of the related first message + notification_status: 'exception', // one possible value to have a failure + notification_type: 'email', // expected failure type for email message + }, + // second failure that is expected to be used in the test + { + mail_message_id: 12, // id of the related second message + notification_status: 'bounce', // other possible value to have a failure + notification_type: 'email', // expected failure type for email message + } + ); + await this.start({ hasChatWindow: true }); + await this.createNotificationListComponent(); + + assert.containsOnce( + document.body, + '.o_NotificationGroup', + "should have 1 notification group" + ); + assert.containsOnce( + document.body, + '.o_NotificationGroup_counter', + "should have 1 group counter" + ); + assert.strictEqual( + document.querySelector('.o_NotificationGroup_counter').textContent.trim(), + "(2)", + "should have 2 notifications in the group" + ); + assert.containsNone( + document.body, + '.o_ChatWindow', + "should have no chat window initially" + ); + + await afterNextRender(() => + document.querySelector('.o_NotificationGroup').click() + ); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "should have opened the thread in a chat window after clicking on it" + ); +}); + +QUnit.test('grouped notifications by document model', async function (assert) { + // If all failures linked to a document model refers to different documents, + // a single notification should group all failures that are linked to this + // document model. + assert.expect(12); + + this.data['mail.message'].records.push( + // first message that is expected to have a failure + { + id: 11, // random unique id, will be used to link failure to message + message_type: 'email', // message must be email (goal of the test) + model: 'res.partner', // same model as second message (and not `mail.channel`) + res_id: 31, // different res_id from second message + res_model_name: "Partner", // random related model name + }, + // second message that is expected to have a failure + { + id: 12, // random unique id, will be used to link failure to message + message_type: 'email', // message must be email (goal of the test) + model: 'res.partner', // same model as first message (and not `mail.channel`) + res_id: 32, // different res_id from first message + res_model_name: "Partner", // same related model name for consistency + } + ); + this.data['mail.notification'].records.push( + // first failure that is expected to be used in the test + { + mail_message_id: 11, // id of the related first message + notification_status: 'exception', // one possible value to have a failure + notification_type: 'email', // expected failure type for email message + }, + // second failure that is expected to be used in the test + { + mail_message_id: 12, // id of the related second message + notification_status: 'bounce', // other possible value to have a failure + notification_type: 'email', // expected failure type for email message + } + ); + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('do_action'); + assert.strictEqual( + payload.action.name, + "Mail Failures", + "action should have 'Mail Failures' as name", + ); + assert.strictEqual( + payload.action.type, + 'ir.actions.act_window', + "action should have the type act_window" + ); + assert.strictEqual( + payload.action.view_mode, + 'kanban,list,form', + "action should have 'kanban,list,form' as view_mode" + ); + assert.strictEqual( + JSON.stringify(payload.action.views), + JSON.stringify([[false, 'kanban'], [false, 'list'], [false, 'form']]), + "action should have correct views" + ); + assert.strictEqual( + payload.action.target, + 'current', + "action should have 'current' as target" + ); + assert.strictEqual( + payload.action.res_model, + 'res.partner', + "action should have the group model as res_model" + ); + assert.strictEqual( + JSON.stringify(payload.action.domain), + JSON.stringify([['message_has_error', '=', true]]), + "action should have 'message_has_error' as domain" + ); + }); + + await this.start({ env: { bus } }); + await this.createNotificationListComponent(); + + assert.containsOnce( + document.body, + '.o_NotificationGroup', + "should have 1 notification group" + ); + assert.containsOnce( + document.body, + '.o_NotificationGroup_counter', + "should have 1 group counter" + ); + assert.strictEqual( + document.querySelector('.o_NotificationGroup_counter').textContent.trim(), + "(2)", + "should have 2 notifications in the group" + ); + + document.querySelector('.o_NotificationGroup').click(); + assert.verifySteps( + ['do_action'], + "should do an action to display the related records" + ); +}); + +QUnit.test('different mail.channel are not grouped', async function (assert) { + // `mail.channel` is a special case where notifications are not grouped when + // they are linked to different channels, even though the model is the same. + assert.expect(6); + + this.data['mail.channel'].records.push({ id: 31 }, { id: 32 }); + this.data['mail.message'].records.push( + // first message that is expected to have a failure + { + id: 11, // random unique id, will be used to link failure to message + message_type: 'email', // message must be email (goal of the test) + model: 'mail.channel', // testing a channel is the goal of the test + res_id: 31, // different res_id from second message + res_model_name: "Channel", // random related model name + }, + // second message that is expected to have a failure + { + id: 12, // random unique id, will be used to link failure to message + message_type: 'email', // message must be email (goal of the test) + model: 'mail.channel', // testing a channel is the goal of the test + res_id: 32, // different res_id from first message + res_model_name: "Channel", // same related model name for consistency + } + ); + this.data['mail.notification'].records.push( + // first failure that is expected to be used in the test + { + mail_message_id: 11, // id of the related first message + notification_status: 'exception', // one possible value to have a failure + notification_type: 'email', // expected failure type for email message + }, + // second failure that is expected to be used in the test + { + mail_message_id: 12, // id of the related second message + notification_status: 'bounce', // other possible value to have a failure + notification_type: 'email', // expected failure type for email message + } + ); + await this.start({ + hasChatWindow: true, // needed to assert thread.open + }); + await this.createNotificationListComponent(); + assert.containsN( + document.body, + '.o_NotificationGroup', + 2, + "should have 2 notifications group" + ); + const groups = document.querySelectorAll('.o_NotificationGroup'); + assert.containsOnce( + groups[0], + '.o_NotificationGroup_counter', + "should have 1 group counter in first group" + ); + assert.strictEqual( + groups[0].querySelector('.o_NotificationGroup_counter').textContent.trim(), + "(1)", + "should have 1 notification in first group" + ); + assert.containsOnce( + groups[1], + '.o_NotificationGroup_counter', + "should have 1 group counter in second group" + ); + assert.strictEqual( + groups[1].querySelector('.o_NotificationGroup_counter').textContent.trim(), + "(1)", + "should have 1 notification in second group" + ); + + await afterNextRender(() => groups[0].click()); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "should have opened the channel related to the first group in a chat window" + ); +}); + +QUnit.test('multiple grouped notifications by document model, sorted by date desc', async function (assert) { + assert.expect(9); + + this.data['mail.message'].records.push( + // first message that is expected to have a failure + { + date: moment.utc().format("YYYY-MM-DD HH:mm:ss"), // random date + id: 11, // random unique id, will be used to link failure to message + message_type: 'email', // message must be email (goal of the test) + model: 'res.partner', // different model from second message + res_id: 31, // random unique id, useful to link failure to message + res_model_name: "Partner", // random related model name + }, + // second message that is expected to have a failure + { + // random date, later than first message + date: moment.utc().add(1, 'days').format("YYYY-MM-DD HH:mm:ss"), + id: 12, // random unique id, will be used to link failure to message + message_type: 'email', // message must be email (goal of the test) + model: 'res.company', // different model from first message + res_id: 32, // random unique id, useful to link failure to message + res_model_name: "Company", // random related model name + } + ); + this.data['mail.notification'].records.push( + // first failure that is expected to be used in the test + { + mail_message_id: 11, // id of the related first message + notification_status: 'exception', // one possible value to have a failure + notification_type: 'email', // expected failure type for email message + }, + // second failure that is expected to be used in the test + { + mail_message_id: 12, // id of the related second message + notification_status: 'bounce', // other possible value to have a failure + notification_type: 'email', // expected failure type for email message + } + ); + await this.start(); + await this.createNotificationListComponent(); + assert.containsN( + document.body, + '.o_NotificationGroup', + 2, + "should have 2 notifications group" + ); + const groups = document.querySelectorAll('.o_NotificationGroup'); + assert.containsOnce( + groups[0], + '.o_NotificationGroup_name', + "should have 1 group name in first group" + ); + assert.strictEqual( + groups[0].querySelector('.o_NotificationGroup_name').textContent, + "Company", + "should have first model name as group name" + ); + assert.containsOnce( + groups[0], + '.o_NotificationGroup_counter', + "should have 1 group counter in first group" + ); + assert.strictEqual( + groups[0].querySelector('.o_NotificationGroup_counter').textContent.trim(), + "(1)", + "should have 1 notification in first group" + ); + assert.containsOnce( + groups[1], + '.o_NotificationGroup_name', + "should have 1 group name in second group" + ); + assert.strictEqual( + groups[1].querySelector('.o_NotificationGroup_name').textContent, + "Partner", + "should have second model name as group name" + ); + assert.containsOnce( + groups[1], + '.o_NotificationGroup_counter', + "should have 1 group counter in second group" + ); + assert.strictEqual( + groups[1].querySelector('.o_NotificationGroup_counter').textContent.trim(), + "(1)", + "should have 1 notification in second group" + ); +}); + +QUnit.test('non-failure notifications are ignored', async function (assert) { + assert.expect(1); + + this.data['mail.message'].records.push( + // message that is expected to have a notification + { + id: 11, // random unique id, will be used to link failure to message + message_type: 'email', // message must be email (goal of the test) + model: 'res.partner', // random model + res_id: 31, // random unique id, useful to link failure to message + } + ); + this.data['mail.notification'].records.push( + // notification that is expected to be used in the test + { + mail_message_id: 11, // id of the related first message + notification_status: 'ready', // non-failure status + notification_type: 'email', // expected notification type for email message + }, + ); + await this.start(); + await this.createNotificationListComponent(); + assert.containsNone( + document.body, + '.o_NotificationGroup', + "should have 0 notification group" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/notification_list/notification_list_tests.js b/addons/mail/static/src/components/notification_list/notification_list_tests.js new file mode 100644 index 00000000..24df5b22 --- /dev/null +++ b/addons/mail/static/src/components/notification_list/notification_list_tests.js @@ -0,0 +1,162 @@ +odoo.define('mail/static/src/components/notification_list/notification_list_tests.js', function (require) { +'use strict'; + +const components = { + NotificationList: require('mail/static/src/components/notification_list/notification_list.js'), +}; + +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('notification_list', {}, function () { +QUnit.module('notification_list_tests.js', { + beforeEach() { + beforeEach(this); + + /** + * @param {Object} param0 + * @param {string} [param0.filter='all'] + */ + this.createNotificationListComponent = async ({ filter = 'all' }) => { + await createRootComponent(this, components.NotificationList, { + props: { filter }, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('marked as read thread notifications are ordered by last message date', async function (assert) { + assert.expect(3); + + this.data['mail.channel'].records.push( + { id: 100, name: "Channel 2019" }, + { id: 200, name: "Channel 2020" } + ); + this.data['mail.message'].records.push( + { + channel_ids: [100], + date: "2019-01-01 00:00:00", + id: 42, + model: 'mail.channel', + res_id: 100, + }, + { + channel_ids: [200], + date: "2020-01-01 00:00:00", + id: 43, + model: 'mail.channel', + res_id: 200, + } + ); + await this.start(); + await this.createNotificationListComponent({ filter: 'all' }); + assert.containsN( + document.body, + '.o_ThreadPreview', + 2, + "there should be two thread previews" + ); + const threadPreviewElList = document.querySelectorAll('.o_ThreadPreview'); + assert.strictEqual( + threadPreviewElList[0].querySelector(':scope .o_ThreadPreview_name').textContent, + 'Channel 2020', + "First channel in the list should be the channel of 2020 (more recent last message)" + ); + assert.strictEqual( + threadPreviewElList[1].querySelector(':scope .o_ThreadPreview_name').textContent, + 'Channel 2019', + "Second channel in the list should be the channel of 2019 (least recent last message)" + ); +}); + +QUnit.test('thread notifications are re-ordered on receiving a new message', async function (assert) { + assert.expect(4); + + this.data['mail.channel'].records.push( + { id: 100, name: "Channel 2019" }, + { id: 200, name: "Channel 2020" } + ); + this.data['mail.message'].records.push( + { + channel_ids: [100], + date: "2019-01-01 00:00:00", + id: 42, + model: 'mail.channel', + res_id: 100, + }, + { + channel_ids: [200], + date: "2020-01-01 00:00:00", + id: 43, + model: 'mail.channel', + res_id: 200, + } + ); + await this.start(); + await this.createNotificationListComponent({ filter: 'all' }); + assert.containsN( + document.body, + '.o_ThreadPreview', + 2, + "there should be two thread previews" + ); + + await afterNextRender(() => { + const messageData = { + author_id: [7, "Demo User"], + body: "<p>New message !</p>", + channel_ids: [100], + date: "2020-03-23 10:00:00", + id: 44, + message_type: 'comment', + model: 'mail.channel', + record_name: 'Channel 2019', + res_id: 100, + }; + this.widget.call('bus_service', 'trigger', 'notification', [ + [['my-db', 'mail.channel', 100], messageData] + ]); + }); + assert.containsN( + document.body, + '.o_ThreadPreview', + 2, + "there should still be two thread previews" + ); + const threadPreviewElList = document.querySelectorAll('.o_ThreadPreview'); + assert.strictEqual( + threadPreviewElList[0].querySelector(':scope .o_ThreadPreview_name').textContent, + 'Channel 2019', + "First channel in the list should now be 'Channel 2019'" + ); + assert.strictEqual( + threadPreviewElList[1].querySelector(':scope .o_ThreadPreview_name').textContent, + 'Channel 2020', + "Second channel in the list should now be 'Channel 2020'" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/notification_popover/notification_popover.js b/addons/mail/static/src/components/notification_popover/notification_popover.js new file mode 100644 index 00000000..6be3647e --- /dev/null +++ b/addons/mail/static/src/components/notification_popover/notification_popover.js @@ -0,0 +1,95 @@ +odoo.define('mail/static/src/components/notification_popover/notification_popover.js', function (require) { +'use strict'; + +const { Component } = owl; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +class NotificationPopover extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps({ + compareDepth: { + notificationLocalIds: 1, + }, + }); + useStore(props => { + const notifications = props.notificationLocalIds.map( + notificationLocalId => this.env.models['mail.notification'].get(notificationLocalId) + ); + return { + notifications: notifications.map(notification => notification ? notification.__state : undefined), + }; + }, { + compareDepth: { + notifications: 1, + }, + }); + } + + /** + * @returns {string} + */ + get iconClass() { + switch (this.notification.notification_status) { + case 'sent': + return 'fa fa-check'; + case 'bounce': + return 'fa fa-exclamation'; + case 'exception': + return 'fa fa-exclamation'; + case 'ready': + return 'fa fa-send-o'; + case 'canceled': + return 'fa fa-trash-o'; + } + return ''; + } + + /** + * @returns {string} + */ + get iconTitle() { + switch (this.notification.notification_status) { + case 'sent': + return this.env._t("Sent"); + case 'bounce': + return this.env._t("Bounced"); + case 'exception': + return this.env._t("Error"); + case 'ready': + return this.env._t("Ready"); + case 'canceled': + return this.env._t("Canceled"); + } + return ''; + } + + /** + * @returns {mail.notification[]} + */ + get notifications() { + return this.props.notificationLocalIds.map( + notificationLocalId => this.env.models['mail.notification'].get(notificationLocalId) + ); + } + +} + +Object.assign(NotificationPopover, { + props: { + notificationLocalIds: { + type: Array, + element: String, + }, + }, + template: 'mail.NotificationPopover', +}); + +return NotificationPopover; + +}); diff --git a/addons/mail/static/src/components/notification_popover/notification_popover.scss b/addons/mail/static/src/components/notification_popover/notification_popover.scss new file mode 100644 index 00000000..06b4201c --- /dev/null +++ b/addons/mail/static/src/components/notification_popover/notification_popover.scss @@ -0,0 +1,7 @@ +// ----------------------------------------------------------------------------- +// Layout +// ----------------------------------------------------------------------------- + +.o_NotificationPopover_notificationIcon { + margin-inline-end: map-get($spacers, 2); +} diff --git a/addons/mail/static/src/components/notification_popover/notification_popover.xml b/addons/mail/static/src/components/notification_popover/notification_popover.xml new file mode 100644 index 00000000..cf5aa027 --- /dev/null +++ b/addons/mail/static/src/components/notification_popover/notification_popover.xml @@ -0,0 +1,17 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.NotificationPopover" owl="1"> + <div class="o_NotificationPopover"> + <t t-foreach="notifications" t-as="notification" t-key="notification.localId"> + <div class="o_NotificationPopover_notification"> + <i class="o_NotificationPopover_notificationIcon" t-att-class="iconClass" t-att-title="iconTitle" role="img"/> + <t t-if="notification.partner"> + <span class="o_NotificationPopover_notificationPartnerName" t-esc="notification.partner.nameOrDisplayName"/> + </t> + </div> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/notification_request/notification_request.js b/addons/mail/static/src/components/notification_request/notification_request.js new file mode 100644 index 00000000..54dcbbd4 --- /dev/null +++ b/addons/mail/static/src/components/notification_request/notification_request.js @@ -0,0 +1,94 @@ +odoo.define('mail/static/src/components/notification_request/notification_request.js', function (require) { +'use strict'; + +const components = { + PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class NotificationRequest extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + return { + isDeviceMobile: this.env.messaging.device.isMobile, + partnerRoot: this.env.messaging.partnerRoot + ? this.env.messaging.partnerRoot.__state + : undefined, + }; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {string} + */ + getHeaderText() { + return _.str.sprintf( + this.env._t("%s has a request"), + this.env.messaging.partnerRoot.nameOrDisplayName + ); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * Handle the response of the user when prompted whether push notifications + * are granted or denied. + * + * @private + * @param {string} value + */ + _handleResponseNotificationPermission(value) { + // manually force recompute because the permission is not in the store + this.env.messaging.messagingMenu.update(); + if (value !== 'granted') { + this.env.services['bus_service'].sendNotification( + this.env._t("Permission denied"), + this.env._t("Odoo will not have the permission to send native notifications on this device.") + ); + } + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + */ + _onClick() { + const windowNotification = this.env.browser.Notification; + const def = windowNotification && windowNotification.requestPermission(); + if (def) { + def.then(this._handleResponseNotificationPermission.bind(this)); + } + if (!this.env.messaging.device.isMobile) { + this.env.messaging.messagingMenu.close(); + } + } + +} + +Object.assign(NotificationRequest, { + components, + props: {}, + template: 'mail.NotificationRequest', +}); + +return NotificationRequest; + +}); diff --git a/addons/mail/static/src/components/notification_request/notification_request.scss b/addons/mail/static/src/components/notification_request/notification_request.scss new file mode 100644 index 00000000..e2fcb81d --- /dev/null +++ b/addons/mail/static/src/components/notification_request/notification_request.scss @@ -0,0 +1,77 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_NotificationRequest { + @include o-mail-notification-list-item-layout(); +} + +.o_NotificationRequest_content { + @include o-mail-notification-list-item-content-layout(); +} + +.o_NotificationRequest_core { + @include o-mail-notification-list-item-core-layout(); +} + +.o_NotificationRequest_coreItem { + @include o-mail-notification-list-item-core-item-layout(); +} + +.o_NotificationRequest_header { + @include o-mail-notification-list-item-header-layout(); +} + +.o_NotificationRequest_image { + @include o-mail-notification-list-item-image-layout(); +} + +.o_NotificationRequest_imageContainer { + @include o-mail-notification-list-item-image-container-layout(); +} + +.o_NotificationRequest_inlineText { + @include o-mail-notification-list-item-inline-text-layout(); +} + +.o_NotificationRequest_name { + @include o-mail-notification-list-item-name-layout(); +} + +.o_NotificationRequest_partnerImStatusIcon { + @include o-mail-notification-list-item-partner-im-status-icon-layout(); +} + +.o_NotificationRequest_sidebar { + @include o-mail-notification-list-item-sidebar-layout(); +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_NotificationRequest { + @include o-mail-notification-list-item-style(); + + &:hover { + .o_NotificationRequest_partnerImStatusIcon { + @include o-mail-notification-list-item-hover-partner-im-status-icon-style(); + } + } +} + +.o_NotificationRequest_core { + @include o-mail-notification-list-item-core-style(); +} + +.o_NotificationRequest_image { + @include o-mail-notification-list-item-image-style(); +} + +.o_NotificationRequest_name { + @include o-mail-notification-list-item-bold-style(); +} + +.o_NotificationRequest_partnerImStatusIcon { + @include o-mail-notification-list-item-partner-im-status-icon-style(); +} diff --git a/addons/mail/static/src/components/notification_request/notification_request.xml b/addons/mail/static/src/components/notification_request/notification_request.xml new file mode 100644 index 00000000..f59c671a --- /dev/null +++ b/addons/mail/static/src/components/notification_request/notification_request.xml @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.NotificationRequest" owl="1"> + <div class="o_NotificationRequest" t-on-click="_onClick"> + <div class="o_NotificationRequest_sidebar"> + <div class="o_NotificationRequest_imageContainer o_NotificationRequest_sidebarItem"> + <img class="o_NotificationRequest_image rounded-circle" src="/mail/static/src/img/odoobot.png" alt="Avatar of OdooBot"/> + <PartnerImStatusIcon + class="o_NotificationRequest_partnerImStatusIcon" + t-att-class="{ 'o-mobile': env.messaging.device.isMobile }" + partnerLocalId="env.messaging.partnerRoot.localId" + /> + </div> + </div> + <div class="o_NotificationRequest_content"> + <div class="o_NotificationRequest_header"> + <span class="o_NotificationRequest_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }"> + <t t-esc="getHeaderText()"/> + </span> + </div> + <div class="o_NotificationRequest_core"> + <span class="o_NotificationRequest_coreItem o_NotificationRequest_inlineText"> + Enable desktop notifications to chat. + </span> + </div> + </div> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js new file mode 100644 index 00000000..e4af9da6 --- /dev/null +++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js @@ -0,0 +1,74 @@ +odoo.define('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class PartnerImStatusIcon extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const partner = this.env.models['mail.partner'].get(props.partnerLocalId); + return { + partner, + partnerImStatus: partner && partner.im_status, + partnerRoot: this.env.messaging.partnerRoot, + }; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.partner} + */ + get partner() { + return this.env.models['mail.partner'].get(this.props.partnerLocalId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClick(ev) { + if (!this.props.hasOpenChat) { + return; + } + this.partner.openChat(); + } + +} + +Object.assign(PartnerImStatusIcon, { + defaultProps: { + hasBackground: true, + hasOpenChat: false, + }, + props: { + partnerLocalId: String, + hasBackground: Boolean, + /** + * Determines whether a click on `this` should open a chat with + * `this.partner`. + */ + hasOpenChat: Boolean, + }, + template: 'mail.PartnerImStatusIcon', +}); + +return PartnerImStatusIcon; + +}); diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss new file mode 100644 index 00000000..608c281a --- /dev/null +++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.scss @@ -0,0 +1,59 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_PartnerImStatusIcon { + display: flex; + flex-flow: column; + + width: 1.2em; + height: 1.2em; + line-height: 1.3em; +} + +.o_PartnerImStatusIcon_outerBackground { + transform: scale(1.5); +} + +.o-background { + transform: scale(1); + margin-inline-end: map-get($spacers, 1); + margin-top: 2px; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_PartnerImStatusIcon { + &.o-has-open-chat { + cursor: pointer; + } +} + +.o_PartnerImStatusIcon_innerBackground { + color: white; +} + +.o_PartnerImStatusIcon_icon { + + &.o-away { + color: theme-color('warning'); + } + + &.o-bot { + color: $o-enterprise-primary-color; + } + + &.o-offline { + color: gray('700'); + } + + &.o-online { + color: $o-enterprise-primary-color; + } +} + + + + diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml new file mode 100644 index 00000000..ca20a547 --- /dev/null +++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon.xml @@ -0,0 +1,38 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.PartnerImStatusIcon" owl="1"> + <span class="o_PartnerImStatusIcon fa-stack" + t-att-class="{ + 'o-away': partner and partner.im_status === 'away', + 'o-background': !props.hasBackground, + 'o-bot': partner and env.messaging.partnerRoot === partner, + 'o-has-open-chat': props.hasOpenChat, + 'o-offline': partner and partner.im_status === 'offline', + 'o-online': partner and partner.im_status === 'online', + }" + t-on-click="_onClick" + t-att-data-partner-local-id="partner ? partner.localId : undefined" + > + <t t-if="partner" name="rootCondition"> + <t t-if="props.hasBackground"> + <i class="o_PartnerImStatusIcon_outerBackground fa fa-circle fa-stack-1x"/> + <i class="o_PartnerImStatusIcon_innerBackground fa fa-circle fa-stack-1x"/> + </t> + <t t-if="partner.im_status === 'online'"> + <i class="o_PartnerImStatusIcon_icon o-online fa fa-circle fa-stack-1x" title="Online" role="img" aria-label="User is online"/> + </t> + <t t-if="partner.im_status === 'away'"> + <i class="o_PartnerImStatusIcon_icon o-away fa fa-circle fa-stack-1x" title="Idle" role="img" aria-label="User is idle"/> + </t> + <t t-if="partner.im_status === 'offline'"> + <i class="o_PartnerImStatusIcon_icon o-offline fa fa-circle-o fa-stack-1x" title="Offline" role="img" aria-label="User is offline"/> + </t> + <t t-if="partner === env.messaging.partnerRoot"> + <i class="o_PartnerImStatusIcon_icon o-bot fa fa-heart fa-stack-1x" title="Bot" role="img" aria-label="User is a bot"/> + </t> + </t> + </span> + </t> + +</templates> diff --git a/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon_tests.js b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon_tests.js new file mode 100644 index 00000000..1a68a5e0 --- /dev/null +++ b/addons/mail/static/src/components/partner_im_status_icon/partner_im_status_icon_tests.js @@ -0,0 +1,145 @@ +odoo.define('mail/static/src/components/partner_im_status_icon/partner_im_status_icon_tests.js', function (require) { +'use strict'; + +const components = { + PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('partner_im_status_icon', {}, function () { +QUnit.module('partner_im_status_icon_tests.js', { + beforeEach() { + beforeEach(this); + + this.createPartnerImStatusIcon = async partner => { + await createRootComponent(this, components.PartnerImStatusIcon, { + props: { partnerLocalId: partner.localId }, + target: this.widget.el + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('initially online', async function (assert) { + assert.expect(3); + + await this.start(); + const partner = this.env.models['mail.partner'].create({ + id: 7, + name: "Demo User", + im_status: 'online', + }); + await this.createPartnerImStatusIcon(partner); + assert.strictEqual( + document.querySelectorAll(`.o_PartnerImStatusIcon`).length, + 1, + "should have partner IM status icon" + ); + assert.strictEqual( + document.querySelector(`.o_PartnerImStatusIcon`).dataset.partnerLocalId, + partner.localId, + "partner IM status icon should be linked to partner with ID 7" + ); + assert.strictEqual( + document.querySelectorAll(`.o_PartnerImStatusIcon.o-online`).length, + 1, + "partner IM status icon should have online status rendering" + ); +}); + +QUnit.test('initially offline', async function (assert) { + assert.expect(1); + + await this.start(); + const partner = this.env.models['mail.partner'].create({ + id: 7, + name: "Demo User", + im_status: 'offline', + }); + await this.createPartnerImStatusIcon(partner); + assert.strictEqual( + document.querySelectorAll(`.o_PartnerImStatusIcon.o-offline`).length, + 1, + "partner IM status icon should have offline status rendering" + ); +}); + +QUnit.test('initially away', async function (assert) { + assert.expect(1); + + await this.start(); + const partner = this.env.models['mail.partner'].create({ + id: 7, + name: "Demo User", + im_status: 'away', + }); + await this.createPartnerImStatusIcon(partner); + assert.strictEqual( + document.querySelectorAll(`.o_PartnerImStatusIcon.o-away`).length, + 1, + "partner IM status icon should have away status rendering" + ); +}); + +QUnit.test('change icon on change partner im_status', async function (assert) { + assert.expect(4); + + await this.start(); + const partner = this.env.models['mail.partner'].create({ + id: 7, + name: "Demo User", + im_status: 'online', + }); + await this.createPartnerImStatusIcon(partner); + assert.strictEqual( + document.querySelectorAll(`.o_PartnerImStatusIcon.o-online`).length, + 1, + "partner IM status icon should have online status rendering" + ); + + await afterNextRender(() => partner.update({ im_status: 'offline' })); + assert.strictEqual( + document.querySelectorAll(`.o_PartnerImStatusIcon.o-offline`).length, + 1, + "partner IM status icon should have offline status rendering" + ); + + await afterNextRender(() => partner.update({ im_status: 'away' })); + assert.strictEqual( + document.querySelectorAll(`.o_PartnerImStatusIcon.o-away`).length, + 1, + "partner IM status icon should have away status rendering" + ); + + await afterNextRender(() => partner.update({ im_status: 'online' })); + assert.strictEqual( + document.querySelectorAll(`.o_PartnerImStatusIcon.o-online`).length, + 1, + "partner IM status icon should have online status rendering in the end" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/thread_icon/thread_icon.js b/addons/mail/static/src/components/thread_icon/thread_icon.js new file mode 100644 index 00000000..71017ec0 --- /dev/null +++ b/addons/mail/static/src/components/thread_icon/thread_icon.js @@ -0,0 +1,64 @@ +odoo.define('mail/static/src/components/thread_icon/thread_icon.js', function (require) { +'use strict'; + +const components = { + ThreadTypingIcon: require('mail/static/src/components/thread_typing_icon/thread_typing_icon.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class ThreadIcon extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const thread = this.env.models['mail.thread'].get(props.threadLocalId); + const correspondent = thread ? thread.correspondent : undefined; + return { + correspondent, + correspondentImStatus: correspondent && correspondent.im_status, + history: this.env.messaging.history, + inbox: this.env.messaging.inbox, + moderation: this.env.messaging.moderation, + partnerRoot: this.env.messaging.partnerRoot, + starred: this.env.messaging.starred, + thread, + threadChannelType: thread && thread.channel_type, + threadModel: thread && thread.model, + threadOrderedOtherTypingMembersLength: thread && thread.orderedOtherTypingMembers.length, + threadPublic: thread && thread.public, + threadTypingStatusText: thread && thread.typingStatusText, + }; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.thread} + */ + get thread() { + return this.env.models['mail.thread'].get(this.props.threadLocalId); + } + +} + +Object.assign(ThreadIcon, { + components, + props: { + threadLocalId: String, + }, + template: 'mail.ThreadIcon', +}); + +return ThreadIcon; + +}); diff --git a/addons/mail/static/src/components/thread_icon/thread_icon.scss b/addons/mail/static/src/components/thread_icon/thread_icon.scss new file mode 100644 index 00000000..3824ec44 --- /dev/null +++ b/addons/mail/static/src/components/thread_icon/thread_icon.scss @@ -0,0 +1,26 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ThreadIcon { + display: flex; + width: 13px; + justify-content: center; + flex: 0 0 auto; +} + +.o_ThreadIcon_typing { + flex: 1 1 auto; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_ThreadIcon_away { + color: theme-color('warning'); +} + +.o_ThreadIcon_online { + color: $o-enterprise-primary-color; +} diff --git a/addons/mail/static/src/components/thread_icon/thread_icon.xml b/addons/mail/static/src/components/thread_icon/thread_icon.xml new file mode 100644 index 00000000..95c4694a --- /dev/null +++ b/addons/mail/static/src/components/thread_icon/thread_icon.xml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ThreadIcon" owl="1"> + <div class="o_ThreadIcon"> + <t t-if="thread" name="rootCondition"> + <t t-if="thread.channel_type === 'channel'"> + <t t-if="thread.public === 'private'"> + <!-- AKU TODO: channel of type 'groups' should maybe also have lock icon --> + <div class="o_ThreadIcon_channelPrivate fa fa-lock" title="Private channel"/> + </t> + <t t-else=""> + <div class="o_ThreadIcon_channelPublic fa fa-hashtag" title="Public channel"/> + </t> + </t> + <t t-elif="thread.channel_type === 'chat' and thread.correspondent"> + <t t-if="thread.orderedOtherTypingMembers.length > 0"> + <ThreadTypingIcon + class="o_ThreadIcon_typing" + animation="'pulse'" + title="thread.typingStatusText" + /> + </t> + <t t-elif="thread.correspondent.im_status === 'online'"> + <div class="o_ThreadIcon_online fa fa-circle" title="Online"/> + </t> + <t t-elif="thread.correspondent.im_status === 'offline'"> + <div class="o_ThreadIcon_offline fa fa-circle-o" title="Offline"/> + </t> + <t t-elif="thread.correspondent.im_status === 'away'"> + <div class="o_ThreadIcon_away fa fa-circle" title="Away"/> + </t> + <t t-elif="thread.correspondent === env.messaging.partnerRoot"> + <div class="o_ThreadIcon_online fa fa-heart" title="Bot"/> + </t> + <t t-else="" name="noImStatusCondition"> + <div class="o_ThreadIcon_noImStatus fa fa-question-circle" title="No IM status available"/> + </t> + </t> + <t t-elif="thread.model === 'mail.box'"> + <t t-if="thread === env.messaging.inbox"> + <div class="o_ThreadIcon_mailboxInbox fa fa-inbox"/> + </t> + <t t-elif="thread === env.messaging.starred"> + <div class="o_ThreadIcon_mailboxStarred fa fa-star-o"/> + </t> + <t t-elif="thread === env.messaging.history"> + <div class="o_ThreadIcon_mailboxHistory fa fa-history"/> + </t> + <t t-elif="thread === env.messaging.moderation"> + <div class="o_ThreadIcon_mailboxModeration fa fa-envelope"/> + </t> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/thread_icon/thread_icon_tests.js b/addons/mail/static/src/components/thread_icon/thread_icon_tests.js new file mode 100644 index 00000000..d233d6f8 --- /dev/null +++ b/addons/mail/static/src/components/thread_icon/thread_icon_tests.js @@ -0,0 +1,118 @@ +odoo.define('mail/static/src/components/thread_icon/thread_icon_tests.js', function (require) { +'use strict'; + +const components = { + ThreadIcon: require('mail/static/src/components/thread_icon/thread_icon.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('thread_icon', {}, function () { +QUnit.module('thread_icon_tests.js', { + beforeEach() { + beforeEach(this); + + this.createThreadIcon = async thread => { + await createRootComponent(this, components.ThreadIcon, { + props: { threadLocalId: thread.localId }, + target: this.widget.el + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('chat: correspondent is typing', async function (assert) { + assert.expect(5); + + this.data['res.partner'].records.push({ + id: 17, + im_status: 'online', + name: 'Demo', + }); + this.data['mail.channel'].records.push({ + channel_type: 'chat', + id: 20, + members: [this.data.currentPartnerId, 17], + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createThreadIcon(thread); + + assert.containsOnce( + document.body, + '.o_ThreadIcon', + "should have thread icon" + ); + assert.containsOnce( + document.body, + '.o_ThreadIcon_online', + "should have thread icon with partner im status icon 'online'" + ); + + // simulate receive typing notification from demo "is typing" + await afterNextRender(() => { + const typingData = { + info: 'typing_status', + is_typing: true, + partner_id: 17, + partner_name: "Demo", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + assert.containsOnce( + document.body, + '.o_ThreadIcon_typing', + "should have thread icon with partner currently typing" + ); + assert.strictEqual( + document.querySelector('.o_ThreadIcon_typing').title, + "Demo is typing...", + "title of icon should tell demo is currently typing" + ); + + // simulate receive typing notification from demo "no longer is typing" + await afterNextRender(() => { + const typingData = { + info: 'typing_status', + is_typing: false, + partner_id: 17, + partner_name: "Demo", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + assert.containsOnce( + document.body, + '.o_ThreadIcon_online', + "should have thread icon with partner im status icon 'online' (no longer typing)" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js new file mode 100644 index 00000000..b70c8f6b --- /dev/null +++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js @@ -0,0 +1,151 @@ +odoo.define('mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js', function (require) { +'use strict'; + +const components = { + MessageAuthorPrefix: require('mail/static/src/components/message_author_prefix/message_author_prefix.js'), + PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const mailUtils = require('mail.utils'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class ThreadNeedactionPreview extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const thread = this.env.models['mail.thread'].get(props.threadLocalId); + const mainThreadCache = thread ? thread.mainCache : undefined; + let lastNeedactionMessageAsOriginThreadAuthor; + let lastNeedactionMessageAsOriginThread; + let threadCorrespondent; + if (thread) { + lastNeedactionMessageAsOriginThread = mainThreadCache.lastNeedactionMessageAsOriginThread; + threadCorrespondent = thread.correspondent; + } + if (lastNeedactionMessageAsOriginThread) { + lastNeedactionMessageAsOriginThreadAuthor = lastNeedactionMessageAsOriginThread.author; + } + return { + isDeviceMobile: this.env.messaging.device.isMobile, + lastNeedactionMessageAsOriginThread: lastNeedactionMessageAsOriginThread ? lastNeedactionMessageAsOriginThread.__state : undefined, + lastNeedactionMessageAsOriginThreadAuthor: lastNeedactionMessageAsOriginThreadAuthor + ? lastNeedactionMessageAsOriginThreadAuthor.__state + : undefined, + thread: thread ? thread.__state : undefined, + threadCorrespondent: threadCorrespondent + ? threadCorrespondent.__state + : undefined, + }; + }); + /** + * Reference of the "mark as read" button. Useful to disable the + * top-level click handler when clicking on this specific button. + */ + this._markAsReadRef = useRef('markAsRead'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * Get the image route of the thread. + * + * @returns {string} + */ + image() { + if (this.thread.moduleIcon) { + return this.thread.moduleIcon; + } + if (this.thread.correspondent) { + return this.thread.correspondent.avatarUrl; + } + if (this.thread.model === 'mail.channel') { + return `/web/image/mail.channel/${this.thread.id}/image_128`; + } + return '/mail/static/src/img/smiley/avatar.jpg'; + } + + /** + * Get inline content of the last message of this conversation. + * + * @returns {string} + */ + get inlineLastNeedactionMessageBody() { + if (!this.thread.lastNeedactionMessage) { + return ''; + } + return mailUtils.htmlToTextContentInline(this.thread.lastNeedactionMessage.prettyBody); + } + + /** + * Get inline content of the last message of this conversation. + * + * @returns {string} + */ + get inlineLastNeedactionMessageAsOriginThreadBody() { + if (!this.thread.lastNeedactionMessageAsOriginThread) { + return ''; + } + return mailUtils.htmlToTextContentInline(this.thread.lastNeedactionMessageAsOriginThread.prettyBody); + } + + /** + * @returns {mail.thread} + */ + get thread() { + return this.env.models['mail.thread'].get(this.props.threadLocalId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClick(ev) { + const markAsRead = this._markAsReadRef.el; + if (markAsRead && markAsRead.contains(ev.target)) { + // handled in `_onClickMarkAsRead` + return; + } + this.thread.open(); + if (!this.env.messaging.device.isMobile) { + this.env.messaging.messagingMenu.close(); + } + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickMarkAsRead(ev) { + this.env.models['mail.message'].markAllAsRead([ + ['model', '=', this.thread.model], + ['res_id', '=', this.thread.id], + ]); + } + +} + +Object.assign(ThreadNeedactionPreview, { + components, + props: { + threadLocalId: String, + }, + template: 'mail.ThreadNeedactionPreview', +}); + +return ThreadNeedactionPreview; + +}); diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.scss b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.scss new file mode 100644 index 00000000..5de87f8b --- /dev/null +++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.scss @@ -0,0 +1,108 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ThreadNeedactionPreview { + @include o-mail-notification-list-item-layout(); + + &:hover .o_ThreadNeedactionPreview_markAsRead { + opacity: 1; + } +} + +.o_ThreadNeedactionPreview_content { + @include o-mail-notification-list-item-content-layout(); +} + +.o_ThreadNeedactionPreview_core { + @include o-mail-notification-list-item-core-layout(); +} + +.o_ThreadNeedactionPreview_coreItem { + @include o-mail-notification-list-item-core-item-layout(); +} + +.o_ThreadNeedactionPreview_counter { + @include o-mail-notification-list-item-counter-layout(); +} + +.o_ThreadNeedactionPreview_date { + @include o-mail-notification-list-item-date-layout(); +} + +.o_ThreadNeedactionPreview_header { + @include o-mail-notification-list-item-header-layout(); +} + +.o_ThreadNeedactionPreview_image { + @include o-mail-notification-list-item-image-layout(); +} + +.o_ThreadNeedactionPreview_imageContainer { + @include o-mail-notification-list-item-image-container-layout(); +} + +.o_ThreadNeedactionPreview_inlineText { + @include o-mail-notification-list-item-inline-text-layout(); +} + +.o_ThreadNeedactionPreview_markAsRead { + @include o-mail-notification-list-item-mark-as-read-layout(); +} + +.o_ThreadNeedactionPreview_name { + @include o-mail-notification-list-item-name-layout(); +} + +.o_ThreadNeedactionPreview_partnerImStatusIcon { + @include o-mail-notification-list-item-partner-im-status-icon-layout(); +} + +.o_ThreadNeedactionPreview_sidebar { + @include o-mail-notification-list-item-sidebar-layout(); +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_ThreadNeedactionPreview { + @include o-mail-notification-list-item-style(); + background-color: rgba($o-brand-primary, 0.1); + + &:hover { + background-color: rgba($o-brand-primary, 0.2); + + .o_ThreadNeedactionPreview_partnerImStatusIcon { + @include o-mail-notification-list-item-hover-partner-im-status-icon-style(); + } + } +} + +.o_ThreadNeedactionPreview_core { + @include o-mail-notification-list-item-core-style(); +} + +.o_ThreadNeedactionPreview_counter { + @include o-mail-notification-list-item-bold-style(); +} + +.o_ThreadNeedactionPreview_date { + @include o-mail-notification-list-item-date-style(); +} + +.o_ThreadNeedactionPreview_image { + @include o-mail-notification-list-item-image-style(); +} + +.o_ThreadNeedactionPreview_markAsRead { + @include o-mail-notification-list-item-mark-as-read-style(); +} + +.o_ThreadNeedactionPreview_name { + @include o-mail-notification-list-item-bold-style(); +} + +.o_ThreadNeedactionPreview_partnerImStatusIcon { + @include o-mail-notification-list-item-partner-im-status-icon-style(); +} diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml new file mode 100644 index 00000000..3fd33224 --- /dev/null +++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview.xml @@ -0,0 +1,58 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ThreadNeedactionPreview" owl="1"> + <!-- + The preview template is used by the discuss in mobile, and by the systray + menu in order to show preview of threads. + --> + <div class="o_ThreadNeedactionPreview" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined"> + <t t-if="thread"> + <div class="o_ThreadNeedactionPreview_sidebar"> + <div class="o_ThreadNeedactionPreview_imageContainer o_ThreadNeedactionPreview_sidebarItem"> + <img class="o_ThreadNeedactionPreview_image" t-att-src="image()" alt="Thread Image"/> + <t t-if="thread.correspondent and thread.correspondent.im_status"> + <PartnerImStatusIcon + class="o_ThreadNeedactionPreview_partnerImStatusIcon" + t-att-class="{ + 'o-mobile': env.messaging.device.isMobile, + }" + partnerLocalId="thread.correspondent.localId" + /> + </t> + </div> + </div> + <div class="o_ThreadNeedactionPreview_content"> + <div class="o_ThreadNeedactionPreview_header"> + <span class="o_ThreadNeedactionPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile }"> + <t t-esc="thread.displayName"/> + </span> + <span class="o_ThreadNeedactionPreview_counter"> + (<t t-esc="thread.needactionMessagesAsOriginThread.length"/>) + </span> + <span class="o-autogrow"/> + <t t-if="thread.lastNeedactionMessageAsOriginThread"> + <span class="o_ThreadNeedactionPreview_date"> + <t t-esc="thread.lastNeedactionMessageAsOriginThread.date.fromNow()"/> + </span> + </t> + </div> + <div class="o_ThreadNeedactionPreview_core"> + <span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_inlineText" t-att-class="{ 'o-empty': inlineLastNeedactionMessageAsOriginThreadBody.length === 0 }"> + <t t-if="thread.lastNeedactionMessageAsOriginThread and thread.lastNeedactionMessageAsOriginThread.author"> + <MessageAuthorPrefix + messageLocalId="thread.lastNeedactionMessageAsOriginThread.localId" + threadLocalId="thread.localId" + /> + </t> + <t t-esc="inlineLastNeedactionMessageAsOriginThreadBody"/> + </span> + <span class="o-autogrow"/> + <span class="o_ThreadNeedactionPreview_coreItem o_ThreadNeedactionPreview_markAsRead fa fa-check" title="Mark as Read" t-on-click="_onClickMarkAsRead" t-ref="markAsRead"/> + </div> + </div> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview_tests.js b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview_tests.js new file mode 100644 index 00000000..ca1fe22c --- /dev/null +++ b/addons/mail/static/src/components/thread_needaction_preview/thread_needaction_preview_tests.js @@ -0,0 +1,457 @@ +odoo.define('mail/static/src/components/thread_needaction_preview/thread_needaction_preview_tests.js', function (require) { +'use strict'; + +const components = { + ThreadNeedactionPreview: require('mail/static/src/components/thread_needaction_preview/thread_needaction_preview.js'), +}; + +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +const Bus = require('web.Bus'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('thread_needaction_preview', {}, function () { +QUnit.module('thread_needaction_preview_tests.js', { + beforeEach() { + beforeEach(this); + + this.createThreadNeedactionPreviewComponent = async props => { + await createRootComponent(this, components.ThreadNeedactionPreview, { + props, + target: this.widget.el + }); + }; + + this.start = async params => { + const { afterEvent, env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.afterEvent = afterEvent; + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('mark as read', async function (assert) { + assert.expect(5); + + this.data['mail.message'].records.push({ + id: 21, + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 11, + }); + this.data['mail.notification'].records.push({ + mail_message_id: 21, + notification_status: 'sent', + notification_type: 'inbox', + res_partner_id: this.data.currentPartnerId, + }); + await this.start({ + hasChatWindow: true, + hasMessagingMenu: true, + async mockRPC(route, args) { + if (route.includes('mark_all_as_read')) { + assert.step('mark_all_as_read'); + assert.deepEqual( + args.kwargs.domain, + [ + ['model', '=', 'res.partner'], + ['res_id', '=', 11], + ], + "should mark all as read the correct thread" + ); + } + return this._super(...arguments); + }, + }); + await afterNextRender(() => this.afterEvent({ + eventName: 'o-thread-cache-loaded-messages', + func: () => document.querySelector('.o_MessagingMenu_toggler').click(), + message: "should wait until inbox loaded initial needaction messages", + predicate: ({ threadCache }) => { + return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox'; + }, + })); + assert.containsOnce( + document.body, + '.o_ThreadNeedactionPreview_markAsRead', + "should have 1 mark as read button" + ); + + await afterNextRender(() => + document.querySelector('.o_ThreadNeedactionPreview_markAsRead').click() + ); + assert.verifySteps( + ['mark_all_as_read'], + "should have marked the thread as read" + ); + assert.containsNone( + document.body, + '.o_ChatWindow', + "should not have opened the thread" + ); +}); + +QUnit.test('click on preview should mark as read and open the thread', async function (assert) { + assert.expect(6); + + this.data['mail.message'].records.push({ + id: 21, + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 11, + }); + this.data['mail.notification'].records.push({ + mail_message_id: 21, + notification_status: 'sent', + notification_type: 'inbox', + res_partner_id: this.data.currentPartnerId, + }); + await this.start({ + hasChatWindow: true, + hasMessagingMenu: true, + async mockRPC(route, args) { + if (route.includes('mark_all_as_read')) { + assert.step('mark_all_as_read'); + assert.deepEqual( + args.kwargs.domain, + [ + ['model', '=', 'res.partner'], + ['res_id', '=', 11], + ], + "should mark all as read the correct thread" + ); + } + return this._super(...arguments); + }, + }); + await afterNextRender(() => this.afterEvent({ + eventName: 'o-thread-cache-loaded-messages', + func: () => document.querySelector('.o_MessagingMenu_toggler').click(), + message: "should wait until inbox loaded initial needaction messages", + predicate: ({ threadCache }) => { + return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox'; + }, + })); + assert.containsOnce( + document.body, + '.o_ThreadNeedactionPreview', + "should have a preview initially" + ); + assert.containsNone( + document.body, + '.o_ChatWindow', + "should have no chat window initially" + ); + + await afterNextRender(() => + document.querySelector('.o_ThreadNeedactionPreview').click() + ); + assert.verifySteps( + ['mark_all_as_read'], + "should have marked the message as read on clicking on the preview" + ); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "should have opened the thread on clicking on the preview" + ); +}); + +QUnit.test('click on expand from chat window should close the chat window and open the form view', async function (assert) { + assert.expect(8); + + const bus = new Bus(); + bus.on('do-action', null, payload => { + assert.step('do_action'); + assert.strictEqual( + payload.action.res_id, + 11, + "should redirect to the id of the thread" + ); + assert.strictEqual( + payload.action.res_model, + 'res.partner', + "should redirect to the model of the thread" + ); + }); + this.data['mail.message'].records.push({ + id: 21, + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 11, + }); + this.data['mail.notification'].records.push({ + mail_message_id: 21, + notification_status: 'sent', + notification_type: 'inbox', + res_partner_id: this.data.currentPartnerId, + }); + await this.start({ + env: { bus }, + hasChatWindow: true, + hasMessagingMenu: true, + }); + await afterNextRender(() => this.afterEvent({ + eventName: 'o-thread-cache-loaded-messages', + func: () => document.querySelector('.o_MessagingMenu_toggler').click(), + message: "should wait until inbox loaded initial needaction messages", + predicate: ({ threadCache }) => { + return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox'; + }, + })); + assert.containsOnce( + document.body, + '.o_ThreadNeedactionPreview', + "should have a preview initially" + ); + await afterNextRender(() => + document.querySelector('.o_ThreadNeedactionPreview').click() + ); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "should have opened the thread on clicking on the preview" + ); + assert.containsOnce( + document.body, + '.o_ChatWindowHeader_commandExpand', + "should have an expand button" + ); + + await afterNextRender(() => + document.querySelector('.o_ChatWindowHeader_commandExpand').click() + ); + assert.containsNone( + document.body, + '.o_ChatWindow', + "should have closed the chat window on clicking expand" + ); + assert.verifySteps( + ['do_action'], + "should have done an action to open the form view" + ); +}); + +QUnit.test('[technical] opening a non-channel chat window should not call channel_fold', async function (assert) { + // channel_fold should not be called when opening non-channels in chat + // window, because there is no server sync of fold state for them. + assert.expect(3); + + this.data['mail.message'].records.push({ + id: 21, + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 11, + }); + this.data['mail.notification'].records.push({ + mail_message_id: 21, + notification_status: 'sent', + notification_type: 'inbox', + res_partner_id: this.data.currentPartnerId, + }); + await this.start({ + hasChatWindow: true, + hasMessagingMenu: true, + async mockRPC(route, args) { + if (route.includes('channel_fold')) { + const message = "should not call channel_fold when opening a non-channel chat window"; + assert.step(message); + console.error(message); + throw Error(message); + } + return this._super(...arguments); + }, + }); + await afterNextRender(() => this.afterEvent({ + eventName: 'o-thread-cache-loaded-messages', + func: () => document.querySelector('.o_MessagingMenu_toggler').click(), + message: "should wait until inbox loaded initial needaction messages", + predicate: ({ threadCache }) => { + return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox'; + }, + })); + assert.containsOnce( + document.body, + '.o_ThreadNeedactionPreview', + "should have a preview initially" + ); + assert.containsNone( + document.body, + '.o_ChatWindow', + "should have no chat window initially" + ); + + await afterNextRender(() => + document.querySelector('.o_ThreadNeedactionPreview').click() + ); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "should have opened the chat window on clicking on the preview" + ); +}); + +QUnit.test('preview should display last needaction message preview even if there is a more recent message that is not needaction in the thread', async function (assert) { + assert.expect(2); + + this.data['res.partner'].records.push({ + id: 11, + name: "Stranger", + }); + this.data['mail.message'].records.push({ + author_id: 11, + body: "I am the oldest but needaction", + id: 21, + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 11, + }); + this.data['mail.message'].records.push({ + author_id: this.data.currentPartnerId, + body: "I am more recent", + id: 22, + model: 'res.partner', + res_id: 11, + }); + this.data['mail.notification'].records.push({ + mail_message_id: 21, + notification_status: 'sent', + notification_type: 'inbox', + res_partner_id: this.data.currentPartnerId, + }); + await this.start({ + hasChatWindow: true, + hasMessagingMenu: true, + }); + await afterNextRender(() => this.afterEvent({ + eventName: 'o-thread-cache-loaded-messages', + func: () => document.querySelector('.o_MessagingMenu_toggler').click(), + message: "should wait until inbox loaded initial needaction messages", + predicate: ({ threadCache }) => { + return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox'; + }, + })); + assert.containsOnce( + document.body, + '.o_ThreadNeedactionPreview_inlineText', + "should have a preview from the last message" + ); + assert.strictEqual( + document.querySelector('.o_ThreadNeedactionPreview_inlineText').textContent, + 'Stranger: I am the oldest but needaction', + "the displayed message should be the one that needs action even if there is a more recent message that is not needaction on the thread" + ); +}); + +QUnit.test('needaction preview should only show on its origin thread', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ id: 12 }); + this.data['mail.message'].records.push({ + channel_ids: [12], + id: 21, + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 11, + }); + this.data['mail.notification'].records.push({ + mail_message_id: 21, + notification_status: 'sent', + notification_type: 'inbox', + res_partner_id: this.data.currentPartnerId, + }); + await this.start({ hasMessagingMenu: true }); + await afterNextRender(() => this.afterEvent({ + eventName: 'o-thread-cache-loaded-messages', + func: () => document.querySelector('.o_MessagingMenu_toggler').click(), + message: "should wait until inbox loaded initial needaction messages", + predicate: ({ threadCache }) => { + return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox'; + }, + })); + assert.containsOnce( + document.body, + '.o_ThreadNeedactionPreview', + "should have only one preview" + ); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 11, + model: 'res.partner', + }); + assert.containsOnce( + document.body, + `.o_ThreadNeedactionPreview[data-thread-local-id="${thread.localId}"]`, + "preview should be on the origin thread" + ); +}); + +QUnit.test('chat window header should not have unread counter for non-channel thread', async function (assert) { + assert.expect(2); + + this.data['res.partner'].records.push({ id: 11 }); + this.data['mail.message'].records.push({ + author_id: 11, + body: 'not empty', + id: 21, + model: 'res.partner', + needaction: true, + needaction_partner_ids: [this.data.currentPartnerId], + res_id: 11, + }); + this.data['mail.notification'].records.push({ + mail_message_id: 21, + notification_status: 'sent', + notification_type: 'inbox', + res_partner_id: this.data.currentPartnerId, + }); + await this.start({ + hasChatWindow: true, + hasMessagingMenu: true, + }); + await afterNextRender(() => this.afterEvent({ + eventName: 'o-thread-cache-loaded-messages', + func: () => document.querySelector('.o_MessagingMenu_toggler').click(), + message: "should wait until inbox loaded initial needaction messages", + predicate: ({ threadCache }) => { + return threadCache.thread.model === 'mail.box' && threadCache.thread.id === 'inbox'; + }, + })); + await afterNextRender(() => + document.querySelector('.o_ThreadNeedactionPreview').click() + ); + assert.containsOnce( + document.body, + '.o_ChatWindow', + "should have opened the chat window on clicking on the preview" + ); + assert.containsNone( + document.body, + '.o_ChatWindowHeader_counter', + "chat window header should not have unread counter for non-channel thread" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.js b/addons/mail/static/src/components/thread_preview/thread_preview.js new file mode 100644 index 00000000..94df29e0 --- /dev/null +++ b/addons/mail/static/src/components/thread_preview/thread_preview.js @@ -0,0 +1,130 @@ +odoo.define('mail/static/src/components/thread_preview/thread_preview.js', function (require) { +'use strict'; + +const components = { + MessageAuthorPrefix: require('mail/static/src/components/message_author_prefix/message_author_prefix.js'), + PartnerImStatusIcon: require('mail/static/src/components/partner_im_status_icon/partner_im_status_icon.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const mailUtils = require('mail.utils'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class ThreadPreview extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const thread = this.env.models['mail.thread'].get(props.threadLocalId); + let lastMessageAuthor; + let lastMessage; + if (thread) { + const orderedMessages = thread.orderedMessages; + lastMessage = orderedMessages[orderedMessages.length - 1]; + } + if (lastMessage) { + lastMessageAuthor = lastMessage.author; + } + return { + isDeviceMobile: this.env.messaging.device.isMobile, + lastMessage: lastMessage ? lastMessage.__state : undefined, + lastMessageAuthor: lastMessageAuthor + ? lastMessageAuthor.__state + : undefined, + thread: thread ? thread.__state : undefined, + threadCorrespondent: thread && thread.correspondent + ? thread.correspondent.__state + : undefined, + }; + }); + /** + * Reference of the "mark as read" button. Useful to disable the + * top-level click handler when clicking on this specific button. + */ + this._markAsReadRef = useRef('markAsRead'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * Get the image route of the thread. + * + * @returns {string} + */ + image() { + if (this.thread.correspondent) { + return this.thread.correspondent.avatarUrl; + } + return `/web/image/mail.channel/${this.thread.id}/image_128`; + } + + /** + * Get inline content of the last message of this conversation. + * + * @returns {string} + */ + get inlineLastMessageBody() { + if (!this.thread.lastMessage) { + return ''; + } + return mailUtils.htmlToTextContentInline(this.thread.lastMessage.prettyBody); + } + + /** + * @returns {mail.thread} + */ + get thread() { + return this.env.models['mail.thread'].get(this.props.threadLocalId); + } + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * @private + * @param {MouseEvent} ev + */ + _onClick(ev) { + const markAsRead = this._markAsReadRef.el; + if (markAsRead && markAsRead.contains(ev.target)) { + // handled in `_onClickMarkAsRead` + return; + } + this.thread.open(); + if (!this.env.messaging.device.isMobile) { + this.env.messaging.messagingMenu.close(); + } + } + + /** + * @private + * @param {MouseEvent} ev + */ + _onClickMarkAsRead(ev) { + if (this.thread.lastNonTransientMessage) { + this.thread.markAsSeen(this.thread.lastNonTransientMessage); + } + } + +} + +Object.assign(ThreadPreview, { + components, + props: { + threadLocalId: String, + }, + template: 'mail.ThreadPreview', +}); + +return ThreadPreview; + +}); diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.scss b/addons/mail/static/src/components/thread_preview/thread_preview.scss new file mode 100644 index 00000000..772d63e2 --- /dev/null +++ b/addons/mail/static/src/components/thread_preview/thread_preview.scss @@ -0,0 +1,117 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ThreadPreview { + @include o-mail-notification-list-item-layout(); + + &:hover .o_ThreadPreview_markAsRead { + opacity: 1; + } +} + +.o_ThreadPreview_content { + @include o-mail-notification-list-item-content-layout(); +} + +.o_ThreadPreview_core { + @include o-mail-notification-list-item-core-layout(); +} + +.o_ThreadPreview_coreItem { + @include o-mail-notification-list-item-core-item-layout(); +} + +.o_ThreadPreview_counter { + @include o-mail-notification-list-item-counter-layout(); +} + +.o_ThreadPreview_date { + @include o-mail-notification-list-item-date-layout(); +} + +.o_ThreadPreview_header { + @include o-mail-notification-list-item-header-layout(); +} + +.o_ThreadPreview_image { + @include o-mail-notification-list-item-image-layout(); +} + +.o_ThreadPreview_imageContainer { + @include o-mail-notification-list-item-image-container-layout(); +} + +.o_ThreadPreview_inlineText { + @include o-mail-notification-list-item-inline-text-layout(); +} + +.o_ThreadPreview_markAsRead { + @include o-mail-notification-list-item-mark-as-read-layout(); +} + +.o_ThreadPreview_name { + @include o-mail-notification-list-item-name-layout(); +} + +.o_ThreadPreview_partnerImStatusIcon { + @include o-mail-notification-list-item-partner-im-status-icon-layout(); +} + +.o_ThreadPreview_sidebar { + @include o-mail-notification-list-item-sidebar-layout(); +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_ThreadPreview { + @include o-mail-notification-list-item-style(); + + &:hover { + .o_ThreadPreview_partnerImStatusIcon { + @include o-mail-notification-list-item-hover-partner-im-status-icon-style(); + } + } + + &.o-muted { + &:hover { + .o_ThreadPreview_partnerImStatusIcon { + @include o-mail-notification-list-item-muted-hover-partner-im-status-icon-style(); + } + } + } +} + +.o_ThreadPreview_core { + @include o-mail-notification-list-item-core-style(); +} + +.o_ThreadPreview_counter { + @include o-mail-notification-list-item-bold-style(); +} + +.o_ThreadPreview_date { + @include o-mail-notification-list-item-date-style(); + + &.o-muted { + color: gray('500'); + } +} + +.o_ThreadPreview_image { + @include o-mail-notification-list-item-image-style(); +} + +.o_ThreadPreview_markAsRead { + @include o-mail-notification-list-item-mark-as-read-style(); +} + +.o_ThreadPreview_name { + @include o-mail-notification-list-item-bold-style(); +} + +.o_ThreadPreview_partnerImStatusIcon { + @include o-mail-notification-list-item-partner-im-status-icon-style(); +} diff --git a/addons/mail/static/src/components/thread_preview/thread_preview.xml b/addons/mail/static/src/components/thread_preview/thread_preview.xml new file mode 100644 index 00000000..8a4baf3d --- /dev/null +++ b/addons/mail/static/src/components/thread_preview/thread_preview.xml @@ -0,0 +1,63 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ThreadPreview" owl="1"> + <!-- + The preview template is used by the discuss in mobile, and by the systray + menu in order to show preview of threads. + --> + <div class="o_ThreadPreview" t-att-class="{ 'o-muted': thread and thread.localMessageUnreadCounter === 0 }" t-on-click="_onClick" t-att-data-thread-local-id="thread ? thread.localId : undefined"> + <t t-if="thread"> + <div class="o_ThreadPreview_sidebar"> + <div class="o_ThreadPreview_imageContainer o_ThreadPreview_sidebarItem"> + <img class="o_ThreadPreview_image rounded-circle" t-att-src="image()" alt="Thread Image"/> + <t t-if="thread.correspondent and thread.correspondent.im_status"> + <PartnerImStatusIcon + class="o_ThreadPreview_partnerImStatusIcon" + t-att-class="{ + 'o-mobile': env.messaging.device.isMobile, + 'o-muted': thread.localMessageUnreadCounter === 0, + }" + partnerLocalId="thread.correspondent.localId" + /> + </t> + </div> + </div> + <div class="o_ThreadPreview_content"> + <div class="o_ThreadPreview_header"> + <span class="o_ThreadPreview_name" t-att-class="{ 'o-mobile': env.messaging.device.isMobile, 'o-muted': thread.localMessageUnreadCounter === 0 }"> + <t t-esc="thread.displayName"/> + </span> + <t t-if="thread.localMessageUnreadCounter > 0"> + <span class="o_ThreadPreview_counter" t-att-class="{ 'o-muted': thread.localMessageUnreadCounter === 0 }"> + (<t t-esc="thread.localMessageUnreadCounter"/>) + </span> + </t> + <span class="o-autogrow"/> + <t t-if="thread.lastMessage"> + <span class="o_ThreadPreview_date" t-att-class="{ 'o-muted': thread.localMessageUnreadCounter === 0 }"> + <t t-esc="thread.lastMessage.date.fromNow()"/> + </span> + </t> + </div> + <div class="o_ThreadPreview_core"> + <span class="o_ThreadPreview_coreItem o_ThreadPreview_inlineText" t-att-class="{ 'o-empty': inlineLastMessageBody.length === 0 }"> + <t t-if="thread.lastMessage and thread.lastMessage.author"> + <MessageAuthorPrefix + messageLocalId="thread.lastMessage.localId" + threadLocalId="thread.localId" + /> + </t> + <t t-esc="inlineLastMessageBody"/> + </span> + <span class="o-autogrow"/> + <t t-if="thread.localMessageUnreadCounter > 0"> + <span class="o_ThreadPreview_coreItem o_ThreadPreview_markAsRead fa fa-check" title="Mark as Read" t-on-click="_onClickMarkAsRead" t-ref="markAsRead"/> + </t> + </div> + </div> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/thread_preview/thread_preview_tests.js b/addons/mail/static/src/components/thread_preview/thread_preview_tests.js new file mode 100644 index 00000000..981abf6b --- /dev/null +++ b/addons/mail/static/src/components/thread_preview/thread_preview_tests.js @@ -0,0 +1,114 @@ +odoo.define('mail/static/src/components/thread_preview/thread_preview_tests.js', function (require) { +'use strict'; + +const components = { + ThreadPreview: require('mail/static/src/components/thread_preview/thread_preview.js'), +}; + +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('thread_preview', {}, function () { +QUnit.module('thread_preview_tests.js', { + beforeEach() { + beforeEach(this); + + this.createThreadPreviewComponent = async props => { + await createRootComponent(this, components.ThreadPreview, { + props, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('mark as read', async function (assert) { + assert.expect(8); + this.data['mail.channel'].records.push({ + id: 11, + message_unread_counter: 1, + }); + this.data['mail.message'].records.push({ + channel_ids: [11], + id: 100, + model: 'mail.channel', + res_id: 11, + }); + + await this.start({ + hasChatWindow: true, + async mockRPC(route, args) { + if (route.includes('channel_seen')) { + assert.step('channel_seen'); + } + return this._super(...arguments); + }, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 11, + model: 'mail.channel', + }); + await this.createThreadPreviewComponent({ threadLocalId: thread.localId }); + assert.containsOnce( + document.body, + '.o_ThreadPreview_markAsRead', + "should have the mark as read button" + ); + assert.containsOnce( + document.body, + '.o_ThreadPreview_counter', + "should have an unread counter" + ); + + await afterNextRender(() => + document.querySelector('.o_ThreadPreview_markAsRead').click() + ); + assert.verifySteps( + ['channel_seen'], + "should have marked the thread as seen" + ); + assert.hasClass( + document.querySelector('.o_ThreadPreview'), + 'o-muted', + "should be muted once marked as read" + ); + assert.containsNone( + document.body, + '.o_ThreadPreview_markAsRead', + "should no longer have the mark as read button" + ); + assert.containsNone( + document.body, + '.o_ThreadPreview_counter', + "should no longer have an unread counter" + ); + assert.containsNone( + document.body, + '.o_ChatWindow', + "should not have opened the thread" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js new file mode 100644 index 00000000..f053abc7 --- /dev/null +++ b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js @@ -0,0 +1,52 @@ +odoo.define('mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js', function (require) { +'use strict'; + +const components = { + ThreadTypingIcon: require('mail/static/src/components/thread_typing_icon/thread_typing_icon.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; + +class ThreadTextualTypingStatus extends Component { + + /** + * @override + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore(props => { + const thread = this.env.models['mail.thread'].get(props.threadLocalId); + return { + threadOrderedOtherTypingMembersLength: thread && thread.orderedOtherTypingMembersLength, + threadTypingStatusText: thread && thread.typingStatusText, + }; + }); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * @returns {mail.thread} + */ + get thread() { + return this.env.models['mail.thread'].get(this.props.threadLocalId); + } + +} + +Object.assign(ThreadTextualTypingStatus, { + components, + props: { + threadLocalId: String, + }, + template: 'mail.ThreadTextualTypingStatus', +}); + +return ThreadTextualTypingStatus; + +}); diff --git a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.scss b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.scss new file mode 100644 index 00000000..4cb9e1cf --- /dev/null +++ b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.scss @@ -0,0 +1,12 @@ + +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ThreadTextualTypingStatus { + display: flex; +} + +.o_ThreadTextualTypingStatus_separator { + width: map-get($spacers, 1); +} diff --git a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml new file mode 100644 index 00000000..722d0738 --- /dev/null +++ b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.xml @@ -0,0 +1,14 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ThreadTextualTypingStatus" owl="1"> + <div class="o_ThreadTextualTypingStatus"> + <t t-if="thread and thread.orderedOtherTypingMembers.length > 0"> + <ThreadTypingIcon animation="'pulse'" size="'medium'"/> + <span class="o_ThreadTextualTypingStatus_separator"/> + <span t-esc="thread.typingStatusText"/> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status_tests.js b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status_tests.js new file mode 100644 index 00000000..284ca788 --- /dev/null +++ b/addons/mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status_tests.js @@ -0,0 +1,367 @@ +odoo.define('mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status_tests.js', function (require) { +'use strict'; + +const components = { + ThreadTextualTypingStatus: require('mail/static/src/components/thread_textual_typing_status/thread_textual_typing_status.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + nextAnimationFrame, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('thread_textual_typing_status', {}, function () { +QUnit.module('thread_textual_typing_status_tests.js', { + beforeEach() { + beforeEach(this); + + this.createThreadTextualTypingStatusComponent = async thread => { + await createRootComponent(this, components.ThreadTextualTypingStatus, { + props: { threadLocalId: thread.localId }, + target: this.widget.el, + }); + }; + + this.start = async params => { + const { env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + async afterEach() { + afterEach(this); + }, +}); + +QUnit.test('receive other member typing status "is typing"', async function (assert) { + assert.expect(2); + + this.data['res.partner'].records.push({ id: 17, name: 'Demo' }); + this.data['mail.channel'].records.push({ + id: 20, + members: [this.data.currentPartnerId, 17], + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createThreadTextualTypingStatusComponent(thread); + + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "", + "Should display no one is currently typing" + ); + + // simulate receive typing notification from demo + await afterNextRender(() => { + const typingData = { + info: 'typing_status', + is_typing: true, + partner_id: 17, + partner_name: "Demo", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "Demo is typing...", + "Should display that demo user is typing" + ); +}); + +QUnit.test('receive other member typing status "is typing" then "no longer is typing"', async function (assert) { + assert.expect(3); + + this.data['res.partner'].records.push({ id: 17, name: 'Demo' }); + this.data['mail.channel'].records.push({ + id: 20, + members: [this.data.currentPartnerId, 17], + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createThreadTextualTypingStatusComponent(thread); + + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "", + "Should display no one is currently typing" + ); + + // simulate receive typing notification from demo "is typing" + await afterNextRender(() => { + const typingData = { + info: 'typing_status', + is_typing: true, + partner_id: 17, + partner_name: "Demo", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "Demo is typing...", + "Should display that demo user is typing" + ); + + // simulate receive typing notification from demo "is no longer typing" + await afterNextRender(() => { + const typingData = { + info: 'typing_status', + is_typing: false, + partner_id: 17, + partner_name: "Demo", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "", + "Should no longer display that demo user is typing" + ); +}); + +QUnit.test('assume other member typing status becomes "no longer is typing" after 60 seconds without any updated typing status', async function (assert) { + assert.expect(3); + + this.data['res.partner'].records.push({ id: 17, name: 'Demo' }); + this.data['mail.channel'].records.push({ + id: 20, + members: [this.data.currentPartnerId, 17], + }); + await this.start({ + hasTimeControl: true, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createThreadTextualTypingStatusComponent(thread); + + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "", + "Should display no one is currently typing" + ); + + // simulate receive typing notification from demo "is typing" + await afterNextRender(() => { + const typingData = { + info: 'typing_status', + is_typing: true, + partner_id: 17, + partner_name: "Demo", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "Demo is typing...", + "Should display that demo user is typing" + ); + + await afterNextRender(() => this.env.testUtils.advanceTime(60 * 1000)); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "", + "Should no longer display that demo user is typing" + ); +}); + +QUnit.test ('other member typing status "is typing" refreshes 60 seconds timer of assuming no longer typing', async function (assert) { + assert.expect(4); + + this.data['res.partner'].records.push({ id: 17, name: 'Demo' }); + this.data['mail.channel'].records.push({ + id: 20, + members: [this.data.currentPartnerId, 17], + }); + await this.start({ + hasTimeControl: true, + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createThreadTextualTypingStatusComponent(thread); + + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "", + "Should display no one is currently typing" + ); + + // simulate receive typing notification from demo "is typing" + await afterNextRender(() => { + const typingData = { + info: 'typing_status', + is_typing: true, + partner_id: 17, + partner_name: "Demo", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "Demo is typing...", + "Should display that demo user is typing" + ); + + // simulate receive typing notification from demo "is typing" again after 50s. + await this.env.testUtils.advanceTime(50 * 1000); + const typingData = { + info: 'typing_status', + is_typing: true, + partner_id: 17, + partner_name: "Demo", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + await this.env.testUtils.advanceTime(50 * 1000); + await nextAnimationFrame(); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "Demo is typing...", + "Should still display that demo user is typing after 100 seconds (refreshed is typing status at 50s => (100 - 50) = 50s < 60s after assuming no-longer typing)" + ); + + await afterNextRender(() => this.env.testUtils.advanceTime(11 * 1000)); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "", + "Should no longer display that demo user is typing after 111 seconds (refreshed is typing status at 50s => (111 - 50) = 61s > 60s after assuming no-longer typing)" + ); +}); + +QUnit.test('receive several other members typing status "is typing"', async function (assert) { + assert.expect(6); + + this.data['res.partner'].records.push( + { id: 10, name: 'Other10' }, + { id: 11, name: 'Other11' }, + { id: 12, name: 'Other12' } + ); + this.data['mail.channel'].records.push({ + id: 20, + members: [this.data.currentPartnerId, 10, 11, 12], + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel', + }); + await this.createThreadTextualTypingStatusComponent(thread); + + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "", + "Should display no one is currently typing" + ); + + // simulate receive typing notification from other10 (is typing) + await afterNextRender(() => { + const typingData = { + info: 'typing_status', + is_typing: true, + partner_id: 10, + partner_name: "Other10", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "Other10 is typing...", + "Should display that 'Other10' member is typing" + ); + + // simulate receive typing notification from other11 (is typing) + await afterNextRender(() => { + const typingData = { + info: 'typing_status', + is_typing: true, + partner_id: 11, + partner_name: "Other11", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "Other10 and Other11 are typing...", + "Should display that members 'Other10' and 'Other11' are typing (order: longer typer named first)" + ); + + // simulate receive typing notification from other12 (is typing) + await afterNextRender(() => { + const typingData = { + info: 'typing_status', + is_typing: true, + partner_id: 12, + partner_name: "Other12", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "Other10, Other11 and more are typing...", + "Should display that members 'Other10', 'Other11' and more (at least 1 extra member) are typing (order: longer typer named first)" + ); + + // simulate receive typing notification from other10 (no longer is typing) + await afterNextRender(() => { + const typingData = { + info: 'typing_status', + is_typing: false, + partner_id: 10, + partner_name: "Other10", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "Other11 and Other12 are typing...", + "Should display that members 'Other11' and 'Other12' are typing ('Other10' stopped typing)" + ); + + // simulate receive typing notification from other10 (is typing again) + await afterNextRender(() => { + const typingData = { + info: 'typing_status', + is_typing: true, + partner_id: 10, + partner_name: "Other10", + }; + const notification = [[false, 'mail.channel', 20], typingData]; + this.widget.call('bus_service', 'trigger', 'notification', [notification]); + }); + assert.strictEqual( + document.querySelector('.o_ThreadTextualTypingStatus').textContent, + "Other11, Other12 and more are typing...", + "Should display that members 'Other11' and 'Other12' and more (at least 1 extra member) are typing (order by longer typer, 'Other10' just recently restarted typing)" + ); +}); + +}); +}); +}); + +}); diff --git a/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.js b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.js new file mode 100644 index 00000000..4c94a749 --- /dev/null +++ b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.js @@ -0,0 +1,41 @@ +odoo.define('mail/static/src/components/thread_typing_icon/thread_typing_icon.js', function (require) { +'use strict'; + +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); + +const { Component } = owl; + +class ThreadTypingIcon extends Component { + + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + } + +} + +Object.assign(ThreadTypingIcon, { + defaultProps: { + animation: 'none', + size: 'small', + }, + props: { + animation: { + type: String, + validate: prop => ['bounce', 'none', 'pulse'].includes(prop), + }, + size: { + type: String, + validate: prop => ['small', 'medium'].includes(prop), + }, + title: { + type: String, + optional: true, + } + }, + template: 'mail.ThreadTypingIcon', +}); + +return ThreadTypingIcon; + +}); diff --git a/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.scss b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.scss new file mode 100644 index 00000000..ac3c5b2f --- /dev/null +++ b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.scss @@ -0,0 +1,108 @@ +// ------------------------------------------------------------------ +// Variables +// ------------------------------------------------------------------ + +$o-thread-typing-icon-size-medium: 5px; +$o-thread-typing-icon-size-small: 3px; + +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ThreadTypingIcon { + display: flex; + align-items: center; +} + +.o_ThreadTypingIcon_dot { + display: flex; + flex: 0 0 auto; +} + +.o_ThreadTypingIcon_separator { + min-width: 1px; + flex: 1 0 auto; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_ThreadTypingIcon_dot { + border-radius: 50%; + background: gray('500'); + + &.o-sizeMedium { + width: $o-thread-typing-icon-size-medium; + height: $o-thread-typing-icon-size-medium; + } + + &.o-sizeSmall { + width: $o-thread-typing-icon-size-small; + height: $o-thread-typing-icon-size-small; + } +} + +// ------------------------------------------------------------------ +// Animation +// ------------------------------------------------------------------ + +.o_ThreadTypingIcon_dot.o-animationBounce { + + // Note: duplicated animation because dependent on size, and current SASS version doesn't support var() + &.o-sizeMedium { + animation: o_ThreadTypingIcon_dot_animationBounce_sizeMedium_animation 1.5s linear infinite; + } + + &.o-sizeSmall { + animation: o_ThreadTypingIcon_dot_animationBounce_sizeSmall_animation 1.5s linear infinite; + } + + &.o_ThreadTypingIcon_dot2 { + animation-delay: -1.35s; + } + + &.o_ThreadTypingIcon_dot3 { + animation-delay: -1.2s; + } +} + +.o_ThreadTypingIcon_dot.o-animationPulse { + animation: o_ThreadTypingIcon_dot_animationPulse_animation 1.5s linear infinite; + + &.o_ThreadTypingIcon_dot2 { + animation-delay: -1.35s; + } + + &.o_ThreadTypingIcon_dot3 { + animation-delay: -1.2s; + } +} + +@keyframes o_ThreadTypingIcon_dot_animationBounce_sizeMedium_animation { + 0%, 40%, 100% { + transform: initial; + } + 20% { + transform: translateY(-$o-thread-typing-icon-size-medium); + } +} + +@keyframes o_ThreadTypingIcon_dot_animationBounce_sizeSmall_animation { + 0%, 40%, 100% { + transform: initial; + } + 20% { + transform: translateY(-$o-thread-typing-icon-size-small); + } +} + + +@keyframes o_ThreadTypingIcon_dot_animationPulse_animation { + 0%, 40%, 100% { + opacity: initial; + } + 20% { + opacity: 25%; + } +} diff --git a/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.xml b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.xml new file mode 100644 index 00000000..1bdb4ada --- /dev/null +++ b/addons/mail/static/src/components/thread_typing_icon/thread_typing_icon.xml @@ -0,0 +1,29 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ThreadTypingIcon" owl="1"> + <div class="o_ThreadTypingIcon" t-att-title="props.title"> + <span class="o_ThreadTypingIcon_dot o_ThreadTypingIcon_dot1" t-att-class="{ + 'o-animationBounce': props.animation === 'bounce', + 'o-animationPulse': props.animation === 'pulse', + 'o-sizeMedium': props.size === 'medium', + 'o-sizeSmall': props.size === 'small', + }"/> + <span class="o_ThreadTypingIcon_separator"/> + <span class="o_ThreadTypingIcon_dot o_ThreadTypingIcon_dot2" t-att-class="{ + 'o-animationBounce': props.animation === 'bounce', + 'o-animationPulse': props.animation === 'pulse', + 'o-sizeMedium': props.size === 'medium', + 'o-sizeSmall': props.size === 'small', + }"/> + <span class="o_ThreadTypingIcon_separator"/> + <span class="o_ThreadTypingIcon_dot o_ThreadTypingIcon_dot3" t-att-class="{ + 'o-animationBounce': props.animation === 'bounce', + 'o-animationPulse': props.animation === 'pulse', + 'o-sizeMedium': props.size === 'medium', + 'o-sizeSmall': props.size === 'small', + }"/> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/thread_view/thread_view.js b/addons/mail/static/src/components/thread_view/thread_view.js new file mode 100644 index 00000000..2399fd16 --- /dev/null +++ b/addons/mail/static/src/components/thread_view/thread_view.js @@ -0,0 +1,222 @@ +odoo.define('mail/static/src/components/thread_view/thread_view.js', function (require) { +'use strict'; + +const components = { + Composer: require('mail/static/src/components/composer/composer.js'), + MessageList: require('mail/static/src/components/message_list/message_list.js'), +}; +const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js'); +const useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); +const useUpdate = require('mail/static/src/component_hooks/use_update/use_update.js'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class ThreadView extends Component { + + /** + * @param {...any} args + */ + constructor(...args) { + super(...args); + useShouldUpdateBasedOnProps(); + useStore((...args) => this._useStoreSelector(...args), { + compareDepth: { + threadTextInputSendShortcuts: 1, + }, + }); + useUpdate({ func: () => this._update() }); + /** + * Reference of the composer. Useful to set focus on composer when + * thread has the focus. + */ + this._composerRef = useRef('composer'); + /** + * Reference of the message list. Useful to determine scroll positions. + */ + this._messageListRef = useRef('messageList'); + } + + //-------------------------------------------------------------------------- + // Public + //-------------------------------------------------------------------------- + + /** + * Focus the thread. If it has a composer, focus it. + */ + focus() { + if (!this._composerRef.comp) { + return; + } + this._composerRef.comp.focus(); + } + + /** + * Focusout the thread. + */ + focusout() { + if (!this._composerRef.comp) { + return; + } + this._composerRef.comp.focusout(); + } + + /** + * Get the scroll height in the message list. + * + * @returns {integer|undefined} + */ + getScrollHeight() { + if (!this._messageListRef.comp) { + return undefined; + } + return this._messageListRef.comp.getScrollHeight(); + } + + /** + * Get the scroll position in the message list. + * + * @returns {integer|undefined} + */ + getScrollTop() { + if (!this._messageListRef.comp) { + return undefined; + } + return this._messageListRef.comp.getScrollTop(); + } + + /** + * @private + * @param {MouseEvent} ev + */ + onScroll(ev) { + if (!this._messageListRef.comp) { + return; + } + this._messageListRef.comp.onScroll(ev); + } + + /** + * @returns {mail.thread_view} + */ + get threadView() { + return this.env.models['mail.thread_view'].get(this.props.threadViewLocalId); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * Called when thread component is mounted or patched. + * + * @private + */ + _update() { + this.trigger('o-rendered'); + } + + /** + * Returns data selected from the store. + * + * @private + * @param {Object} props + * @returns {Object} + */ + _useStoreSelector(props) { + const threadView = this.env.models['mail.thread_view'].get(props.threadViewLocalId); + const thread = threadView ? threadView.thread : undefined; + const threadCache = threadView ? threadView.threadCache : undefined; + const correspondent = thread && thread.correspondent; + return { + composer: thread && thread.composer, + correspondentId: correspondent && correspondent.id, + isDeviceMobile: this.env.messaging.device.isMobile, + thread, + threadCacheIsLoaded: threadCache && threadCache.isLoaded, + threadIsTemporary: thread && thread.isTemporary, + threadMassMailing: thread && thread.mass_mailing, + threadModel: thread && thread.model, + threadTextInputSendShortcuts: thread && thread.textInputSendShortcuts || [], + threadView, + threadViewIsLoading: threadView && threadView.isLoading, + }; + } + +} + +Object.assign(ThreadView, { + components, + defaultProps: { + composerAttachmentsDetailsMode: 'auto', + hasComposer: false, + hasMessageCheckbox: false, + hasSquashCloseMessages: false, + haveMessagesMarkAsReadIcon: false, + haveMessagesReplyIcon: false, + isDoFocus: false, + order: 'asc', + showComposerAttachmentsExtensions: true, + showComposerAttachmentsFilenames: true, + }, + props: { + composerAttachmentsDetailsMode: { + type: String, + validate: prop => ['auto', 'card', 'hover', 'none'].includes(prop), + }, + hasComposer: Boolean, + hasComposerCurrentPartnerAvatar: { + type: Boolean, + optional: true, + }, + hasComposerSendButton: { + type: Boolean, + optional: true, + }, + /** + * If set, determines whether the composer should display status of + * members typing on related thread. When this prop is not provided, + * it defaults to composer component default value. + */ + hasComposerThreadTyping: { + type: Boolean, + optional: true, + }, + hasMessageCheckbox: Boolean, + hasScrollAdjust: { + type: Boolean, + optional: true, + }, + hasSquashCloseMessages: Boolean, + haveMessagesMarkAsReadIcon: Boolean, + haveMessagesReplyIcon: Boolean, + /** + * Determines whether this should become focused. + */ + isDoFocus: Boolean, + order: { + type: String, + validate: prop => ['asc', 'desc'].includes(prop), + }, + selectedMessageLocalId: { + type: String, + optional: true, + }, + /** + * Function returns the exact scrollable element from the parent + * to manage proper scroll heights which affects the load more messages. + */ + getScrollableElement: { + type: Function, + optional: true, + }, + showComposerAttachmentsExtensions: Boolean, + showComposerAttachmentsFilenames: Boolean, + threadViewLocalId: String, + }, + template: 'mail.ThreadView', +}); + +return ThreadView; + +}); diff --git a/addons/mail/static/src/components/thread_view/thread_view.scss b/addons/mail/static/src/components/thread_view/thread_view.scss new file mode 100644 index 00000000..0db54501 --- /dev/null +++ b/addons/mail/static/src/components/thread_view/thread_view.scss @@ -0,0 +1,38 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ThreadView { + display: flex; + position: relative; + flex-flow: column; + overflow: auto; +} + +.o_ThreadView_composer { + flex: 0 0 auto; +} + +.o_ThreadView_loading { + display: flex; + align-self: center; + flex: 1 1 auto; + align-items: center; +} + +.o_ThreadView_messageList { + flex: 1 1 auto; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_ThreadView { + background-color: gray('100'); + +} + +.o_ThreadView_loadingIcon { + margin-right: 3px; +} diff --git a/addons/mail/static/src/components/thread_view/thread_view.xml b/addons/mail/static/src/components/thread_view/thread_view.xml new file mode 100644 index 00000000..8f06bf39 --- /dev/null +++ b/addons/mail/static/src/components/thread_view/thread_view.xml @@ -0,0 +1,50 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ThreadView" owl="1"> + <div class="o_ThreadView" t-att-data-correspondent-id="threadView and threadView.thread and threadView.thread.correspondent and threadView.thread.correspondent.id" t-att-data-thread-local-id="threadView and threadView.thread and threadView.thread.localId"> + <t t-if="threadView"> + <t t-if="threadView.isLoading and !threadView.threadCache.isLoaded" name="loadingCondition"> + <div class="o_ThreadView_loading"> + <span><i class="o_ThreadView_loadingIcon fa fa-spinner fa-spin" title="Loading..." role="img"/>Loading...</span> + </div> + </t> + <t t-elif="threadView.threadCache.isLoaded or threadView.thread.isTemporary"> + <MessageList + class="o_ThreadView_messageList" + getScrollableElement= "props.getScrollableElement" + hasMessageCheckbox="props.hasMessageCheckbox" + hasScrollAdjust="props.hasScrollAdjust" + hasSquashCloseMessages="props.hasSquashCloseMessages" + haveMessagesMarkAsReadIcon="props.haveMessagesMarkAsReadIcon" + haveMessagesReplyIcon="props.haveMessagesReplyIcon" + order="props.order" + selectedMessageLocalId="props.selectedMessageLocalId" + threadViewLocalId="threadView.localId" + t-ref="messageList" + /> + </t> + <t t-elif="props.hasComposer"> + <div class="o-autogrow"/> + </t> + <t t-if="props.hasComposer"> + <Composer + class="o_ThreadView_composer" + attachmentsDetailsMode="props.composerAttachmentsDetailsMode" + composerLocalId="threadView.thread.composer.localId" + hasCurrentPartnerAvatar="props.hasComposerCurrentPartnerAvatar" + hasSendButton="props.hasComposerSendButton" + hasThreadTyping="props.hasComposerThreadTyping" + isCompact="(threadView.thread.model === 'mail.channel' and threadView.thread.mass_mailing) ? false : undefined" + isDoFocus="props.isDoFocus" + showAttachmentsExtensions="props.showComposerAttachmentsExtensions" + showAttachmentsFilenames="props.showComposerAttachmentsFilenames" + textInputSendShortcuts="threadView.textInputSendShortcuts" + t-ref="composer" + /> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/thread_view/thread_view_tests.js b/addons/mail/static/src/components/thread_view/thread_view_tests.js new file mode 100644 index 00000000..58a05989 --- /dev/null +++ b/addons/mail/static/src/components/thread_view/thread_view_tests.js @@ -0,0 +1,1809 @@ +odoo.define('mail/static/src/components/thread_view/thread_view_tests.js', function (require) { +'use strict'; + +const components = { + ThreadView: require('mail/static/src/components/thread_view/thread_view.js'), +}; +const { + afterEach, + afterNextRender, + beforeEach, + createRootComponent, + dragenterFiles, + start, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('thread_view', {}, function () { +QUnit.module('thread_view_tests.js', { + beforeEach() { + beforeEach(this); + + /** + * @param {mail.thread_view} threadView + * @param {Object} [otherProps={}] + * @param {Object} [param2={}] + * @param {boolean} [param2.isFixedSize=false] + */ + this.createThreadViewComponent = async (threadView, otherProps = {}, { isFixedSize = false } = {}) => { + let target; + if (isFixedSize) { + // needed to allow scrolling in some tests + const div = document.createElement('div'); + Object.assign(div.style, { + display: 'flex', + 'flex-flow': 'column', + height: '300px', + }); + this.widget.el.append(div); + target = div; + } else { + target = this.widget.el; + } + const props = Object.assign({ threadViewLocalId: threadView.localId }, otherProps); + await createRootComponent(this, components.ThreadView, { props, target }); + }; + + this.start = async params => { + const { afterEvent, env, widget } = await start(Object.assign({}, params, { + data: this.data, + })); + this.afterEvent = afterEvent; + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + afterEach(this); + }, +}); + +QUnit.test('dragover files on thread with composer', async function (assert) { + assert.expect(1); + + await this.start(); + const thread = this.env.models['mail.thread'].create({ + channel_type: 'channel', + id: 100, + members: [['insert', [ + { + email: "john@example.com", + id: 9, + name: "John", + }, + { + email: "fred@example.com", + id: 10, + name: "Fred", + }, + ]]], + model: 'mail.channel', + name: "General", + public: 'public', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + await afterNextRender(() => + dragenterFiles(document.querySelector('.o_ThreadView')) + ); + assert.ok( + document.querySelector('.o_Composer_dropZone'), + "should have dropzone when dragging file over the thread" + ); +}); + +QUnit.test('message list desc order', async function (assert) { + assert.expect(5); + + for (let i = 0; i <= 60; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [100], + model: 'mail.channel', + res_id: 100, + }); + } + await this.start(); + const thread = this.env.models['mail.thread'].create({ + channel_type: 'channel', + id: 100, + members: [['insert', [ + { + email: "john@example.com", + id: 9, + name: "John", + }, + { + email: "fred@example.com", + id: 10, + name: "Fred", + }, + ]]], + model: 'mail.channel', + name: "General", + public: 'public', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => this.createThreadViewComponent(threadViewer.threadView, { order: 'desc' }, { isFixedSize: true }), + message: "should wait until channel 100 loaded initial messages", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 100 + ); + }, + }); + const messageItems = document.querySelectorAll(`.o_MessageList_item`); + assert.notOk( + messageItems[0].classList.contains("o_MessageList_loadMore"), + "load more link should NOT be before messages" + ); + assert.ok( + messageItems[messageItems.length - 1].classList.contains("o_MessageList_loadMore"), + "load more link should be after messages" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 30, + "should have 30 messages at the beginning" + ); + + // scroll to bottom + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + const messageList = document.querySelector('.o_ThreadView_messageList'); + messageList.scrollTop = messageList.scrollHeight - messageList.clientHeight; + }, + message: "should wait until channel 100 loaded more messages after scrolling to bottom", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'more-messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 100 + ); + }, + }); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 60, + "should have 60 messages after scrolled to bottom" + ); + + await afterNextRender(() => { + document.querySelector(`.o_ThreadView_messageList`).scrollTop = 0; + }); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 60, + "scrolling to top should not trigger any message fetching" + ); +}); + +QUnit.test('message list asc order', async function (assert) { + assert.expect(5); + + for (let i = 0; i <= 60; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [100], + model: 'mail.channel', + res_id: 100, + }); + } + await this.start(); + const thread = this.env.models['mail.thread'].create({ + channel_type: 'channel', + id: 100, + members: [['insert', [ + { + email: "john@example.com", + id: 9, + name: "John", + }, + { + email: "fred@example.com", + id: 10, + name: "Fred", + }, + ]]], + model: 'mail.channel', + name: "General", + public: 'public', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => this.createThreadViewComponent(threadViewer.threadView, { order: 'asc' }, { isFixedSize: true }), + message: "should wait until channel 100 loaded initial messages", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 100 + ); + }, + }); + const messageItems = document.querySelectorAll(`.o_MessageList_item`); + assert.notOk( + messageItems[messageItems.length - 1].classList.contains("o_MessageList_loadMore"), + "load more link should be before messages" + ); + assert.ok( + messageItems[0].classList.contains("o_MessageList_loadMore"), + "load more link should NOT be after messages" + ); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 30, + "should have 30 messages at the beginning" + ); + + // scroll to top + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => document.querySelector(`.o_ThreadView_messageList`).scrollTop = 0, + message: "should wait until channel 100 loaded more messages after scrolling to top", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'more-messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 100 + ); + }, + }); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 60, + "should have 60 messages after scrolled to top" + ); + + // scroll to bottom + await afterNextRender(() => { + document.querySelector(`.o_ThreadView_messageList`).scrollTop = + document.querySelector(`.o_ThreadView_messageList`).scrollHeight; + }); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 60, + "scrolling to bottom should not trigger any message fetching" + ); +}); + +QUnit.test('mark channel as fetched when a new message is loaded and as seen when focusing composer [REQUIRE FOCUS]', async function (assert) { + assert.expect(8); + + this.data['res.partner'].records.push({ + email: "fred@example.com", + id: 10, + name: "Fred", + }); + this.data['res.users'].records.push({ + id: 10, + partner_id: 10, + }); + this.data['mail.channel'].records.push({ + channel_type: 'chat', + id: 100, + is_pinned: true, + members: [this.data.currentPartnerId, 10], + }); + await this.start({ + mockRPC(route, args) { + if (args.method === 'channel_fetched') { + assert.strictEqual( + args.args[0][0], + 100, + 'channel_fetched is called on the right channel id' + ); + assert.strictEqual( + args.model, + 'mail.channel', + 'channel_fetched is called on the right channel model' + ); + assert.step('rpc:channel_fetch'); + } else if (args.method === 'channel_seen') { + assert.strictEqual( + args.args[0][0], + 100, + 'channel_seen is called on the right channel id' + ); + assert.strictEqual( + args.model, + 'mail.channel', + 'channel_seeb is called on the right channel model' + ); + assert.step('rpc:channel_seen'); + } + return this._super(...arguments); + } + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 100, + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + await afterNextRender(async () => this.env.services.rpc({ + route: '/mail/chat_post', + params: { + context: { + mockedUserId: 10, + }, + message_content: "new message", + uuid: thread.uuid, + }, + })); + assert.verifySteps( + ['rpc:channel_fetch'], + "Channel should have been fetched but not seen yet" + ); + + await afterNextRender(() => this.afterEvent({ + eventName: 'o-thread-last-seen-by-current-partner-message-id-changed', + func: () => document.querySelector('.o_ComposerTextInput_textarea').focus(), + message: "should wait until last seen by current partner message id changed after focusing the thread", + predicate: ({ thread }) => { + return ( + thread.id === 100 && + thread.model === 'mail.channel' + ); + }, + })); + assert.verifySteps( + ['rpc:channel_seen'], + "Channel should have been marked as seen after threadView got the focus" + ); +}); + +QUnit.test('mark channel as fetched and seen when a new message is loaded if composer is focused [REQUIRE FOCUS]', async function (assert) { + assert.expect(4); + + this.data['res.partner'].records.push({ + id: 10, + }); + this.data['res.users'].records.push({ + id: 10, + partner_id: 10, + }); + this.data['mail.channel'].records.push({ + id: 100, + }); + await this.start({ + mockRPC(route, args) { + if (args.method === 'channel_fetched' && args.args[0] === 100) { + throw new Error("'channel_fetched' RPC must not be called for created channel as message is directly seen"); + } else if (args.method === 'channel_seen') { + assert.strictEqual( + args.args[0][0], + 100, + 'channel_seen is called on the right channel id' + ); + assert.strictEqual( + args.model, + 'mail.channel', + 'channel_seen is called on the right channel model' + ); + assert.step('rpc:channel_seen'); + } + return this._super(...arguments); + } + }); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 100, + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + document.querySelector('.o_ComposerTextInput_textarea').focus(); + // simulate receiving a message + await this.afterEvent({ + eventName: 'o-thread-last-seen-by-current-partner-message-id-changed', + func: () => this.env.services.rpc({ + route: '/mail/chat_post', + params: { + context: { + mockedUserId: 10, + }, + message_content: "<p>fdsfsd</p>", + uuid: thread.uuid, + }, + }), + message: "should wait until last seen by current partner message id changed after receiving a message while thread is focused", + predicate: ({ thread }) => { + return ( + thread.id === 100 && + thread.model === 'mail.channel' + ); + }, + }); + assert.verifySteps( + ['rpc:channel_seen'], + "Channel should have been mark as seen directly" + ); +}); + +QUnit.test('show message subject if thread is mailing channel', async function (assert) { + assert.expect(3); + + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [100], + model: 'mail.channel', + res_id: 100, + subject: "Salutations, voyageur", + }); + await this.start(); + const thread = this.env.models['mail.thread'].create({ + channel_type: 'channel', + id: 100, + mass_mailing: true, + model: 'mail.channel', + name: "General", + public: 'public', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView); + + assert.containsOnce( + document.body, + '.o_Message', + "should display a single message" + ); + assert.containsOnce( + document.body, + '.o_Message_subject', + "should display subject of the message" + ); + assert.strictEqual( + document.querySelector('.o_Message_subject').textContent, + "Subject: Salutations, voyageur", + "Subject of the message should be 'Salutations, voyageur'" + ); +}); + +QUnit.test('[technical] new messages separator on posting message', async function (assert) { + // technical as we need to remove focus from text input to avoid `channel_seen` call + assert.expect(4); + + this.data['mail.channel'].records = [{ + channel_type: 'channel', + id: 20, + is_pinned: true, + message_unread_counter: 0, + seen_message_id: 10, + name: "General", + }]; + this.data['mail.message'].records.push({ + body: "first message", + channel_ids: [20], + id: 10, + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel' + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + + assert.containsOnce( + document.body, + '.o_Message', + "should display one message in thread initially" + ); + assert.containsNone( + document.body, + '.o_MessageList_separatorNewMessages', + "should not display 'new messages' separator" + ); + + document.querySelector('.o_ComposerTextInput_textarea').focus(); + await afterNextRender(() => document.execCommand('insertText', false, "hey !")); + await afterNextRender(() => { + // need to remove focus from text area to avoid channel_seen + document.querySelector('.o_Composer_buttonSend').focus(); + document.querySelector('.o_Composer_buttonSend').click(); + + }); + assert.containsN( + document.body, + '.o_Message', + 2, + "should display 2 messages (initial & newly posted), after posting a message" + ); + assert.containsNone( + document.body, + '.o_MessageList_separatorNewMessages', + "still no separator shown when current partner posted a message" + ); +}); + +QUnit.test('new messages separator on receiving new message [REQUIRE FOCUS]', async function (assert) { + assert.expect(6); + + this.data['res.partner'].records.push({ + id: 11, + name: "Foreigner partner", + }); + this.data['res.users'].records.push({ + id: 42, + name: "Foreigner user", + partner_id: 11, + }); + this.data['mail.channel'].records.push({ + channel_type: 'channel', + id: 20, + is_pinned: true, + message_unread_counter: 0, + name: "General", + seen_message_id: 1, + uuid: 'randomuuid', + }); + this.data['mail.message'].records.push({ + body: "blah", + channel_ids: [20], + id: 1, + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel' + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + + assert.containsOnce( + document.body, + '.o_MessageList_message', + "should have an initial message" + ); + assert.containsNone( + document.body, + '.o_MessageList_separatorNewMessages', + "should not display 'new messages' separator" + ); + + document.querySelector('.o_ComposerTextInput_textarea').blur(); + // simulate receiving a message + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => this.env.services.rpc({ + route: '/mail/chat_post', + params: { + context: { + mockedUserId: 42, + }, + message_content: "hu", + uuid: thread.uuid, + }, + }), + message: "should wait until new message is received", + predicate: ({ hint, threadViewer }) => { + return ( + threadViewer.thread.id === 20 && + threadViewer.thread.model === 'mail.channel' && + hint.type === 'message-received' + ); + }, + }); + assert.containsN( + document.body, + '.o_Message', + 2, + "should now have 2 messages after receiving a new message" + ); + assert.containsOnce( + document.body, + '.o_MessageList_separatorNewMessages', + "'new messages' separator should be shown" + ); + + assert.containsOnce( + document.body, + `.o_MessageList_separatorNewMessages ~ .o_Message[data-message-local-id="${ + this.env.models['mail.message'].findFromIdentifyingData({ id: 2 }).localId + }"]`, + "'new messages' separator should be shown above new message received" + ); + + await afterNextRender(() => this.afterEvent({ + eventName: 'o-thread-last-seen-by-current-partner-message-id-changed', + func: () => document.querySelector('.o_ComposerTextInput_textarea').focus(), + message: "should wait until last seen by current partner message id changed after focusing the thread", + predicate: ({ thread }) => { + return ( + thread.id === 20 && + thread.model === 'mail.channel' + ); + }, + })); + assert.containsNone( + document.body, + '.o_MessageList_separatorNewMessages', + "'new messages' separator should no longer be shown as last message has been seen" + ); +}); + +QUnit.test('new messages separator on posting message', async function (assert) { + assert.expect(4); + + this.data['mail.channel'].records = [{ + channel_type: 'channel', + id: 20, + is_pinned: true, + message_unread_counter: 0, + name: "General", + }]; + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel' + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + + assert.containsNone( + document.body, + '.o_MessageList_message', + "should have no messages" + ); + assert.containsNone( + document.body, + '.o_MessageList_separatorNewMessages', + "should not display 'new messages' separator" + ); + + document.querySelector('.o_ComposerTextInput_textarea').focus(); + await afterNextRender(() => document.execCommand('insertText', false, "hey !")); + await afterNextRender(() => + document.querySelector('.o_Composer_buttonSend').click() + ); + assert.containsOnce( + document.body, + '.o_Message', + "should have the message current partner just posted" + ); + assert.containsNone( + document.body, + '.o_MessageList_separatorNewMessages', + "still no separator shown when current partner posted a message" + ); +}); + +QUnit.test('basic rendering of canceled notification', async function (assert) { + assert.expect(8); + + this.data['mail.channel'].records.push({ id: 11 }); + this.data['res.partner'].records.push({ id: 12, name: "Someone" }); + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [11], + id: 10, + message_type: 'email', + model: 'mail.channel', + notification_ids: [11], + res_id: 11, + }); + this.data['mail.notification'].records.push({ + failure_type: 'SMTP', + id: 11, + mail_message_id: 10, + notification_status: 'canceled', + notification_type: 'email', + res_partner_id: 12, + }); + await this.start(); + const threadViewer = await this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['insert', { + id: 11, + model: 'mail.channel', + }]], + }); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + this.createThreadViewComponent(threadViewer.threadView); + }, + message: "thread become loaded with messages", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 11 + ); + }, + }); + + assert.containsOnce( + document.body, + '.o_Message_notificationIconClickable', + "should display the notification icon container on the message" + ); + assert.containsOnce( + document.body, + '.o_Message_notificationIcon', + "should display the notification icon on the message" + ); + assert.hasClass( + document.querySelector('.o_Message_notificationIcon'), + 'fa-envelope-o', + "notification icon shown on the message should represent email" + ); + + await afterNextRender(() => { + document.querySelector('.o_Message_notificationIconClickable').click(); + }); + assert.containsOnce( + document.body, + '.o_NotificationPopover', + "notification popover should be opened after notification has been clicked" + ); + assert.containsOnce( + document.body, + '.o_NotificationPopover_notificationIcon', + "an icon should be shown in notification popover" + ); + assert.containsOnce( + document.body, + '.o_NotificationPopover_notificationIcon.fa.fa-trash-o', + "the icon shown in notification popover should be the canceled icon" + ); + assert.containsOnce( + document.body, + '.o_NotificationPopover_notificationPartnerName', + "partner name should be shown in notification popover" + ); + assert.strictEqual( + document.querySelector('.o_NotificationPopover_notificationPartnerName').textContent.trim(), + "Someone", + "partner name shown in notification popover should be the one concerned by the notification" + ); +}); + +QUnit.test('should scroll to bottom on receiving new message if the list is initially scrolled to bottom (asc order)', async function (assert) { + assert.expect(2); + + // Needed partner & user to allow simulation of message reception + this.data['res.partner'].records.push({ + id: 11, + name: "Foreigner partner", + }); + this.data['res.users'].records.push({ + id: 42, + name: "Foreigner user", + partner_id: 11, + }); + this.data['mail.channel'].records.push({ id: 20 }); + for (let i = 0; i <= 10; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + }); + } + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel' + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => this.createThreadViewComponent( + threadViewer.threadView, + { order: 'asc' }, + { isFixedSize: true }, + ), + message: "should wait until channel 20 scrolled initially", + predicate: data => threadViewer === data.threadViewer, + }); + const initialMessageList = document.querySelector('.o_ThreadView_messageList'); + assert.strictEqual( + initialMessageList.scrollTop, + initialMessageList.scrollHeight - initialMessageList.clientHeight, + "should have scrolled to bottom of channel 20 initially" + ); + + // simulate receiving a message + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => + this.env.services.rpc({ + route: '/mail/chat_post', + params: { + context: { + mockedUserId: 42, + }, + message_content: "hello", + uuid: thread.uuid, + }, + }), + message: "should wait until channel 20 scrolled after receiving a message", + predicate: data => threadViewer === data.threadViewer, + }); + const messageList = document.querySelector('.o_ThreadView_messageList'); + assert.strictEqual( + messageList.scrollTop, + messageList.scrollHeight - messageList.clientHeight, + "should scroll to bottom on receiving new message because the list is initially scrolled to bottom" + ); +}); + +QUnit.test('should not scroll on receiving new message if the list is initially scrolled anywhere else than bottom (asc order)', async function (assert) { + assert.expect(3); + + // Needed partner & user to allow simulation of message reception + this.data['res.partner'].records.push({ + id: 11, + name: "Foreigner partner", + }); + this.data['res.users'].records.push({ + id: 42, + name: "Foreigner user", + partner_id: 11, + }); + this.data['mail.channel'].records.push({ id: 20 }); + for (let i = 0; i <= 10; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [20], + }); + } + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel' + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => this.createThreadViewComponent( + threadViewer.threadView, + { order: 'asc' }, + { isFixedSize: true }, + ), + message: "should wait until channel 20 scrolled initially", + predicate: data => threadViewer === data.threadViewer, + }); + const initialMessageList = document.querySelector('.o_ThreadView_messageList'); + assert.strictEqual( + initialMessageList.scrollTop, + initialMessageList.scrollHeight - initialMessageList.clientHeight, + "should have scrolled to bottom of channel 20 initially" + ); + + await this.afterEvent({ + eventName: 'o-component-message-list-scrolled', + func: () => initialMessageList.scrollTop = 0, + message: "should wait until channel 20 processed manual scroll", + predicate: data => threadViewer === data.threadViewer, + }); + assert.strictEqual( + initialMessageList.scrollTop, + 0, + "should have scrolled to the top of channel 20 manually" + ); + + // simulate receiving a message + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => + this.env.services.rpc({ + route: '/mail/chat_post', + params: { + context: { + mockedUserId: 42, + }, + message_content: "hello", + uuid: thread.uuid, + }, + }), + message: "should wait until channel 20 processed new message hint", + predicate: data => threadViewer === data.threadViewer && data.hint.type === 'message-received', + }); + assert.strictEqual( + document.querySelector('.o_ThreadView_messageList').scrollTop, + 0, + "should not scroll on receiving new message because the list is initially scrolled anywhere else than bottom" + ); +}); + +QUnit.test("delete all attachments of message without content should no longer display the message", async function (assert) { + assert.expect(2); + + this.data['ir.attachment'].records.push({ + id: 143, + mimetype: 'text/plain', + name: "Blah.txt", + }); + this.data['mail.channel'].records.push({ id: 11 }); + this.data['mail.message'].records.push( + { + attachment_ids: [143], + channel_ids: [11], + id: 101, + } + ); + await this.start(); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['insert', { id: 11, model: 'mail.channel' }]], + }); + // wait for messages of the thread to be loaded + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + this.createThreadViewComponent(threadViewer.threadView); + }, + message: "thread become loaded with messages", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 11 + ); + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "there should be 1 message displayed initially" + ); + + await afterNextRender(() => { + document.querySelector(`.o_Attachment[data-attachment-local-id="${ + this.env.models['mail.attachment'].findFromIdentifyingData({ id: 143 }).localId + }"] .o_Attachment_asideItemUnlink`).click(); + }); + await afterNextRender(() => + document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click() + ); + assert.containsNone( + document.body, + '.o_Message', + "message should no longer be displayed after removing all its attachments (empty content)" + ); +}); + +QUnit.test('delete all attachments of a message with some text content should still keep it displayed', async function (assert) { + assert.expect(2); + + this.data['ir.attachment'].records.push({ + id: 143, + mimetype: 'text/plain', + name: "Blah.txt", + }); + this.data['mail.channel'].records.push({ id: 11 }); + this.data['mail.message'].records.push( + { + attachment_ids: [143], + body: "Some content", + channel_ids: [11], + id: 101, + }, + ); + await this.start(); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['insert', { id: 11, model: 'mail.channel' }]], + }); + // wait for messages of the thread to be loaded + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + this.createThreadViewComponent(threadViewer.threadView); + }, + message: "thread become loaded with messages", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 11 + ); + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "there should be 1 message displayed initially" + ); + + await afterNextRender(() => { + document.querySelector(`.o_Attachment[data-attachment-local-id="${ + this.env.models['mail.attachment'].findFromIdentifyingData({ id: 143 }).localId + }"] .o_Attachment_asideItemUnlink`).click(); + }); + await afterNextRender(() => + document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click() + ); + assert.containsOnce( + document.body, + '.o_Message', + "message should still be displayed after removing its attachments (non-empty content)" + ); +}); + +QUnit.test('delete all attachments of a message with tracking fields should still keep it displayed', async function (assert) { + assert.expect(2); + + this.data['ir.attachment'].records.push({ + id: 143, + mimetype: 'text/plain', + name: "Blah.txt", + }); + this.data['mail.channel'].records.push({ id: 11 }); + this.data['mail.message'].records.push( + { + attachment_ids: [143], + channel_ids: [11], + id: 101, + tracking_value_ids: [6] + }, + ); + this.data['mail.tracking.value'].records.push({ + changed_field: "Name", + field_type: "char", + id: 6, + new_value: "New name", + old_value: "Old name", + }); + await this.start(); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['insert', { id: 11, model: 'mail.channel' }]], + }); + // wait for messages of the thread to be loaded + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + this.createThreadViewComponent(threadViewer.threadView); + }, + message: "thread become loaded with messages", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 11 + ); + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "there should be 1 message displayed initially" + ); + + await afterNextRender(() => { + document.querySelector(`.o_Attachment[data-attachment-local-id="${ + this.env.models['mail.attachment'].findFromIdentifyingData({ id: 143 }).localId + }"] .o_Attachment_asideItemUnlink`).click(); + }); + await afterNextRender(() => + document.querySelector('.o_AttachmentDeleteConfirmDialog_confirmButton').click() + ); + assert.containsOnce( + document.body, + '.o_Message', + "message should still be displayed after removing its attachments (non-empty content)" + ); +}); + +QUnit.test('Post a message containing an email address followed by a mention on another line', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ id: 11 }); + this.data['res.partner'].records.push({ + id: 25, + email: "testpartner@odoo.com", + name: "TestPartner", + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 11, + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + document.querySelector('.o_ComposerTextInput_textarea').focus(); + await afterNextRender(() => document.execCommand('insertText', false, "email@odoo.com\n")); + await afterNextRender(() => { + ["@", "T", "e"].forEach((char)=>{ + document.execCommand('insertText', false, char); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + }); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + await afterNextRender(() => { + document.querySelector('.o_Composer_buttonSend').click(); + }); + assert.containsOnce( + document.querySelector(`.o_Message_content`), + `.o_mail_redirect[data-oe-id="25"][data-oe-model="res.partner"]:contains("@TestPartner")`, + "Conversation should have a message that has been posted, which contains partner mention" + ); +}); + +QUnit.test(`Mention a partner with special character (e.g. apostrophe ')`, async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({ id: 11 }); + this.data['res.partner'].records.push({ + id: 1952, + email: "usatyi@example.com", + name: "Pynya's spokesman", + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 11, + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + document.querySelector('.o_ComposerTextInput_textarea').focus(); + await afterNextRender(() => { + ["@", "P", "y", "n"].forEach((char)=>{ + document.execCommand('insertText', false, char); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + }); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + await afterNextRender(() => { + document.querySelector('.o_Composer_buttonSend').click(); + }); + assert.containsOnce( + document.querySelector(`.o_Message_content`), + `.o_mail_redirect[data-oe-id="1952"][data-oe-model="res.partner"]:contains("@Pynya's spokesman")`, + "Conversation should have a message that has been posted, which contains partner mention" + ); +}); + +QUnit.test('mention 2 different partners that have the same name', async function (assert) { + assert.expect(3); + + this.data['mail.channel'].records.push({ id: 11 }); + this.data['res.partner'].records.push( + { + id: 25, + email: "partner1@example.com", + name: "TestPartner", + }, { + id: 26, + email: "partner2@example.com", + name: "TestPartner", + }, + ); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 11, + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + document.querySelector('.o_ComposerTextInput_textarea').focus(); + await afterNextRender(() => { + ["@", "T", "e"].forEach((char)=>{ + document.execCommand('insertText', false, char); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + }); + await afterNextRender(() => document.querySelectorAll('.o_ComposerSuggestion')[0].click()); + await afterNextRender(() => { + ["@", "T", "e"].forEach((char)=>{ + document.execCommand('insertText', false, char); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + }); + await afterNextRender(() => document.querySelectorAll('.o_ComposerSuggestion')[1].click()); + await afterNextRender(() => document.querySelector('.o_Composer_buttonSend').click()); + assert.containsOnce(document.body, '.o_Message_content', 'should have one message after posting it'); + assert.containsOnce( + document.querySelector(`.o_Message_content`), + `.o_mail_redirect[data-oe-id="25"][data-oe-model="res.partner"]:contains("@TestPartner")`, + "message should contain the first partner mention" + ); + assert.containsOnce( + document.querySelector(`.o_Message_content`), + `.o_mail_redirect[data-oe-id="26"][data-oe-model="res.partner"]:contains("@TestPartner")`, + "message should also contain the second partner mention" + ); +}); + +QUnit.test('mention a channel with space in the name', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ + id: 7, + name: "General good boy", + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 7, + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "#"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + await afterNextRender(() => { + document.querySelector('.o_Composer_buttonSend').click(); + }); + assert.containsOnce( + document.querySelector('.o_Message_content'), + '.o_channel_redirect', + "message must contain a link to the mentioned channel" + ); + assert.strictEqual( + document.querySelector('.o_channel_redirect').textContent, + '#General good boy', + "link to the channel must contains # + the channel name" + ); +}); + +QUnit.test('mention a channel with "&" in the name', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ + id: 7, + name: "General & good", + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 7, + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "#"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + await afterNextRender(() => + document.querySelector('.o_ComposerSuggestion').click() + ); + await afterNextRender(() => { + document.querySelector('.o_Composer_buttonSend').click(); + }); + assert.containsOnce( + document.querySelector('.o_Message_content'), + '.o_channel_redirect', + "message should contain a link to the mentioned channel" + ); + assert.strictEqual( + document.querySelector('.o_channel_redirect').textContent, + '#General & good', + "link to the channel must contains # + the channel name" + ); +}); + +QUnit.test('mention a channel on a second line when the first line contains #', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ + id: 7, + name: "General good", + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 7, + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "#blabla\n#"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + await afterNextRender(() => { + document.querySelector('.o_ComposerSuggestion').click(); + }); + await afterNextRender(() => { + document.querySelector('.o_Composer_buttonSend').click(); + }); + assert.containsOnce( + document.querySelector('.o_Message_content'), + '.o_channel_redirect', + "message should contain a link to the mentioned channel" + ); + assert.strictEqual( + document.querySelector('.o_channel_redirect').textContent, + '#General good', + "link to the channel must contains # + the channel name" + ); +}); + +QUnit.test('mention a channel when replacing the space after the mention by another char', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ + id: 7, + name: "General good", + }); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 7, + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + + await afterNextRender(() => { + document.querySelector(`.o_ComposerTextInput_textarea`).focus(); + document.execCommand('insertText', false, "#"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + await afterNextRender(() => { + document.querySelector('.o_ComposerSuggestion').click(); + }); + await afterNextRender(() => { + const text = document.querySelector(`.o_ComposerTextInput_textarea`).value; + document.querySelector(`.o_ComposerTextInput_textarea`).value = text.slice(0, -1); + document.execCommand('insertText', false, ", test"); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + await afterNextRender(() => { + document.querySelector('.o_Composer_buttonSend').click(); + }); + assert.containsOnce( + document.querySelector('.o_Message_content'), + '.o_channel_redirect', + "message should contain a link to the mentioned channel" + ); + assert.strictEqual( + document.querySelector('.o_channel_redirect').textContent, + '#General good', + "link to the channel must contains # + the channel name" + ); +}); + +QUnit.test('mention 2 different channels that have the same name', async function (assert) { + assert.expect(3); + + this.data['mail.channel'].records.push( + { + id: 11, + name: "my channel", + public: 'public', // mentioning another channel is possible only from a public channel + }, + { + id: 12, + name: "my channel", + }, + ); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 11, + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + document.querySelector('.o_ComposerTextInput_textarea').focus(); + await afterNextRender(() => { + ["#", "m", "y"].forEach((char)=>{ + document.execCommand('insertText', false, char); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + }); + await afterNextRender(() => document.querySelectorAll('.o_ComposerSuggestion')[0].click()); + await afterNextRender(() => { + ["#", "m", "y"].forEach((char)=>{ + document.execCommand('insertText', false, char); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keydown')); + document.querySelector(`.o_ComposerTextInput_textarea`) + .dispatchEvent(new window.KeyboardEvent('keyup')); + }); + }); + await afterNextRender(() => document.querySelectorAll('.o_ComposerSuggestion')[1].click()); + await afterNextRender(() => document.querySelector('.o_Composer_buttonSend').click()); + assert.containsOnce(document.body, '.o_Message_content', 'should have one message after posting it'); + assert.containsOnce( + document.querySelector(`.o_Message_content`), + `.o_channel_redirect[data-oe-id="11"][data-oe-model="mail.channel"]:contains("#my channel")`, + "message should contain the first channel mention" + ); + assert.containsOnce( + document.querySelector(`.o_Message_content`), + `.o_channel_redirect[data-oe-id="12"][data-oe-model="mail.channel"]:contains("#my channel")`, + "message should also contain the second channel mention" + ); +}); + +QUnit.test('show empty placeholder when thread contains no message', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ id: 11 }); + await this.start(); + const threadViewer = await this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['insert', { + id: 11, + model: 'mail.channel', + }]], + }); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + this.createThreadViewComponent(threadViewer.threadView); + }, + message: "should wait until thread becomes loaded with messages", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 11 + ); + }, + }); + assert.containsOnce( + document.body, + '.o_MessageList_empty', + "message list empty placeholder should be shown as thread does not contain any messages" + ); + assert.containsNone( + document.body, + '.o_Message', + "no message should be shown as thread does not contain any" + ); +}); + +QUnit.test('show empty placeholder when thread contains only empty messages', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ id: 11 }); + this.data['mail.message'].records.push( + { + channel_ids: [11], + id: 101, + }, + ); + await this.start(); + const threadViewer = await this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['insert', { + id: 11, + model: 'mail.channel', + }]], + }); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + this.createThreadViewComponent(threadViewer.threadView); + }, + message: "thread become loaded with messages", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 11 + ); + }, + }); + assert.containsOnce( + document.body, + '.o_MessageList_empty', + "message list empty placeholder should be shown as thread contain only empty messages" + ); + assert.containsNone( + document.body, + '.o_Message', + "no message should be shown as thread contains only empty ones" + ); +}); + +QUnit.test('message with subtype should be displayed (and not considered as empty)', async function (assert) { + assert.expect(2); + + this.data['mail.channel'].records.push({ id: 11 }); + this.data['mail.message.subtype'].records.push({ + description: "Task created", + id: 10, + }); + this.data['mail.message'].records.push( + { + channel_ids: [11], + id: 101, + subtype_id: 10, + }, + ); + await this.start(); + const threadViewer = await this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['insert', { + id: 11, + model: 'mail.channel', + }]], + }); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + this.createThreadViewComponent(threadViewer.threadView); + }, + message: "should wait until thread becomes loaded with messages", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 11 + ); + }, + }); + assert.containsOnce( + document.body, + '.o_Message', + "should display 1 message (message with subtype description 'task created')" + ); + assert.strictEqual( + document.body.querySelector('.o_Message_content').textContent, + "Task created", + "message should have 'Task created' (from its subtype description)" + ); +}); + +QUnit.test('[technical] message list with a full page of empty messages should show load more if there are other messages', async function (assert) { + // Technical assumptions : + // - message_fetch fetching exactly 30 messages, + // - empty messages not being displayed + // - auto-load more being triggered on scroll, not automatically when the 30 first messages are empty + assert.expect(2); + + this.data['mail.channel'].records.push({ + id: 11, + }); + for (let i = 0; i <= 30; i++) { + this.data['mail.message'].records.push({ + body: "not empty", + channel_ids: [11], + }); + } + for (let i = 0; i <= 30; i++) { + this.data['mail.message'].records.push({ + channel_ids: [11], + }); + } + await this.start(); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['insert', { + id: 11, + model: 'mail.channel', + }]], + }); + await this.afterEvent({ + eventName: 'o-thread-view-hint-processed', + func: () => { + this.createThreadViewComponent(threadViewer.threadView, { order: 'asc' }, { isFixedSize: true }); + }, + message: "should wait until thread becomes loaded with messages", + predicate: ({ hint, threadViewer }) => { + return ( + hint.type === 'messages-loaded' && + threadViewer.thread.model === 'mail.channel' && + threadViewer.thread.id === 11 + ); + }, + }); + assert.containsNone( + document.body, + '.o_Message', + "No message should be shown as all 30 first messages are empty" + ); + assert.containsOnce( + document.body, + '.o_MessageList_loadMore', + "Load more button should be shown as there are more messages to show" + ); +}); + +QUnit.test('first unseen message should be directly preceded by the new message separator if there is a transient message just before it while composer is not focused [REQUIRE FOCUS]', async function (assert) { + // The goal of removing the focus is to ensure the thread is not marked as seen automatically. + // Indeed that would trigger channel_seen no matter what, which is already covered by other tests. + // The goal of this test is to cover the conditions specific to transient messages, + // and the conditions from focus would otherwise shadow them. + assert.expect(3); + + this.data['mail.channel_command'].records.push({ name: 'who' }); + // Needed partner & user to allow simulation of message reception + this.data['res.partner'].records.push({ + id: 11, + name: "Foreigner partner", + }); + this.data['res.users'].records.push({ + id: 42, + name: "Foreigner user", + partner_id: 11, + }); + this.data['mail.channel'].records = [{ + channel_type: 'channel', + id: 20, + is_pinned: true, + name: "General", + uuid: 'channel20uuid', + }]; + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel' + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + // send a command that leads to receiving a transient message + document.querySelector('.o_ComposerTextInput_textarea').focus(); + await afterNextRender(() => document.execCommand('insertText', false, "/who")); + await afterNextRender(() => { + document.querySelector('.o_Composer_buttonSend').click(); + }); + + // composer is focused by default, we remove that focus + document.querySelector('.o_ComposerTextInput_textarea').blur(); + // simulate receiving a message + await afterNextRender(() => this.env.services.rpc({ + route: '/mail/chat_post', + params: { + context: { + mockedUserId: 42, + }, + message_content: "test", + uuid: 'channel20uuid', + }, + })); + assert.containsN( + document.body, + '.o_Message', + 2, + "should display 2 messages (the transient & the received message), after posting a command" + ); + assert.containsOnce( + document.body, + '.o_MessageList_separatorNewMessages', + "separator should be shown as a message has been received" + ); + assert.containsOnce( + document.body, + `.o_Message[data-message-local-id="${ + this.env.models['mail.message'].find(m => m.isTransient).localId + }"] + .o_MessageList_separatorNewMessages`, + "separator should be shown just after transient message" + ); +}); + +QUnit.test('composer should be focused automatically after clicking on the send button [REQUIRE FOCUS]', async function (assert) { + assert.expect(1); + + this.data['mail.channel'].records.push({id: 20,}); + await this.start(); + const thread = this.env.models['mail.thread'].findFromIdentifyingData({ + id: 20, + model: 'mail.channel' + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ + hasThreadView: true, + thread: [['link', thread]], + }); + await this.createThreadViewComponent(threadViewer.threadView, { hasComposer: true }); + document.querySelector('.o_ComposerTextInput_textarea').focus(); + await afterNextRender(() => document.execCommand('insertText', false, "Dummy Message")); + await afterNextRender(() => { + document.querySelector('.o_Composer_buttonSend').click(); + }); + assert.hasClass( + document.querySelector('.o_Composer'), + 'o-focused', + "composer should be focused automatically after clicking on the send button" + ); +}); + +}); +}); +}); + +}); |