[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

@@ -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)

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
+                                },
+                            });
+                        });
                     }
                 }
             });

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;
+     }
+}

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">