Techsystech
/
web
mirror of https://github.com/OCA/web.git
3
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[IMP] web_notify: action button name and close 

- We can now set a button name to the notification action.
- We can set an icon button as well.
- After the button is clicked, the notification gets closed.
pull/2932/head
David 2024-04-01 17:22:25 +02:00
parent 949fc07164
commit 5dea7861c1
8 changed files with 57 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web_notify/README.rst
View File

@ -91,28 +91,29 @@ The notifications can bring interactivity with some buttons.
The reload button is activated when sending the notification with:
The action can be used using the ``action`` keyword:
The action can be used using the ``action`` keyword and we can choose which name to
give to our button with the ``button_name`` key in the action context `params` key:
.. code-block:: python
action = self.env["ir.actions.act_window"]._for_xml_id('sale.action_orders')
action.update({
'res_id': self.id,
'views': [(False, 'form')],
'res_id': self.id,
'views': [(False, 'form')],
})
self.env.user.notify_info('My information message', action=action)
action["context"].setdefault("params", {})
action["context"]["params"]["button_name"] = "Sales"
action["context"]["params"]["button_icon"] = "fa-eye"
self.env.user.notify_info('My information message', action=action)
.. figure:: https://raw.githubusercontent.com/OCA/web/16.0/web_notify/static/description/notifications_screenshot.gif
:scale: 80 %
.. figure:: https://raw.githubusercontent.com/OCA/web/16.0/web_notify/static/img/notifications_screenshot.gif
:alt: Sample notifications
You can test the behaviour of the notifications by installing this module in a demo database.
Access the users form through Settings -> Users & Companies. You'll see a tab called "Test web notify", here you'll find two buttons that'll allow you test the module.
.. figure:: https://raw.githubusercontent.com/OCA/web/16.0/web_notify/static/description/test_notifications_demo.png
:scale: 80 %
.. figure:: https://raw.githubusercontent.com/OCA/web/16.0/web_notify/static/img/test_notifications_demo.png
:alt: Sample notifications
Bug Tracker

2
web_notify/models/res_users.py
View File

@ -3,7 +3,7 @@
from odoo import _, api, exceptions, fields, models
from odoo.addons.bus.models.bus import channel_with_db, json_dump
from odoo.addons.web.controllers.main import clean_action
from odoo.addons.web.controllers.utils import clean_action
DEFAULT_MESSAGE = "Default message"

19
web_notify/readme/USAGE.rst
View File

@ -37,26 +37,27 @@ The notifications can bring interactivity with some buttons.
The reload button is activated when sending the notification with:
The action can be used using the ``action`` keyword:
The action can be used using the ``action`` keyword and we can choose which name to
give to our button with the ``button_name`` key in the action context `params` key:
.. code-block:: python
action = self.env["ir.actions.act_window"]._for_xml_id('sale.action_orders')
action.update({
'res_id': self.id,
'views': [(False, 'form')],
'res_id': self.id,
'views': [(False, 'form')],
})
self.env.user.notify_info('My information message', action=action)
action["context"].setdefault("params", {})
action["context"]["params"]["button_name"] = "Sales"
action["context"]["params"]["button_icon"] = "fa-eye"
self.env.user.notify_info('My information message', action=action)
.. figure:: static/description/notifications_screenshot.gif
:scale: 80 %
.. figure:: ../static/img/notifications_screenshot.gif
:alt: Sample notifications
You can test the behaviour of the notifications by installing this module in a demo database.
Access the users form through Settings -> Users & Companies. You'll see a tab called "Test web notify", here you'll find two buttons that'll allow you test the module.
.. figure:: static/description/test_notifications_demo.png
:scale: 80 %
.. figure:: ../static/img/test_notifications_demo.png
:alt: Sample notifications

31
web_notify/static/description/index.html
View File

