[IMP] web: Comparison menu

This commit replaces the "time range menu" in the control panel by a new
component: the "comparison menu".

Its purpose is roughly the same: compare a period of data in a reporting
view with the previous period or the previous year.

Its implementation is a bit simpler: it will only appear if at least one
date filter is selected in the search view, and will suggest to compare
each selected date option with the previous period or the previous year.

Task ID: 2245719

Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>

1 files changed, 63 insertions, 0 deletions

diff --git a/addons/web/static/src/js/control_panel/comparison_menu.js b/addons/web/static/src/js/control_panel/comparison_menu.js
new file mode 100644
index 00000000000..4504370e7c4
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/comparison_menu.js
@@ -0,0 +1,63 @@
+odoo.define("web.ComparisonMenu", function (require) {
+    "use strict";
+
+    const DropdownMenu = require("web.DropdownMenu");
+    const { FACET_ICONS } = require("web.searchUtils");
+    const { useModel } = require("web.model");
+
+    /**
+     * "Comparison" menu
+     *
+     * Displays a set of comparison options related to the currently selected
+     * date filters.
+     * @extends DropdownMenu
+     */
+    class ComparisonMenu extends DropdownMenu {
+        constructor() {
+            super(...arguments);
+            this.model = useModel("controlPanelModel");
+        }
+
+        //---------------------------------------------------------------------
+        // Getters
+        //---------------------------------------------------------------------
+
+        /**
+         * @override
+         */
+        get icon() {
+            return FACET_ICONS.comparison;
+        }
+
+        /**
+         * @override
+         */
+        get items() {
+            return this.model.getFiltersOfType("comparison");
+        }
+
+        /**
+         * @override
+         */
+        get title() {
+            return this.env._t("Comparison");
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {OwlEvent} ev
+         */
+        _onItemSelected(ev) {
+            ev.stopPropagation();
+            const { item } = ev.detail;
+            this.model.dispatch("toggleComparison", item.id);
+        }
+
+    }
+
+    return ComparisonMenu;
+});