[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 · 1fe3edc · 1fe3edc
1 parent 949fc07
commit 1fe3edc
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 38 deletions.
diff --git a/web_notify/README.rst b/web_notify/README.rst
@@ -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

diff --git a/web_notify/models/res_users.py b/web_notify/models/res_users.py
@@ -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"
 

diff --git a/web_notify/readme/USAGE.rst b/web_notify/readme/USAGE.rst
@@ -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
diff --git a/web_notify/static/description/index.html b/web_notify/static/description/index.html
@@ -8,10 +8,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 +275,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 +301,7 @@
 span.pre {
   white-space: pre }
 
-span.problematic {
+span.problematic, pre.problematic {
   color: red }
 
 span.section-subtitle {
@@ -425,22 +426,26 @@ <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="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 @@ <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
@@ -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;
+                        }),
                     });
                 });
             });