[IMP] web_editor, *: add snippets search filter

*: website

Add a search bar at the top of the "Blocks" tab to filter snippets.

Part of https://github.com/odoo/odoo/pull/55272
task-2309832

closes odoo/odoo#55272

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>

2 files changed, 82 insertions, 0 deletions

diff --git a/addons/web_editor/static/src/js/editor/snippets.editor.js b/addons/web_editor/static/src/js/editor/snippets.editor.js
index ea063eebe1f..cf42d973eba 100644
--- a/addons/web_editor/static/src/js/editor/snippets.editor.js
+++ b/addons/web_editor/static/src/js/editor/snippets.editor.js
@@ -809,6 +809,8 @@ var SnippetsMenu = Widget.extend({
         'click .o_we_invisible_entry': '_onInvisibleEntryClick',
         'click #snippet_custom .o_delete_btn': '_onDeleteBtnClick',
         'mousedown': '_onMouseDown',
+        'input .o_snippet_search_filter_input': '_onSnippetSearchInput',
+        'click .o_snippet_search_filter_reset': '_onSnippetSearchResetClick',
     },
     custom_events: {
         'activate_insertion_zones': '_onActivateInsertionZones',
@@ -1730,6 +1732,37 @@ var SnippetsMenu = Widget.extend({
     },
     /**
      * @private
+     * @param {string} [search]
+     */
+    _filterSnippets(search) {
+        const searchInputEl = this.el.querySelector('.o_snippet_search_filter_input');
+        const searchInputReset = this.el.querySelector('.o_snippet_search_filter_reset');
+        if (search !== undefined) {
+            searchInputEl.value = search;
+        } else {
+            search = searchInputEl.value;
+        }
+        search = search.toLowerCase();
+        searchInputReset.classList.toggle('d-none', !search);
+        const strMatches = str => !search || str.toLowerCase().includes(search);
+        for (const panelEl of this.el.querySelectorAll('.o_panel')) {
+            let hasVisibleSnippet = false;
+            const panelTitle = panelEl.querySelector('.o_panel_header').textContent;
+            const isPanelTitleMatch = strMatches(panelTitle);
+            for (const snippetEl of panelEl.querySelectorAll('.oe_snippet')) {
+                const matches = (isPanelTitleMatch
+                    || strMatches(snippetEl.getAttribute('name'))
+                    || strMatches(snippetEl.dataset.oeKeywords || ''));
+                if (matches) {
+                    hasVisibleSnippet = true;
+                }
+                snippetEl.classList.toggle('d-none', !matches);
+            }
+            panelEl.classList.toggle('d-none', !hasVisibleSnippet);
+        }
+    },
+    /**
+     * @private
      * @param {Object} [options={}]
      * @returns {Object}
      */
@@ -1928,6 +1961,7 @@ var SnippetsMenu = Widget.extend({
             $(this.customizePanel).append(content);
         }
 
+        this.$('.o_snippet_search_filter').toggleClass('d-none', tab !== this.tabs.BLOCKS);
         this.$('#o_scroll').toggleClass('d-none', tab !== this.tabs.BLOCKS);
         this.customizePanel.classList.toggle('d-none', tab === this.tabs.BLOCKS);
 
@@ -2298,6 +2332,22 @@ var SnippetsMenu = Widget.extend({
     _onUserValueWidgetClosing: function () {
         this.el.classList.remove('o_we_backdrop');
     },
+    /**
+     * Called when search input value changed -> adapts the snippets grid.
+     *
+     * @private
+     */
+    _onSnippetSearchInput: function () {
+        this._filterSnippets();
+    },
+    /**
+     * Called on snippet search filter reset -> clear input field search.
+     *
+     * @private
+     */
+    _onSnippetSearchResetClick: function () {
+        this._filterSnippets('');
+    },
 });
 
 return {
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index e63929d9cb4..95bc9fec862 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -197,6 +197,38 @@ body.editor_enable.editor_has_snippets {
         }
     }
 
+    // Snippet filter input
+    .o_snippet_search_filter {
+        position: relative;
+        width: 100%;
+        padding: $o-we-sidebar-blocks-content-spacing;
+
+        .o_snippet_search_filter_input {
+            width: 100%;
+            padding: $o-we-sidebar-content-field-clickable-spacing;
+            padding-right: 2em;
+            border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
+            background-color: $o-we-sidebar-content-field-input-bg;
+            color: inherit;
+
+            &::placeholder {
+                color: $o-we-sidebar-content-field-control-item-color;
+            }
+            &:focus {
+                border-color: $o-we-sidebar-content-field-input-border-color;
+                outline: none;
+            }
+        }
+        .o_snippet_search_filter_reset {
+            @include o-position-absolute($o-we-sidebar-blocks-content-spacing, $o-we-sidebar-blocks-content-spacing, $o-we-sidebar-blocks-content-spacing);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: 0 $o-we-sidebar-content-field-clickable-spacing;
+            cursor: pointer;
+        }
+    }
+
     > #o_scroll, > .o_we_customize_panel {
         flex: 1 1 auto;
         height: 100%;