Merge PR #2835 into 15.0

Signed-off-by pedrobaeza

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
 ===========

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>

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.

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">

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>

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;
+            }
+        },
     }
 );

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];
     }

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">
+        <div t-if="filters" class="o_cp_bottom_filter_buttons">
-            <button
+            <div class="btn-group">
-                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"
-                />
                 <button
-                    t-attf-class="btn {{filter.isActive ? `btn-${color}` : `btn-outline-${color}`}}"
+                    t-if="filters &amp;&amp; filters.length"
-                    t-on-click.stop="onToggleFilter(filter)"
+                    t-attf-class="btn btn-outline-primary"
-                    t-att-data-hotkey="options.hotkey"
+                    t-on-click.stop="onClickReset()"
                 >
-                    <i
+                    <i class="fa fa-times" />
-                        t-if="options.icon"
-                        t-attf-class="fa {{options.icon}} {{name !== '' ? 'mr-1' : ''}}"
-                    />
-                    <t t-esc="name" />
                 </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>