From f86d22f46b7de7b4b451f14100d70d4092e21e59 Mon Sep 17 00:00:00 2001
From: geoffroy-noel-ddh <geoffroy.noel@kcl.ac.uk>
Date: Tue, 10 Dec 2024 21:04:28 +0000
Subject: [PATCH] feat(search): allow user to collapse the date filter..

---
 app/assets/search.mjs | 13 +++++++++++--
 app/search.html       |  9 +++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/app/assets/search.mjs b/app/assets/search.mjs
index 62c6262e9..8747d185c 100644
--- a/app/assets/search.mjs
+++ b/app/assets/search.mjs
@@ -407,7 +407,7 @@ createApp({
     },
     isFacetExpanded(facetKey) {
       let settings = this.getFacetSettings(facetKey)
-      return !!settings.expanded
+      return !!settings.expanded || this.getSelectedOptionsCount(facetKey)
     },
     isFacetSortedBy(facetKey, sort, order) {
       let settings = this.getFacetSettings(facetKey)
@@ -418,7 +418,16 @@ createApp({
       return this.getSelectedOptions(facetKey).length
     },
     getSelectedOptions(facetKey) {
-      return this.selection?.facets[facetKey] || []
+      let ret = this.selection?.facets[facetKey] || []
+      if (facetKey == 'dat') {
+        if (this.selection.dateFrom > DATE_MIN) {
+          ret.push(this.selection.dateFrom)
+        }
+        if (this.selection.dateTo < DATE_MAX) {
+          ret.push(this.selection.dateTo)
+        }
+      }
+      return ret
     },
     onClickFacetColumn(facetKey, columnName) {
       let settings = this.getFacetSettings(facetKey)
diff --git a/app/search.html b/app/search.html
index 2d2c200e5..a4034b752 100644
--- a/app/search.html
+++ b/app/search.html
@@ -110,9 +110,14 @@ <h2 class="title is-3">Filters
               </template>
 
               <p class="panel-heading">
-                Date Range
+                <a class="panel-expand" @click.stop.prevent="onClickFacetExpand('dat')" :title="isFacetExpanded('dat') ? 'Collapse' : 'Expand'">
+                  <template v-if="isFacetExpanded('dat')"><i class="fas fa-angle-down"></i></template>
+                  <template v-else><i class="fas fa-angle-right"></i></template>
+                  Date Range
+                  <span v-if="getSelectedOptionsCount('dat')">({{getSelectedOptionsCount('dat')}})</span>
+                </a>                
               </p>
-              <div class="panel-block search-phrase">
+              <div class="panel-block search-phrase" v-if="isFacetExpanded('dat')">
                 <label>After:
                   <input type="number" v-model="selection.dateFrom" class="input">
                 </label>