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

4 files changed, 89 insertions, 1 deletions

diff --git a/addons/web_editor/models/ir_qweb.py b/addons/web_editor/models/ir_qweb.py
index 5eceda7855f..4afd778aa71 100644
--- a/addons/web_editor/models/ir_qweb.py
+++ b/addons/web_editor/models/ir_qweb.py
@@ -68,10 +68,11 @@ class QWeb(models.AbstractModel):
         view_id = View.get_view_id(key)
         name = View.browse(view_id).name
         thumbnail = el.attrib.pop('t-thumbnail', "oe-thumbnail")
-        div = u'<div name="%s" data-oe-type="snippet" data-oe-thumbnail="%s" data-oe-snippet-id="%s">' % (
+        div = u'<div name="%s" data-oe-type="snippet" data-oe-thumbnail="%s" data-oe-snippet-id="%s" data-oe-keywords="%s">' % (
             escape(pycompat.to_text(name)),
             escape(pycompat.to_text(thumbnail)),
             escape(pycompat.to_text(view_id)),
+            escape(pycompat.to_text(el.findtext('keywords')))
         )
         return [self._append(ast.Str(div))] + self._compile_node(el, options) + [self._append(ast.Str(u'</div>'))]
 
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%;
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index 07294406467..2aa1d397879 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -13,6 +13,11 @@
         </button>
     </div>
 
+    <div class="o_snippet_search_filter">
+        <input type="text" class="o_snippet_search_filter_input" placeholder="Search..."/>
+        <i role="button" class="fa fa-times o_snippet_search_filter_reset d-none"/>
+    </div>
+
     <div id="o_scroll">
         <div id="snippet_custom" class="o_panel d-none">
             <div class="o_panel_header">Custom</div>