From 4abd48d24fcd8bbf575812f7e8e1744b0badb61e Mon Sep 17 00:00:00 2001
From: David <david.vidal@tecnativa.com>
Date: Fri, 24 May 2024 10:42:25 +0200
Subject: [PATCH 1/2] [IMP] web_filter_header_button: show groupBy filters

Now we can configure group filters to show up along the other filters so
users can easily access those as well.

TT49232
---
 .../demo/ir_module_module_view.xml                   |  5 +++++
 .../control_panel_model_extension.esm.js             | 12 ++++++++++++
 .../static/src/filter_button/filter_button.esm.js    |  3 +++
 3 files changed, 20 insertions(+)

diff --git a/web_filter_header_button/demo/ir_module_module_view.xml b/web_filter_header_button/demo/ir_module_module_view.xml
index 77773bbe8..1742e196d 100644
--- a/web_filter_header_button/demo/ir_module_module_view.xml
+++ b/web_filter_header_button/demo/ir_module_module_view.xml
@@ -14,6 +14,11 @@
                     name="context"
                 >{'shown_in_panel': {'icon': 'fa-toggle-off', 'hotkey': 'u'}}</attribute>
             </filter>
+            <filter name="state" position="attributes">
+                <attribute
+                    name="context"
+                >{'group_by':'state', 'shown_in_panel': {'icon': 'fa-th-list', 'hotkey': 's'}}</attribute>
+            </filter>
         </field>
     </record>
 </odoo>
diff --git a/web_filter_header_button/static/src/control_panel/control_panel_model_extension.esm.js b/web_filter_header_button/static/src/control_panel/control_panel_model_extension.esm.js
index 57716199d..c08124e43 100644
--- a/web_filter_header_button/static/src/control_panel/control_panel_model_extension.esm.js
+++ b/web_filter_header_button/static/src/control_panel/control_panel_model_extension.esm.js
@@ -32,5 +32,17 @@ patch(
             }
             return preFilter;
         },
+        /**
+         * Allow groupBy filters to show up as buttons
+         * @override
+         * @param {Object} filter
+         * @param {Object} attrs
+         */
+        _extractAttributes(filter, attrs) {
+            this._super(...arguments);
+            if (filter.type === "groupBy" && attrs.context.shown_in_panel) {
+                filter.context = attrs.context;
+            }
+        },
     }
 );
diff --git a/web_filter_header_button/static/src/filter_button/filter_button.esm.js b/web_filter_header_button/static/src/filter_button/filter_button.esm.js
index a7499b571..b0881432f 100644
--- a/web_filter_header_button/static/src/filter_button/filter_button.esm.js
+++ b/web_filter_header_button/static/src/filter_button/filter_button.esm.js
@@ -30,6 +30,9 @@ export class FilterButton extends Component {
             favorite: {
                 color: "warning",
             },
+            groupBy: {
+                color: "info",
+            },
         };
         return mapping[filter.type];
     }

From 839cf7ecff7010e0a69cf29d7a98beb4901a9126 Mon Sep 17 00:00:00 2001
From: David <david.vidal@tecnativa.com>
Date: Thu, 30 May 2024 17:54:01 +0200
Subject: [PATCH 2/2] [IMP] web_filter_header_button: put buttons in their own
 row

When there are too many buttons, they won't fit in the window and they
will overlap with other ui elemnets. We can prevent it putting them in
their own row.

TT49431
---
 web_filter_header_button/README.rst           |  6 +-
 web_filter_header_button/readme/ROADMAP.md    |  3 +
 .../static/description/index.html             |  6 +-
 .../src/control_panel/control_panel.xml       |  2 +-
 .../src/filter_button/filter_button.xml       | 56 ++++++++++---------
 5 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/web_filter_header_button/README.rst b/web_filter_header_button/README.rst
index 80879470a..da297cb29 100644
--- a/web_filter_header_button/README.rst
+++ b/web_filter_header_button/README.rst
@@ -7,7 +7,7 @@ Filter Button
    !! This file is generated by oca-gen-addon-readme !!
    !! changes will be overwritten.                   !!
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-   !! source digest: sha256:9da8b47931a94c1b0a4f43e7a450e88a87095f7d1d6aa5fdf36fc59efbb75fe4
+   !! source digest: sha256:e9f3e0db2c52f42eb3e177ee261caec02d793b0102a7d5159c4c163381fd13b4
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 
 .. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png
@@ -95,6 +95,10 @@ Known issues / Roadmap
    limiting in some cases. Keep it in mind or use
    ``base_view_inheritance_extension`` if you want to use proper context
    inheritance.
+-  Another nice to have would be to be able to hide the filters in the
+   filter list to be able to show them just in the header, although
+   there's not a straigh forward way to do it and it could lead to side
+   effects.
 
 Bug Tracker
 ===========
diff --git a/web_filter_header_button/readme/ROADMAP.md b/web_filter_header_button/readme/ROADMAP.md
index 804bf5e48..b91b7003b 100644
--- a/web_filter_header_button/readme/ROADMAP.md
+++ b/web_filter_header_button/readme/ROADMAP.md
@@ -1,2 +1,5 @@
 - Group filters by kind
 - As we use the `context` attribute, the inheritance could be limiting in some cases. Keep it in mind or use `base_view_inheritance_extension` if you want to use proper context inheritance.
