[MIG] web_filter_header_button: Migration to 18.0

TT54366

Author: chienandalu

web_filter_header_button/README.rst

@@ -17,13 +17,13 @@ Filter Button
     :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
     :alt: License: AGPL-3
 .. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
-    :target: https://github.com/OCA/web/tree/15.0/web_filter_header_button
+    :target: https://github.com/OCA/web/tree/18.0/web_filter_header_button
     :alt: OCA/web
 .. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
-    :target: https://translation.odoo-community.org/projects/web-15-0/web-15-0-web_filter_header_button
+    :target: https://translation.odoo-community.org/projects/web-18-0/web-18-0-web_filter_header_button
     :alt: Translate me on Weblate
 .. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png
-    :target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=15.0
+    :target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=18.0
     :alt: Try me on Runboat
 
 |badge1| |badge2| |badge3| |badge4| |badge5|
@@ -84,6 +84,9 @@ You can show filter, groups or even favorites.
 Usage
 =====
 
+In a search view with header filter buttons, you'll see a filter icon
+(funnel). Use it to unfold the filters.
+
 There's a demo implementation in ``Apps`` and you can play around
 following the *Configure* section.
 
@@ -106,7 +109,7 @@ Bug Tracker
 Bugs are tracked on `GitHub Issues <https://github.com/OCA/web/issues>`_.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us to smash it by providing a detailed and welcomed
-`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_filter_header_button%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_filter_header_button%0Aversion:%2018.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
 
 Do not contact contributors directly about support or help with technical issues.
 
@@ -138,6 +141,6 @@ 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.
 
-This module is part of the `OCA/web <https://github.com/OCA/web/tree/15.0/web_filter_header_button>`_ project on GitHub.
+This module is part of the `OCA/web <https://github.com/OCA/web/tree/18.0/web_filter_header_button>`_ project on GitHub.
 
 You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

web_filter_header_button/__manifest__.py

@@ -2,7 +2,7 @@
 # License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
 {
     "name": "Filter Button",
-    "version": "15.0.1.1.1",
+    "version": "18.0.1.0.0",
     "summary": "Show selected filters as buttons in the control panel",
     "author": "Tecnativa, Odoo Community Association (OCA)",
     "license": "AGPL-3",
@@ -14,7 +14,6 @@
         "demo/ir_module_module_view.xml",
     ],
     "assets": {
-        "web.assets_backend": ["web_filter_header_button/static/src/**/*.js"],
-        "web.assets_qweb": ["web_filter_header_button/static/src/**/*.xml"],
+        "web.assets_backend": ["web_filter_header_button/static/src/**/*"],
     },
 }

web_filter_header_button/readme/USAGE.md

@@ -1,2 +1,5 @@
+In a search view with header filter buttons, you'll see a filter icon (funnel). Use it
+to unfold the filters.
+
 There's a demo implementation in `Apps` and you can play around following the *Configure*
 section.

web_filter_header_button/static/description/index.html

