[IMP] web: Search panel Owl

Refactoring of the search panel and its inner logic to Owl.

The previous search panel widget has been divided in 2 parts:

1. Component
The "Search Panel" component's responsibilities are now to render the
search panel data given by its model, display some rendering logic
(expanded categories, checked groups) and dispatch the events triggered
on it.

2. Model Extension
The "Search Panel Model Extension" holds all the search logic of the
search panel. Its responsibilities are calling the server to update its
data and to provide them to its component and other search extensions.

Part of task 2228968

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

2 files changed, 132 insertions, 126 deletions

diff --git a/addons/web/static/src/xml/kanban.xml b/addons/web/static/src/xml/kanban.xml
index f4657d4b3a3..2fd7f8ca211 100644
--- a/addons/web/static/src/xml/kanban.xml
+++ b/addons/web/static/src/xml/kanban.xml
@@ -209,132 +209,6 @@
     </div>
 </t>
 
-<!-- Kanban SearchPanel -->
-<t t-name="SearchPanel.SectionHeader">
-    <header class="o_search_panel_section_header text-uppercase">
-        <i t-attf-class="mr-1 fa #{section.icon} o_search_panel_section_icon" t-attf-style="#{section.color ? ('color: ' + section.color) : ''}"/>
-        <b><t t-esc="section.description"/></b>
-    </header>
-</t>
-
-<t t-name="SearchPanel.Category">
-    <section class="o_search_panel_section o_search_panel_category">
-        <t t-call="SearchPanel.SectionHeader">
-            <t t-set="section" t-value="category"/>
-        </t>
-        <div t-if="category.errorMsg" class="alert alert-warning">
-            <span><t t-esc="category.errorMsg"/></span>
-        </div>
-        <ul t-else="" class="list-group d-block o_search_panel_field" t-att-data-field-name="category.fieldName">
-            <li class="o_search_panel_category_value border-0 list-group-item" t-att-data-category-id="category.id">
-                <header t-att-class="'list-group-item-action' + (!category.activeValueId ? ' active' : '')">
-                    <label class="o_search_panel_label mb0">
-                        <div class="o_toggle_fold"/>
-                        <span class="o_search_panel_label_title"><b>All</b></span>
-                    </label>
-                </header>
-            </li>
-            <t t-call="SearchPanel.CategoryValues">
-                <t t-set="values" t-value="category.rootIds"/>
-            </t>
-        </ul>
-    </section>
-</t>
-<t t-name="SearchPanel.CategoryValues">
-    <t t-foreach="values" t-as="valueId">
-        <t t-set="value" t-value="category.values[valueId]"/>
-        <li class="o_search_panel_category_value border-0 list-group-item" t-att-data-id="value.id" t-att-data-category-id="category.id">
-            <header t-att-class="'list-group-item-action' + (value.id === category.activeValueId ? ' active' : '')">
-                <label t-attf-class="o_search_panel_label mb0{{ category.enableCounters ? ' o_with_counters' : '' }}">
-                    <div class="o_toggle_fold">
-                        <i t-if="value.childrenIds.length" t-attf-class="fa fa-caret-{{ value.folded ? 'right' : 'down' }}"/>
-                    </div>
-                    <span class="o_search_panel_label_title"><t t-esc="value.display_name"/></span>
-                </label>
-                <span t-if="category.enableCounters and value.__count > 0"
-                    class="o_search_panel_counter text-muted ml-2 small"
-                    t-esc="value.__count"
-                />
-            </header>
-            <ul t-if="!value.folded and value.childrenIds.length" class="list-group d-block">
-                <t t-call="SearchPanel.CategoryValues">
-                    <t t-set="values" t-value="value.childrenIds"/>
-                </t>
-            </ul>
-        </li>
-    </t>
-</t>
-
-<t t-name="SearchPanel.Filter">
-    <section class="o_search_panel_section o_search_panel_filter">
-        <t t-call="SearchPanel.SectionHeader">
-            <t t-set="section" t-value="filter"/>
-        </t>
-        <div t-if="filter.errorMsg" class="alert alert-warning">
-            <span><t t-esc="filter.errorMsg"/></span>
-        </div>
-        <ul t-else="" class="list-group d-block o_search_panel_field" t-att-data-field-name="filter.fieldName">
-            <t t-if="filter.groups" t-call="SearchPanel.FilterGroups">
-                <t t-set="groups" t-value="filter.groups"/>
-            </t>
-            <t t-else="" t-call="SearchPanel.FilterValues">
-                <t t-set="sortedValueIds" t-value="filter.sortedValueIds"/>
-                <t t-set="values" t-value="filter.values"/>
-            </t>
-        </ul>
-    </section>
-</t>
-<t t-name="SearchPanel.FilterGroups">
-    <li t-foreach="filter.sortedGroupIds" t-as="groupId" t-att-data-group-id="groupId" t-att-data-filter-id="filter.id"
-        class="o_search_panel_filter_group list-group-item border-0">
-        <t t-set="group" t-value="groups[groupId]"/>
-        <t t-set="inputId" t-value="_.uniqueId('input_')"/>
-        <header class="o_search_panel_group_header">
-            <div class="custom-control custom-checkbox">
-                <input type="checkbox" t-att-id="inputId" t-att-checked="group.state === 'checked' ? 'checked' : undefined" class="custom-control-input"/>
-                <label t-att-for="inputId" t-attf-class="o_search_panel_label custom-control-label{{ group.enableCounters ? ' o_with_counters' : '' }}" t-att-title="group.tooltip">
-                    <span class="o_search_panel_label_title">
-                        <span t-if="group.hex_color" t-attf-style="color: {{ group.hex_color }};">●</span>
-                        <t t-esc="group.name"/>
-                    </span>
-                </label>
-            </div>
-        </header>
-        <ul t-if="!group.folded" class="list-group d-block">
-            <t t-call="SearchPanel.FilterValues">
-                <t t-set="sortedValueIds" t-value="group.sortedValueIds"/>
-                <t t-set="values" t-value="group.values"/>
-            </t>
-        </ul>
-    </li>
-     <ul t-if="groups['false']" class="list-group d-block">
-        <t t-call="SearchPanel.FilterValues">
-            <t t-set="group" t-value="groups['false']"/>
-            <t t-set="sortedValueIds" t-value="group.sortedValueIds"/>
-            <t t-set="values" t-value="group.values"/>
-        </t>
-    </ul>
-</t>
-<t t-name="SearchPanel.FilterValues">
-    <li t-foreach="sortedValueIds" t-as="valueId" t-att-data-value-id="valueId" t-att-data-filter-id="filter.id"
-        class="o_search_panel_filter_value list-group-item border-0">
-        <t t-set="value" t-value="values[valueId]"/>
-        <t t-set="inputId" t-value="_.uniqueId('input_')"/>
-        <header class="o_search_panel_group_header">
-            <div class="custom-control custom-checkbox w-100">
-                <input type="checkbox" t-att-id="inputId" t-att-checked="value.checked ? 'checked' : undefined" class="custom-control-input"/>
-                <label t-att-for="inputId" class="o_search_panel_label custom-control-label" t-att-title="group &amp;&amp; group.tooltip">
-                    <span class="o_search_panel_label_title" t-esc="value.display_name"/>
-                    <span t-if="filter.enableCounters and value.__count > 0"
-                        class="o_search_panel_counter text-muted ml-2 small"
-                        t-esc="value.__count"
-                    />
-                </label>
-            </div>
-        </header>
-    </li>
-</t>
-
 <!-- Mobile templates -->
 <t t-name="KanbanView.MobileTabs">
     <div class="o_kanban_mobile_tabs_container">
