Merge pull request #2014 from noirbizarre/search-facets-clear

Switch search facets clear action to a "by term" approach
opendatateam · Feb 1, 2019 · 69475b5 · 69475b5
2 parents 2f57095 + 324c678
commit 69475b5
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,7 @@
 - Improved admin errors handling: visual feedback on all errors, `Sentry-ID` header if present, hide organization unauthorized actions [#2005](https://github.com/opendatateam/udata/pull/2005)
 - Expose and import licenses `alternate_urls` and `alternate_titles` fields [#2006](https://github.com/opendatateam/udata/pull/2006)
 - Be consistent on search results wording and icons (Stars vs Followers) [#2013](https://github.com/opendatateam/udata/pull/2013)
+- Switch from a "full facet reset" to a "by term reset" approach in search facets [#2014](https://github.com/opendatateam/udata/pull/2014)
 
 ## 1.6.2 (2018-11-05)
 

diff --git a/less/udata/search.less b/less/udata/search.less
@@ -168,12 +168,16 @@ ul.search-results {
                 padding-right: @padding + 37px;
                 position: relative;
 
-                .badge {
+                .badge, .fa-times {
                     position: absolute;
                     top: 50%;
                     right: @padding;
                     transform: translateY(-50%);
                 }
+
+                .fa-times:hover {
+                    color: red;
+                }
             }
 
             // Center the more button

diff --git a/udata/templates/macros/search.html b/udata/templates/macros/search.html
@@ -87,72 +87,81 @@ <h3 class="panel-title">
         <span class="{{icon or 'fa fa-filter'}} fa-fw"></span>
         {{ label or name }}
         <span id="chevrons-{{result.class_name}}-{{name}}" class="fa fa-chevron-down pull-right"></span>
-        {% if in_url(name) %}
-        <a id="facet-{{result.class_name}}-{{name}}-remove" class="btn-remove pull-right"
-            href="{{ url_del(None, name, 'page') }}" title="{{ _('Clear filter') }}">
-            <span class="fa fa-remove"></span>
-        </a>
-        {% endif %}
     </h3>
 </div>
 <div id="facet-{{result.class_name}}-{{name}}" class="{{ classes }} collapse in">
     {{ caller() }}
 </div>
 {% endmacro %}
 
+{% macro term_item(result, facet, url, term, count, selected) %}
+{% if selected %}
+<a href="{{ url|url_del('page', **{facet: term}) }}"
+    class="list-group-item active">
+    <span class="fa fa-times pull-right"></span>
+    {{ result.query.facets[facet].labelize(term) }}
+</a>
+{% else %}
+<a href="{{ result.query.to_url(url, **{facet: term}) }}"
+    class="list-group-item">
+    <span class="badge">{{ count }}</span>
+    {{ result.query.facets[facet].labelize(term) }}
+</a>
+{% endif %}
+{% endmacro %}
 
 {% macro terms_facet(result, name, label, icon, url=None) %}
 {% set terms = result.facets[name] %}
 {% if terms|length > 1 %}
     {% call facet_panel(result, name, label, icon, url) %}
     {% for term, count, selected in terms[:nb_displayed_aggregations] %}
-        <a href="{{ result.query.to_url(url, **{name: term}) }}"
-            class="list-group-item">
-            <span class="badge">{{ count }}</span>
-            {{ result.query.facets[name].labelize(term) }}
-        </a>
+        {{ term_item(result, name, url, term, count, selected) }}
     {% endfor %}
     {% if terms|length > nb_displayed_aggregations %}
         <button class="list-group-item more" @click="expandPanel('{{result.class_name}}-{{name}}', $event)">
             {{ _('More results…') }}
         </button>
         <div id="facet-{{result.class_name}}-{{name}}-more" class="list-group collapse list-group-more">
         {% for term, count, selected in terms[nb_displayed_aggregations:] %}
-            <a href="{{ result.query.to_url(url, **{name: term}) }}"
-                class="list-group-item">
-                <span class="badge">{{ count }}</span>
-                {{ result.query.facets[name].labelize(term) }}
-            </a>
+            {{ term_item(result, name, url, term, count, selected) }}
         {% endfor %}
         </div>
     {% endif %}
     {% endcall %}
 {% endif %}
 {% endmacro %}
 
+{% macro model_term_item(result, facet, url, obj, count, selected) %}
+{% if selected %}
+<a href="{{ url|url_del('page', **{facet: obj.id|string}) }}"
+    class="list-group-item active">
+    <span class="fa fa-times pull-right"></span>
+    {{ result.query.facets[facet].labelize(obj) }}
+</a>
+{% else %}
+<a href="{{ result.query.to_url(url, **{facet:  obj.id|string}) }}"
+    class="list-group-item">
+    <span class="badge">{{ count }}</span>
+    {{ result.query.facets[facet].labelize(obj) }}
+</a>
+{% endif %}
+{% endmacro %}
+
 
 {% macro model_terms_facet(result, name, label, icon, url=None) %}
 {% set objects = result.facets[name] %}
 {% if objects|length > 1 %}
     {% call facet_panel(result, name, label, icon, url) %}
     {% for obj, count, selected in objects[:nb_displayed_aggregations] %}
-        <a href="{{ result.query.to_url(url, **{name: obj.id|string}) }}"
-            class="list-group-item">
-            <span class="badge">{{ count }}</span>
-            {{ result.query.facets[name].labelize(obj) }}
-        </a>
+        {{ model_term_item(result, name, url, obj, count, selected) }}
     {% endfor %}
     {% if objects|length > nb_displayed_aggregations %}
         <button class="list-group-item more" @click="expandPanel('{{result.class_name}}-{{name}}', $event)">
             {{ _('More results…') }}
         </button>
         <div id="facet-{{result.class_name}}-{{name}}-more" class="list-group collapse list-group-more">
         {% for obj, count, selected in objects[nb_displayed_aggregations:] %}
-            <a href="{{ result.query.to_url(url, **{name: obj.id|string}) }}"
-                class="list-group-item">
-                <span class="badge">{{ count }}</span>
-                {{ result.query.facets[name].labelize(obj) }}
-            </a>
+            {{ model_term_item(result, name, url, obj, count, selected) }}
         {% endfor %}
         </div>
     {% endif %}