[wip] facets are functional

src/pages/partials/cards.astro

@@ -9,17 +9,36 @@ export const prerender = false;
 const formData = await Astro.request.formData();
 const query = formData.get('q')?.toString() || '';
 const start = Number(formData.get('start')?.toString() || '0');
+const filters = Array.from(formData.entries())
+    .filter(([key, value]) => key !== 'q' && key !== 'start')
+    .reduce((acc, [key, value]) => {
+        if (!acc[key]) {
+            acc[key] = [];
+        }
+        acc[key].push(value.toString());
+        return acc;
+    }, {} as Record<string, string[]>);
+
+const filterChecked = (field: string, value: string) => {
+    return (filters[field]?.includes(value) ?? false) ? 'checked' : '';
+};
+
+const filterBy = Object.entries(filters).map(([field, values]) => {
+    return `${field}:=[${values.join(',')}]`;
+}).join(' && ');
 
 // use typesense to search for cards matching the query and return the productIds of the results
 const searchResults = await client.collections('cards').documents().search({
     q: query,
-    filter_by: 'sealed:false',
+    filter_by: `sealed:false${filterBy ? ` && ${filterBy}` : ''}`,
     query_by: 'productLineName,productName,setName,number,rarityName,Artist',
     per_page: 20,
+    facet_by: 'productLineName,setName,rarityName,cardType,energyType',
     page: Math.floor(start / 20) + 1,
 });
 const productIds = searchResults.hits?.map((hit: any) => hit.document.productId) ?? [];
 const totalHits = searchResults.found;
+const facets = searchResults.facet_counts;
 
 // get pokemon data with prices and set info using searchResults and then query the database for each card to get the prices and set info
 const pokemon = await db.query.cards.findMany({
@@ -51,12 +70,41 @@ const conditionShort = (condition:string) => {
     }[condition] || condition.split(' ').map((w) => w[0]).join('');
 }
 
+const facetNames = (name:string) => {
+    return {
+        "productLineName": "Product Line",
+        "setName": "Set",
+        "rarityName": "Rarity",
+        "cardType": "Card Type",
+        "energyType": "Energy Type"
+    }[name] || name;
+}
+
 ---
 {(start === 0) &&
-    <script define:vars={{ totalHits }} is:inline>
+    <script define:vars={{ totalHits, filters, facets }} is:inline>
         let hits = totalHits;
     </script>
+
+    <div id="facetContainer" hx-swap-oob="true">
+        {facets.map((facet) => (
+            <div class="mb-4">
+                <div class="h5">{facetNames(facet.field_name)}</div>
+                {facet.counts.map((count) => (
+                    <div>
+                        <label class="form-check-label">
+                            <!--<input type="checkbox" name={facet.field_name} value={count.value} class="form-check-input" hx-get="/partials/cards" hx-target="#cardGrid" hx-include="#searchform" hx-trigger="change" hx-swap="outerHTML" hx-on--after-request="afterUpdate(event)" /> -->
+                            <input type="checkbox" name={facet.field_name} value={count.value} checked={filterChecked(facet.field_name, count.value)} class="form-check-input" form="searchform" />
+                            {count.value} ({count.count})
+                        </label>
+                    </div>
+                ))}
+            </div>
+        ))}
+    </div>
+
 }
+
 {pokemon.map((card) => (
     <div class="col">
         <div class="inventory-button position-relative float-end shadow-filter text-center d-none">