[IMP] website, website_* : improve visitor kanban view

This commit review the design of the visitor kanban view.
There is now two style for kanban card.
Ungrouped : the card takes all the width of the screen. It's simulate a nice tree view.
Grouped : Same design as before. ('normal' kanban card)

Apply visitor kanban views redesign also in :
- website_livechat
- website_crm
- website_sms

Task ID: 2073714
PR #37081

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

8 files changed, 184 insertions, 16 deletions

diff --git a/addons/website/models/website_visitor.py b/addons/website/models/website_visitor.py
index e7f3c418be8..f737f10322f 100644
--- a/addons/website/models/website_visitor.py
+++ b/addons/website/models/website_visitor.py
@@ -42,6 +42,7 @@ class WebsiteVisitor(models.Model):
     active = fields.Boolean('Active', default=True)
     website_id = fields.Many2one('website', "Website", readonly=True)
     user_partner_id = fields.Many2one('res.partner', string="Linked Partner", help="Partner of the last logged in user.")
+    partner_image = fields.Binary(related='user_partner_id.image_1920')
 
     # localisation and info
     country_id = fields.Many2one('res.country', 'Country', readonly=True)
@@ -57,6 +58,7 @@ class WebsiteVisitor(models.Model):
     visitor_page_count = fields.Integer('Page Views', compute="_compute_page_statistics", help="Total number of visits on tracked pages")
     page_ids = fields.Many2many('website.page', string="Visited Pages", compute="_compute_page_statistics")
     page_count = fields.Integer('# Visited Pages', compute="_compute_page_statistics", help="Total number of tracked page visited")
+    last_visited_page_id = fields.Many2one('website.page', string="Last Visited Page", compute="_compute_last_visited_page_id")
 
     # Time fields
     create_date = fields.Datetime('First connection date', readonly=True)
@@ -121,6 +123,15 @@ class WebsiteVisitor(models.Model):
             visitor.visitor_page_count = visitor_info['visitor_page_count']
             visitor.page_count = visitor_info['page_count']
 
+    @api.depends('website_track_ids.page_id')
+    def _compute_last_visited_page_id(self):
+        results = self.env['website.track'].read_group([('visitor_id', 'in', self.ids)],
+                                                                        ['visitor_id', 'page_id', 'visit_datetime:max'],
+                                                                        ['visitor_id', 'page_id'], lazy=False)
+        mapped_data = {result['visitor_id'][0]: result['page_id'][0] for result in results if result['page_id']}
+        for visitor in self:
+            visitor.last_visited_page_id = mapped_data.get(visitor.id, False)
+
     @api.depends('last_connections_ids')
     def _compute_time_statistics(self):
         results = self.env['website.visitor.lastconnection'].read_group([('visitor_id', 'in', self.ids)], ['visitor_id', 'connection_datetime:max'], ['visitor_id'])
diff --git a/addons/website/static/src/scss/website_visitor_views.scss b/addons/website/static/src/scss/website_visitor_views.scss
new file mode 100644
index 00000000000..ee209181a50
--- /dev/null
+++ b/addons/website/static/src/scss/website_visitor_views.scss
@@ -0,0 +1,46 @@
+.o_wvisitor_kanban {
+    &.o_kanban_ungrouped {
+        padding:0px;
+        .o_wvisitor_kanban_card {
+            width: 100%;
+            margin: 0px;
+            border-top: 0px !important;
+            &:first-child {
+                border-bottom: 1px solid #dee2e6 !important;
+            }
+            .o_kanban_detail_ungrouped {
+                .o_wvisitor_kanban_image {
+                    width: 56px;
+                    height: 56px;
+                    top: 0px;
+                    position: absolute;
+                }
+                .o_wvisitor_name {
+                    padding-left: 72px;
+                }
+                .w_visitor_kanban_actions_ungrouped {
+                    button {
+                        float: right;
+                        margin: 4px;
+                    }
+                }
+                .o_country_flag {
+                    margin-right: 8px;
+                }
+            }
+            .oe_kanban_details {
+                display:none !important;
+            }
+        }
+    }
+    &.o_kanban_grouped {
+        .o_kanban_detail_ungrouped {
+            display:none !important;
+        }
+    }
+}
+
+.o_country_flag {
+    width:24px;
+    height: 16px;
+}
\ No newline at end of file
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index fa887b348fb..1569a0acd09 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -30,6 +30,7 @@
 <template id="assets_backend" inherit_id="web.assets_backend" name="Website Backend Assets (used in backend interface)">
     <xpath expr="//link[last()]" position="after">
         <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.backend.scss"/>
+        <link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website_visitor_views.scss"/>
     </xpath>
     <xpath expr="//script[last()]" position="after">
         <script type="text/javascript" src="/website/static/src/js/backend/button.js"/>
diff --git a/addons/website/views/website_visitor_views.xml b/addons/website/views/website_visitor_views.xml
index e2015a77f4a..e6798a91f64 100644
--- a/addons/website/views/website_visitor_views.xml
+++ b/addons/website/views/website_visitor_views.xml
@@ -79,29 +79,87 @@
         <field name="name">website.visitor.view.kanban</field>
         <field name="model">website.visitor</field>
         <field name="arch" type="xml">