@ -8,10 +8,11 @@
/*
:Author: David Goodger (goodger@python.org)
:Id: $Id: html4css1.css 8954 2022-01-20 10:10:25Z milde $
:Id: $Id: html4css1.css 9511 2024-01-13 09:50:07Z milde $
:Copyright: This stylesheet has been placed in the public domain.
Default cascading style sheet for the HTML output of Docutils.
Despite the name, some widely supported CSS2 features are used.
See https://docutils.sourceforge.io/docs/howto/html-stylesheets.html for how to
customize this style sheet.
@ -274,7 +275,7 @@ pre.literal-block, pre.doctest-block, pre.math, pre.code {
margin-left: 2em ;
margin-right: 2em }
pre.code .ln { color: grey; } /* line numbers */
pre.code .ln { color: gray; } /* line numbers */
pre.code, code { background-color: #eeeeee }
pre.code .comment, code .comment { color: #5C6576 }
pre.code .keyword, code .keyword { color: #3B0D06; font-weight: bold }
@ -300,7 +301,7 @@ span.option {
span.pre {
white-space: pre }
span.problematic {
span.problematic, pre.problematic {
color: red }
span.section-subtitle {
@ -425,22 +426,26 @@ Two kinds of notification are supported.</p>
<li>Another allowing to send a window / client action</li>
</ul>
<p>The reload button is activated when sending the notification with:</p>
<p>The action can be used using the <tt class="docutils literal">action</tt> keyword:</p>
<p>The action can be used using the <tt class="docutils literal">action</tt> keyword and we can choose which name to
give to our button with the <tt class="docutils literal">button_name</tt> key in the action context <cite>params</cite> key:</p>
<pre class="code python literal-block">
<span class="n">action</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">env</span><span class="p">[</span><span class="s2">&quot;ir.actions.act_window&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">_for_xml_id</span><span class="p">(</span><span class="s1">'sale.action_orders'</span><span class="p">)</span><span class="w">
</span> <span class="n">action</span><span class="o">.</span><span class="n">update</span><span class="p">({</span><span class="w">
</span> <span class="s1">'res_id'</span><span class="p">:</span> <span class="bp">self</span><span class="o">.</span><span class="n">id</span><span class="p">,</span><span class="w">
</span> <span class="s1">'views'</span><span class="p">:</span> <span class="p">[(</span><span class="kc">False</span><span class="p">,</span> <span class="s1">'form'</span><span class="p">)],</span><span class="w">
</span> <span class="p">})</span><span class="w">
<span class="n">action</span> <span class="o">=</span> <span class="bp">self</span><span class="o">.</span><span class="n">env</span><span class="p">[</span><span class="s2">&quot;ir.actions.act_window&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">_for_xml_id</span><span class="p">(</span><span class="s1">'sale.action_orders'</span><span class="p">)</span><span class="w">
</span><span class="n">action</span><span class="o">.</span><span class="n">update</span><span class="p">({</span><span class="w">
</span> <span class="s1">'res_id'</span><span class="p">:</span> <span class="bp">self</span><span class="o">.</span><span class="n">id</span><span class="p">,</span><span class="w">
</span> <span class="s1">'views'</span><span class="p">:</span> <span class="p">[(</span><span class="kc">False</span><span class="p">,</span> <span class="s1">'form'</span><span class="p">)],</span><span class="w">
</span><span class="p">})</span><span class="w">
</span><span class="n">action</span><span class="p">[</span><span class="s2">&quot;context&quot;</span><span class="p">]</span><span class="o">.</span><span class="n">setdefault</span><span class="p">(</span><span class="s2">&quot;params&quot;</span><span class="p">,</span> <span class="p">{})</span><span class="w">
</span><span class="n">action</span><span class="p">[</span><span class="s2">&quot;context&quot;</span><span class="p">][</span><span class="s2">&quot;params&quot;</span><span class="p">][</span><span class="s2">&quot;button_name&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="s2">&quot;Sales&quot;</span><span class="w">
</span><span class="n">action</span><span class="p">[</span><span class="s2">&quot;context&quot;</span><span class="p">][</span><span class="s2">&quot;params&quot;</span><span class="p">][</span><span class="s2">&quot;button_icon&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="s2">&quot;fa-eye&quot;</span><span class="w">
</span><span class="bp">self</span><span class="o">.</span><span class="n">env</span><span class="o">.</span><span class="n">user</span><span class="o">.</span><span class="n">notify_info</span><span class="p">(</span><span class="s1">'My information message'</span><span class="p">,</span> <span class="n">action</span><span class="o">=</span><span class="n">action</span><span class="p">)</span>
</pre>
<div class="figure">
<img alt="Sample notifications" src="https://raw.githubusercontent.com/OCA/web/16.0/web_notify/static/description/notifications_screenshot.gif" />
<img alt="Sample notifications" src="https://raw.githubusercontent.com/OCA/web/16.0/web_notify/static/img/notifications_screenshot.gif" />
</div>
<p>You can test the behaviour of the notifications by installing this module in a demo database.
Access the users form through Settings -&gt; Users &amp; Companies. You’ll see a tab called “Test web notify”, here you’ll find two buttons that’ll allow you test the module.</p>
<div class="figure">
<img alt="Sample notifications" src="https://raw.githubusercontent.com/OCA/web/16.0/web_notify/static/description/test_notifications_demo.png" />
<img alt="Sample notifications" src="https://raw.githubusercontent.com/OCA/web/16.0/web_notify/static/img/test_notifications_demo.png" />
</div>
</div>
<div class="section" id="bug-tracker">
@ -477,7 +482,9 @@ If you spotted it first, help us to smash it by providing a detailed and welcome
<div class="section" id="maintainers">
<h2><a class="toc-backref" href="#toc-entry-7">Maintainers</a></h2>
<p>This module is maintained by the OCA.</p>
<a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
<a class="reference external image-reference" href="https://odoo-community.org">
<img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" />
</a>
<p>OCA, or the Odoo Community Association, is a nonprofit organization whose
mission is to support the collaborative development of Odoo features and
promote its widespread use.</p>

BIN
web_notify/static/description/notifications_screenshot.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 211 KiB

BIN
web_notify/static/img/notifications_screenshot.gif 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

0
web_notify/static/description/test_notifications_demo.png → web_notify/static/img/test_notifications_demo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 55 KiB

24
web_notify/static/src/js/services/notification_services.esm.js
View File

@ -10,33 +10,43 @@ export const webNotificationService = {
let webNotifTimeouts = {};
/**
* Displays the web notification on user's screen
* @param {*} notifications
*/
function displaywebNotification(notifications) {
Object.values(webNotifTimeouts).forEach((notif) =>
browser.clearTimeout(notif)
);
webNotifTimeouts = {};
notifications.forEach(function (notif) {
browser.setTimeout(function () {
let buttons = [];
notifications.forEach((notif) => {
browser.setTimeout(() => {
var buttons = [];
if (notif.action) {
const params =
(notif.action.context && notif.action.context.params) || {};
buttons = [
{
name: env._t("Open"),
name: params.button_name || env._t("Open"),
primary: true,
onClick: async () => {
await action.doAction(notif.action);
},
...(params.button_icon && {icon: params.button_icon}),
},
];
}
notification.add(Markup(notif.message), {
const notificationRemove = notification.add(Markup(notif.message), {
title: notif.title,
type: notif.type,
sticky: notif.sticky,
className: notif.className,
buttons: buttons,
buttons: buttons.map((button) => {
const onClick = button.onClick;
button.onClick = async () => {
await onClick();
notificationRemove();
};
return button;
}),
});
});
});