From 4992890503161318d8215764607e67c124e8cfc4 Mon Sep 17 00:00:00 2001
From: Thad Miller <thaddeus.miller@lonza.com>
Date: Thu, 16 Jul 2026 16:21:19 -0400
Subject: [PATCH] [feat] inventory search working

---
 src/pages/dashboard.astro | 48 +++++++++++++++++++++++++++------------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/pages/dashboard.astro b/src/pages/dashboard.astro
index 9fc42f3..5174524 100644
--- a/src/pages/dashboard.astro
+++ b/src/pages/dashboard.astro
@@ -103,24 +103,28 @@ const catalogs = catalogRows
 
         <div class="ms-auto position-relative">
         <div class="input-group">
-            <input type="hidden" name="start" id="start" value="0" />
-            <input type="hidden" name="sort" id="sortInput" value="" />
-            <input type="hidden" name="language" id="languageInput" value="all" />
-            <input type="search" name="i" id="searchInput" class="form-control search-input" placeholder="Search your inventory" />
+            <input
+                type="search"
+                name="q"
+                id="inventorySearchInput"
+                class="form-control search-input"
+                placeholder="Search your inventory"
+                hx-post="/partials/inventory-cards"
+                hx-trigger="keyup[key=='Enter']"
+                hx-target="#gridView"
+                hx-swap="innerHTML"
+                hx-vals="js:{start: 0, catalog: document.querySelector('#catalogList li[data-catalog].active')?.dataset.catalog || 'all'}"
+            />
             <button
-                type="submit"
+                type="button"
+                id="inventorySearchBtn"
                 class="btn btn-purple border-start-0"
                 aria-label="search"
-                onclick="
-                    const i = this.closest('form').querySelector('[name=i]').value;
-                    dataLayer.push({ event: 'view_inventory_results', search_term: i });
-                    if (window.location.pathname !== '/dashboard') {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        sessionStorage.setItem('pendingSearch', 1);
-                        window.location.href = '/dashboard';
-                    }
-                "
+                hx-post="/partials/inventory-cards"
+                hx-include="#inventorySearchInput"
+                hx-target="#gridView"
+                hx-swap="innerHTML"
+                hx-vals="js:{start: 0, catalog: document.querySelector('#catalogList li[data-catalog].active')?.dataset.catalog || 'all'}"
             >
                 <svg aria-hidden="true" class="search-button d-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M503.7 304.9C520.3 80.3 214-44 100.9 169.4C-14.1 383.9 203.9 614.6 419.8 466.3C459.7 500.3 494.8 542.3 531.5 578.2C561.1 607.7 606.3 562.8 576.8 533L540 496.1C520.2 471.6 495.7 449.1 473.7 428.9C471.1 426.5 468.5 424.2 466 421.9C491.9 385.4 500.1 341 503.7 304.8zM236.1 129C334 92.1 452.1 198.1 440 298.6C440.5 404.9 335.6 462.2 244 445.8C99 407.1 100.3 178.9 236.2 129z"/></svg>
             </button>
@@ -176,14 +180,28 @@ const catalogs = catalogRows
 <script is:inline>
 (function () {
   const catalogList = document.getElementById('catalogList');
+  const searchInput = document.getElementById('inventorySearchInput');
+  const searchBtn = document.getElementById('inventorySearchBtn');
+
   if (catalogList) {
     catalogList.addEventListener('click', (e) => {
       const li = e.target.closest('li[data-catalog]');
       if (!li) return;
       catalogList.querySelectorAll('li[data-catalog]').forEach(el => el.classList.remove('active'));
       li.classList.add('active');
+      // switching catalogs clears the search box so its contents don't misrepresent the grid
+      if (searchInput) searchInput.value = '';
     });
   }
+
+  // analytics only — the search request itself is fired declaratively via htmx attributes
+  function pushSearchEvent() {
+    if (window.dataLayer) {
+      window.dataLayer.push({ event: 'view_inventory_results', search_term: searchInput?.value.trim() || '' });
+    }
+  }
+  searchBtn?.addEventListener('click', pushSearchEvent);
+  searchInput?.addEventListener('keyup', (e) => { if (e.key === 'Enter') pushSearchEvent(); });
 })();
 
 // ── Bulk CSV import ──────────────────────────────────────────────────────