[REF] web, *: legacy: lazy loading of legacy reporting views

Since commit 0134495ba5 the reporting views pivot, graph, cohort are written in full new framework. Some applications still need the legacy ones, so this commit just implements the lazy loading of those views. In stock, report_stock_forecasted has been adapted in order to avoid having a GraphView override: we now modify the canvas' height in pure JS. *: board, stock closes odoo/odoo#76931 Related: odoo/enterprise#21054 Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
2021-09-22 12:22:46 +00:00
parent 63209575ee
commit 56dda82a5f
13 changed files with 87 additions and 27 deletions
@@ -13,6 +13,7 @@ var FormView = require('web.FormView');
 var pyUtils = require('web.py_utils');
 var session  = require('web.session');
 var viewRegistry = require('web.view_registry');
+const { loadLegacyViews } = require("@web/legacy/legacy_views");

 var _t = core._t;
 var _lt = core._lt;
@@ -34,6 +35,12 @@ var BoardController = FormController.extend({
        this.customViewID = params.customViewID;
    },

+    async willStart() {
+        const _super = this._super.bind(this, ...arguments);
+        await loadLegacyViews({ rpc: this._rpc.bind(this) });
+        return _super();
+    },
+
    //--------------------------------------------------------------------------
    // Public
    //--------------------------------------------------------------------------
@@ -1,24 +1,16 @@
 odoo.define('stock.ReplenishReport', function (require) {
 "use strict";

+const { loadLegacyViews } = require("@web/legacy/legacy_views");
+
 const clientAction = require('report.client_action');
 const core = require('web.core');
 const dom = require('web.dom');
-const GraphRenderer = require("web/static/src/js/views/graph/graph_renderer");
-const GraphView = require('web.GraphView');

 const qweb = core.qweb;
 const _t = core._t;

-class StockReportGraphRenderer extends GraphRenderer {}
-
-StockReportGraphRenderer.template = "stock.GraphRenderer";
-
-const StockReportGraphView = GraphView.extend({
-    config: Object.assign({}, GraphView.prototype.config, {
-        Renderer: StockReportGraphRenderer,
-    }),
-});
+const viewRegistry = require("web.view_registry");

 const ReplenishReport = clientAction.extend({
    /**
@@ -56,7 +48,8 @@ const ReplenishReport = clientAction.extend({
        });
        return Promise.all([
            this._super.apply(this, arguments),
-            loadWarehouses
+            loadWarehouses,
+            loadLegacyViews({ rpc: this._rpc.bind(this) }),
        ]);
    },

@@ -125,9 +118,24 @@ const ReplenishReport = clientAction.extend({
            noContentHelp: _t("Try to add some incoming or outgoing transfers."),
            withControlPanel: false,
        };
-        const graphView = new StockReportGraphView(viewInfo, params);
+        const GraphView = viewRegistry.get("graph");
+        const graphView = new GraphView(viewInfo, params);
        const graphController = await graphView.getController(this);
        await graphController.appendTo(document.createDocumentFragment());
+
+        // Since we render the container in a fragment, we may endup in this case:
+        // https://github.com/chartjs/Chart.js/issues/2210#issuecomment-204984449
+        // so, the canvas won't be resizing when it is relocated in the iframe.
+        // Also, since the iframe's position is absolute, chartJS reiszing may not work
+        //  (https://www.chartjs.org/docs/2.9.4/general/responsive.html -- #Important Note)
+        // Finally, we do want to set a height for the canvas rendering in chartJS.
+        // We do this via the chartJS API, that is legacy/graph_renderer.js:@_prepareOptions
+        //  (maintainAspectRatio = false) and with the *attribute* height (not the style).
+        //  (https://www.chartjs.org/docs/2.9.4/general/responsive.html -- #Responsive Charts)
+        // Luckily, the chartJS is not fully rendered, so changing the height here is relevant.
+        // It wouldn't be if we were after GraphRenderer@mounted.
+        graphController.el.querySelector(".o_graph_canvas_container canvas").height = "300";
+
        return graphController;
    },

@@ -1,12 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">

-<t t-name="stock.GraphRenderer" owl="1" t-inherit="web.Legacy.GraphRenderer" t-inherit-mode="primary">
-    <xpath expr="//canvas[@t-ref='canvas']" position="attributes">
-        <attribute name="height">300</attribute>
-    </xpath>
-</t>
-
 <button t-name="replenish_report_buttons"
    class="btn btn-primary o_report_replenish_buy"
    type="button" title="Replenish">
@@ -19,6 +19,7 @@ This module provides the core of the Odoo Web Client.
        'views/report_templates.xml',
        'views/base_document_layout_views.xml',
        'views/speedscope_template.xml',
+        'views/lazy_assets.xml',
        'data/report_layout.xml',
    ],
    'assets': {
@@ -183,6 +184,19 @@ This module provides the core of the Odoo Web Client.
            'web/static/src/legacy/js/env.js',
            'web/static/src/legacy/js/model.js',
            'web/static/src/legacy/js/owl_compatibility.js',
+            ("remove", 'web/static/src/legacy/js/views/graph/**/*'),
+            ("remove", 'web/static/src/legacy/scss/graph_view.scss'),
+            ("remove", 'web/static/src/legacy/js/views/pivot/**/*'),
+        ],
+        "web.assets_backend_legacy_lazy": [
+            ("include", "web._assets_helpers"),
+            ('include', 'web._assets_backend_helpers'),
+            'web/static/lib/bootstrap/scss/_variables.scss',
+            # graph
+            'web/static/src/legacy/js/views/graph/**/*',
+            'web/static/src/legacy/scss/graph_view.scss',
+            # pivot
+            'web/static/src/legacy/js/views/pivot/**/*',
        ],
        'web.assets_frontend_minimal': [
            'web/static/src/legacy/js/public/lazyloader.js',
@@ -471,6 +485,7 @@ This module provides the core of the Odoo Web Client.
            'web/static/lib/bootstrap/scss/_variables.scss',

            ('include', 'web.frontend_legacy'),
+            ("include", "web.assets_backend_legacy_lazy"),
        ],
        'web.qunit_suite_tests': [
            'base/static/tests/base_settings_tests.js',
@@ -13,6 +13,7 @@ var GraphModel = require('web.GraphModel');
 var Controller = require('web.GraphController');
 const GraphRenderer = require("web/static/src/js/views/graph/graph_renderer");
 const RendererWrapper = require("web.RendererWrapper");
+const viewRegistry = require("web.view_registry");

 var _t = core._t;
 var _lt = core._lt;
@@ -168,6 +169,7 @@ var GraphView = AbstractView.extend({
    },
 });

+viewRegistry.add("graph", GraphView);
 return GraphView;

 });
@@ -14,6 +14,7 @@
    import PivotRenderer from './pivot_renderer';
    import RendererWrapper from 'web.RendererWrapper';
    import { sortBy } from 'web.utils';
+    import viewRegistry from "web.view_registry";

    const _t = core._t;
    const _lt = core._lt;
@@ -159,5 +160,6 @@
            return new RendererWrapper(parent, this.config.Renderer, state);
        },
    });
