[IMP] website_livechat: move code to models (VisitorBanner)

- Create VisitorBannerView model
- Pass record as props
- Turn other props on component into fields on model
- Remove export default

Task-3004301

closes odoo/odoo#102387

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
This commit is contained in:
Louis Wicket (wil)
2022-10-11 17:59:02 +02:00
committed by Alexandre Kühn
parent cd9eea7c9c
commit fa4c0103bd
5 changed files with 62 additions and 51 deletions
@@ -2,11 +2,8 @@
<templates xml:space="preserve">
<t t-inherit="mail.ThreadView" t-inherit-mode="extension">
<xpath expr="//t[@t-if='threadView.topbar']" position="after">
<t t-if="threadView.hasVisitorBanner">
<VisitorBanner
className="'border-bottom'"
visitor="threadView.thread.visitor"
/>
<t t-if="threadView.visitorBanner">
<VisitorBanner className="'border-bottom'" record="threadView.visitorBanner"/>
</t>
</xpath>
</t>
@@ -4,26 +4,20 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
const { Component } = owl;
class VisitorBanner extends Component {
//--------------------------------------------------------------------------
// Public
//--------------------------------------------------------------------------
export class VisitorBanner extends Component {
/**
* @returns {Visitor}
* @returns {VisitorBannerView}
*/
get visitor() {
return this.props.visitor;
get visitorBannerView() {
return this.props.record;
}
}
Object.assign(VisitorBanner, {
props: { visitor: Object },
props: { record: Object },
template: 'website_livechat.VisitorBanner',
});
registerMessagingComponent(VisitorBanner);
export default VisitorBanner;
@@ -2,38 +2,36 @@
<templates xml:space="preserve">
<t t-name="website_livechat.VisitorBanner" owl="1">
<t t-if="visitor">
<div class="o_VisitorBanner" t-attf-class="{{ className }}" t-ref="root">
<div class="o_VisitorBanner_sidebar">
<div class="o_VisitorBanner_avatarContainer">
<img class="o_VisitorBanner_avatar rounded-circle" t-att-src="visitor.avatarUrl" alt="Avatar"/>
<t t-if="visitor.is_connected">
<i class="o_VisitorBanner_onlineStatusIcon fa fa-circle" title="Online" role="img" aria-label="Visitor is online"/>
</t>
</div>
</div>
<div class="o_VisitorBanner_content">
<t t-if="visitor.country">
<img class="o_VisitorBanner_country o_country_flag" t-att-src="visitor.country.flagUrl" t-att-alt="visitor.country.code or visitor.country.name"/>
<div class="o_VisitorBanner" t-attf-class="{{ className }}" t-ref="root">
<div class="o_VisitorBanner_sidebar">
<div class="o_VisitorBanner_avatarContainer">
<img class="o_VisitorBanner_avatar rounded-circle" t-att-src="visitorBannerView.visitor.avatarUrl" alt="Avatar"/>
<t t-if="visitorBannerView.visitor.is_connected">
<i class="o_VisitorBanner_onlineStatusIcon fa fa-circle" title="Online" role="img" aria-label="Visitor is online"/>
</t>
<span class="o_VisitorBanner_visitor" t-esc="visitor.nameOrDisplayName"/>
<span class="o_VisitorBanner_language">
<i class="o_VisitorBanner_languageIcon fa fa-comment-o" aria-label="Lang"/>
<t t-esc="visitor.lang_name"/>
</span>
<t t-if="visitor.website_name">
<span class="o_VisitorBanner_website">
<i class="o_VisitorBanner_websiteIcon fa fa-globe" aria-label="Website"/>
<span t-esc="visitor.website_name"/>
</span>
</t>
<div class="o_VisitorBanner_history">
<i class="o_VisitorBanner_historyIcon fa fa-history" aria-label="History"/>
<span t-esc="visitor.history"/>
</div>
</div>
</div>
</t>
<div class="o_VisitorBanner_content">
<t t-if="visitorBannerView.visitor.country">
<img class="o_VisitorBanner_country o_country_flag" t-att-src="visitorBannerView.visitor.country.flagUrl" t-att-alt="visitorBannerView.visitor.country.code or visitorBannerView.visitor.country.name"/>
</t>
<span class="o_VisitorBanner_visitor" t-esc="visitorBannerView.visitor.nameOrDisplayName"/>
<span class="o_VisitorBanner_language">
<i class="o_VisitorBanner_languageIcon fa fa-comment-o" aria-label="Lang"/>
<t t-esc="visitorBannerView.visitor.lang_name"/>
</span>
<t t-if="visitorBannerView.visitor.website_name">
<span class="o_VisitorBanner_website">
<i class="o_VisitorBanner_websiteIcon fa fa-globe" aria-label="Website"/>
<span t-esc="visitorBannerView.visitor.website_name"/>
</span>
</t>
<div class="o_VisitorBanner_history">
<i class="o_VisitorBanner_historyIcon fa fa-history" aria-label="History"/>
<span t-esc="visitorBannerView.visitor.history"/>
</div>
</div>
</div>
</t>
</templates>
@@ -1,18 +1,20 @@
/** @odoo-module **/
import { registerPatch } from '@mail/model/model_core';
import { attr } from '@mail/model/model_field';
import { one } from '@mail/model/model_field';
import { clear } from '@mail/model/model_field_command';
registerPatch({
name: 'ThreadView',
fields: {
/**
* Determines whether visitor banner should be displayed.
*/
hasVisitorBanner: attr({
visitorBanner: one('VisitorBannerView', {
compute() {
return Boolean(this.thread && this.thread.visitor && this.threadViewer && this.threadViewer.discuss);
if (this.thread && this.thread.visitor && this.threadViewer && this.threadViewer.discuss) {
return {};
}
return clear();
},
inverse: 'owner',
}),
},
});
@@ -0,0 +1,20 @@
/** @odoo-module **/
import { registerModel } from '@mail/model/model_core';
import { one } from '@mail/model/model_field';
registerModel({
name: 'VisitorBannerView',
fields: {
owner: one('ThreadView', {
identifying: true,
inverse: 'visitorBanner',
}),
visitor: one('Visitor', {
compute() {
return this.owner.thread.visitor;
},
required: true,
}),
},
});