@@ -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 @@
   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 {
@@ -368,7 +369,7 @@ <h1 class="title">Filter Button</h1>
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 !! source digest: sha256:c2b64cc19b28ee8850599360a44f1ba6ad28db0bc8574f041a845a5ca9529af1
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<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><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/18.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-18-0/web-18-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=18.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
 control panel.</p>
 <p><strong>Table of contents</strong></p>
@@ -424,6 +425,8 @@ <h1><a class="toc-backref" href="#toc-entry-2">Configuration</a></h1>
 </div>
 <div class="section" id="usage">
 <h1><a class="toc-backref" href="#toc-entry-3">Usage</a></h1>
+<p>In a search view with header filter buttons, you’ll see a filter icon
+(funnel). Use it to unfold the filters.</p>
 <p>There’s a demo implementation in <tt class="docutils literal">Apps</tt> and you can play around
 following the <em>Configure</em> section.</p>
 </div>
@@ -446,7 +449,7 @@ <h1><a class="toc-backref" href="#toc-entry-5">Bug Tracker</a></h1>
 <p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us to smash it by providing a detailed and welcomed
-<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_filter_header_button%0Aversion:%2015.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
+<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_filter_header_button%0Aversion:%2018.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
@@ -469,11 +472,13 @@ <h2><a class="toc-backref" href="#toc-entry-8">Contributors</a></h2>
 <div class="section" id="maintainers">
 <h2><a class="toc-backref" href="#toc-entry-9">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>
-<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/15.0/web_filter_header_button">OCA/web</a> project on GitHub.</p>
+<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/18.0/web_filter_header_button">OCA/web</a> project on GitHub.</p>
 <p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
 </div>
 </div>

web_filter_header_button/static/src/control_panel/control_panel.esm.js

@@ -1,10 +1,35 @@
 <?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_bottom')]" position="after">
-            <t t-if="env.view and env.view.type !== 'form'">
-                <FilterButton />
+<templates xml:space="preserve">
+    <t t-inherit="web.ControlPanel" t-inherit-mode="extension">
+        <xpath expr="//div[hasclass('o_control_panel_main')]" position="after">
+            <t t-if="this.env.config.viewType and this.env.config.viewType !== 'form'">
+                <Transition
+                    visible="state.showButtonFilters"
+                    name="'o-fade'"
+                    t-slot-scope="transition"
+                    leaveDuration="500"
+                >
+                    <div
+                        class="o_embedded_actions overflow-hidden d-flex flex-wrap w-100 align-items-center justify-content-center gap-2"
+                        t-att-class="transition.className"
+                    >
+                        <FilterButton
+                            filters="this.env.searchModel.headerButtonFilters"
+                        />
+                    </div>
+                </Transition>
             </t>
         </xpath>
+
+        <xpath expr="//button[@t-on-click='onClickShowEmbedded']" position="after">
+            <button
+                t-if="state.headerButtonFilters?.length"
+                class="btn btn-secondary"
+                t-att-class="{active: state.showButtonFilters}"
+                t-on-click="onClickShowshowButtonFilters"
+            >
+                <i class="fa fa-filter" />
+            </button>
+        </xpath>
     </t>
 </templates>

web_filter_header_button/static/src/control_panel/control_panel.xml

@@ -0,0 +1,37 @@
+import {ControlPanel} from "@web/search/control_panel/control_panel";
+import {FilterButton} from "../filter_button/filter_button.esm";
+import {browser} from "@web/core/browser/browser";
+import {patch} from "@web/core/utils/patch";
+import {useState} from "@odoo/owl";
+import {user} from "@web/core/user";
+
+patch(ControlPanel, {
+    components: {...ControlPanel.components, FilterButton},
+});
+
+patch(ControlPanel.prototype, {
+    setup() {
+        super.setup(...arguments);
+        this.buttonFiltersVisibilityKey = `visibleHeaderButtons${this.env.config.actionId}+${user.userId}`;
+        this.state = useState({
+            ...this.state,
+            headerButtonFilters: this.env.searchModel?.headerButtonFilters,
+            showButtonFilters:
+                this.env.searchModel?.headerButtonFilters.length > 0 &&
+                Boolean(this.env.config.actionId) &&
+                Boolean(
+                    JSON.parse(
+                        browser.localStorage.getItem(this.buttonFiltersVisibilityKey)
+                    )
+                ),
+        });
+    },
+    onClickShowshowButtonFilters() {
+        if (this.state.showButtonFilters) {
+            browser.localStorage.removeItem(this.buttonFiltersVisibilityKey);
+        } else {
+            browser.localStorage.setItem(this.buttonFiltersVisibilityKey, true);
+        }
+        this.state.showButtonFilters = !this.state.showButtonFilters;
+    },
+});

web_filter_header_button/static/src/control_panel/control_panel_model_extension.esm.js

@@ -1,21 +1,13 @@
-/** @odoo-module **/
-const {Component} = owl;
+import {Component} from "@odoo/owl";
 
 export class FilterButton extends Component {
+    static template = "filter_button.FilterButton";
+    static props = {
+        filters: {type: Object, optional: false},
+    };
     setup() {
         this.model = this.env.searchModel;
     }
-    /**
-     * Filter flagged filters to be shown in the control panel.
-     *
-     * @param {Array} filters
-     * @returns {Array}
-     */
-    shownFilters(filters) {
-        return filters.filter((filter) => {
-            return filter.context && filter.context.shown_in_panel;
-        });
-    }
     /**
      * Return custom properties depending on the filter properties
      *
@@ -40,14 +32,14 @@ export class FilterButton extends Component {
      * Clear filters
      */
     onClickReset() {
-        this.model.dispatch("clearQuery");
+        this.model.clearQuery();
     }
     /**
      * Set / unset filter
      * @param {Object} filter
      */
     onToggleFilter(filter) {
-        this.model.dispatch("toggleFilter", filter.id);
+        // This.model.dispatch("toggleSearchItem", filter.id);
+        this.model.toggleSearchItem(filter.id);
     }
 }
-FilterButton.template = "filter_button.FilterButton";

web_filter_header_button/static/src/control_panel/control_panel_patch.esm.js

@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates>
-    <t t-name="filter_button.FilterButton" owl="1">
-        <t t-set="filters" t-value="shownFilters(model.get('filters'))" />
+    <t t-name="filter_button.FilterButton">
+        <t t-set="filters" t-value="this.props.filters" />
         <div t-if="filters" class="o_cp_bottom_filter_buttons">
-            <div class="btn-group">
+            <div class="btn-group" role="group">
                 <button
-                    t-if="filters &amp;&amp; filters.length"
+                    t-if="filters and filters.length"
                     t-attf-class="btn btn-outline-primary"
-                    t-on-click.stop="onClickReset()"
+                    t-on-click.stop="this.onClickReset"
                 >
                     <i class="fa fa-times" />
                 </button>
@@ -22,8 +22,8 @@
                         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-attf-class="btn ms-0 border-start-0 {{filter.isActive ? `btn-${color}` : `btn-outline-${color}`}}"
+                        t-on-click.stop="() => this.onToggleFilter(filter)"
                         t-att-data-hotkey="options.hotkey"
                     >
                         <i