From 42089cb78c1ade07e172569e20b7a8df5c21fe2e Mon Sep 17 00:00:00 2001
From: sofiagvaladze <sgv@odoo.com>
Date: Tue, 14 Sep 2021 08:34:58 +0000
Subject: [PATCH] [IMP] hr_holidays: Time Off dashboard information tag popover

Purpose: From the dashboard, the user sees the number of left time offs,
but does not have an information regarding how it is calculated.

In this task, we add an information tag on the Time Off dashboard
next to each Time Off type that requires allocation.
When we hover over the tag, we see how is the number calculated.

For example, it could look the following way:

Allocated : 20 days
Approved: 5 days
Planned: 3 days
-----------------
Left: 12 days

task - 2643115

closes odoo/odoo#76682

Signed-off-by: Yannick Tivisse (yti) <yti@odoo.com>
---
 addons/hr_holidays/models/hr_leave_type.py    |  2 ++
 .../static/src/js/time_off_calendar.js        | 21 +++++++++++++++++++
 .../hr_holidays/static/src/scss/time_off.scss | 14 +++++++++++++
 .../static/src/xml/time_off_calendar.xml      | 13 ++++++++++++
 4 files changed, 50 insertions(+)

diff --git a/addons/hr_holidays/models/hr_leave_type.py b/addons/hr_holidays/models/hr_leave_type.py
index 43f89924158..618c8a3bf19 100644
--- a/addons/hr_holidays/models/hr_leave_type.py
+++ b/addons/hr_holidays/models/hr_leave_type.py
@@ -291,6 +291,8 @@ class HolidaysType(models.Model):
                 'max_leaves': ('%.2f' % self.max_leaves).rstrip('0').rstrip('.'),
                 'leaves_taken': ('%.2f' % self.leaves_taken).rstrip('0').rstrip('.'),
                 'virtual_leaves_taken': ('%.2f' % self.virtual_leaves_taken).rstrip('0').rstrip('.'),
+                'leaves_requested': ('%.2f' % (self.max_leaves - self.virtual_remaining_leaves - self.leaves_taken)).rstrip('0').rstrip('.'),
+                'leaves_approved': ('%.2f' % self.leaves_taken).rstrip('0').rstrip('.'),
                 'request_unit': self.request_unit,
                 'icon': self.sudo().icon_id.url,
                 }, self.requires_allocation, self.id)
diff --git a/addons/hr_holidays/static/src/js/time_off_calendar.js b/addons/hr_holidays/static/src/js/time_off_calendar.js
index d0e2daa56de..57d91e21fd7 100644
--- a/addons/hr_holidays/static/src/js/time_off_calendar.js
+++ b/addons/hr_holidays/static/src/js/time_off_calendar.js
@@ -208,6 +208,27 @@ odoo.define('hr_holidays.dashboard.view_custo', function(require) {
                             timeoffs: result,
                         });
                         self.$el.before(elem);
+
+                        //add popover to the information tags
+                        _.each(self.$el.parent().find('.fa-question-circle-o'), function(popup){
+                            $(popup).popover({
+                                trigger: 'hover',
+                                html: true,
+                                delay: {show: 300, hide: 0},
+                                content: function () {
+                                    var data = {
+                                        allocated: popup.dataset.allocated,
+                                        approved: popup.dataset.approved,
+                                        planned: popup.dataset.planned,
+                                        left: popup.dataset.left
+                                    };
+                                    var elem_popover = QWeb.render('hr_holidays.dashboard_calendar_header_leave_type_popover', {
+                                        data: data,
+                                    });
+                                    return elem_popover
+                                },
+                            });
+                        });
                     }
                 }
             });
diff --git a/addons/hr_holidays/static/src/scss/time_off.scss b/addons/hr_holidays/static/src/scss/time_off.scss
index a85a6cad423..7ceeadab7e0 100644
--- a/addons/hr_holidays/static/src/scss/time_off.scss
+++ b/addons/hr_holidays/static/src/scss/time_off.scss
@@ -82,3 +82,17 @@
         }
     }
 }
+
+.o_timeoff_dashboard_popover{
+
+    hr{
+        margin-top: 0px;
+        margin-bottom: 0px
+     }
+
+     ul{
+        list-style: none;
+        padding-left: 0;
+        margin:0px;
+     }
+}
diff --git a/addons/hr_holidays/static/src/xml/time_off_calendar.xml b/addons/hr_holidays/static/src/xml/time_off_calendar.xml
index a4b9d8e365b..e1c48ec96ac 100644
--- a/addons/hr_holidays/static/src/xml/time_off_calendar.xml
+++ b/addons/hr_holidays/static/src/xml/time_off_calendar.xml
@@ -14,6 +14,7 @@
                     <t t-if="requires_allocation">
                         <t t-if="has_icon"><img height="30px" t-attf-src="{{timeoff[1]['icon']}}"/></t><span t-esc="timeoff[1]['virtual_remaining_leaves']" class="o_timeoff_huge o_timeoff_purple font-weight-bold align-middle"/><br/>
                         <t class="o_timeoff_big o_timeoff_purple" t-if="timeoff[1]['request_unit'] == 'hour'"><span class="o_timeoff_purple">HOURS</span></t><t class="o_timeoff_big o_timeoff_purple" t-else=""><span class="o_timeoff_purple">DAYS</span></t> <span class="o_timeoff_purple">AVAILABLE </span>
+                        <span class="fa fa-question-circle-o o_timeoff_purple" t-att-data-allocated="timeoff[1]['max_leaves']" t-att-data-approved="timeoff[1]['leaves_approved']" t-att-data-planned="timeoff[1]['leaves_requested']" t-att-data-left="timeoff[1]['virtual_remaining_leaves']"/>
                     </t>
                     <t t-else="">
                         <t t-if="has_icon"><img height="30px" t-attf-src="{{timeoff[1]['icon']}}"/></t><span t-esc="timeoff[1]['virtual_leaves_taken']" class="o_timeoff_huge o_timeoff_purple font-weight-bold align-middle"/><br/>
@@ -24,6 +25,18 @@
         </div>
     </t>
 
+    <t t-name="hr_holidays.dashboard_calendar_header_leave_type_popover">
+        <div class="o_timeoff_dashboard_popover">
+            <ul>
+                <li>Allocated: <span t-esc="data['allocated']"/></li>
+                <li>Approved: <span t-esc="data['approved']"/></li>
+                <li>Planned: <span t-esc="data['planned']"/></li>
+                <hr/>
+                <li>Left: <span t-esc="data['left']"/></li>
+            </ul>
+        </div>
+    </t>
+
     <t t-name="hr_holidays.dashboard_calendar_header_mobile">
         <t t-set="requires_allocation" t-value="timeoff[2] === 'yes'"/>
         <span class="pull-right">