feat: add month filter

isomerpages · Nov 6, 2024 · d913899 · d913899
1 parent c51d5d3
commit d913899
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 2 deletions.
diff --git a/_layouts/egazette-search-landing.html b/_layouts/egazette-search-landing.html
@@ -25,6 +25,12 @@ <h2 class="h2 pb-3"><b>{{- page.title -}}</b></h2>
           <p class="date-dash">~</p>
           <input class="input date-input" id="input-end-date" type="text" inputmode="numeric" placeholder="End year" name="end-date" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
         </div>
+        <div class="subhead-1"><b>Month</b></div>
+        <div class="is-flex algolia-landing-date-container">
+          <input class="input date-input" id="input-start-month" type="text" inputmode="numeric" placeholder="Start month (e.g. 1)" name="start-month" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
+          <p class="date-dash">~</p>
+          <input class="input date-input" id="input-end-month" type="text" inputmode="numeric" placeholder="End month (e.g. 12)" name="end-month" autocomplete="off" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');">
+        </div>
         <div>
           <div class="subhead-1"><b>Category</b></div>
           <div class="datagov-v2-browsing pb-4">Please refer to the FAQ on the sub-categories below</div>

diff --git a/_layouts/egazette-search.html b/_layouts/egazette-search.html
@@ -37,6 +37,11 @@ <h5 class="margin--bottom--sm subtitle-1">Year</h5>
           <div id="refinement-list-year" class="margin--bottom"></div>
           <hr class="algolia-search-divider"/>
         </div>
+        <div id="refinement-list-month-container">
+          <h5 class="margin--bottom--sm subtitle-1">Month</h5>
+          <div id="refinement-list-month" class="margin--bottom"></div>
+          <hr class="algolia-search-divider"/>
+        </div>
       </div>
 
       <div class="col is-8 margin--left">

diff --git a/assets/css/algolia.css b/assets/css/algolia.css
@@ -153,7 +153,9 @@
 }
 #algolia-search-box-landing,
 #input-start-date,
-#input-end-date {
+#input-end-date,
+#input-start-month,
+#input-end-month {
   border: 1px solid;
   border-radius: 4px;
   border-color: var(--color-divider-medium, #d0d0d0);
@@ -212,6 +214,10 @@
   display: none;
 }
 
+.ais-RangeInput-label {
+  flex: 1;
+}
+
 .algolia-search-item-disabled {
   color: #cdcdc7;
 }
diff --git a/assets/js/algolia-search-landing.js b/assets/js/algolia-search-landing.js
@@ -123,6 +123,8 @@ function processSearch() {
 
   const startDateInput = document.getElementById("input-start-date").value
   const endDateInput = document.getElementById("input-end-date").value
+  const startMonthInput = document.getElementById("input-start-month").value
+  const endMonthInput = document.getElementById("input-end-month").value
 
   // Construct URL with query params
   const categoryFormElement = document.querySelector("#categoryForm");
@@ -143,6 +145,8 @@ function processSearch() {
   // Date range filters
   if (startDateInput) url += `&minYear=${encodeURIComponent(startDateInput)}`
   if (endDateInput) url += `&maxYear=${encodeURIComponent(endDateInput)}`
+  if (startMonthInput) url += `&minMonth=${encodeURIComponent(startMonthInput)}`
+  if (endMonthInput) url += `&maxMonth=${encodeURIComponent(endMonthInput)}`
 
   // Redirect to results page
   window.location.href = url;

diff --git a/assets/js/algolia-search.js b/assets/js/algolia-search.js
@@ -90,6 +90,9 @@ const search = instantsearch({
         const yearData = indexUiState.range?.publishYear ? indexUiState.range.publishYear.split(":") : undefined
         const minYear = (yearData && yearData[0]) ? yearData[0] : undefined
         const maxYear = (yearData && yearData[1]) ? yearData[1] : undefined
+        const monthData = indexUiState.range?.publishMonth ? indexUiState.range.publishMonth.split(":") : undefined
+        const minMonth = (monthData && monthData[0]) ? monthData[0] : undefined
+        const maxMonth = (monthData && monthData[1]) ? monthData[1] : undefined
         return {
           q: indexUiState.query ? encodeURIComponent(indexUiState.query) : undefined,
           category:
@@ -99,11 +102,15 @@ const search = instantsearch({
             indexUiState.refinementList.subCategory,
           minYear,
           maxYear,
+          minMonth,
+          maxMonth
         };
       },
       routeToState(routeState) {
         const hasPublishYear = routeState.minYear || routeState.maxYear
         const publishYear = hasPublishYear ? `${routeState.minYear || ""}: ${routeState.maxYear || ""}` : ""
+        const hasPublishMonth = routeState.minMonth || routeState.maxMonth
+        const publishMonth = hasPublishMonth ? `${routeState.minMonth || ""}: ${routeState.maxMonth || ""}` : ""
         return {
           [algoliaIndexName]: {
             query: routeState.q,
@@ -112,7 +119,8 @@ const search = instantsearch({
               subCategory: routeState.subCategory,
             },
             range: {
-              publishYear
+              publishYear,
+              publishMonth
             },
           },
         };
@@ -211,6 +219,10 @@ search.addWidgets([
     container: '#refinement-list-year',
     attribute: 'publishYear',
   }),
+  instantsearch.widgets.rangeInput({
+    container: '#refinement-list-month',
+    attribute: 'publishMonth',
+  }),
   instantsearch.widgets.currentRefinements({
     container: "#current-refinements",
     cssClasses: {