diff options
Diffstat (limited to 'addons/mail/static/src/components/thread_viewer')
4 files changed, 645 insertions, 0 deletions
diff --git a/addons/mail/static/src/components/thread_viewer/thread_viewer.js b/addons/mail/static/src/components/thread_viewer/thread_viewer.js new file mode 100644 index 00000000000..98c3c6edfb6 --- /dev/null +++ b/addons/mail/static/src/components/thread_viewer/thread_viewer.js @@ -0,0 +1,199 @@ +odoo.define('mail/static/src/components/thread_viewer/thread_viewer.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 useStore = require('mail/static/src/component_hooks/use_store/use_store.js'); + +const { Component } = owl; +const { useRef } = owl.hooks; + +class ThreadViewer extends Component { + + /** + * @param {...any} args + */ + constructor(...args) { + super(...args); + useStore((...args) => this._useStoreSelector(...args)); + /** + * 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'); + } + + mounted() { + this._update(); + } + + patched() { + this._update(); + } + + //-------------------------------------------------------------------------- + // 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 position in the message list. + * + * @returns {integer|undefined} + */ + getScrollTop() { + if (!this._messageListRef.comp) { + return undefined; + } + return this._messageListRef.comp.getScrollTop(); + } + + /** + * @returns {mail.thread_viewer} + */ + get threadViewer() { + return this.env.models['mail.thread_viewer'].get(this.props.threadViewerLocalId); + } + + //-------------------------------------------------------------------------- + // Private + //-------------------------------------------------------------------------- + + /** + * Called when thread component is mounted or patched. + * + * @private + */ + async _update() { + const messageList = this._messageListRef.comp; + this.trigger('o-rendered'); + /** + * Control panel may offset scrolling position of message list due to + * height of buttons. To prevent this, control panel re-render is + * triggered before message list. Correct way should be to adjust + * scroll positions after everything has been rendered, but OWL doesn't + * have such an API for the moment. + */ + if (messageList) { + messageList.adjustFromComponentHints(); + } + } + + /** + * Returns data selected from the store. + * + * @private + * @param {Object} props + * @returns {Object} + */ + _useStoreSelector(props) { + const threadViewer = this.env.models['mail.thread_viewer'].get(props.threadViewerLocalId); + const thread = threadViewer ? threadViewer.thread : undefined; + const threadCache = threadViewer ? threadViewer.threadCache : undefined; + return { + isDeviceMobile: this.env.messaging.device.isMobile, + thread: thread ? thread.__state : undefined, + threadCache: threadCache ? threadCache.__state : undefined, + threadViewer: threadViewer ? threadViewer.__state : undefined, + }; + } + +} + +Object.assign(ThreadViewer, { + components, + defaultProps: { + composerAttachmentsDetailsMode: 'auto', + hasComposer: false, + hasMessageCheckbox: false, + hasSquashCloseMessages: false, + haveMessagesAuthorRedirect: false, + haveMessagesMarkAsReadIcon: false, + haveMessagesReplyIcon: 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, + hasSquashCloseMessages: Boolean, + haveMessagesAuthorRedirect: Boolean, + haveMessagesMarkAsReadIcon: Boolean, + haveMessagesReplyIcon: Boolean, + /** + * Set the initial scroll position of message list on mount. Note that + * this prop is not directly passed to message list as props because + * it may compute scroll top without composer, and then composer may alter + * them on mount. To solve this issue, thread handles setting initial scroll + * positions, so that this is always done after composer has been mounted. + * (child `mounted()` are called before parent `mounted()`) + */ + messageListInitialScrollTop: { + type: Number, + optional: true + }, + order: { + type: String, + validate: prop => ['asc', 'desc'].includes(prop), + }, + selectedMessageLocalId: { + type: String, + optional: true, + }, + showComposerAttachmentsExtensions: Boolean, + showComposerAttachmentsFilenames: Boolean, + threadViewerLocalId: String, + }, + template: 'mail.ThreadViewer', +}); + +return ThreadViewer; + +}); diff --git a/addons/mail/static/src/components/thread_viewer/thread_viewer.scss b/addons/mail/static/src/components/thread_viewer/thread_viewer.scss new file mode 100644 index 00000000000..9b39a493979 --- /dev/null +++ b/addons/mail/static/src/components/thread_viewer/thread_viewer.scss @@ -0,0 +1,38 @@ +// ------------------------------------------------------------------ +// Layout +// ------------------------------------------------------------------ + +.o_ThreadViewer { + display: flex; + position: relative; + flex-flow: column; + overflow: auto; +} + +.o_ThreadViewer_composer { + flex: 0 0 auto; +} + +.o_ThreadViewer_loading { + display: flex; + align-self: center; + flex: 1 1 auto; + align-items: center; +} + +.o_ThreadViewer_messageList { + flex: 1 1 auto; +} + +// ------------------------------------------------------------------ +// Style +// ------------------------------------------------------------------ + +.o_ThreadViewer { + background-color: gray('100'); + +} + +.o_ThreadViewer_loadingIcon { + margin-right: 3px; +} diff --git a/addons/mail/static/src/components/thread_viewer/thread_viewer.xml b/addons/mail/static/src/components/thread_viewer/thread_viewer.xml new file mode 100644 index 00000000000..e292ac4e4ec --- /dev/null +++ b/addons/mail/static/src/components/thread_viewer/thread_viewer.xml @@ -0,0 +1,44 @@ +<?xml version="1.0" encoding="UTF-8"?> +<templates xml:space="preserve"> + + <t t-name="mail.ThreadViewer" owl="1"> + <div class="o_ThreadViewer" t-att-data-thread-local-id="threadViewer and threadViewer.thread and threadViewer.thread.localId"> + <t t-if="threadViewer"> + <t t-if="threadViewer.isShowingLoading" name="loadingCondition"> + <div class="o_ThreadViewer_loading"> + <span><i class="o_ThreadViewer_loadingIcon fa fa-spinner fa-spin" title="Loading..." role="img"/>Loading...</span> + </div> + </t> + <t t-elif="threadViewer.threadCache.isLoaded"> + <MessageList + class="o_ThreadViewer_messageList" + hasMessageCheckbox="props.hasMessageCheckbox" + hasSquashCloseMessages="props.hasSquashCloseMessages" + haveMessagesAuthorRedirect="props.haveMessagesAuthorRedirect" + haveMessagesMarkAsReadIcon="props.haveMessagesMarkAsReadIcon" + haveMessagesReplyIcon="props.haveMessagesReplyIcon" + order="props.order" + selectedMessageLocalId="props.selectedMessageLocalId" + threadViewerLocalId="threadViewer.localId" + t-ref="messageList" + /> + </t> + <t t-if="props.hasComposer"> + <Composer + class="o_ThreadViewer_composer" + attachmentsDetailsMode="props.composerAttachmentsDetailsMode" + composerLocalId="threadViewer.thread.composer.localId" + hasCurrentPartnerAvatar="props.hasComposerCurrentPartnerAvatar" + hasSendButton="props.hasComposerSendButton" + hasThreadTyping="props.hasComposerThreadTyping" + isFocusOnMount="!env.messaging.device.isMobile" + showAttachmentsExtensions="props.showComposerAttachmentsExtensions" + showAttachmentsFilenames="props.showComposerAttachmentsFilenames" + t-ref="composer" + /> + </t> + </t> + </div> + </t> + +</templates> diff --git a/addons/mail/static/src/components/thread_viewer/thread_viewer_tests.js b/addons/mail/static/src/components/thread_viewer/thread_viewer_tests.js new file mode 100644 index 00000000000..1c7d24a86e1 --- /dev/null +++ b/addons/mail/static/src/components/thread_viewer/thread_viewer_tests.js @@ -0,0 +1,364 @@ +odoo.define('mail/static/src/components/thread_viewer/thread_viewer_tests.js', function (require) { +'use strict'; + +const components = { + ThreadViewer: require('mail/static/src/components/thread_viewer/thread_viewer.js'), +}; +const { + afterEach: utilsAfterEach, + afterNextRender, + beforeEach: utilsBeforeEach, + dragenterFiles, + start: utilsStart, +} = require('mail/static/src/utils/test_utils.js'); + +QUnit.module('mail', {}, function () { +QUnit.module('components', {}, function () { +QUnit.module('thread_viewer', {}, function () { +QUnit.module('thread_viewer_tests.js', { + beforeEach() { + utilsBeforeEach(this); + + /** + * @param {mail.thread_viewer} threadViewer + * @param {Object} [otherProps={}] + * @param {Object} [param2={}] + * @param {boolean} [param2.isFixedSize=false] + */ + this.createThreadViewerComponent = async (threadViewer, otherProps = {}, { isFixedSize = false } = {}) => { + const ThreadViewerComponent = components.ThreadViewer; + ThreadViewerComponent.env = this.env; + this.component = new ThreadViewerComponent( + null, + Object.assign({ threadViewerLocalId: threadViewer.localId }, otherProps) + ); + 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; + } + await afterNextRender(() => this.component.mount(target)); + }; + + this.start = async params => { + if (this.widget) { + this.widget.destroy(); + } + let { env, widget } = await utilsStart(Object.assign({}, params, { + data: this.data, + })); + this.env = env; + this.widget = widget; + }; + }, + afterEach() { + utilsAfterEach(this); + if (this.component) { + this.component.destroy(); + } + if (this.widget) { + this.widget.destroy(); + } + this.env = undefined; + delete components.ThreadViewer.env; + }, +}); + +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({ thread: [['link', thread]] }); + await this.createThreadViewerComponent(threadViewer, { hasComposer: true }); + await afterNextRender(() => + dragenterFiles(document.querySelector('.o_ThreadViewer')) + ); + 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(8); + + let lastId = 10000; + let amountOfCalls = 0; + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_fetch') { + amountOfCalls ++; + assert.step(`message_fetch_${amountOfCalls}`); + // Just return 30 different messages + const messagesData = [...Array(30).keys()].reduce(function (acc, i) { + acc.push({ + author_id: [i + 1, `Author #${i}`], + body: `<p>The message</p>`, + channel_ids: [20], + date: "2019-04-20 10:00:00", + id: lastId - i, + message_type: 'comment', + model: 'mail.channel', + record_name: 'General', + res_id: 20, + }); + return acc; + }, []); + lastId -= 30; + return messagesData; + } + return this._super(...arguments); + }, + }); + 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({ thread: [['link', thread]] }); + await this.createThreadViewerComponent(threadViewer, { order: 'desc' }, { isFixedSize: true }); + 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 afterNextRender(() => { + document.querySelector(`.o_ThreadViewer_messageList`).scrollTop = + document.querySelector(`.o_ThreadViewer_messageList`).scrollHeight; + }); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 60, + "should have 60 messages after scrolled to bottom" + ); + + await afterNextRender(() => { + document.querySelector(`.o_ThreadViewer_messageList`).scrollTop = 0; + }); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 60, + "scrolling to top should not trigger any message fetching" + ); + assert.verifySteps(['message_fetch_1', 'message_fetch_2']); +}); + +QUnit.test('message list asc order', async function (assert) { + assert.expect(8); + + let lastId = 10000; + let amountOfCalls = 0; + await this.start({ + async mockRPC(route, args) { + if (args.method === 'message_fetch') { + amountOfCalls ++; + assert.step(`message_fetch_${amountOfCalls}`); + // Just return 30 different messages + const messagesData = [...Array(30).keys()].reduce(function (acc, i) { + acc.push({ + author_id: [i + 1, `Author #${i}`], + body: `<p>The message</p>`, + channel_ids: [20], + date: "2019-04-20 10:00:00", + id: lastId - i, + message_type: 'comment', + model: 'mail.channel', + record_name: 'General', + res_id: 20, + }); + return acc; + }, []); + lastId -= 30; + return messagesData; + } + return this._super(...arguments); + }, + }); + 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({ thread: [['link', thread]] }); + await this.createThreadViewerComponent(threadViewer, { order: 'asc' }, { isFixedSize: true }); + 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 afterNextRender(() => { + document.querySelector(`.o_ThreadViewer_messageList`).scrollTop = 0; + }); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 60, + "should have 60 messages after scrolled to top" + ); + + // scroll to bottom + await afterNextRender(() => { + document.querySelector(`.o_ThreadViewer_messageList`).scrollTop = + document.querySelector(`.o_ThreadViewer_messageList`).scrollHeight; + }); + assert.strictEqual( + document.querySelectorAll(`.o_Message`).length, + 60, + "scrolling to bottom should not trigger any message fetching" + ); + assert.verifySteps(['message_fetch_1', 'message_fetch_2']); +}); + +QUnit.test('mark channel as fetched when a new message is loaded and as seen when message is visible', async function (assert) { + assert.expect(7); + + 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_fetched:called'); + } 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:called'); + } + return this._super(...arguments); + } + }); + const thread = this.env.models['mail.thread'].create({ + id: 100, + isPinned: true, // just to avoid joinChannel to be called + members: [['insert', [ + { + email: "john@example.com", + id: this.env.session.partner_id, + name: "John", + }, + { + email: "fred@example.com", + id: 10, + name: "Fred", + }, + ]]], + model: 'mail.channel', + }); + const threadViewer = this.env.models['mail.thread_viewer'].create({ thread: [['link', thread]] }); + await this.createThreadViewerComponent(threadViewer); + const notifications = [ + [['myDB', 'mail.channel', 100], { + channelId: 100, + id: 1, + body: "<p>fdsfsd</p>", + author_id: [10, "Fred"], + model: "mail.channel", + channel_ids: [100], + }] + ]; + await afterNextRender(() => { + this.widget.call('bus_service', 'trigger', 'notification', notifications); + }); + assert.verifySteps( + ['rpc_channel_fetched:called', 'rpc_channel_seen:called'], + "Channel should have been fetched before having been seen" + ); +}); + +}); +}); +}); + +}); |