[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.
OCA · Sep 20, 2024 · a215ade · a215ade
1 parent 800311a
commit a215ade
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 49 deletions.
diff --git a/web_notify/README.rst b/web_notify/README.rst
@@ -7,7 +7,7 @@ Web Notify
    !! This file is generated by oca-gen-addon-readme !!
    !! changes will be overwritten.                   !!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-   !! source digest: sha256:2ea37128bc36b2b82559d0718dff171b9d2e3dcde596a8c8750d6926821862fc
+   !! source digest: sha256:387191333e79a8835b7ba7ad61d692b8940bf5bef0ef2a0f9696248c74723ed4
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
 .. |badge1| image:: https://img.shields.io/badge/maturity-Production%2FStable-green.png
@@ -91,28 +91,28 @@ 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"
+    self.env.user.notify_info('My information message', action=action)
 
 
-.. figure:: https://raw.githubusercontent.com/OCA/web/15.0/web_notify/static/description/notifications_screenshot.gif
-   :scale: 80 %
+.. figure:: https://raw.githubusercontent.com/OCA/web/15.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/15.0/web_notify/static/description/test_notifications_demo.png
-   :scale: 80 %
+.. figure:: https://raw.githubusercontent.com/OCA/web/15.0/web_notify/static/img/test_notifications_demo.png
    :alt: Sample notifications
 
 Bug Tracker

diff --git a/web_notify/readme/USAGE.rst b/web_notify/readme/USAGE.rst
@@ -37,26 +37,26 @@ 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"
+    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
diff --git a/web_notify/static/description/index.html b/web_notify/static/description/index.html
@@ -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">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
@@ -8,10 +9,11 @@
 
 /*
 :Author: David Goodger ([email protected])
-: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 +276,7 @@
   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 +302,7 @@
 span.pre {
   white-space: pre }
 
-span.problematic {
+span.problematic, pre.problematic {
   color: red }
 
 span.section-subtitle {
@@ -366,7 +368,7 @@ <h1 class="title">Web Notify</h1>
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-!! source digest: sha256:2ea37128bc36b2b82559d0718dff171b9d2e3dcde596a8c8750d6926821862fc
+!! source digest: sha256:387191333e79a8835b7ba7ad61d692b8940bf5bef0ef2a0f9696248c74723ed4
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
 <p><a class="reference external image-reference" href="https://odoo-community.org/page/development-status"><img alt="Production/Stable" src="https://img.shields.io/badge/maturity-Production%2FStable-green.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/15.0/web_notify"><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-15-0/web-15-0-web_notify"><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&amp;target_branch=15.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
 <p>Send instant notification messages to the user in live.</p>
@@ -425,22 +427,25 @@ <h1><a class="toc-backref" href="#toc-entry-2">Usage</a></h1>
 <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="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/15.0/web_notify/static/description/notifications_screenshot.gif" />
+<img alt="Sample notifications" src="https://raw.githubusercontent.com/OCA/web/15.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/15.0/web_notify/static/description/test_notifications_demo.png" />
+<img alt="Sample notifications" src="https://raw.githubusercontent.com/OCA/web/15.0/web_notify/static/img/test_notifications_demo.png" />
 </div>
 </div>
 <div class="section" id="bug-tracker">
@@ -477,7 +482,9 @@ <h2><a class="toc-backref" href="#toc-entry-6">Contributors</a></h2>
 <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>

diff --git a/web_notify/static/description/notifications_screenshot.gif b/web_notify/static/description/notifications_screenshot.gif
diff --git a/web_notify/static/img/notifications_screenshot.gif b/web_notify/static/img/notifications_screenshot.gif
diff --git a/...c/description/test_notifications_demo.png → ...fy/static/img/test_notifications_demo.png b/...c/description/test_notifications_demo.png → ...fy/static/img/test_notifications_demo.png
diff --git a/web_notify/static/src/js/services/notification_services.esm.js b/web_notify/static/src/js/services/notification_services.esm.js
@@ -16,28 +16,34 @@ export const webNotificationService = {
                 browser.clearTimeout(notif)
             );
             webNotifTimeouts = {};
-            notifications.forEach(function (notif) {
-                browser.setTimeout(function () {
-                    let buttons = [];
-
-                    if (notif.action) {
-                        buttons = [
-                            {
-                                name: env._t("Open"),
-                                primary: true,
-                                onClick: async () => {
-                                    await action.doAction(notif.action);
-                                },
-                            },
-                        ];
-                    }
-                    notification.add(Markup(notif.message), {
+            notifications.forEach((notif) => {
+                browser.setTimeout(() => {
+                    const notificationRemove = notification.add(Markup(notif.message), {
                         title: notif.title,
                         type: notif.type,
                         sticky: notif.sticky,
                         className: notif.className,
                         messageIsHtml: notif.html,
-                        buttons: buttons,
+                        buttons:
+                            notif.action &&
+                            notif.action.context &&
+                            notif.action.context.params
+                                ? [
+                                      {
+                                          name:
+                                              notif.action.context.params.button_name ||
+                                              env._t("Open"),
+                                          primary: true,
+                                          onClick: async function () {
+                                              await action.doAction(notif.action);
+                                              notificationRemove();
+                                          },
+                                          icon:
+                                              notif.action.context.params.button_icon ||
+                                              undefined,
+                                      },
+                                  ]
+                                : [],
                     });
                 });
             });