+    viewRegistry.add("pivot", PivotView);

    export default PivotView;
@@ -26,10 +26,8 @@ odoo.define('web._view_registry', function (require) {
 */

 var FormView = require('web.FormView');
-var GraphView = require('web.GraphView');
 var KanbanView = require('web.KanbanView');
 var ListView = require('web.ListView');
-var PivotView = require('web.PivotView');
 var CalendarView = require('web.CalendarView');
 var view_registry = require('web.view_registry');

@@ -37,8 +35,5 @@ view_registry
    .add('form', FormView)
    .add('list', ListView)
    .add('kanban', KanbanView)
-    .add('graph', GraphView)
-    .add('pivot', PivotView)
    .add('calendar', CalendarView);
-
 });
@@ -10,6 +10,7 @@ var Domain = require('web.Domain');
 var viewRegistry = require('web.view_registry');
 var Widget = require('web.Widget');
 var widgetRegistry = require('web.widget_registry');
+const { loadLegacyViews } = require("@web/legacy/legacy_views");

 var qweb = core.qweb;

@@ -66,9 +67,11 @@ var PieChart = Widget.extend({
     *
     * @override
     */
-    willStart: function () {
+    willStart: async function () {
        var self = this;
-        var def1 = this._super.apply(this, arguments);
+        const _super = this._super.bind(this, ...arguments);
+        await loadLegacyViews({ rpc: this._rpc.bind(this) });
+        var def1 = _super();

        var SubView = viewRegistry.get('graph');
        var subView = new SubView(this.viewInfo, this.subViewParams);
@@ -14,6 +14,7 @@ import {
 } from "./backend_utils";
 import { setScrollPosition } from "../core/utils/scrolling";
 import { registry } from "@web/core/registry";
+import { loadPublicAsset } from "@web/core/assets";

 const viewRegistry = registry.category("views");

@@ -159,3 +160,15 @@ for (const [name, action] of Object.entries(legacyViewRegistry.entries())) {
    registerView(name, action);
 }
 legacyViewRegistry.onAdd(registerView);
+
+export async function loadLegacyViews({ orm, rpc }) {
+    if (!orm && rpc) {
+        orm = {
+            call: (...callArgs) => {
+                const [model, method, args = [], kwargs = {}] = callArgs;
+                return rpc({ model, method, args, kwargs });
+            },
+        };
+    }
+    await loadPublicAsset("web.assets_backend_legacy_lazy", orm);
+}
@@ -416,6 +416,9 @@ export class MockServer {
            return;
        }
        switch (args.method) {
+            case "render_public_asset": {
+                return true;
+            }
            case "create":
                return this.mockCreate(args.model, args.args[0]);
            case "fields_get":
@@ -1957,6 +1957,9 @@ var MockServer = Class.extend({
            return;
        }
        switch (args.method) {
+            case "render_public_asset": {
+                return true;
+            }
            case 'copy':
                return this._mockCopy(args.model, args.args[0]);

@@ -9807,7 +9807,7 @@ QUnit.module('Views', {
    });

    QUnit.test('reload a form view with a pie chart does not crash', async function (assert) {
-        assert.expect(2);
+        assert.expect(3);

        const form = await createView({
            View: FormView,
@@ -9816,6 +9816,13 @@ QUnit.module('Views', {
            arch: `<form>
                      <widget name="pie_chart" title="qux by product" attrs="{'measure': 'qux', 'groupby': 'product_id'}"/>
                  </form>`,
+            mockRPC(route, args) {
+                if (args.method === "render_public_asset") {
+                    assert.deepEqual(args.args, ["web.assets_backend_legacy_lazy"]);
+                    return Promise.resolve(true);
+                }
+                return this._super(...arguments);
+            }
        });

        assert.containsOnce(form, '.o_widget');
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+  <template id="assets_backend_legacy_lazy" name="Lazy assets for legacy Views" groups="base.group_user">
+    <t t-call-assets="web.assets_backend_legacy_lazy" />
+  </template>
+
+</odoo>