From 1f521afa3a692f1d74e377e5a66d81da5a3623d1 Mon Sep 17 00:00:00 2001
From: Thad Miller <thad.miller@gmail.com>
Date: Mon, 2 Mar 2026 16:13:24 -0500
Subject: [PATCH] [feat] facet clearing buttons working

---
 src/components/CardGrid.astro  | 13 ++-----------
 src/pages/partials/cards.astro | 34 ++++++++++++++++++++++++++++++----
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/src/components/CardGrid.astro b/src/components/CardGrid.astro
index 2614bc9..78c4d04 100644
--- a/src/components/CardGrid.astro
+++ b/src/components/CardGrid.astro
@@ -15,17 +15,8 @@ import BackToTop from "./BackToTop.astro"
         </div>
     </div>
     <div class="col-sm-12 col-md-9 mt-0">
-        <div id="activeFilters" class="mb-2 d-flex align-items-center justify-content-end small">
-            <span class="me-1">Filtered by:</span>
-            <ul class="list-group list-group-horizontal">
-                <li class="list-group-item border-0">Filter 1</li>
-                <li class="list-group-item border-0">Filter 2</li>
-                <li class="list-group-item border-0">Filter 3</li>
-            </ul>
-            <span class="ms-2"><button type="button" class="btn-close" aria-label="Clear all filters"></button></span>
-        </div>
-        <div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xxl-4 row-cols-xxxl-5">
-        </div>
+        <div id="activeFilters" class="mb-2 d-flex align-items-center justify-content-end small"></div>
+        <div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xxl-4 row-cols-xxxl-5"></div>
         <div id="notfound"></div>
     </div>
 </div>
diff --git a/src/pages/partials/cards.astro b/src/pages/partials/cards.astro
index 048d57c..58a5663 100644
--- a/src/pages/partials/cards.astro
+++ b/src/pages/partials/cards.astro
@@ -145,6 +145,21 @@ const facets = searchResults.results.slice(1).map((result: any) => {
         ))}
     </div>
 
+    <div id="activeFilters" class="mb-2 d-flex align-items-center justify-content-end small" hx-swap-oob="true">
+        {(Object.entries(filters).length > 0) && 
+        <span class="me-1">Filtered by:</span>
+        <ul class="list-group list-group-horizontal">
+            {Object.entries(filters).map(([filter, values]) => (
+                values.map((value) => (
+                    <li data-facet={filter} data-value={value} class="list-group-item remove-filter">{value}</li>
+                ))
+            ))}
+        </ul>
+        <span class="ms-2"><button type="button" class="btn-close" aria-label="Clear all filters" id="clear-all-filters"></button></span>
+        }
+    </div>
+
+
     <script define:vars={{ totalHits, filters, facets }} is:inline>
 
         // Filter the facet values to make things like Set easier to find
@@ -164,14 +179,25 @@ const facets = searchResults.results.slice(1).map((result: any) => {
         }
         
         // Clear all facets and resubmit the form with only the text box
-        const clearfilters = document.getElementById('clear-filters');
-        clearfilters.addEventListener('click', (e) => {
-            const facetContainer = clearfilters.closest('#facetContainer');
+        const clearAllFilters = (e) => {
+            const facetContainer = document.getElementById('facetContainer');
             for (const item of facetContainer.querySelectorAll('input[type=checkbox]')) {
                 item.checked = false;
             }
             document.getElementById('searchform').dispatchEvent(new Event('submit', {bubbles:true, cancelable:true}));
-        });
+        }
+        document.getElementById('clear-filters').addEventListener('click', (e) => clearAllFilters(e));
+        document.getElementById('clear-all-filters').addEventListener('click', (e) => clearAllFilters(e));
+
+        // Remove single facet value
+        for (const li of document.querySelectorAll('.remove-filter')) {
+            li.addEventListener('click', (e) => {
+                const filter = li.getAttribute('data-facet');
+                const value = li.getAttribute('data-value');
+                document.querySelector(`.form-check-input[name="${filter}"][value="${value}"]`).checked = false;
+                document.getElementById('searchform').dispatchEvent(new Event('submit', {bubbles:true, cancelable:true}));
+            });
+        }
         
     </script>
 }