tmiller/pokemon
1
0
Fork 1
Code Issues 8 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

[feat] inventory search working

Browse Source
This commit is contained in:
Thad Miller
2026-07-16 16:21:19 -04:00
parent 0858d3eaec
commit 4992890503
1 changed files with 33 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/dashboard.astro
View File

@@ -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 ──────────────────────────────────────────────────────