[IMP] im_livechat : adds some design improvements in form and list views
More and more people are using the Live Chat and complaining about it because it's not user friendly. This commit modifies a bit the design of the form and list view without changing the functionnality Improves im_livechat.channel kanban cards Improves the channel form view: Introduce tabs to manage the different aspect of the channel : Operators, Options, Widget, Rules Improves the session tree view: Sort by date desc, adds the number of messages per session and replace the rating last value by his corresponding icon. Improves livechat session form view: Introduce a kanban view that list all the messages of the session Improves livechat session rating view: For congruence inside the module, renaming 'Resource' group By filter into 'Code' as the rating resource_name in this case is the same as the session code. So we use the same terms in this view and in reports Task ID 1883227
This commit is contained in:
David Beguin
@@ -0,0 +1,29 @@
|
||||
.o_history_container{
|
||||
> tbody > tr > td {
|
||||
padding: 0px !important;
|
||||
}
|
||||
.o_history_kanban_container {
|
||||
text-align:center;
|
||||
.o_history_kanban_sub_container {
|
||||
.o_kanban_ungrouped {
|
||||
flex-flow: column;
|
||||
max-height:500px;
|
||||
overflow:auto;
|
||||
.o_kanban_record {
|
||||
min-width: 300px;
|
||||
width: 98%;
|
||||
}
|
||||
}
|
||||
.oe_module_vignette {
|
||||
text-align:left;
|
||||
}
|
||||
.o_kanban_image {
|
||||
padding-top: 8px;
|
||||
}
|
||||
.oe_module_desc {
|
||||
padding: 8px 8px 8px 70px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -8,6 +8,7 @@
|
||||
<template id="assets_backend" name="im_livechat assets backend" inherit_id="web.assets_backend">
|
||||
<xpath expr="." position="inside">
|
||||
<script type="text/javascript" src="/im_livechat/static/src/js/im_livechat_backend.js"></script>
|
||||
<link rel="stylesheet" type="text/scss" href="/im_livechat/static/src/scss/im_livechat_history.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -39,15 +39,19 @@
|
||||
<img t-att-src="kanban_image('im_livechat.channel', 'image_medium', record.id.raw_value)" class="img-fluid" alt="Channel"/>
|
||||
</div>
|
||||
<div class="oe_kanban_details">
|
||||
<strong class="o_kanban_record_title"><field name="name"/></strong>
|
||||
<div class="float-right">
|
||||
<button t-if="record.are_you_inside.raw_value" name="action_quit" type="object" class="btn btn-primary">Leave</button>
|
||||
<button t-if="!record.are_you_inside.raw_value" name="action_join" type="object" class="btn btn-primary">Join</button>
|
||||
</div>
|
||||
<strong class="o_kanban_record_title" style="word-wrap: break-word;"><field name="name"/></strong>
|
||||
<div>
|
||||
<p>
|
||||
<div>
|
||||
<i class="fa fa-user" role="img" aria-label="User" title="User"></i>
|
||||
<t t-esc="(record.user_ids.raw_value || []).length"/> Operators
|
||||
<br/>
|
||||
<i class="fa fa-comments" role="img" aria-label="Comments" title="Comments"></i>
|
||||
<t t-esc="record.nbr_channel.raw_value"/> Sessions
|
||||
<div>
|
||||
<div class="float-right">
|
||||
<t t-if="record.rating_percentage_satisfaction.raw_value > 0">
|
||||
<a type="action" name="%(rating_rating_action_view_livechat_rating)d" tabindex="10">
|
||||
<i class="fa fa-smile-o text-success" t-if="record.rating_percentage_satisfaction.raw_value >= 70" title="Rating: Great" role="img" aria-label="Happy face"/>
|
||||
@@ -57,11 +61,7 @@
|
||||
</a>
|
||||
</t>
|
||||
</div>
|
||||
</p>
|
||||
</div>
|
||||
<div class="o_kanban_button">
|
||||
<button t-if="record.are_you_inside.raw_value" name="action_quit" type="object" class="btn btn-primary">Leave</button>
|
||||
<button t-if="!record.are_you_inside.raw_value" name="action_join" type="object" class="btn btn-primary">Join</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -76,6 +76,11 @@
|
||||
<field name="model">im_livechat.channel</field>
|
||||
<field name="arch" type="xml">
|
||||
<form>
|
||||
<header>
|
||||
<button type="object" name="action_join" class="oe_highlight" string="Join Channel" attrs='{"invisible": [["are_you_inside", "=", True]]}'/>
|
||||
<button type="object" name="action_quit" string="Leave Channel" attrs='{"invisible": [["are_you_inside", "=", False]]}'/>
|
||||
<field name="are_you_inside" invisible="1"/>
|
||||
</header>
|
||||
<sheet>
|
||||
<div class="oe_button_box" name="button_box">
|
||||
<button class="oe_stat_button" type="action" attrs="{'invisible':[('nbr_channel','=', 0)]}" name="%(mail_channel_action_from_livechat_channel)d" icon="fa-comments">
|
||||
@@ -91,60 +96,63 @@
|
||||
<h1>
|
||||
<field name="name" placeholder="e.g. YourWebsite.com"/>
|
||||
</h1>
|
||||
<div>
|
||||
<button type="object" name="action_join" class="oe_highlight" string="Join Channel" attrs='{"invisible": [["are_you_inside", "=", True]]}'/>
|
||||
<button type="object" name="action_quit" string="Leave Channel" attrs='{"invisible": [["are_you_inside", "=", False]]}'/>
|
||||
<field name="are_you_inside" invisible="1"/>
|
||||
</div>
|
||||
</div>
|
||||
<group>
|
||||
<group string="Operators">
|
||||
<field name="user_ids" nolabel="1" colspan="2">
|
||||
<kanban>
|
||||
<field name="id"/>
|
||||
<field name="name"/>
|
||||
<templates>
|
||||
<t t-name="kanban-box">
|
||||
<div class="oe_kanban_global_click">
|
||||
<div class="o_kanban_image">
|
||||
<img t-att-src="kanban_image('res.users', 'image', record.id.raw_value)" alt="User"/>
|
||||
<notebook>
|
||||
<page string="Operators">
|
||||
<group>
|
||||
<field name="user_ids" nolabel="1" colspan="2">
|
||||
<kanban>
|
||||
<field name="id"/>
|
||||
<field name="name"/>
|
||||
<templates>
|
||||
<t t-name="kanban-box">
|
||||
<div class="oe_kanban_global_click">
|
||||
<div class="o_kanban_image">
|
||||
<img t-att-src="kanban_image('res.users', 'image', record.id.raw_value)" alt="User"/>
|
||||
</div>
|
||||
<div class="o_kanban_details">
|
||||
<h4 class="o_kanban_record_title"><field name="name"/></h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="o_kanban_details">
|
||||
<h4 class="o_kanban_record_title"><field name="name"/></h4>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
</kanban>
|
||||
</field>
|
||||
<p class="text-muted">
|
||||
Operators that do not show any activity In Odoo for more than 30 minutes will be considered as disconnected.
|
||||
</p>
|
||||
</group>
|
||||
<group string="Options">
|
||||
<field name="button_text"/>
|
||||
<field name="default_message" placeholder="e.g. Hello, how may I help you?"/>
|
||||
<field name="input_placeholder"/>
|
||||
</group>
|
||||
</group>
|
||||
|
||||
<div attrs='{"invisible": [["web_page", "=", False]]}'>
|
||||
<separator string="How to use the Website Live Chat widget?"/>
|
||||
<p>
|
||||
Copy and paste this code into your website, within the <head> tag:
|
||||
</p>
|
||||
<field name="script_external" readonly="1" widget="CopyClipboardText"/>
|
||||
<p>
|
||||
or copy this url and send it by email to your customers or suppliers:
|
||||
</p>
|
||||
<field name="web_page" readonly="1" widget="CopyClipboardChar"/>
|
||||
<p>For website built with Odoo CMS, please install the website_livechat module. Then go to Website Admin > Configuration > Settings and select the Website Live Chat Channel you want to add on your website.</p>
|
||||
</div>
|
||||
|
||||
<group string="Channel Rules">
|
||||
<field name="rule_ids" nolabel="1"/>
|
||||
</group>
|
||||
<span>Define rules for your live support channel. You can apply an action (disable the support, automatically open your support, or just make the button available) for the given URL, and per country.<br />To identify the country, GeoIP must be installed on your server, otherwise, the countries of the rule will not be taken into account.</span>
|
||||
</t>
|
||||
</templates>
|
||||
</kanban>
|
||||
</field>
|
||||
<p class="text-muted">
|
||||
Operators that do not show any activity In Odoo for more than 30 minutes will be considered as disconnected.
|
||||
</p>
|
||||
</group>
|
||||
</page>
|
||||
<page string="Options">
|
||||
<group>
|
||||
<field name="button_text"/>
|
||||
<field name="default_message" placeholder="e.g. Hello, how may I help you?"/>
|
||||
<field name="input_placeholder"/>
|
||||
</group>
|
||||
</page>
|
||||
<page string="Widget">
|
||||
<group>
|
||||
<div attrs='{"invisible": [["web_page", "=", False]]}'>
|
||||
<separator string="How to use the Website Live Chat widget?"/>
|
||||
<p>
|
||||
Copy and paste this code into your website, within the <head> tag:
|
||||
</p>
|
||||
<field name="script_external" readonly="1" widget="CopyClipboardText"/>
|
||||
<p>
|
||||
or copy this url and send it by email to your customers or suppliers:
|
||||
</p>
|
||||
<field name="web_page" readonly="1" widget="CopyClipboardChar"/>
|
||||
<p>For website built with Odoo CMS, please install the website_livechat module. Then go to Website Admin > Configuration > Settings and select the Website Live Chat Channel you want to add on your website.</p>
|
||||
</div>
|
||||
</group>
|
||||
</page>
|
||||
<page string="Channel Rules">
|
||||
<group>
|
||||
<field name="rule_ids" nolabel="1"/>
|
||||
</group>
|
||||
<span>Define rules for your live support channel. You can apply an action (disable the support, automatically open your support, or just make the button available) for the given URL, and per country.<br />To identify the country, GeoIP must be installed on your server, otherwise, the countries of the rule will not be taken into account.</span>
|
||||
</page>
|
||||
</notebook>
|
||||
</sheet>
|
||||
</form>
|
||||
</field>
|
||||
|
||||
@@ -8,6 +8,8 @@
|
||||
<field name="arch" type="xml">
|
||||
<search string="Search history">
|
||||
<field name="name"/>
|
||||
<filter string="With Messages" name="session_not_empty" domain="[('channel_message_ids', '!=', False)]"/>
|
||||
<filter string="Empty Sessions" name="session_empty" domain="[('channel_message_ids', '=', False)]"/>
|
||||
<group expand="0" string="Group By...">
|
||||
<filter name="group_by_channel" string="Channel" domain="[]" context="{'group_by':'livechat_channel_id'}"/>
|
||||
<separator orientation="vertical"/>
|
||||
@@ -21,10 +23,11 @@
|
||||
<field name="name">mail.channel.tree</field>
|
||||
<field name="model">mail.channel</field>
|
||||
<field name="arch" type="xml">
|
||||
<tree string="History" create="false">
|
||||
<tree string="History" create="false" default_order="create_date desc">
|
||||
<field name="create_date" string="Session Date"/>
|
||||
<field name="name" string="Attendees"/>
|
||||
<field name="rating_last_value" string="Rating"/>
|
||||
<field name="channel_message_ids" string="# Messages"/>
|
||||
<field name="rating_last_image" string="Rating" widget="image" options='{"size": [20, 20]}'/>
|
||||
</tree>
|
||||
</field>
|
||||
</record>
|
||||
@@ -35,28 +38,59 @@
|
||||
<field name="arch" type="xml">
|
||||
<form string="Session Form" create="false" edit="false">
|
||||
<sheet>
|
||||
<group>
|
||||
<div style="width:50%" class="float-right">
|
||||
<field name="rating_last_image" widget="image" class="float-right" options='{"preview_image": "image_thumb"}' readonly="1" nolabel="1"/>
|
||||
<field name="rating_last_feedback" nolabel="1"/>
|
||||
</div>
|
||||
<div style="width:50%" class="float-left">
|
||||
<group>
|
||||
<field name="name" string="Attendees"/>
|
||||
<field name="create_date" readonly="1" string="Session Date"/>
|
||||
</group>
|
||||
<group>
|
||||
<group>
|
||||
<label for="rating_last_image" string="Rating"/>
|
||||
<div>
|
||||
<field name="rating_last_image" widget="image" class="oe_avatar" options='{"preview_image": "image_thumb"}' readonly="1" nolabel="1"/>
|
||||
<field name="rating_last_feedback" nolabel="1"/>
|
||||
</div>
|
||||
</group>
|
||||
</group>
|
||||
</div>
|
||||
|
||||
<group string="History" class="o_history_container">
|
||||
<div class="o_history_kanban_container">
|
||||
<div class="o_history_kanban_sub_container">
|
||||
<field name="message_ids" mode="kanban">
|
||||
<kanban>
|
||||
<field name="author_id"/>
|
||||
<field name="body"/>
|
||||
<field name="create_date" groups="base.group_no_one"/>
|
||||
<field name="id"/>
|
||||
<field name="author_avatar"/>
|
||||
<templates>
|
||||
<t t-name="kanban-box">
|
||||
<div class="oe_module_vignette">
|
||||
<div class="o_kanban_image">
|
||||
<div>
|
||||
<t t-if="record.author_avatar.raw_value">
|
||||
<img t-att-src="kanban_image('mail.message', 'author_avatar', record.id.raw_value)" alt="Avatar" class="rounded-circle" width="56px" heigth="56px"/>
|
||||
</t>
|
||||
<t t-else=""><img alt="Anonymous" src="/mail/static/src/img/smiley/avatar.jpg" class="rounded-circle"/></t>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oe_module_desc">
|
||||
<div class="float-right"><p><field name="date"/></p></div>
|
||||
<div>
|
||||
<p><strong>
|
||||
<t t-if="record.author_id.raw_value"><field name="author_id"/></t>
|
||||
<t t-else="">Anonymous</t>
|
||||
</strong></p>
|
||||
<p>
|
||||
<t t-if="record.body.raw_value"><field name="body" widget="html"/><br/></t>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</t>
|
||||
</templates>
|
||||
</kanban>
|
||||
</field>
|
||||
</div>
|
||||
</div>
|
||||
</group>
|
||||
<field name="message_ids" type="tree">
|
||||
<tree string="History">
|
||||
<field name="author_id"/>
|
||||
<field name="body"/>
|
||||
<field name="create_date" groups="base.group_no_one"/>
|
||||
</tree>
|
||||
</field>
|
||||
</sheet>
|
||||
</form>
|
||||
</field>
|
||||
@@ -70,7 +104,7 @@
|
||||
<field name="view_mode">tree,form</field>
|
||||
<field name="search_view_id" ref="im_livechat.mail_channel_view_search"/>
|
||||
<field name="domain">[('livechat_channel_id', '!=', None)]</field>
|
||||
<field name="context">{}</field>
|
||||
<field name="context">{'search_default_session_not_empty': 1}</field>
|
||||
<field name="help" type="html">
|
||||
<p class="o_view_nocontent_empty_folder">
|
||||
Your chatter history is empty
|
||||
@@ -102,6 +136,7 @@
|
||||
<field name="context">{
|
||||
'search_default_livechat_channel_id': [active_id],
|
||||
'default_livechat_channel_id': active_id,
|
||||
'search_default_session_not_empty': 1,
|
||||
}</field>
|
||||
<field name="search_view_id" ref="mail_channel_view_search"/>
|
||||
</record>
|
||||
|
||||
@@ -7,6 +7,9 @@
|
||||
<field name="inherit_id" ref="rating.rating_rating_view_search"/>
|
||||
<field name="mode">primary</field>
|
||||
<field name="arch" type="xml">
|
||||
<xpath expr="//filter[@name='resource']" position="replace">
|
||||
<filter string="Code" name="resource" context="{'group_by':'res_name'}"/>
|
||||
</xpath>
|
||||
<xpath expr="//filter[@name='resource']" position="after">
|
||||
<field name="parent_res_name"/>
|
||||
<filter string="Livechat Channel" name="groupby_livechat_channel" context="{'group_by': 'parent_res_name'}"/>
|
||||
|
||||
Reference in New Issue
Block a user