feat(egazette): add filtering

isomerpages · Mar 27, 2024 · c6a5620 · c6a5620
1 parent 8e46e5e
commit c6a5620
Show file tree

Hide file tree

Showing 4 changed files with 107 additions and 62 deletions.
diff --git a/_includes/main_scripts.html b/_includes/main_scripts.html
@@ -82,7 +82,6 @@
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/algoliasearch-lite.umd.js" integrity="sha256-DABVk+hYj0mdUzo+7ViJC6cwLahQIejFvC+my2M/wfM=" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.production.min.js" integrity="sha256-9242vN47QUX50UG5Gf5XDO1YREWCEJRyXHofh5fsl24=" crossorigin="anonymous"></script>
   <script src="{{- "/assets/js/algolia-search.js" | relative_url -}}" crossorigin="anonymous"></script>
-  <div>test</div>
 {%- endif -%}
 
 {%- include chatbot-scripts.html -%}

diff --git a/_layouts/egazette-search.html b/_layouts/egazette-search.html
@@ -39,48 +39,59 @@ <h1 class="has-text-white"><b>{{- page.title -}}</b></h1>
     </div>
   </div>
 </section>
-<div style="display: flex; margin: 2rem">
-<div>   
-  <h5>Select category</h5>
-  <div id="refinement-list-category"></div>
-  <h5>Select sub-category test changes</h5>
-  <div id="refinement-list-subcategory"></div>
-  <h5>Select date</h5>
-  <div id="refinement-list-date"></div>
-  <h5>Select number</h5>
-  <div id="refinement-list-number"></div>
-  <!-- <div id="current-refinements"></div>
-  <div id="clear-refinements"></div> -->
-</div>
-  <section class="bp-section">
-    <div class="bp-container search-content">
-      <div class="is-flex col is-offset-2 search-label-options">
-        <h5>Search results</h5>
-        <div class="row search-hits-options">
-          <div id="hits-per-page" class="sgds-selector p-0"></div>
-        </div>
+<section class="bp-section">
+  <div class="bp-container search-content">
+    <div class="row">
+      <div class="col is-3 is-offset-1">   
+        <h5 class="margin--bottom--sm">Select category</h5>
+        <div id="refinement-list-category" class="margin--bottom"></div>
+
+        <h5 class="margin--bottom--sm">Select sub-category</h5>
+        <div id="refinement-list-subcategory" class="margin--bottom"></div>
+
+        <h5 class="margin--bottom--sm">Select day</h5>
+        <div id="refinement-list-day" class="margin--bottom"></div>
+
+        <h5 class="margin--bottom--sm">Select month</h5>
+        <div id="refinement-list-month" class="margin--bottom"></div>
+
+        <h5 class="margin--bottom--sm">Select year</h5>
+        <div id="refinement-list-year" class="margin--bottom"></div>
+
+        <h5 class="margin--bottom--sm">Select number</h5>
+        <div id="refinement-list-number" class="margin--bottom"></div>
+        <!-- <div id="current-refinements"></div>
+        <div id="clear-refinements"></div> -->
       </div>
-      <div class="row">
-        <div id="range-input"></div>
-        <!-- TODO -->
-        <div id="loading-spinner">
+
+      <div class="col is-8 margin--left">
+        <div class="is-flex row">
+            <div class="col is-9">
+              <h3>Search results</h3>
+              <div id="stats"></div>
+              <div id="current-refinements"></div>
+              <div id="clear-refinements"></div>
+            </div>
+            <div class="col">
+              <div id="hits-per-page"></div>
+            </div>
         </div>
-        <div class="col is-8 is-offset-2 search-results-display">
-          <div>
-            <div class="search-summary">
-              <!-- Not including total search results - we can only retrieve up to 1000 so the number might be inaccurate -->
-              <h4 class="search-results-count" id="search-results-count"></h4>
-              <small id="search-page-indicator"></small>
+        <div class="row">
+          <div id="range-input"></div>
+          <!-- TODO -->
+          <div id="loading-spinner">
+          </div>
+          <div class="col search-results-display">
+            <div>
+              <h5 class="search-results" id="hits"></h5>
             </div>
