initial commit 2

4 files changed, 271 insertions, 0 deletions

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"
+    );
+});
+
+});
+});
+});
+
+});