diff --git a/addons/web/static/src/xml/search_panel.xml b/addons/web/static/src/xml/search_panel.xml
new file mode 100644
index 00000000000..4b6dc4d7a60
--- /dev/null
+++ b/addons/web/static/src/xml/search_panel.xml
@@ -0,0 +1,132 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+<t t-name="web.SearchPanel" owl="1">
+    <div class="o_search_panel" t-att-class="props.className">
+        <section t-foreach="model.get('sections', s => !s.empty)" t-as="section" t-key="section.id"
+            t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
+            >
+            <header class="o_search_panel_section_header text-uppercase">
+                <i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon mr-2"
+                    t-att-style="section.color and ('color: ' + section.color)"
+                />
+                <b t-esc="section.description"/>
+            </header>
+            <div t-if="section.errorMsg" class="alert alert-warning">
+                <span><t t-esc="section.errorMsg"/></span>
+            </div>
+            <ul t-else="" class="list-group d-block o_search_panel_field">
+                <t t-if="section.type === 'category'" t-call="web.SearchPanel.Category">
+                    <t t-set="values" t-value="section.rootIds"/>
+                </t>
+                <t t-elif="section.groups">
+                    <li t-foreach="section.sortedGroupIds" t-as="groupId" t-key="groupId"
+                        class="o_search_panel_filter_group list-group-item border-0"
+                        >
+                        <!-- TODO: this is a workaround for issue https://github.com/odoo/owl/issues/695 (remove when solved) -->
+                        <t t-set="_section" t-value="section"/>
+                        <t t-set="group" t-value="section.groups.get(groupId)"/>
+                        <header class="o_search_panel_group_header">
+                            <div class="custom-control custom-checkbox">
+                                <!-- TODO: "indeterminate" could not be set in the template and had to be set in
+                                     JS manually. See https://github.com/odoo/owl/issues/713 (adapt when solved)
+                                -->
+                                <input type="checkbox"
+                                    class="custom-control-input"
+                                    t-attf-id="{{ section.id }}_input_{{ groupId }})"
+                                    t-on-click="_toggleFilterGroup(section.id, group)"
+                                />
+                                <label t-attf-for="{{ section.id }}_input_{{ groupId }})"
+                                    class="o_search_panel_label custom-control-label"
+                                    t-att-class="{ o_with_counters: group.enableCounters }"
+                                    t-att-title="group.tooltip or false"
+                                    >
+                                    <span class="o_search_panel_label_title">
+                                        <span t-if="group.hex_color" class="mr-1" t-attf-style="color: {{ group.hex_color }};">●</span>
+                                        <t t-esc="group.name"/>
+                                    </span>
+                                </label>
+                            </div>
+                        </header>
+                        <ul class="list-group d-block">
+                            <t t-call="web.SearchPanel.FiltersGroup">
+                                <t t-set="values" t-value="group.values"/>
+                                <!-- TODO: this is a workaround for issue https://github.com/odoo/owl/issues/695 (remove when solved) -->
+                                <t t-set="section" t-value="_section"/>
+                            </t>
+                        </ul>
+                    </li>
+                    <ul t-if="section.groups.get(false)" class="list-group d-block">
+                        <t t-call="web.SearchPanel.FiltersGroup">
+                            <t t-set="group" t-value="section.groups.get(false)"/>
+                            <t t-set="values" t-value="group.values"/>
+                            <!-- TODO: this is a workaround for issue https://github.com/odoo/owl/issues/695 (remove when solved) -->
+                            <t t-set="section" t-value="section"/>
+                        </t>
+                    </ul>
+                </t>
+                <t t-else="" t-call="web.SearchPanel.FiltersGroup">
+                    <t t-set="values" t-value="section.values"/>
+                </t>
+            </ul>
+        </section>
+    </div>
+</t>
+
+<t t-name="web.SearchPanel.Category" owl="1">
+    <t t-foreach="values" t-as="valueId" t-key="valueId">
+        <t t-set="value" t-value="section.values.get(valueId)"/>
+        <li class="o_search_panel_category_value list-group-item border-0">
+            <header class="list-group-item-action"
+                t-att-class="{ active: state.active[section.id] === valueId }"
+                t-on-click="_toggleCategory(section, value)"
+                >
+                <label class="o_search_panel_label mb0" t-att-class="{ o_with_counters: section.enableCounters }">
+                    <div class="o_toggle_fold">
+                        <i t-if="value.childrenIds.length"
+                            t-attf-class="fa fa-caret-{{ state.expanded[section.id][valueId] ? 'down' : 'right' }}"
+                        />
+                    </div>
+                    <b t-if="value.bold" class="o_search_panel_label_title" t-esc="value.display_name"/>
+                    <span t-else="" class="o_search_panel_label_title" t-esc="value.display_name"/>
+                </label>
+                <span t-if="section.enableCounters and value.__count gt 0"
+                    class="o_search_panel_counter text-muted ml-2 small"
+                    t-esc="value.__count"
+                />
+            </header>
+            <ul t-if="value.childrenIds.length and state.expanded[section.id][valueId]" class="list-group d-block">
+                <t t-call="web.SearchPanel.Category">
+                    <t t-set="values" t-value="value.childrenIds"/>
+                </t>
+            </ul>
+        </li>
+    </t>
+</t>
+
+<t t-name="web.SearchPanel.FiltersGroup" owl="1">
+    <li t-foreach="[...values.keys()]" t-as="valueId" t-key="valueId"
+        class="o_search_panel_filter_value list-group-item border-0"
+        >
+        <t t-set="value" t-value="values.get(valueId)"/>
+        <div class="custom-control custom-checkbox w-100">
+            <input type="checkbox"
+                t-attf-id="{{ section.id }}_input_{{ valueId }}"
+                t-att-checked="state.active[section.id][valueId]"
+                class="custom-control-input"
+                t-on-click="_toggleFilterValue(section.id, valueId)"
+            />
+            <label class="o_search_panel_label custom-control-label"
+                t-attf-for="{{ section.id }}_input_{{ valueId }}"
+                t-att-title="(group and group.tooltip) or false">
+                <span class="o_search_panel_label_title" t-esc="value.display_name"/>
+                <span t-if="section.enableCounters and value.__count gt 0"
+                    class="o_search_panel_counter text-muted ml-2 small"
+                    t-esc="value.__count"
+                />
+            </label>
+        </div>
+    </li>
+</t>
+
+</templates>