From 7ad1d35443ee80a7ebf1e27e5ba721c6bdbbf084 Mon Sep 17 00:00:00 2001
From: David Beguin <dbe@odoo.com>
Date: Fri, 7 Sep 2018 16:07:50 +0200
Subject: [PATCH] [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
---
 .../static/src/scss/im_livechat_history.scss  |  29 ++++
 .../views/im_livechat_channel_templates.xml   |   1 +
 .../views/im_livechat_channel_views.xml       | 128 ++++++++++--------
 .../im_livechat/views/mail_channel_views.xml  |  75 +++++++---
 addons/im_livechat/views/rating_views.xml     |   3 +
 5 files changed, 156 insertions(+), 80 deletions(-)
 create mode 100644 addons/im_livechat/static/src/scss/im_livechat_history.scss

diff --git a/addons/im_livechat/static/src/scss/im_livechat_history.scss b/addons/im_livechat/static/src/scss/im_livechat_history.scss
new file mode 100644
index 00000000000..31421eec3e0
--- /dev/null
+++ b/addons/im_livechat/static/src/scss/im_livechat_history.scss
@@ -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;
+            }
+        }
+
+    }
+}
diff --git a/addons/im_livechat/views/im_livechat_channel_templates.xml b/addons/im_livechat/views/im_livechat_channel_templates.xml
index fdc2c1513c5..59a2e8ff359 100644
--- a/addons/im_livechat/views/im_livechat_channel_templates.xml
+++ b/addons/im_livechat/views/im_livechat_channel_templates.xml
@@ -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>
 
diff --git a/addons/im_livechat/views/im_livechat_channel_views.xml b/addons/im_livechat/views/im_livechat_channel_views.xml
index 7bbb2f10668..79ecd245627 100644
--- a/addons/im_livechat/views/im_livechat_channel_views.xml
+++ b/addons/im_livechat/views/im_livechat_channel_views.xml
@@ -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 &gt; 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 &gt;= 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 &lt;head&gt; 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 &lt;head&gt; 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>
diff --git a/addons/im_livechat/views/mail_channel_views.xml b/addons/im_livechat/views/mail_channel_views.xml
index 17217c6c36a..fedcfec4004 100644
--- a/addons/im_livechat/views/mail_channel_views.xml
+++ b/addons/im_livechat/views/mail_channel_views.xml
@@ -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>
diff --git a/addons/im_livechat/views/rating_views.xml b/addons/im_livechat/views/rating_views.xml
index abaaf230080..2aad1e0fe9a 100644
--- a/addons/im_livechat/views/rating_views.xml
+++ b/addons/im_livechat/views/rating_views.xml
@@ -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'}"/>