-            <br />
-            <h5 class="search-results" id="hits"></h5>
           </div>
-
         </div>
       </div>
     </div>
+     </div>
   </section>
-</div>
+
 <div id="paginator-pages">
   <div id="pagination"></div>
 </div>

diff --git a/assets/css/algolia.css b/assets/css/algolia.css
@@ -40,4 +40,19 @@
 .ais-PoweredBy a {
   display: flex;
   align-items: center;
-}
+}
+
+.ais-CurrentRefinements-delete {
+  height: auto;
+}
+
+/* copying over from ais-ClearRefinements-item */
+.ais-ClearRefinements-button {
+  width: auto;
+  height: auto;
+  margin-top: 0.5rem;
+}
+
+.ais-ClearRefinements-button[disabled] {
+  display: none;
+}
diff --git a/assets/js/algolia-search.js b/assets/js/algolia-search.js
@@ -4,7 +4,7 @@ const searchClient = algoliasearch(
 );
 
 const search = instantsearch({
-  indexName: "staging_ogp_egazettes_index",
+  indexName: "kishore_test_ogp_egazettes_index", //"staging_ogp_egazettes_index",
   searchClient,
 });
 
@@ -15,6 +15,29 @@ search.addWidgets([
     autofocus: true,
     placeholder: "Start typing to search",
   }),
+  instantsearch.widgets.stats({
+    container: "#stats",
+    templates: {
+      text(data, { html }) {
+        let content = "";
+
+        if (data.hasManyResults) {
+          if (data.nbHits > 1000) {
+            content += `More than 1000 results found`;
+          } else {
+            content += `${data.nbHits} results found`;
+          }
+        } else if (data.hasOneResult) {
+          content += `1 result found`;
+        } else {
+          content += `no result found`;
+        }
+
+        return html`<p>${content}</p>`;
+      },
+    },
+  }),
+
   instantsearch.widgets.poweredBy({
     container: "#poweredby",
     theme: "dark",
@@ -28,27 +51,23 @@ search.addWidgets([
     attribute: "subCategory",
   }),
   instantsearch.widgets.refinementList({
-    container: "#refinement-list-date",
-    attribute: "publishDate",
-
-    transformItems(items) {
-      return items.map((item) => ({
-        ...item,
-        highlighted: item.highlighted.slice(0, 10),
-        label: item.label.slice(0, 10),
-      }));
-    },
+    container: "#refinement-list-year",
+    attribute: "publishYear",
+    searchable: true,
   }),
   instantsearch.widgets.refinementList({
     container: "#refinement-list-number",
     attribute: "notificationNum",
   }),
-  // instantsearch.widgets.currentRefinements({
-  //   container: "#current-refinements",
-  // }),
-  // instantsearch.widgets.clearRefinements({
-  //   container: "#clear-refinements",
-  // }),
+  instantsearch.widgets.currentRefinements({
+    container: "#current-refinements",
+    cssClasses: {
+      delete: "currentRefinementsIsomer",
+    },
+  }),
+  instantsearch.widgets.clearRefinements({
+    container: "#clear-refinements",
+  }),
   instantsearch.widgets.hits({
     container: "#hits",
     templates: {
@@ -87,15 +106,16 @@ search.addWidgets([
             <p class="search-content description ml-9">Publish date: ${new Date(
               hit.publishTimestamp
             ).toLocaleDateString("fr-CA")}</p>
-            ${hit.text 
-              ? `<p class="search-content description ml-9">Content: ${instantsearch.snippet(
-                {
-                  attribute: "text",
-                  highlightedTagName: "mark",
-                  hit,
-                }
-              )}</p>`
-              : ""
+            ${
+              hit.text
+                ? `<p class="search-content description ml-9">Content: ${instantsearch.snippet(
+                    {
+                      attribute: "text",
+                      highlightedTagName: "mark",
+                      hit,
+                    }
+                  )}</p>`
+                : ""
             }
             <p>
              </h5>