[IMP] website_sale: implement better edition usability

- Allow to switch from grid to list view in edition
- Do not show grid options when in list view

Part of https://github.com/odoo/odoo/pull/31147
task-1925327

addons/website_sale/static/src/js/website_sale.editor.js

@@ -98,6 +98,13 @@ options.registry.WebsiteSaleGridLayout = options.Class.extend({
         this.ppr = this.$target.closest('[data-ppr]').data('ppr');
         return this._super.apply(this, arguments);
     },
+    /**
+     * @override
+     */
+    onFocus: function () {
+        var listLayoutEnabled = this.$target.closest('#products_grid').hasClass('o_wsale_layout_list');
+        this.$el.filter('.o_wsale_ppr_submenu').toggleClass('d-none', listLayoutEnabled);
+    },
 
     //--------------------------------------------------------------------------
     // Options
@@ -210,6 +217,14 @@ options.registry.WebsiteSaleProductsItem = options.Class.extend({
 
         return $.when.apply($, defs);
     },
+    /**
+     * @override
+     */
+    onFocus: function () {
+        var listLayoutEnabled = this.$target.closest('#products_grid').hasClass('o_wsale_layout_list');
+        this.$el.find('.o_wsale_soptions_menu_sizes').closest('.dropdown-submenu')
+            .toggleClass('d-none', listLayoutEnabled);
+    },
 
     //--------------------------------------------------------------------------
     // Options

addons/website_sale/static/src/js/website_sale.js

@@ -150,7 +150,6 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
         'click input.js_product_change': 'onChangeVariant',
         // dirty fix: prevent options modal events to be triggered and bubbled
         'change oe_optional_products_modal [data-attribute_exclusions]': 'onChangeVariant',
-        'change .o_wsale_apply_layout': '_onApplyShopLayoutChange',
     }),
 
     /**
@@ -422,33 +421,6 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
         $carousel.toggleClass('css_not_available',
             $productContainer.find('.js_main_product').hasClass('css_not_available'));
     },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {Event} ev
-     */
-    _onApplyShopLayoutChange: function (ev) {
-        var switchToList = $(ev.currentTarget).find('.o_wsale_apply_list input').is(':checked');
-        this._rpc({
-            route: '/shop/save_shop_layout_mode',
-            params: {
-                'layout_mode': switchToList ? 'list' : 'grid',
-            },
-        });
-        var $grid = this.$('#products_grid');
-        // Disable transition on all list elements, then switch to the new
-        // layout then reenable all transitions after having forced a redraw
-        // TODO should probably be improved to allow disabling transitions
-        // altogether with a class/option.
-        $grid.find('*').css('transition', 'none');
-        $grid.toggleClass('o_wsale_layout_list', switchToList);
-        void $grid[0].offsetWidth;
-        $grid.find('*').css('transition', '');
-    },
     /**
      * @private
      * @param {MouseEvent} ev
@@ -458,7 +430,6 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
         this.isBuyNow = $(ev.currentTarget).attr('id') === 'buy_now';
         return this._handleAdd($(ev.currentTarget).closest('form'));
     },
-
     /**
      * Initializes the optional products modal
      * and add handlers to the modal events (confirm, back, ...)
@@ -718,6 +689,43 @@ publicWidget.registry.WebsiteSale = publicWidget.Widget.extend(VariantMixin, {
     },
 });
 
+publicWidget.registry.WebsiteSaleLayout = publicWidget.Widget.extend({
+    selector: '.oe_website_sale',
+    disabledInEditableMode: false,
+    events: {
+        'change .o_wsale_apply_layout': '_onApplyShopLayoutChange',
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Event} ev
+     */
+    _onApplyShopLayoutChange: function (ev) {
+        var switchToList = $(ev.currentTarget).find('.o_wsale_apply_list input').is(':checked');
+        if (!this.editableMode) {
+            this._rpc({
+                route: '/shop/save_shop_layout_mode',
+                params: {
+                    'layout_mode': switchToList ? 'list' : 'grid',
+                },
+            });
+        }
+        var $grid = this.$('#products_grid');
+        // Disable transition on all list elements, then switch to the new
+        // layout then reenable all transitions after having forced a redraw
+        // TODO should probably be improved to allow disabling transitions
+        // altogether with a class/option.
+        $grid.find('*').css('transition', 'none');
+        $grid.toggleClass('o_wsale_layout_list', switchToList);
+        void $grid[0].offsetWidth;
+        $grid.find('*').css('transition', '');
+    },
+});
+
 publicWidget.registry.websiteSaleCart = publicWidget.Widget.extend({
     selector: '.oe_website_sale .oe_cart',
     events: {

addons/website_sale/views/snippets.xml

@@ -46,7 +46,7 @@
             <a href="#" class="dropdown-item" role="menuitem" data-no-preview="true" data-choose-ppg="1">
                 <i class="fa fa-cart-plus"/>Choose number of products
             </a>
-            <div class="dropdown-submenu" role="menuitem" aria-haspopup="true">
+            <div class="dropdown-submenu o_wsale_ppr_submenu" role="menuitem" aria-haspopup="true">
                 <a tabindex="-1" href="#" class="dropdown-item" role="menuitem">
                     <i class="fa fa-columns"/>Number of Columns
                 </a>