+- Another nice to have would be to be able to hide the filters in the filter list to be
+  able to show them just in the header, although there's not a straigh forward way to
+  do it and it could lead to side effects.
diff --git a/web_filter_header_button/static/description/index.html b/web_filter_header_button/static/description/index.html
index f80e0c98e..5c83a13af 100644
--- a/web_filter_header_button/static/description/index.html
+++ b/web_filter_header_button/static/description/index.html
@@ -367,7 +367,7 @@ ul.auto-toc {
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-!! source digest: sha256:9da8b47931a94c1b0a4f43e7a450e88a87095f7d1d6aa5fdf36fc59efbb75fe4
+!! source digest: sha256:e9f3e0db2c52f42eb3e177ee261caec02d793b0102a7d5159c4c163381fd13b4
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
 <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/15.0/web_filter_header_button"><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_filter_header_button"><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>This module allows to add some selected filters as buttons in the header
@@ -436,6 +436,10 @@ following the <em>Configure</em> section.</p>
 limiting in some cases. Keep it in mind or use
 <tt class="docutils literal">base_view_inheritance_extension</tt> if you want to use proper context
 inheritance.</li>
+<li>Another nice to have would be to be able to hide the filters in the
+filter list to be able to show them just in the header, although
+there’s not a straigh forward way to do it and it could lead to side
+effects.</li>
 </ul>
 </div>
 <div class="section" id="bug-tracker">
diff --git a/web_filter_header_button/static/src/control_panel/control_panel.xml b/web_filter_header_button/static/src/control_panel/control_panel.xml
index 7a11ebf55..93ce85281 100644
--- a/web_filter_header_button/static/src/control_panel/control_panel.xml
+++ b/web_filter_header_button/static/src/control_panel/control_panel.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates>
     <t t-inherit="web.Legacy.ControlPanel" t-inherit-mode="extension" owl="1">
-        <xpath expr="//div[hasclass('o_cp_buttons')]" position="after">
+        <xpath expr="//div[hasclass('o_cp_bottom')]" position="after">
             <t t-if="env.view.type !== 'form'">
                 <FilterButton />
             </t>
diff --git a/web_filter_header_button/static/src/filter_button/filter_button.xml b/web_filter_header_button/static/src/filter_button/filter_button.xml
index 425bd508d..fcdf2f2b4 100644
--- a/web_filter_header_button/static/src/filter_button/filter_button.xml
+++ b/web_filter_header_button/static/src/filter_button/filter_button.xml
@@ -3,36 +3,38 @@
 
     <t t-name="filter_button.FilterButton" owl="1">
         <t t-set="filters" t-value="shownFilters(model.get('filters'))" />
-        <div class="btn-group" t-if="filters">
-            <button
-                t-if="filters &amp;&amp; filters.length"
-                t-attf-class="btn btn-outline-primary"
-                t-on-click.stop="onClickReset()"
-            >
-                <i class="fa fa-times" />
-            </button>
-            <!-- Directly get the model filters so we can react to changes -->
-            <t t-foreach="filters" t-as="filter" t-key="filter.id">
-                <t t-set="options" t-value="filter.context.shown_in_panel" />
-                <t t-set="filter_mapping" t-value="mapFilterType(filter)" />
-                <t t-set="color" t-value="filter_mapping.color || 'primary'" />
-                <!-- We can set an empty string on the optional name to show only the icon -->
-                <t
-                    t-set="name"
-                    t-value="options.name !== undefined ? options.name : filter.description"
-                />
+        <div t-if="filters" class="o_cp_bottom_filter_buttons">
+            <div class="btn-group">
                 <button
-                    t-attf-class="btn {{filter.isActive ? `btn-${color}` : `btn-outline-${color}`}}"
-                    t-on-click.stop="onToggleFilter(filter)"
-                    t-att-data-hotkey="options.hotkey"
+                    t-if="filters &amp;&amp; filters.length"
+                    t-attf-class="btn btn-outline-primary"
+                    t-on-click.stop="onClickReset()"
                 >
-                    <i
-                        t-if="options.icon"
-                        t-attf-class="fa {{options.icon}} {{name !== '' ? 'mr-1' : ''}}"
-                    />
-                    <t t-esc="name" />
+                    <i class="fa fa-times" />
                 </button>
-            </t>
+                <!-- Directly get the model filters so we can react to changes -->
+                <t t-foreach="filters" t-as="filter" t-key="filter.id">
+                    <t t-set="options" t-value="filter.context.shown_in_panel" />
+                    <t t-set="filter_mapping" t-value="mapFilterType(filter)" />
+                    <t t-set="color" t-value="filter_mapping.color || 'primary'" />
+                    <!-- We can set an empty string on the optional name to show only the icon -->
+                    <t
+                        t-set="name"
+                        t-value="options.name !== undefined ? options.name : filter.description"
+                    />
+                    <button
+                        t-attf-class="btn {{filter.isActive ? `btn-${color}` : `btn-outline-${color}`}}"
+                        t-on-click.stop="onToggleFilter(filter)"
+                        t-att-data-hotkey="options.hotkey"
+                    >
+                        <i
+                            t-if="options.icon"
+                            t-attf-class="fa {{options.icon}} {{name !== '' ? 'mr-1' : ''}}"
+                        />
+                        <t t-esc="name" />
+                    </button>
+                </t>
+            </div>
         </div>
     </t>
 </templates>