mirror of https://github.com/OCA/web.git
[IMP] web_refresher: Backport refresh way from v17
parent
baf589950a
commit
8ffee9f78e
|
@ -7,7 +7,7 @@ Web Refresher
|
||||||
!! This file is generated by oca-gen-addon-readme !!
|
!! This file is generated by oca-gen-addon-readme !!
|
||||||
!! changes will be overwritten. !!
|
!! changes will be overwritten. !!
|
||||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
!! source digest: sha256:4ef545bbf655053c91d43dc4f35993c3a7e5cbe1c0989e5ca8a6d25bab77851b
|
!! source digest: sha256:72dfc3fadb6b640422ed2786d2036e3c550c09a4a55fed57e92c3caeb4b1b176
|
||||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
|
|
||||||
.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
|
.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
|
||||||
|
|
|
@ -9,13 +9,9 @@
|
||||||
"auto_install": False,
|
"auto_install": False,
|
||||||
"assets": {
|
"assets": {
|
||||||
"web.assets_backend": [
|
"web.assets_backend": [
|
||||||
"web_refresher/static/src/scss/refresher.scss",
|
"web_refresher/static/src/**/*.scss",
|
||||||
"web_refresher/static/src/js/refresher.esm.js",
|
"web_refresher/static/src/**/*.esm.js",
|
||||||
"web_refresher/static/src/js/control_panel.esm.js",
|
"web_refresher/static/src/**/*.xml",
|
||||||
"web_refresher/static/src/js/pager.esm.js",
|
|
||||||
"web_refresher/static/src/xml/refresher.xml",
|
|
||||||
"web_refresher/static/src/xml/control_panel.xml",
|
|
||||||
"web_refresher/static/src/xml/pager.xml",
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,4 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
@ -366,7 +367,7 @@ ul.auto-toc {
|
||||||
!! This file is generated by oca-gen-addon-readme !!
|
!! This file is generated by oca-gen-addon-readme !!
|
||||||
!! changes will be overwritten. !!
|
!! changes will be overwritten. !!
|
||||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
|
||||||
!! source digest: sha256:4ef545bbf655053c91d43dc4f35993c3a7e5cbe1c0989e5ca8a6d25bab77851b
|
!! source digest: sha256:72dfc3fadb6b640422ed2786d2036e3c550c09a4a55fed57e92c3caeb4b1b176
|
||||||
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
|
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
|
||||||
<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/web/tree/16.0/web_refresher"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-16-0/web-16-0-web_refresher"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=16.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
|
<p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external image-reference" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external image-reference" href="https://github.com/OCA/web/tree/16.0/web_refresher"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-16-0/web-16-0-web_refresher"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=16.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
|
||||||
<p>Adds a button next to the pager (in trees/kanban views) to refresh the displayed list.</p>
|
<p>Adds a button next to the pager (in trees/kanban views) to refresh the displayed list.</p>
|
||||||
|
|
|
@ -1,9 +1,27 @@
|
||||||
/** @odoo-module **/
|
/** @odoo-module **/
|
||||||
/* Copyright 2024 Tecnativa - Carlos Roca
|
/* Copyright 2022 Tecnativa - Alexandre D. Díaz
|
||||||
|
* Copyright 2022 Tecnativa - Carlos Roca
|
||||||
|
* Copyright 2023 Taras Shabaranskyi
|
||||||
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
|
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
|
||||||
|
|
||||||
import {ControlPanel} from "@web/search/control_panel/control_panel";
|
import {ControlPanel} from "@web/search/control_panel/control_panel";
|
||||||
import {Refresher} from "./refresher.esm";
|
import {Refresher} from "./refresher.esm";
|
||||||
|
import {patch} from "@web/core/utils/patch";
|
||||||
|
|
||||||
ControlPanel.components = Object.assign({}, ControlPanel.components, {
|
ControlPanel.components = Object.assign({}, ControlPanel.components, {
|
||||||
Refresher,
|
Refresher,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
patch(ControlPanel.prototype, "web_refresher.ControlPanel", {
|
||||||
|
setup() {
|
||||||
|
this._super(...arguments);
|
||||||
|
const {config, searchModel} = this.env;
|
||||||
|
const forbiddenSubType = ["base_settings"];
|
||||||
|
if (!forbiddenSubType.includes(config.viewSubType)) {
|
||||||
|
this.refresherProps = {
|
||||||
|
searchModel: searchModel,
|
||||||
|
pagerProps: this.pagerProps,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
|
@ -1,9 +0,0 @@
|
||||||
/** @odoo-module **/
|
|
||||||
/* Copyright 2022 Tecnativa - Carlos Roca
|
|
||||||
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
|
|
||||||
import {Pager} from "@web/core/pager/pager";
|
|
||||||
import {Refresher} from "./refresher.esm";
|
|
||||||
|
|
||||||
Pager.components = Object.assign({}, Pager.components, {
|
|
||||||
Refresher,
|
|
||||||
});
|
|
|
@ -1,36 +1,109 @@
|
||||||
/** @odoo-module **/
|
/** @odoo-module **/
|
||||||
/* Copyright 2022 Tecnativa - Alexandre D. Díaz
|
/* Copyright 2022 Tecnativa - Alexandre D. Díaz
|
||||||
* Copyright 2022 Tecnativa - Carlos Roca
|
* Copyright 2022 Tecnativa - Carlos Roca
|
||||||
|
* Copyright 2023 Taras Shabaranskyi
|
||||||
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
|
* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). */
|
||||||
|
|
||||||
const {Component} = owl;
|
import {Component} from "@odoo/owl";
|
||||||
import {useService} from "@web/core/utils/hooks";
|
import {useDebounced} from "@web/core/utils/timing";
|
||||||
|
|
||||||
|
export function useRefreshAnimation(timeout) {
|
||||||
|
const refreshClass = "o_content__refresh";
|
||||||
|
let timeoutId = null;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @returns {DOMTokenList|null}
|
||||||
|
*/
|
||||||
|
function contentClassList() {
|
||||||
|
const content = document.querySelector(".o_content");
|
||||||
|
return content ? content.classList : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function clearAnimationTimeout() {
|
||||||
|
if (timeoutId) {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
}
|
||||||
|
timeoutId = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
clearAnimationTimeout();
|
||||||
|
contentClassList().add(refreshClass);
|
||||||
|
timeoutId = setTimeout(() => {
|
||||||
|
contentClassList().remove(refreshClass);
|
||||||
|
clearAnimationTimeout();
|
||||||
|
}, timeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
return animate;
|
||||||
|
}
|
||||||
|
|
||||||
export class Refresher extends Component {
|
export class Refresher extends Component {
|
||||||
setup() {
|
setup() {
|
||||||
super.setup();
|
super.setup();
|
||||||
this.action = useService("action");
|
this.refreshAnimation = useRefreshAnimation(1000);
|
||||||
|
this.onClickRefresh = useDebounced(this.onClickRefresh, 200);
|
||||||
}
|
}
|
||||||
async _doRefresh() {
|
|
||||||
const viewAction = this.action.currentController.action;
|
/**
|
||||||
// Allow refresh reports
|
* @returns {Boolean}
|
||||||
if (["ir.actions.report", "ir.actions.client"].includes(viewAction.type)) {
|
*/
|
||||||
const options = {};
|
get displayButton() {
|
||||||
if (this.env.config.breadcrumbs.length > 1) {
|
const {searchModel, pagerProps} = this.props;
|
||||||
const breadcrumb = this.env.config.breadcrumbs.slice(-1);
|
const hasSearchModel = searchModel && searchModel.search;
|
||||||
await this.action.restore(breadcrumb.jsId);
|
return Boolean(hasSearchModel || (pagerProps && pagerProps.onUpdate));
|
||||||
} else {
|
|
||||||
options.clearBreadcrumbs = true;
|
|
||||||
}
|
}
|
||||||
return this.action.doAction(viewAction, options);
|
|
||||||
|
/**
|
||||||
|
* @returns {Boolean}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
_searchModelRefresh() {
|
||||||
|
const {searchModel} = this.props;
|
||||||
|
if (searchModel && typeof searchModel.search === "function") {
|
||||||
|
searchModel.search();
|
||||||
|
return true;
|
||||||
}
|
}
|
||||||
// Note: here we use the pager props, see xml
|
return false;
|
||||||
const {limit, offset} = this.props;
|
}
|
||||||
if (!limit && !offset) {
|
|
||||||
return;
|
/**
|
||||||
|
* @returns {Promise<Boolean>}
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
async _pagerRefresh() {
|
||||||
|
const pagerProps = this.props.pagerProps;
|
||||||
|
if (pagerProps && typeof pagerProps.onUpdate === "function") {
|
||||||
|
const {limit, offset} = pagerProps;
|
||||||
|
await pagerProps.onUpdate({offset, limit});
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @returns {Promise<Boolean>}
|
||||||
|
*/
|
||||||
|
async refresh() {
|
||||||
|
let updated = this._searchModelRefresh();
|
||||||
|
if (!updated) {
|
||||||
|
updated = await this._pagerRefresh();
|
||||||
|
}
|
||||||
|
return updated;
|
||||||
|
}
|
||||||
|
|
||||||
|
async onClickRefresh() {
|
||||||
|
const updated = await this.refresh();
|
||||||
|
if (updated) {
|
||||||
|
this.refreshAnimation();
|
||||||
}
|
}
|
||||||
return this.props.onUpdate({offset, limit});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Refresher.template = "web_refresher.Button";
|
Object.assign(Refresher, {
|
||||||
|
template: "web_refresher.Button",
|
||||||
|
props: {
|
||||||
|
searchModel: {type: Object, optional: true},
|
||||||
|
pagerProps: {type: Object, optional: true},
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
|
@ -1,11 +1,23 @@
|
||||||
.oe_cp_refresher {
|
.oe_cp_refresher {
|
||||||
margin: auto 0 auto auto;
|
margin: auto 0 auto 0;
|
||||||
padding-left: 5px;
|
|
||||||
text-align: right;
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
flex-grow: 1;
|
|
||||||
}
|
}
|
||||||
.o_cp_bottom_right.oe_cp_refresher {
|
|
||||||
display: flex;
|
.o_content {
|
||||||
flex-direction: row-reverse;
|
&__refresh {
|
||||||
|
animation: web_refresh 0.6s ease;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes web_refresh {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: translateY(10px);
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,14 +8,9 @@
|
||||||
t-inherit-mode="extension"
|
t-inherit-mode="extension"
|
||||||
owl="1"
|
owl="1"
|
||||||
>
|
>
|
||||||
<xpath expr="//div[hasclass('o_cp_bottom_right')]" position="after">
|
<xpath expr="//div[hasclass('o_cp_pager')]" position="before">
|
||||||
<div
|
<div class="oe_cp_refresher" role="search" t-ref="refresher">
|
||||||
t-if="!display['bottom-right']"
|
<Refresher t-props="refresherProps" />
|
||||||
class="o_cp_bottom_right oe_cp_refresher"
|
|
||||||
role="search"
|
|
||||||
t-ref="refresher"
|
|
||||||
>
|
|
||||||
<Refresher />
|
|
||||||
</div>
|
</div>
|
||||||
</xpath>
|
</xpath>
|
||||||
</t>
|
</t>
|
||||||
|
@ -25,14 +20,21 @@
|
||||||
t-inherit-mode="extension"
|
t-inherit-mode="extension"
|
||||||
owl="1"
|
owl="1"
|
||||||
>
|
>
|
||||||
<xpath expr="//div[hasclass('o_cp_pager')]" position="after">
|
<xpath expr="//div[hasclass('o_cp_pager')]" position="before">
|
||||||
<div
|
<div class="oe_cp_refresher" role="search" t-ref="refresher">
|
||||||
t-if="!display['bottom-right']"
|
<Refresher t-props="refresherProps" />
|
||||||
class="o_cp_bottom_right oe_cp_refresher"
|
</div>
|
||||||
role="search"
|
</xpath>
|
||||||
t-ref="refresher"
|
</t>
|
||||||
|
<t
|
||||||
|
t-name="web_refresher.FormControlPanel"
|
||||||
|
t-inherit="web.FormControlPanel"
|
||||||
|
t-inherit-mode="extension"
|
||||||
|
owl="1"
|
||||||
>
|
>
|
||||||
<Refresher />
|
<xpath expr="//div[hasclass('o_cp_pager')]" position="before">
|
||||||
|
<div class="oe_cp_refresher" role="search" t-ref="refresher">
|
||||||
|
<Refresher t-props="refresherProps" />
|
||||||
</div>
|
</div>
|
||||||
</xpath>
|
</xpath>
|
||||||
</t>
|
</t>
|
||||||
|
|
|
@ -1,17 +0,0 @@
|
||||||
<?xml version="1.0" encoding="UTF-8" ?>
|
|
||||||
<!-- Copyright 2022 Tecnativa - Carlos Roca
|
|
||||||
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). -->
|
|
||||||
<template>
|
|
||||||
<t
|
|
||||||
t-name="web_refresher.Pager"
|
|
||||||
t-inherit="web.Pager"
|
|
||||||
t-inherit-mode="extension"
|
|
||||||
owl="1"
|
|
||||||
>
|
|
||||||
<xpath expr="//span[hasclass('o_pager_counter')]" position="before">
|
|
||||||
<div class="oe_cp_refresher" role="search" t-ref="refresher">
|
|
||||||
<Refresher t-props="props" />
|
|
||||||
</div>
|
|
||||||
</xpath>
|
|
||||||
</t>
|
|
||||||
</template>
|
|
|
@ -3,16 +3,19 @@
|
||||||
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). -->
|
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl). -->
|
||||||
<template>
|
<template>
|
||||||
<t t-name="web_refresher.Button" owl="1">
|
<t t-name="web_refresher.Button" owl="1">
|
||||||
<nav class="oe_refresher" aria-label="Pager">
|
<nav
|
||||||
<span aria-atomic="true">
|
class="oe_refresher"
|
||||||
|
aria-label="Refresher"
|
||||||
|
aria-atomic="true"
|
||||||
|
t-if="displayButton"
|
||||||
|
>
|
||||||
<button
|
<button
|
||||||
class="fa fa-refresh btn btn-icon oe_pager_refresh"
|
class="fa fa-refresh btn btn-icon oe_pager_refresh"
|
||||||
aria-label="Refresh"
|
aria-label="Refresh"
|
||||||
t-on-click="_doRefresh"
|
t-on-click="onClickRefresh"
|
||||||
title="Refresh"
|
title="Refresh"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
/>
|
/>
|
||||||
</span>
|
|
||||||
</nav>
|
</nav>
|
||||||
</t>
|
</t>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue