[REF] web: pivot: use owl_compatibility tools

This commit changes ControllerAdapter to a mixin that inherits
WidgetAdapterMixin and RendererWrapper now extends ComponentWrapper.

This commit also changes PivotController base class/mixin and uses
the Odoo legacy custom_events because of the adapter.

closes odoo/odoo#43256

Related: odoo/enterprise#7744
Signed-off-by: Géry Debongnie (ged) <ged@openerp.com>

8 files changed, 36 insertions, 126 deletions

diff --git a/addons/web/static/src/js/views/abstract_controller.js b/addons/web/static/src/js/views/abstract_controller.js
index 152d8c08071..a0152e5ccc4 100644
--- a/addons/web/static/src/js/views/abstract_controller.js
+++ b/addons/web/static/src/js/views/abstract_controller.js
@@ -18,12 +18,13 @@ var concurrency = require('web.concurrency');
 var config = require('web.config');
 var core = require('web.core');
 var mvc = require('web.mvc');
+var { WidgetAdapterMixin } = require('web.OwlCompatibility');
 
 var session = require('web.session');
 
 var QWeb = core.qweb;
 
-var AbstractController = mvc.Controller.extend(ActionMixin, {
+var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin, {
     custom_events: _.extend({}, ActionMixin.custom_events, {
         navigation_move: '_onNavigationMove',
         open_record: '_onOpenRecord',
@@ -106,6 +107,7 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
             this.controlPanelElements.$switch_buttons.off();
         }
         this._super.apply(this, arguments);
+        WidgetAdapterMixin.destroy.call(this, ...arguments);
     },
     /**
      * Called each time the controller is attached into the DOM.
@@ -118,6 +120,7 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
             this._searchPanel.on_attach_callback();
         }
         this.renderer.on_attach_callback();
+        WidgetAdapterMixin.on_attach_callback.call(this, ...arguments);
     },
     /**
      * Called each time the controller is detached from the DOM.
@@ -127,6 +130,7 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
             this._controlPanel.on_detach_callback();
         }
         this.renderer.on_detach_callback();
+        WidgetAdapterMixin.on_detach_callback.call(this, ...arguments);
     },
 
     //--------------------------------------------------------------------------
@@ -296,16 +300,17 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
             });
         });
     },
-
     /**
-     * Update the state of the renderer.
-     * This method is required to be overridden in OWL components through the controller
-     * adapter
+     * Update the state of the renderer (handle both Widget and Component
+     * renderers).
      *
      * @param {Object} state the model state
      * @param {Object} params will be given to the model and to the renderer
      */
-    updateRendererState: function(state, params) {
+    updateRendererState: function (state, params) {
+        if (this.renderer instanceof owl.Component) {
+            return this.renderer.update(state);
+        }
         return this.renderer.updateState(state, params);
     },
 
@@ -462,6 +467,9 @@ var AbstractController = mvc.Controller.extend(ActionMixin, {
      * @private
      */
     _startRenderer: function () {
+        if (this.renderer instanceof owl.Component) {
+            return this.renderer.mount(this.$('.o_content')[0]);
+        }
         return this.renderer.appendTo(this.$('.o_content'));
     },
     /**
diff --git a/addons/web/static/src/js/views/controller_adapter.js b/addons/web/static/src/js/views/controller_adapter.js
deleted file mode 100644
index aeb857b6763..00000000000
--- a/addons/web/static/src/js/views/controller_adapter.js
+++ /dev/null
@@ -1,44 +0,0 @@
-odoo.define('web.ControllerAdapter', function (require) {
-"use strict";
-
-var AbstractController = require('web.AbstractController');
-
-var ControllerAdapter = AbstractController.extend({
-
-    /**
-     * @override
-     */
-    destroy: function () {
-        this._super.apply(this, arguments);
-        this.renderer.destroy();
-    },
-
-    /**
-     * @override
-     * */
-    updateRendererState: async function (props) {
-        let prom;
-        this.renderer.updateProps(props);
-        if (this.renderer.__owl__.isMounted) {
-            prom = this.renderer.render();
-        } else {
-            prom = this.renderer.mount(this.$('.o_content')[0], true);
-        }
-        return prom;
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-    /**
-     * @override
-     * @private
-     */
-    _startRenderer: async function () {
-        return this.renderer.mount(this.$('.o_content')[0]);
-    },
-});
-
-return ControllerAdapter;
-
-});
diff --git a/addons/web/static/src/js/views/pivot/pivot_controller.js b/addons/web/static/src/js/views/pivot/pivot_controller.js
index 606367d4d3a..e1c33a53fec 100644
--- a/addons/web/static/src/js/views/pivot/pivot_controller.js
+++ b/addons/web/static/src/js/views/pivot/pivot_controller.js
@@ -12,7 +12,7 @@ odoo.define('web.PivotController', function (require) {
      * view.
      */
 
-    const ControllerAdapter = require('web.ControllerAdapter');
+    const AbstractController = require('web.AbstractController');
     const core = require('web.core');
     const framework = require('web.framework');
     const session = require('web.session');
@@ -20,14 +20,15 @@ odoo.define('web.PivotController', function (require) {
     const _t = core._t;
     const QWeb = core.qweb;
 
-    const PivotController = ControllerAdapter.extend({
-        events: Object.assign({}, ControllerAdapter.prototype.events, {
+    const PivotController = AbstractController.extend({
+        custom_events: Object.assign({}, AbstractController.prototype.custom_events, {
             closed_header_click: '_onClosedHeaderClicked',
             open_view: '_onOpenView',
             opened_header_click: '_onOpenedHeaderClicked',
             sort_rows: '_onSortRows',
             groupby_menu_selection: '_onGroupByMenuSelection',
         }),
+
         /**
          * @override
          * @param parent
@@ -206,7 +207,7 @@ odoo.define('web.PivotController', function (require) {
          * @private
          * */
         _onOpenedHeaderClicked: function (ev) {
-            this.model.closeGroup(ev.detail.cell.groupId, ev.detail.type);
+            this.model.closeGroup(ev.data.cell.groupId, ev.data.type);
             this.update({}, { reload: false });
         },
         /**
@@ -214,9 +215,9 @@ odoo.define('web.PivotController', function (require) {
          * @private
          * */
         _onClosedHeaderClicked: async function (ev) {
-            const cell = ev.detail.cell;
+            const cell = ev.data.cell;
             const groupId = cell.groupId;
-            const type = ev.detail.type;
+            const type = ev.data.type;
 
             const group = {
                 rowValues: groupId[0],
@@ -245,8 +246,8 @@ odoo.define('web.PivotController', function (require) {
         _onGroupByMenuSelection: async function (ev) {
             ev.stopPropagation();
 
-            let groupBy = ev.detail.field.name;
-            const interval = ev.detail.interval;
+            let groupBy = ev.data.field.name;
+            const interval = ev.data.interval;
             if (interval) {
                 groupBy = groupBy + ':' + interval;
             }
@@ -260,7 +261,7 @@ odoo.define('web.PivotController', function (require) {
          */
         _onOpenView: function (ev) {
             ev.stopPropagation();
-            const cell = ev.detail;
+            const cell = ev.data;
             if (cell.value === undefined || this.initialState.disableLinking) {
                 return;
             }
@@ -297,10 +298,10 @@ odoo.define('web.PivotController', function (require) {
          */
         _onSortRows: function (ev) {
             this.model.sortRows({
-                groupId: ev.detail.groupId,
-                measure: ev.detail.measure,
-                order: (ev.detail.order || 'desc') === 'asc' ? 'desc' : 'asc',
-                originIndexes: ev.detail.originIndexes,
+                groupId: ev.data.groupId,
+                measure: ev.data.measure,
+                order: (ev.data.order || 'desc') === 'asc' ? 'desc' : 'asc',
+                originIndexes: ev.data.originIndexes,
             });
             this.update({}, { reload: false });
         },
diff --git a/addons/web/static/src/js/views/pivot/pivot_view.js b/addons/web/static/src/js/views/pivot/pivot_view.js
index ab8cc5de7c8..bd259d9d0aa 100644
--- a/addons/web/static/src/js/views/pivot/pivot_view.js
+++ b/addons/web/static/src/js/views/pivot/pivot_view.js
@@ -141,7 +141,7 @@ odoo.define('web.PivotView', function (require) {
          */
         getRenderer(parent, state) {
             state = Object.assign(state || {}, this.rendererParams);
-            return new RendererWrapper(null, state, this.config.Renderer);
+            return new RendererWrapper(null, this.config.Renderer, state);
         },
     });
 
diff --git a/addons/web/static/src/js/views/renderer_wrapper.js b/addons/web/static/src/js/views/renderer_wrapper.js
index 9131e34e128..5fb59a003cd 100644
--- a/addons/web/static/src/js/views/renderer_wrapper.js
+++ b/addons/web/static/src/js/views/renderer_wrapper.js
@@ -1,64 +1,13 @@
 odoo.define('web.RendererWrapper', function (require) {
     "use strict";
 
-    const { xml } = owl.tags;
-    const AbstractRenderer = require('web.AbstractRendererOwl');
-
-    class RendererWrapper extends owl.Component {
-        /**
-         *
-         * @param {Object} parent
-         * @param {Object} props
-         * @param {Class} concreteRenderer
-         */
-        constructor(parent, props, concreteRenderer) {
-            super(...arguments);
-            this.concreteRenderer = concreteRenderer;
-            this.data = props;
-        }
-
-        /**
-         * Update the props of the renderer before a re-render
-         * called on the initial render as well as when the renderer is re-mounted (view switched)
-         *
-         * @param {Object} props new props
-         */
-        updateProps(props) {
-            this.data = Object.assign(this.data || {}, props);
-        }
-
-        mounted() {
-            for (let x in this.__owl__.children) {
-                this.__owl__.children[x].__callMounted();
-            }
-        }
-
-        willUnmount() {
-            for (let x in this.__owl__.children) {
-                this.__owl__.children[x].__callWillUnmount();
-            }
-        }
-
-        on_attach_callback() {
-            this.__callMounted();
-        }
-
-        on_detach_callback() {
-            this.__callWillUnmount();
-        }
-
-        setParent() { }
+    const { ComponentWrapper } = require('web.OwlCompatibility');
 
+    class RendererWrapper extends ComponentWrapper {
         getLocalState() { }
-
         setLocalState() { }
-
         giveFocus() { }
-    };
-
-    RendererWrapper.template = xml`<t t-component="concreteRenderer" t-props="data"/>`;
-
-    RendererWrapper.components = { AbstractRenderer };
+    }
 
     return RendererWrapper;
 
diff --git a/addons/web/static/tests/views/abstract_controller_tests.js b/addons/web/static/tests/views/abstract_controller_tests.js
index 39993592ac9..09b95abddda 100644
--- a/addons/web/static/tests/views/abstract_controller_tests.js
+++ b/addons/web/static/tests/views/abstract_controller_tests.js
@@ -8,7 +8,6 @@ var createView = testUtils.createView;
 var BasicView = require("web.BasicView");
 var BasicRenderer = require("web.BasicRenderer");
 const AbstractRenderer = require('web.AbstractRendererOwl');
-const ControllerAdapter = require('web.ControllerAdapter');
 const RendererWrapper = require('web.RendererWrapper');
 
 function getHtmlRenderer(html) {
@@ -26,10 +25,9 @@ function getOwlView(owlRenderer, viewType) {
         viewType: viewType,
         config: _.extend({}, BasicView.prototype.config, {
             Renderer: owlRenderer,
-            Controller: ControllerAdapter.extend({})
         }),
         getRenderer() {
-            return new RendererWrapper(null, {}, this.config.Renderer);
+            return new RendererWrapper(null, this.config.Renderer, {});
         }
     });
 }
@@ -96,9 +94,8 @@ QUnit.module("Views", {
         assert.verifySteps(["a1", "a2", "method", "method", "descr", "descr2"]);
 
         view.destroy();
-    }
-    );
-    
+    });
+
     QUnit.test('OWL Renderer correctly destroyed', async function (assert) {
         assert.expect(2);
 
diff --git a/addons/web/static/tests/views/pivot_tests.js b/addons/web/static/tests/views/pivot_tests.js
index d40fee98cef..79c6bbcaecb 100644
--- a/addons/web/static/tests/views/pivot_tests.js
+++ b/addons/web/static/tests/views/pivot_tests.js
@@ -11,7 +11,7 @@ var _t = core._t;
 var createActionManager = testUtils.createActionManager;
 var createView = testUtils.createView;
 var patchDate = testUtils.mock.patchDate;
-const oldEnv = PivotRenderer.env;
+
 /**
  * Helper function that returns, given a pivot instance, the values of the
  * table, separated by ','.
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 07ca6f10066..1b110716ef2 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -304,7 +304,6 @@
         <script type="text/javascript" src="/web/static/src/js/views/abstract_renderer_owl.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/abstract_model.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/abstract_controller.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/controller_adapter.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/renderer_wrapper.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/basic/basic_model.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/basic/basic_view.js"></script>