From 860602b26ea28dd42f6231f83438d6c7f7c2d3fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Theys?= <seb@odoo.com>
Date: Fri, 28 Sep 2018 18:47:55 +0200
Subject: [PATCH] [FIX] website_sale_comparison: fix BS4 bugs

This commit closes #27308
task-1880762
---
 .../static/src/js/website_sale_comparison.js  | 34 +++++++++----------
 .../static/src/xml/comparison.xml             |  8 +++++
 .../website_sale_comparison_template.xml      | 12 +++----
 3 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/addons/website_sale_comparison/static/src/js/website_sale_comparison.js b/addons/website_sale_comparison/static/src/js/website_sale_comparison.js
index 40d750da293..80b24aaa9bb 100644
--- a/addons/website_sale_comparison/static/src/js/website_sale_comparison.js
+++ b/addons/website_sale_comparison/static/src/js/website_sale_comparison.js
@@ -7,6 +7,7 @@ var Widget = require('web.Widget');
 var sAnimations = require('website.content.snippets.animation');
 var website_sale_utils = require('website_sale.utils');
 
+var qweb = core.qweb;
 var _t = core._t;
 
 var ProductComparison = Widget.extend({
@@ -32,13 +33,11 @@ var ProductComparison = Widget.extend({
      */
     start: function () {
         var self = this;
+
         self._loadProducts(this.comparelist_product_ids).then(function () {
-            self._updateContent(self.comparelist_product_ids, true);
-            if (self.comparelist_product_ids.length) {
-                $('.o_product_feature_panel').addClass('d-md-block');
-                self._updateComparelistView();
-            }
+            self._updateContent('hide');
         });
+        self._updateComparelistView();
 
         $('#comparelist .o_product_panel_header').popover({
             trigger: 'manual',
@@ -49,13 +48,14 @@ var ProductComparison = Widget.extend({
             },
             container: '.o_product_feature_panel',
             placement: 'top',
-            template: '<div style="width:600px;" class="popover comparator-popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>',
+            template: qweb.render('popover'),
             content: function () {
                 return $('#comparelist .o_product_panel_content').html();
             }
         });
 
         $(document.body).on('click.product_comparaison_widget', '.comparator-popover .o_comparelist_products .o_remove', function (ev) {
+            ev.preventDefault();
             self._removeFromComparelist(ev);
         });
         $(document.body).on('click.product_comparaison_widget', '.o_comparelist_remove', function (ev) {
@@ -140,10 +140,10 @@ var ProductComparison = Widget.extend({
         if (!_.contains(self.comparelist_product_ids, product_id)) {
             self.comparelist_product_ids.push(product_id);
             if (_.has(self.product_data, product_id)){
-                self._updateContent([product_id], false);
+                self._updateContent();
             } else {
                 self._loadProducts([product_id]).then(function () {
-                    self._updateContent([product_id], false);
+                    self._updateContent();
                 });
             }
         }
@@ -152,18 +152,19 @@ var ProductComparison = Widget.extend({
     /**
      * @private
      */
-    _updateContent: function (product_ids, reset) {
+    _updateContent: function (force) {
         var self = this;
-        if (reset) {
-            self.$('.o_comparelist_products .o_product_row').remove();
-        }
-        _.each(product_ids, function (res) {
+        this.$('.o_comparelist_products .o_product_row').remove();
+        _.each(this.comparelist_product_ids, function (res) {
             var $template = self.product_data[res].render;
             self.$('.o_comparelist_products').append($template);
         });
-        if ($('.comparator-popover').length) {
+        if (force !== 'hide' && (this.comparelist_product_ids.length > 1 || force === 'show')) {
             $('#comparelist .o_product_panel_header').popover('show');
         }
+        else {
+            $('#comparelist .o_product_panel_header').popover('hide');
+        }
     },
     /**
      * @private
@@ -173,8 +174,7 @@ var ProductComparison = Widget.extend({
         $(e.currentTarget).parents('.o_product_row').remove();
         this._updateCookie();
         $('.o_comparelist_limit_warning').hide();
-        // force refresh to reposition popover
-        this._updateContent(this.comparelist_product_ids, true);
+        this._updateContent('show');
     },
     /**
      * @private
@@ -191,8 +191,8 @@ var ProductComparison = Widget.extend({
         this.$('.o_comparelist_button').removeClass('d-md-block');
         if (_.isEmpty(this.comparelist_product_ids)) {
             $('.o_product_feature_panel').removeClass('d-md-block');
-            this._togglePanel();
         } else {
+            $('.o_product_feature_panel').addClass('d-md-block');
             this.$('.o_comparelist_products').addClass('d-md-block');
             if (this.comparelist_product_ids.length >=2) {
                 this.$('.o_comparelist_button').addClass('d-md-block');
diff --git a/addons/website_sale_comparison/static/src/xml/comparison.xml b/addons/website_sale_comparison/static/src/xml/comparison.xml
index f3eca962374..e8d6c8db753 100644
--- a/addons/website_sale_comparison/static/src/xml/comparison.xml
+++ b/addons/website_sale_comparison/static/src/xml/comparison.xml
@@ -24,4 +24,12 @@
         </div>
     </t>
 
+    <t t-name="popover">
+        <div style="width:600px;" class="popover comparator-popover" role="tooltip">
+            <div class="arrow"/>
+            <h3 class="popover-header"/>
+            <div class="popover-body"/>
+        </div>
+    </t>
+
 </templates>
diff --git a/addons/website_sale_comparison/views/website_sale_comparison_template.xml b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
index 290798a87b7..64c7c836f0c 100644
--- a/addons/website_sale_comparison/views/website_sale_comparison_template.xml
+++ b/addons/website_sale_comparison/views/website_sale_comparison_template.xml
@@ -35,8 +35,8 @@
                             <table class='table table-striped table-sm table-hover'>
                                 <t t-foreach="atts.keys()" t-as="spec">
                                     <t t-if="len(atts.keys())&gt;1">
-                                        <tr class="success text-left breadcrumb clickable" data-toggle="collapse" t-att-data-target="'.'+spec.split()[0]">
-                                            <th t-att-colspan="2"><t t-esc="spec"/></th>
+                                        <tr class="clickable" data-toggle="collapse" t-att-data-target="'.'+spec.split()[0]">
+                                            <th class="text-left" t-att-colspan="2"><t t-esc="spec"/></th>
                                         </tr>
                                     </t>
                                     <tr t-foreach="atts[spec]" t-as="att" t-att-class="'collapse in show ' + spec.split()[0]">
@@ -72,7 +72,7 @@
                         <h3>Compare Products</h3>
                         <table class="table table-bordered table-hover text-center mt16 table-comparator" id="o_comparelist_table">
                             <thead>
-                                <td class='td-top-left'></td>
+                                <td t-if="specs.keys()" class='td-top-left'/>
                                 <td t-foreach="products" t-as="product">
                                     <a href="#" t-att-data-product_product_id="product.id" class="o_comparelist_remove" t-if="len(products) &gt; 2">
                                         <strong class='float-right'>x</strong>
@@ -95,7 +95,7 @@
 
                                         <form action="/shop/cart/update" method="post" class="text-center">
                                             <input name="product_id" t-att-value="product.id" type="hidden"/>
-                                            <a role="button" class="btn btn-primary btn-block a-submit"><i class="fa fa-shopping-cart"></i>&amp;nbsp;Add to Cart</a>
+                                            <a role="button" class="btn btn-primary btn-block a-submit" href="#"><i class="fa fa-shopping-cart"></i>&amp;nbsp;Add to Cart</a>
                                         </form>
                                     </div>
                                 </td>
@@ -103,8 +103,8 @@
                         <tbody>
                             <t t-foreach="specs.keys()" t-as="spec">
                                 <t t-if="len(specs.keys())&gt;1">
-                                    <tr class="success text-left breadcrumb clickable" data-toggle="collapse" t-att-data-target="'.'+spec.split()[0]">
-                                        <th t-att-colspan="len(products) + 1"><i class="fa fa-chevron-circle-down o_product_comparison_collpase" role="img" aria-label="Collapse" title="Collapse"></i><t t-esc="spec"/></th>
+                                    <tr class="clickable" data-toggle="collapse" t-att-data-target="'.'+spec.split()[0]">
+                                        <th class="text-left" t-att-colspan="len(products) + 1"><i class="fa fa-chevron-circle-down o_product_comparison_collpase" role="img" aria-label="Collapse" title="Collapse"></i><t t-esc="spec"/></th>
                                     </tr>
                                 </t>
                                 <tr t-foreach="specs[spec].keys()" t-as="att" t-att-class="'collapse in show ' + spec.split()[0]">