From 56f9c0acf4b44df3b5e346d23b674c00bcd5456b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alexandre=20D=2E=20D=C3=ADaz?=
 <alexandre.diaz@tecnativa.com>
Date: Wed, 30 Dec 2020 17:25:19 +0100
Subject: [PATCH] [FIX] web_widget_one2many_product_picker: Use variant image

---
 .../__init__.py                               |  1 +
 .../models/__init__.py                        |  2 ++
 .../models/product_product.py                 | 36 +++++++++++++++++++
 .../src/xml/one2many_product_picker.xml       |  4 +--
 4 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 web_widget_one2many_product_picker/models/__init__.py
 create mode 100644 web_widget_one2many_product_picker/models/product_product.py

diff --git a/web_widget_one2many_product_picker/__init__.py b/web_widget_one2many_product_picker/__init__.py
index f0e48908c..28345b82a 100644
--- a/web_widget_one2many_product_picker/__init__.py
+++ b/web_widget_one2many_product_picker/__init__.py
@@ -1,2 +1,3 @@
 # Copyright 2020 Tecnativa - Alexandre Díaz
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
+from . import models
diff --git a/web_widget_one2many_product_picker/models/__init__.py b/web_widget_one2many_product_picker/models/__init__.py
new file mode 100644
index 000000000..3d1f7c9ef
--- /dev/null
+++ b/web_widget_one2many_product_picker/models/__init__.py
@@ -0,0 +1,2 @@
+# License LGPL-3.0 or later (https://www.gnu.org/licenses/lgpl).
+from . import product_product
diff --git a/web_widget_one2many_product_picker/models/product_product.py b/web_widget_one2many_product_picker/models/product_product.py
new file mode 100644
index 000000000..6beab967a
--- /dev/null
+++ b/web_widget_one2many_product_picker/models/product_product.py
@@ -0,0 +1,36 @@
+# Copyright 2020 Tecnativa - Alexandre D. Díaz
+# License LGPL-3.0 or later (https://www.gnu.org/licenses/lgpl).
+from odoo import api, fields, models, tools
+
+
+class ProductProduct(models.Model):
+    _inherit = 'product.product'
+
+    image_variant_medium = fields.Binary(
+        "Variant Image Medium (Computed)",
+        compute='_compute_variant_image',
+        help="This field holds the image used as image for the product variant"
+             "or product image medium, limited to 512x512px.",
+    )
+
+    image_variant_big = fields.Binary(
+        "Variant Image Big (Computed)",
+        compute='_compute_variant_image',
+        help="This field holds the image used as image for the product variant"
+             "or product image, limited to 1024x1024px.",
+    )
+
+    @api.depends('image_variant', 'product_tmpl_id.image')
+    def _compute_variant_image(self):
+        for record in self:
+            if record.image_variant:
+                resized_images = tools.image_get_resized_images(
+                    record.image_variant,
+                    return_big=False,
+                    return_small=False,
+                    avoid_resize_medium=True)
+                record.image_variant_medium = resized_images['image_medium']
+                record.image_variant_big = record.image_variant
+            else:
+                record.image_variant_medium = record.product_tmpl_id.image_medium
+                record.image_variant_big = record.product_tmpl_id.image
diff --git a/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml b/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml
index 78078dba4..700e7fe4f 100644
--- a/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml
+++ b/web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml
@@ -90,11 +90,11 @@
                                 </t>
                             </div>
                             <span data-field="display_name" class="oe_one2many_product_picker_title position-absolute fixed-bottom p-1" data-esc="display_name" />
-                            <img alt="" class="img img-fluid" t-att-src="image(state.data[field_map.product].data.id,'image_medium')" t-att-data-src-alt="image(state.data[field_map.product].data.id,'image')" />
+                            <img alt="" class="img img-fluid" t-att-src="image(state.data[field_map.product].data.id,'image_variant_medium')" t-att-data-src-alt="image(state.data[field_map.product].data.id,'image_variant_big')" />
                         </t>
                         <t t-else="">
                             <span class="oe_one2many_product_picker_title position-absolute fixed-bottom p-1" t-esc="record_search.display_name" />
-                            <img alt="" class="img img-fluid" t-att-src="image(record_search.id,'image_medium')" t-att-data-src-alt="image(record_search.id,'image')" />
+                            <img alt="" class="img img-fluid" t-att-src="image(record_search.id,'image_variant_medium')" t-att-data-src-alt="image(record_search.id,'image_variant_big')" />
                         </t>
                     </div>
                     <div class="oe_flip_card_back">