[IMP] web_widget_one2many_product_picker: Maximize button and content auto-select

web_widget_one2many_product_picker/__init__.py

@@ -1,3 +1,2 @@
 # Copyright 2020 Tecnativa - Alexandre Díaz
 # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
-from . import models

web_widget_one2many_product_picker/models/__init__.py

@@ -1,2 +0,0 @@
-# License LGPL-3.0 or later (https://www.gnu.org/licenses/lgpl).
-from . import product_product

web_widget_one2many_product_picker/models/product_product.py

@@ -1,21 +0,0 @@
-# Copyright 2020 Tecnativa - Alexandre D. Díaz
-# License LGPL-3.0 or later (https://www.gnu.org/licenses/lgpl).
-from odoo import fields, models
-
-
-class ProductProduct(models.Model):
-    _inherit = "product.product"
-
-    image_variant_medium = fields.Binary(
-        "Variant Image Medium (Related)",
-        related="image_512",
-        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 (Related)",
-        related="image_1024",
-        help="This field holds the image used as image for the product variant"
-        "or product image, limited to 1024x1024px.",
-    )

web_widget_one2many_product_picker/static/src/js/widgets/field_one2many_product_picker.js

@@ -29,6 +29,7 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
             "search .oe_search_input": "_onSearch",
             "focusin .oe_search_input": "_onFocusInSearch",
             "show.bs.dropdown .o_cp_buttons": "_onShowSearchDropdown",
+            "click #product_picker_maximize": "_onClickMaximize",
         }),
         custom_events: _.extend({}, FieldOne2Many.prototype.custom_events, {
             create_quick_record: "_onCreateQuickRecord",
@@ -261,7 +262,6 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
                     ) {
                         this.$el.addClass("position-relative d-flex flex-column");
                     }
-                    this._addMaximizeButton();
                     if (this.options.show_subtotal) {
                         this._addTotalsZone();
                     }
@@ -281,19 +281,6 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
             });
         },
 
-        /**
-         * Inject the 'maximize' button
-         *
-         * @private
-         */
-        _addMaximizeButton: function() {
-            this.$("#product_picker_maximize").remove();
-            this.$btnMaximize = $(qweb.render("One2ManyProductPicker.ButtonMaximize"));
-            this.$btnMaximize
-                .appendTo(this.$el)
-                .on("click", this._onClickMaximize.bind(this));
-        },
-
         /**
          * Inject the 'maximize' button
          *
@@ -678,9 +665,7 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
 
         _onSearch: function(evt) {
             this._searchContext.text = evt.target.value;
-            this.doRenderSearchRecords().then(() => {
+            this.doRenderSearchRecords();
-                this.$searchInput.focus();
-            });
         },
 
         /**
@@ -690,7 +675,11 @@ odoo.define("web_widget_one2many_product_picker.FieldOne2ManyProductPicker", fun
          * @private
          */
         _onFocusInSearch: function() {
-            this.$searchInput.select();
+            // Workaround: In some cases the focus it's not properly
+            // assigned due an "event collision".
+            // Use deferred call to ensure dispatch our event in
+            // a new frame.
+            _.defer(() => this.$searchInput.select());
         },
 
         /**

web_widget_one2many_product_picker/static/src/xml/one2many_product_picker.xml

@@ -39,6 +39,14 @@
                     aria-label="Search..."
                     aria-describedby="btnGroupAddon2"
                 />
+                <div class="input-group-append">
+                    <button
+                        id="product_picker_maximize"
+                        class='o_fullscreen btn btn-primary'
+                    >
+                        <i class='fa fa-expand' />
+                    </button>
+                </div>
             </div>
         </div>
     </t>
@@ -62,14 +70,6 @@
             </button>
         </div>
     </t>
-    <t t-name="One2ManyProductPicker.ButtonMaximize">
-        <button
-            if="product_picker_maximize"
-            class='o_fullscreen btn btn-primary position-absolute border border-dark py-1 px-2'
-        >
-            <i class='fa fa-expand' />
-        </button>
-    </t>
     <t t-name="One2ManyProductPicker.Total">
         <div id="product_picker_total" class="text-right">
             <h2>
@@ -167,8 +167,8 @@
                             <img
                                 alt=""
                                 class="img img-fluid"
-                                t-att-src="image(state.data[field_map.product].data.id,'image_variant_medium')"
+                                t-att-src="image(state.data[field_map.product].data.id,'image_512')"
-                                t-att-data-src-alt="image(state.data[field_map.product].data.id,'image_variant_big')"
+                                t-att-data-src-alt="image(state.data[field_map.product].data.id,'image_1024')"
                             />
                         </t>
                         <t t-else="">
@@ -179,8 +179,8 @@
                             <img
                                 alt=""
                                 class="img img-fluid"
-                                t-att-src="image(record_search.id,'image_variant_medium')"
+                                t-att-src="image(record_search.id,'image_512')"
-                                t-att-data-src-alt="image(record_search.id,'image_variant_big')"
+                                t-att-data-src-alt="image(record_search.id,'image_1024')"
                             />
                         </t>
                     </div>