templates: show facet selections with no results

* Shows top-level selected values from previously selected facets that have zero results. (addresses #111)
inveniosoftware · Mar 20, 2018 · f69bbcc · f69bbcc
1 parent 8449e51
commit f69bbcc
Showing 1 changed file with 15 additions and 9 deletions.
diff --git a/src/invenio-search-js/templates/facets.html b/src/invenio-search-js/templates/facets.html
@@ -6,38 +6,44 @@
   under the terms of the MIT License; see LICENSE file for more details.
 -->
 <div ng-init="tree=[];tree_more=[]" ng-repeat="aggr in orderedAggs track by $index">
-  <div ng-if="aggr.value.buckets.length > 0" class="panel panel-default">
+  <div ng-if="aggr.value.buckets.length > 0 || getValues(key)" class="panel panel-default">
     <div class="panel-heading">
       <h3 class="panel-title">{{ aggr.key }}</h3>
     </div>
     <div class="panel-body">
-      <ul class="list-unstyled" ng-init="values=getValues(aggr.key)" ng-repeat="item in aggr.value.buckets">
+      <ul class="list-unstyled" ng-init="values = getValues(aggr.key)" ng-repeat="item in aggr.value.buckets">
         <li>
           <input type="checkbox" ng-checked="values.indexOf(item.key) > -1" ng-click="handleClick(aggr.key, item.key)" /> {{ item.key }} ({{ item.doc_count }})
           <small>
             <a
-              ng-init="tree_more[item.key]=false;tree[item.key]=(values.indexOf(item.key) > -1) ? true : false"
+              ng-init="tree_more[item.key] = false; tree[item.key] = (values.indexOf(item.key) > -1) ? true : false"
               ng-model="tree[item.key]"
               ng-show="tree_more[item.key]"
               ng-click="tree[item.key]=!tree[item.key]"
             >
               {{ (tree[item.key]) ? '-' : '+' }}
             </a>
-          </small><div ng-show="tree[item.key]===true" ng-repeat="(subKey, subValue) in item">
+          </small><div ng-show="tree[item.key] === true" ng-repeat="(subKey, subValue) in item">
             <div ng-if="['doc_count', 'key'].indexOf(subKey) === -1">
-              <ul ng-init="tree_more[item.key]=true;subValues=getValues(subKey)" ng-repeat="subFacets in subValue.buckets">
+              <ul ng-init="tree_more[item.key] = true; subValues = getValues(subKey)" ng-repeat="subFacets in subValue.buckets">
                 <li>
                   <input
-                   ng-init="tree[item.key]=(subValues.indexOf(subFacets.key) > -1 || tree[item.key])"
-                   type="checkbox"
-                   ng-checked="subValues.indexOf(subFacets.key) > -1"
-                   ng-click="handleClick(subKey, subFacets.key)" /> {{ subFacets.key }} ({{ subFacets.doc_count }})
+                    ng-init="tree[item.key] = (subValues.indexOf(subFacets.key) > -1 || tree[item.key])"
+                    type="checkbox"
+                    ng-checked="subValues.indexOf(subFacets.key) > -1"
+                    ng-click="handleClick(subKey, subFacets.key)" /> {{ subFacets.key }} ({{ subFacets.doc_count }})
                 </li>
               </ul>
             </div>
           </div>
         </li>
       </ul>
+      <!-- Show previously selected facets with zero results at the bottom -->
+      <ul class="list-unstyled" ng-repeat="selectedValue in getValues(aggr.key)">
+        <li ng-if="(aggr.value.buckets | filter:{key:selectedValue}:true).length == 0">
+          <input type="checkbox" checked ng-click="handleClick(aggr.key, selectedValue)" /> {{ selectedValue }} (0)
+        </li>
+      </ul>
     </div>
   </div>
 </div>