[IMP] web_refresher: Work as element of control panel

web_refresher/static/src/js/refresher.js

@@ -1,25 +1,117 @@
-// Initial pager is located in source/addons/web/static/src/js/chrome/pager.js
-
-odoo.define("refresher.pager", function(require) {
+/* Copyright 2022 Tecnativa - Alexandre D. Díaz
+ * License AGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
+odoo.define("refresher.Refresher", function(require) {
     "use strict";
 
-    var pager = require("web.Pager");
-    pager.include({
-        start: function() {
-            var self = this;
-            var res = self._super();
+    const Widget = require("web.Widget");
+    const AbstractController = require("web.AbstractController");
+    const BasicController = require("web.BasicController");
+    const ControlPanelRenderer = require("web.ControlPanelRenderer");
+    const FieldX2Many = require("web.relational_fields").FieldX2Many;
 
-            var $button = $("<span>", {
-                class: "fa fa-refresh btn btn-icon o_pager_refresh",
-                css: {"margin-right": "8px"},
-                "aria-label": "Refresh",
-            });
-            $button.on("click", function() {
-                self._changeSelection(0);
-            });
+    const Refresher = Widget.extend({
+        template: "web_refresher.Button",
+        events: {
+            "click .oe_pager_refresh": "_onClickRefresher",
+        },
 
-            self.$el.prepend($button);
-            return res;
+        _onClickRefresher: function() {
+            this.trigger("pager_refresh");
         },
     });
+
+    AbstractController.include({
+        /**
+         * Hook
+         *
+         * @param {jQuery} $node
+         * @returns {Promise}
+         */
+        // eslint-disable-next-line no-unused-vars
+        renderRefresher: function($node) {
+            return Promise.resolve();
+        },
+
+        /**
+         * Adds the 'refresher' to the control panel
+         *
+         * @override
+         */
+        _renderControlPanelElements: function() {
+            return this._super.apply(this, arguments).then(elements => {
+                elements.$refresher = $("<div>");
+                return this.renderRefresher(elements.$refresher).then(() => {
+                    elements.$refresher = elements.$refresher.contents();
+                    return elements;
+                });
+            });
+        },
+    });
+
+    BasicController.include({
+        /**
+         * @param {jQuery} $node
+         * @returns {Promise}
+         */
+        renderRefresher: function($node) {
+            this.refresher = new Refresher(this);
+            this.refresher.on("pager_refresh", this, () => {
+                if (this.pager) {
+                    this.pager.trigger("pager_changed", this._getPagerParams());
+                }
+            });
+            return this.refresher.appendTo($node);
+        },
+    });
+
+    FieldX2Many.include({
+        /**
+         * @override
+         */
+        _renderControlPanel: function() {
+            if (!this.view) {
+                return this._super.apply(this, arguments);
+            }
+            this.refresher = new Refresher(this);
+            this.refresher.on("pager_refresh", this, () => {
+                if (this.pager) {
+                    this.pager.trigger("pager_changed", {
+                        current_min: this.value.offset + 1,
+                        limit: this.value.limit,
+                        size: this.value.count,
+                    });
+                }
+            });
+            return this._super
+                .apply(this, arguments)
+                .then(() => {
+                    return this.refresher.appendTo($("<div>"));
+                })
+                .then(() => {
+                    this._controlPanel.updateContents(
+                        {
+                            cp_content: {
+                                $refresher: this.refresher.$el,
+                            },
+                        },
+                        {
+                            clear: false,
+                        }
+                    );
+                });
+        },
+    });
+
+    ControlPanelRenderer.include({
+        /**
+         * @override
+         */
+        start: function() {
+            return this._super.apply(this, arguments).then(() => {
+                this.nodes.$refresher = this.$(".oe_cp_refresher");
+            });
+        },
+    });
+
+    return Refresher;
 });

web_refresher/static/src/scss/refresher.scss

@@ -0,0 +1,7 @@
+.oe_cp_refresher {
+    margin: auto 0 auto auto;
+    padding-left: 5px;
+    text-align: right;
+    user-select: none;
+    flex-grow: 1;
+}

web_refresher/static/src/xml/refresher.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!-- Copyright 2022 Tecnativa - Alexandre Díaz
+     License AGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). -->
+<template>
+    <t t-name="web_refresher.Button">
+        <span aria-atomic="true">
+            <button
+                class="fa fa-refresh btn btn-icon oe_pager_refresh"
+                aria-label="Refresh"
+                title="Refresh"
+                tabindex="-1"
+            />
+        </span>
+    </t>
+
+    <t t-extend="ControlPanel">
+        <t t-jquery=".o_control_panel nav.o_cp_pager" t-operation="before">
+            <nav class="oe_cp_refresher" />
+        </t>
+    </t>
+
+    <t t-extend="X2ManyControlPanel">
+        <t t-jquery=".o_x2m_control_panel nav.o_cp_pager" t-operation="before">
+            <nav class="oe_cp_refresher" />
+        </t>
+    </t>
+</template>