[IMP] mail: move code from components to models (MessagingMenuTab)

Task-3004195.

Part-of: odoo/odoo#103317
This commit is contained in:
Louis Wicket (wil)
2022-10-17 18:11:20 +02:00
committed by Alexandre Kühn
parent f6a3153612
commit 2a57a6765f
5 changed files with 116 additions and 26 deletions
@@ -22,11 +22,9 @@
</t>
<t t-else="">
<div class="o_MessagingMenu_dropdownMenuHeader border-bottom" t-attf-class="{{ messaging.device.isSmall ? 'o-isDeviceSmall p-2' : 'd-flex flex-shrink-0' }}">
<t t-if="!messaging.device.isSmall">
<MessagingMenuTab messagingMenu="messagingMenu" tabId="'all'"/>
<MessagingMenuTab messagingMenu="messagingMenu" tabId="'chat'"/>
<MessagingMenuTab messagingMenu="messagingMenu" tabId="'channel'"/>
</t>
<MessagingMenuTab t-if="messagingMenu.allTab" record="messagingMenu.allTab"/>
<MessagingMenuTab t-if="messagingMenu.chatTab" record="messagingMenu.chatTab"/>
<MessagingMenuTab t-if="messagingMenu.channelTab" record="messagingMenu.channelTab"/>
<t t-if="messaging.device.isSmall">
<t t-call="mail.MessagingMenu.newMessageButton"/>
</t>
@@ -6,24 +6,17 @@ const { Component } = owl;
export class MessagingMenuTab extends Component {
//--------------------------------------------------------------------------
// Public
//--------------------------------------------------------------------------
/**
* @returns {MessagingMenu}
* @returns {MessagingMenuTabView}
*/
get messagingMenu() {
return this.props.messagingMenu;
get messagingMenuTabView() {
return this.props.record;
}
}
Object.assign(MessagingMenuTab, {
props: {
messagingMenu: Object,
tabId: String,
},
props: { record: Object },
template: 'mail.MessagingMenuTab',
});
@@ -2,10 +2,8 @@
<templates xml:space="preserve">
<t t-name="mail.MessagingMenuTab" owl="1">
<button class="o_MessagingMenuTab o-desktop btn btn-link" t-att-class="{ 'o-active fw-bolder': messagingMenu.activeTabId === props.tabId, 'text-500': messagingMenu.activeTabId !== props.tabId }" t-on-click="messagingMenu.onClickDesktopTabButton" type="button" role="tab" t-att-data-tab-id="props.tabId" t-attf-class="{{ className }}" t-ref="root">
<t t-if="props.tabId === 'all'">All</t>
<t t-elif="props.tabId === 'chat'">Chat</t>
<t t-elif="props.tabId === 'channel'">Channels</t>
<button class="o_MessagingMenuTab o-desktop btn btn-link" t-att-class="{ 'o-active fw-bolder': messagingMenuTabView.isActive, 'text-500': !messagingMenuTabView.isActive }" t-on-click="messagingMenuTabView.onClick" type="button" role="tab" t-att-data-tab-id="messagingMenuTabView.id" t-attf-class="{{ className }}" t-ref="root">
<t t-out="messagingMenuTabView.name"/>
</button>
</t>
@@ -21,12 +21,6 @@ registerModel({
close() {
this.update({ isOpen: false });
},
/**
* @param {MouseEvent} ev
*/
onClickDesktopTabButton(ev) {
this.update({ activeTabId: ev.currentTarget.dataset.tabId });
},
/**
* @param {MouseEvent} ev
*/
@@ -124,6 +118,18 @@ registerModel({
},
},
fields: {
activeTab: one('MessagingMenuTabView', {
compute() {
switch (this.activeTabId) {
case 'all':
return this.allTab;
case 'channel':
return this.channelTab;
case 'chat':
return this.chatTab;
}
},
}),
/**
* Tab selected in the messaging menu.
* Either 'all', 'chat' or 'channel'.
@@ -131,6 +137,33 @@ registerModel({
activeTabId: attr({
default: 'all',
}),
allTab: one('MessagingMenuTabView', {
compute() {
if (this.isOpen && this.messaging.isInitialized && !this.messaging.device.isSmall) {
return {};
}
return clear();
},
inverse: 'ownerAsAll',
}),
channelTab: one('MessagingMenuTabView', {
compute() {
if (this.isOpen && this.messaging.isInitialized && !this.messaging.device.isSmall) {
return {};
}
return clear();
},
inverse: 'ownerAsChannel',
}),
chatTab: one('MessagingMenuTabView', {
compute() {
if (this.isOpen && this.messaging.isInitialized && !this.messaging.device.isSmall) {
return {};
}
return clear();
},
inverse: 'ownerAsChat',
}),
component: attr(),
/**
* States the counter of this messaging menu. The counter is an integer
@@ -0,0 +1,68 @@
/** @odoo-module **/
import { attr, one } from '@mail/model/model_field';
import { registerModel } from '@mail/model/model_core';
registerModel({
name: 'MessagingMenuTabView',
identifyingMode: 'xor',
recordMethods: {
/**
* @param {MouseEvent} ev
*/
onClick(ev) {
this.messaging.messagingMenu.update({ activeTabId: this.id });
},
},
fields: {
/**
* Note: when possible, better use the relations with MessagingMenu
* rather than these hardcoded IDs.
*/
id: attr({
compute() {
if (this.ownerAsAll) {
return 'all';
}
if (this.ownerAsChannel) {
return 'channel';
}
if (this.ownerAsChat) {
return 'chat';
}
},
required: true,
}),
isActive: attr({
compute() {
return this.messaging.messagingMenu.activeTab === this;
},
}),
name: attr({
compute() {
if (this.ownerAsAll) {
return this.env._t("All");
}
if (this.ownerAsChannel) {
return this.env._t("Channels");
}
if (this.ownerAsChat) {
return this.env._t("Chats");
}
},
required: true,
}),
ownerAsAll: one('MessagingMenu', {
identifying: true,
inverse: 'allTab',
}),
ownerAsChannel: one('MessagingMenu', {
identifying: true,
inverse: 'channelTab',
}),
ownerAsChat: one('MessagingMenu', {
identifying: true,
inverse: 'chatTab',
}),
},
});