-            <kanban class="o_website_visitor_kanban">
+            <kanban class="o_wvisitor_kanban">
                 <field name="id"/>
                 <field name="country_id"/>
+                <field name="email"/>
                 <field name="is_connected"/>
                 <field name="display_name"/>
+                <field name="last_visited_page_id"/>
                 <field name="page_ids"/>
                 <field name="user_partner_id"/>
+                <field name="partner_image"/>
                 <templates>
                     <t t-name="kanban-box">
-                        <div class="oe_kanban_global_click">
+                        <div class="oe_kanban_global_click o_wvisitor_kanban_card">
+                            <!-- displayed in ungrouped mode -->
+                            <div class="o_kanban_detail_ungrouped row">
+                                <div class="o_wvisitor_kanban_image">
+                                     <img t-if="record.partner_image.raw_value"
+                                        t-att-src="kanban_image('res.partner', 'image_128', record.user_partner_id.raw_value)"
+                                        width="54px" height="54px" alt="Visitor"/>
+                                     <img t-else=""
+                                        t-attf-src="/base/static/img/avatar_grey.png"
+                                        width="54px" height="54px" alt="Visitor"/>
+                                </div>
+                                <div class="col o_wvisitor_name">
+                                    <div>
+                                        <b><field name="display_name"/></b>
+                                        <div class="float-right">
+                                            <span class="fa fa-circle text-success" t-if="record.is_connected.raw_value" aria-label="Online" title="Online"/>
+                                            <span class="fa fa-circle text-danger" t-else="" aria-label="Offline" title="Offline"/>
+                                        </div>
+                                        <div>
+                                            <img t-if="record.country_id.raw_value"
+                                             t-att-src="kanban_image('res.country', 'image', record.country_id.raw_value)"
+                                             class="o_country_flag" alt="Country"/>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="col">
+                                    <b><field name="time_since_last_action"/></b>
+                                    <div>Last Action</div>
+                                </div>
+                                <div class="col">
+                                    <b><field name="visit_count"/></b>
+                                    <div>Visits</div>
+                                </div>
+                                <div class="col">
+                                    <b><field name="last_visited_page_id"/></b>
+                                    <div>Last Page</div>
+                                </div>
+                                <div id="wvisitor_visited_page" class="col">
+                                    <b><field name="page_count"/></b>
+                                    <div>Visited Pages</div>
+                                </div>
+                                <div class="col-3 w_visitor_kanban_actions_ungrouped">
+                                    <button name="action_send_mail" type="object"
+                                            class="btn btn-secondary border" attrs="{'invisible': [('email', '=', False)]}">
+                                            Email
+                                    </button>
+                                </div>
+                            </div>
+                            <!-- displayed in grouped mode -->
                             <div class="oe_kanban_details">
                                 <div class="float-right">
                                     <span class="fa fa-circle text-success" t-if="record.is_connected.raw_value" aria-label="Online" title="Online"/>
                                     <span class="fa fa-circle text-danger" t-else="" aria-label="Offline" title="Offline"/>
                                 </div>
                                 <strong>
-                                    <img t-if="record.country_id.raw_value" t-att-src="kanban_image('res.country', 'image', record.country_id.raw_value)" class="o_country_flag" alt="Country"/>
+                                    <img t-if="record.country_id.raw_value"
+                                         t-att-src="kanban_image('res.country', 'image', record.country_id.raw_value)" class="o_country_flag" alt="Country"/>
                                     <field name="display_name"/>
                                 </strong>
                                 <div class="mb-2">Active <field name="time_since_last_action"/></div>
+                                <div>Last Page<span class="float-right font-weight-bold"><field name="last_visited_page_id"/></span></div>
                                 <div>Visits<span class="float-right font-weight-bold"><field name="visit_count"/></span></div>
                                 <div id="o_page_count">Visited Pages<span class="float-right font-weight-bold"><field name="page_count"/></span></div>
-                                <div id="w_visitor_kanban_actions"></div>
+                                <div class="w_visitor_kanban_actions">
+                                    <button name="action_send_mail" type="object"
+                                            class="btn btn-secondary" attrs="{'invisible': [('email', '=', False)]}">
+                                            Email
+                                    </button>
+                                </div>
                             </div>
                         </div>
                     </t>
diff --git a/addons/website_crm/views/website_visitor_views.xml b/addons/website_crm/views/website_visitor_views.xml
index 1d20b5271dc..9379abc26af 100644
--- a/addons/website_crm/views/website_visitor_views.xml
+++ b/addons/website_crm/views/website_visitor_views.xml
@@ -50,4 +50,24 @@
             </xpath>
         </field>
     </record>
