[IMP] web_refresher: Work as element of control panel

web_refresher/README.rst

@@ -59,6 +59,7 @@ Contributors
 * `Tecnativa <https://www.tecnativa.com>`__:
 
   * João Marques
+  * Alexandre D. Díaz
 
 Maintainers
 ~~~~~~~~~~~

web_refresher/__manifest__.py

@@ -5,6 +5,7 @@
     "license": "AGPL-3",
     "website": "https://github.com/OCA/web",
     "data": ["templates/assets.xml"],
+    "qweb": ["static/src/xml/refresher.xml"],
     "depends": ["web"],
     "installable": True,
     "auto_install": False,

web_refresher/readme/CONTRIBUTORS.rst

@@ -2,3 +2,4 @@
 * `Tecnativa <https://www.tecnativa.com>`__:
 
   * João Marques
+  * Alexandre D. Díaz

web_refresher/static/description/index.html

@@ -404,6 +404,7 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 <li>Samuel Fringeli</li>
 <li><a class="reference external" href="https://www.tecnativa.com">Tecnativa</a>:<ul>
 <li>João Marques</li>
+<li>Alexandre D. Díaz</li>
 </ul>
 </li>
 </ul>

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
+/* Copyright 2022 Tecnativa - Alexandre D. Díaz
-
+ * License AGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
-odoo.define("refresher.pager", function(require) {
+odoo.define("refresher.Refresher", function(require) {
     "use strict";
 
-    var pager = require("web.Pager");
+    const Widget = require("web.Widget");
-    pager.include({
+    const AbstractController = require("web.AbstractController");
-        start: function() {
+    const BasicController = require("web.BasicController");
-            var self = this;
+    const ControlPanelRenderer = require("web.ControlPanelRenderer");
-            var res = self._super();
+    const FieldX2Many = require("web.relational_fields").FieldX2Many;
 
-            var $button = $("<span>", {
+    const Refresher = Widget.extend({
-                class: "fa fa-refresh btn btn-icon o_pager_refresh",
+        template: "web_refresher.Button",
-                css: {"margin-right": "8px"},
+        events: {
-                "aria-label": "Refresh",
+            "click .oe_pager_refresh": "_onClickRefresher",
-            });
+        },
-            $button.on("click", function() {
-                self._changeSelection(0);
-            });
 
-            self.$el.prepend($button);
+        _onClickRefresher: function() {
-            return res;
+            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>

web_refresher/templates/assets.xml

@@ -1,7 +1,12 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <odoo>
     <template id="page_refresher" name="Refresh button" inherit_id="web.assets_backend">
-        <xpath expr="//script[last()]" position="after">
+        <xpath expr=".">
+            <link
+                type="text/css"
+                rel="stylesheet"
+                href="/web_refresher/static/src/scss/refresher.scss"
+            />
             <script
                 src="/web_refresher/static/src/js/refresher.js"
                 type="text/javascript"