+
+    <record id="website_visitor_view_kanban" model="ir.ui.view">
+        <field name="name">website.visitor.view.kanban.inherit.website.crm</field>
+        <field name="model">website.visitor</field>
+        <field name="inherit_id" ref="website.website_visitor_view_kanban"/>
+        <field name="arch" type="xml">
+            <field name="page_ids" position="after">
+                <field name="lead_count"/>
+            </field>
+            <xpath expr="//div[@id='o_page_count']" position="after">
+                <div>Leads/Opportunities<span class="float-right font-weight-bold"><field name="lead_count"/></span></div>
+            </xpath>
+            <xpath expr="//div[hasclass('w_visitor_kanban_actions_ungrouped')]" position="before">
+                <div class="col">
+                    <b><field name="lead_count"/></b>
+                    <div>Leads/Opportunities</div>
+                </div>
+            </xpath>
+        </field>
+    </record>
 </data></odoo>
diff --git a/addons/website_livechat/static/src/scss/mail_thread_visitor_info.scss b/addons/website_livechat/static/src/scss/mail_thread_visitor_info.scss
index 2520b54fde7..89b96b8b57a 100644
--- a/addons/website_livechat/static/src/scss/mail_thread_visitor_info.scss
+++ b/addons/website_livechat/static/src/scss/mail_thread_visitor_info.scss
@@ -32,8 +32,3 @@
         }
     }
 }
-
-.o_country_flag {
-    width:24px;
-    height: 16px;
-}
diff --git a/addons/website_livechat/views/website_visitor_views.xml b/addons/website_livechat/views/website_visitor_views.xml
index 96386ac5d5e..2626b8f2c27 100644
--- a/addons/website_livechat/views/website_visitor_views.xml
+++ b/addons/website_livechat/views/website_visitor_views.xml
@@ -31,7 +31,7 @@
             <field name="page_ids" position="after">
                 <field name="livechat_operator_id"/>
             </field>
-            <xpath expr="//div[@id='w_visitor_kanban_actions']" position="before">
+            <xpath expr="//div[hasclass('w_visitor_kanban_actions')]" position="before">
                 <div t-if="record.livechat_operator_id.raw_value">
                     <span class="fa fa-comments mr-2"/>Speaking With <span class="font-weight-bold"><field name="livechat_operator_name"/></span>
                 </div>
@@ -39,12 +39,28 @@
                     <br attrs="{'invisible': ['|', ('livechat_operator_id', '!=', False), ('is_connected', '=', False)]}"/>
                 </t>
             </xpath>
-            <xpath expr="//div[@id='w_visitor_kanban_actions']" position="inside">
-                    <button name="action_send_chat_request" type="object"
-                            class="btn btn-primary"
-                            attrs="{'invisible': ['|', ('livechat_operator_id', '!=', False), ('is_connected', '=', False)]}">
-                            <i class="fa fa-comments"/> Chat
-                    </button>
+            <xpath expr="//div[hasclass('w_visitor_kanban_actions_ungrouped')]" position="before">
+                <div class="col" >
+                    <b>
+                        <field name="livechat_operator_name" t-if="record.livechat_operator_id.raw_value"/>
+                        <span t-else="">-</span>
+                    </b>
+                    <div>Speaking With</div>
+                </div>
+            </xpath>
+            <xpath expr="//div[hasclass('w_visitor_kanban_actions')]" position="inside">
+                <button name="action_send_chat_request" type="object"
+                        class="btn btn-secondary"
+                        attrs="{'invisible': ['|', ('livechat_operator_id', '!=', False), ('is_connected', '=', False)]}">
+                        Chat
+                </button>
+            </xpath>
+            <xpath expr="//div[hasclass('w_visitor_kanban_actions_ungrouped')]" position="inside">
+                <button name="action_send_chat_request" type="object"
+                        class="btn btn-secondary border"
+                        attrs="{'invisible': ['|', ('livechat_operator_id', '!=', False), ('is_connected', '=', False)]}">
+                        Chat
+                </button>
             </xpath>
         </field>
     </record>
diff --git a/addons/website_sms/views/website_visitor_views.xml b/addons/website_sms/views/website_visitor_views.xml
index 6e30b773cc0..ad6d765a475 100644
--- a/addons/website_sms/views/website_visitor_views.xml
+++ b/addons/website_sms/views/website_visitor_views.xml
@@ -11,4 +11,25 @@
             </xpath>
         </field>
     </record>
+
+    <record id="website_visitor_view_kanban" model="ir.ui.view">
+        <field name="name">website.visitor.view.kanban.inherit.website.sms</field>
+        <field name="model">website.visitor</field>
+        <field name="inherit_id" ref="website.website_visitor_view_kanban"/>
+        <field name="arch" type="xml">
+            <field name="page_ids" position="after">
+                <field name="mobile"/>
+            </field>
+            <xpath expr="//div[hasclass('w_visitor_kanban_actions')]" position="inside">
+                <button name="action_send_sms" type="object" class="btn btn-secondary"
+                        attrs="{'invisible': [('mobile', '=', False)]}">SMS
+                </button>
+            </xpath>
+            <xpath expr="//div[hasclass('w_visitor_kanban_actions_ungrouped')]" position="inside">
+                <button name="action_send_sms" type="object" class="btn btn-secondary border"
+                        attrs="{'invisible': [('mobile', '=', False)]}">SMS
+                </button>
+            </xpath>
+        </field>
+    </record>
 </data></odoo>