332 lines
17 KiB
Plaintext
332 lines
17 KiB
Plaintext
---
|
||
import { client } from '../../db/typesense';
|
||
import { clerkClient } from '@clerk/astro/server';
|
||
|
||
const { userId, has } = Astro.locals.auth();
|
||
const TARGET_ORG_ID = 'org_3Baav9czkRLLlC7g89oJWqRRulK';
|
||
|
||
let hasAccess = has({ feature: 'inventory_add' });
|
||
|
||
if (!hasAccess && userId) {
|
||
const memberships = await clerkClient(Astro).users.getOrganizationMembershipList({ userId });
|
||
hasAccess = memberships.data.some(m => m.organization.id === TARGET_ORG_ID);
|
||
}
|
||
|
||
import RarityIcon from '../../components/RarityIcon.astro';
|
||
import FirstEditionIcon from "../../components/FirstEditionIcon.astro";
|
||
export const prerender = false;
|
||
|
||
import * as util from 'util';
|
||
|
||
|
||
// all the facet fields we want to use for filtering
|
||
const facetFields:any = {
|
||
//"productLineName": "Product Line",
|
||
"setName": "Set",
|
||
"variant": "Variant",
|
||
"rarityName": "Rarity",
|
||
"cardType": "Card Type",
|
||
"energyType": "Energy Type"
|
||
}
|
||
|
||
// ── Allowed sort values ───────────────────────────────────────────────────
|
||
const sortMap: Record<string, string> = {
|
||
'releaseDate:desc,number:asc': '_text_match:asc,releaseDate:desc,number:asc',
|
||
'releaseDate:asc,number:asc': '_text_match:asc,releaseDate:asc,number:asc',
|
||
'marketPrice:desc': 'marketPrice:desc,releaseDate:desc,number:asc',
|
||
'marketPrice:asc': 'marketPrice:asc,releaseDate:desc,number:asc',
|
||
'number:asc': '_text_match:asc,number:asc',
|
||
'number:desc': '_text_match:asc,number:desc',
|
||
};
|
||
const DEFAULT_SORT = '_text_match:asc,releaseDate:desc,number:asc';
|
||
|
||
// get the query from post request using form data
|
||
const formData = await Astro.request.formData();
|
||
const query = formData.get('q')?.toString() || '';
|
||
const start = Number(formData.get('start')?.toString() || '0');
|
||
const sortKey = formData.get('sort')?.toString() || '';
|
||
const resolvedSort = sortMap[sortKey] ?? DEFAULT_SORT;
|
||
|
||
// ── Language filter ───────────────────────────────────────────────────────
|
||
// Expects a `language` field on your card documents in Typesense.
|
||
// Valid values: 'en', 'jp' — anything else (or 'all') means no filter.
|
||
const language = formData.get('language')?.toString() || 'all';
|
||
const languageFilter = language === 'en' ? " && productLineName:=`Pokemon`"
|
||
: language === 'jp' ? " && productLineName:=`Pokemon Japan`"
|
||
: '';
|
||
|
||
// ── Query alias expansion ─────────────────────────────────────────────────
|
||
// Intercepts known shorthand queries that can't be handled by Typesense
|
||
// synonyms alone (e.g. terms that need to match across multiple set names)
|
||
// and rewrites them into a direct filter, clearing the query so it doesn't
|
||
// also try to text-match against card names.
|
||
const EREADER_SETS = ['Expedition Base Set', 'Aquapolis', 'Skyridge', 'Battle-e'];
|
||
const EREADER_RE = /^(e-?reader|e reader)$/i;
|
||
|
||
let resolvedQuery = query;
|
||
let queryFilter = '';
|
||
|
||
if (EREADER_RE.test(query.trim())) {
|
||
resolvedQuery = '';
|
||
queryFilter = `setName:=[${EREADER_SETS.map(s => '`' + s + '`').join(',')}]`;
|
||
}
|
||
|
||
const filters = Array.from(formData.entries())
|
||
.filter(([key]) => key !== 'q' && key !== 'start' && key !== 'sort' && key !== 'language')
|
||
.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.map(v => '`'+v+'`').join(',')}]`;
|
||
}).join(' && ');
|
||
|
||
const facetFilter = (facet:string) => {
|
||
const otherFilters = Object.entries(filters)
|
||
.filter(([field]) => field !== facet)
|
||
.map(([field, values]) => `${field}:=[${values.map(v => '`'+v+'`').join(',')}]`)
|
||
.join(' && ');
|
||
// Language filter is always included so facet counts stay accurate
|
||
return `sealed:false${languageFilter}${queryFilter ? ` && ${queryFilter}` : ''}${otherFilters ? ` && ${otherFilters}` : ''}`;
|
||
};
|
||
|
||
|
||
// primary search values (for cards)
|
||
let searchArray = [{
|
||
collection: 'cards',
|
||
filter_by: `$skus(id:*) && sealed:false${languageFilter}${queryFilter ? ` && ${queryFilter}` : ''}${filterBy ? ` && ${filterBy}` : ''}`,
|
||
per_page: 20,
|
||
facet_by: '',
|
||
max_facet_values: 0,
|
||
page: Math.floor(start / 20) + 1,
|
||
sort_by: resolvedSort,
|
||
include_fields: '$skus(*)',
|
||
}];
|
||
|
||
// on first load (start === 0) we want to get the facets for the filters
|
||
if (start === 0) {
|
||
for (const facet of Object.keys(facetFields)) {
|
||
searchArray.push({
|
||
collection: 'cards',
|
||
filter_by: facetFilter(facet),
|
||
per_page: 0,
|
||
facet_by: facet,
|
||
max_facet_values: 500,
|
||
page: 1,
|
||
sort_by: '',
|
||
include_fields: '',
|
||
});
|
||
}
|
||
}
|
||
|
||
const searchRequests = { searches: searchArray };
|
||
const commonSearchParams = {
|
||
q: resolvedQuery,
|
||
query_by: 'content,setName,productLineName,rarityName,energyType,cardType'
|
||
};
|
||
|
||
// use typesense to search for cards matching the query and return the productIds of the results
|
||
const searchResults = await client.multiSearch.perform(searchRequests, commonSearchParams);
|
||
const cardResults = searchResults.results[0] as any;
|
||
|
||
const pokemon = cardResults.hits?.map((hit: any) => hit.document) ?? [];
|
||
const totalHits = cardResults?.found;
|
||
|
||
|
||
// format price to 2 decimal places (or 0 if price >=100) and adds a $ sign, if the price is null it returns "–"
|
||
const formatPrice = (condition:string, skus: any) => {
|
||
if (typeof skus === 'undefined' || skus.length === 0) return '—';
|
||
const sku:any = skus.find((price:any) => price.condition === condition);
|
||
if (typeof sku === 'undefined' || typeof sku.marketPrice === 'undefined') return '—';
|
||
|
||
const price = Number(sku.marketPrice) / 100.0;
|
||
if (price > 99.99) return `$${Math.round(price)}`;
|
||
return `$${price.toFixed(2)}`;
|
||
};
|
||
|
||
const conditionOrder = ["Near Mint", "Lightly Played", "Moderately Played", "Heavily Played", "Damaged"];
|
||
const conditionShort = (condition:string) => {
|
||
return {
|
||
"Near Mint": "NM",
|
||
"Lightly Played": "LP",
|
||
"Moderately Played": "MP",
|
||
"Heavily Played": "HP",
|
||
"Damaged": "DMG"
|
||
}[condition] || condition.split(' ').map((w) => w[0]).join('');
|
||
}
|
||
|
||
const facetNames = (name:string) => {
|
||
return facetFields[name] || name;
|
||
}
|
||
|
||
const facets = searchResults.results.slice(1).map((result: any) => {
|
||
const facet = result.facet_counts?.[0];
|
||
if (!facet) return null;
|
||
|
||
// Sort: checked items first, then alphabetically
|
||
facet.counts = facet.counts.sort((a: any, b: any) => {
|
||
const aChecked = filters[facet.field_name]?.includes(a.value) ?? false;
|
||
const bChecked = filters[facet.field_name]?.includes(b.value) ?? false;
|
||
if (aChecked && !bChecked) return -1;
|
||
if (!aChecked && bChecked) return 1;
|
||
return a.value.localeCompare(b.value);
|
||
});
|
||
|
||
return facet;
|
||
}).filter(Boolean);
|
||
|
||
---
|
||
|
||
{(start === 0) &&
|
||
|
||
<div id="facetContainer" hx-swap-oob="true">
|
||
<div class="bg-dark sticky-top p-2 d-flex justify-content-end align-items-center">
|
||
<button type="button" data-bs-dismiss="offcanvas" class="btn btn-danger me-2" id="clear-filters">Clear</button>
|
||
<button type="submit" form="searchform" data-bs-dismiss="offcanvas" class="btn btn-success">Apply Filters</button>
|
||
</div>
|
||
{facets.map((facet) => (
|
||
<div class="mt-2 mb-4 facet-group row align-items-center justify-content-between">
|
||
<div class="fs-5 m-0 col-auto pb-1 border-bottom border-light-subtle">{facetNames(facet.field_name)}</div>
|
||
{(facet.counts.length > 20) &&
|
||
<input class="facet-filter form-control col-auto me-3" type="text" id={`filter_${facet.field_name}`} placeholder="Search..." />
|
||
}
|
||
<div class="facet-list col-12 mt-2">
|
||
{facet.counts.map((count:any) => (
|
||
<div class="facet-item form-check form-switch" data-facet-value={count.value.toLowerCase()}>
|
||
<label class="form-check-label fs-7">
|
||
<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} <span class="badge text-bg-light align-baseline">{count.count}</span>
|
||
</label>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div id="sortBy" class="d-flex flex-fill align-items-center me-auto gap-2" hx-swap-oob="true">
|
||
<div class="dropdown">
|
||
<button class="btn btn-sm btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Sort by</button>
|
||
<ul class="dropdown-menu dropdown-menu-dark">
|
||
<li><a class="dropdown-item sort-option" href="#" data-sort="releaseDate:desc,number:asc" data-label="Set: Newest to Oldest">Set: Newest to Oldest</a></li>
|
||
<li><a class="dropdown-item sort-option" href="#" data-sort="releaseDate:asc,number:asc" data-label="Set: Oldest to Newest">Set: Oldest to Newest</a></li>
|
||
<li><a class="dropdown-item sort-option" href="#" data-sort="marketPrice:desc" data-label="Price: High to Low">Price: High to Low</a></li>
|
||
<li><a class="dropdown-item sort-option" href="#" data-sort="marketPrice:asc" data-label="Price: Low to High">Price: Low to High</a></li>
|
||
<li><a class="dropdown-item sort-option" href="#" data-sort="number:asc" data-label="Card Number: Ascending">Card Number: Ascending</a></li>
|
||
<li><a class="dropdown-item sort-option" href="#" data-sort="number:desc" data-label="Card Number: Descending">Card Number: Descending</a></li>
|
||
</ul>
|
||
</div>
|
||
<span id="sortLabel" class="ms-1 text-secondary small">{sortKey ? ({"releaseDate:desc,number:asc":"Set: Newest to Oldest","releaseDate:asc,number:asc":"Set: Oldest to Newest","marketPrice:desc":"Price: High to Low","marketPrice:asc":"Price: Low to High","number:asc":"Card Number: Ascending","number:desc":"Card Number: Descending"}[sortKey] ?? '') : ''}</span>
|
||
<div class="btn-group btn-group-sm ms-2 flex-shrink-0" role="group" aria-label="Language filter">
|
||
<button type="button" class={`btn btn-dark language-btn${language === 'all' ? ' active' : ''}`} data-lang="all">All</button>
|
||
<button type="button" class={`btn btn-dark language-btn${language === 'en' ? ' active' : ''}`} data-lang="en">EN</button>
|
||
<button type="button" class={`btn btn-dark language-btn${language === 'jp' ? ' active' : ''}`} data-lang="jp">JP</button>
|
||
</div>
|
||
</div>
|
||
<div id="totalResults" class="d-flex text-secondary small d-none align-items-center" hx-swap-oob="true">
|
||
{totalHits} {totalHits === 1 ? ' result' : ' results'}
|
||
</div>
|
||
<div id="activeFilters" class="d-flex small ms-auto align-items-center" hx-swap-oob="true">
|
||
{(Object.entries(filters).length > 0) &&
|
||
<span class="me-1 small">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 small p-2 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
|
||
const facetfilters = document.querySelectorAll('.facet-filter');
|
||
for (const facetfilter of facetfilters) {
|
||
const facetgroup = facetfilter.closest('.facet-group');
|
||
const facetlist = facetgroup.querySelector('.facet-list');
|
||
const facetitems = facetlist.querySelectorAll('.facet-item');
|
||
facetfilter.addEventListener('input', (e) => {
|
||
const match = e.target.value.toLowerCase();
|
||
for (const item of facetitems) {
|
||
const text = item.getAttribute('data-facet-value');
|
||
if (text.includes(match)) item.style.display = ''; // Show
|
||
else item.style.display = 'none'; // Hide
|
||
}
|
||
});
|
||
}
|
||
|
||
// Clear all facets and resubmit the form with only the text box
|
||
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));
|
||
const clearAllBtn = document.getElementById('clear-all-filters');
|
||
if (clearAllBtn) clearAllBtn.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>
|
||
}
|
||
|
||
{pokemon.length === 0 && (
|
||
<div id="notfound" hx-swap-oob="true">
|
||
Pokemon not found
|
||
</div>
|
||
)}
|
||
|
||
{pokemon.map((card:any) => (
|
||
<div class="col">
|
||
{/* {hasAccess && ( */}
|
||
<button type="button" class="btn btn-sm inventory-button position-relative float-end shadow-filter text-center p-2" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="event.stopPropagation(); sessionStorage.setItem('openModalTab', 'nav-vendor');">
|
||
<b>+/–</b>
|
||
</button>
|
||
{/* )} */}
|
||
<div class="card-trigger position-relative" data-card-id={card.cardId} hx-get={`/partials/card-modal?cardId=${card.cardId}`} hx-target="#cardModal" hx-trigger="click" data-bs-toggle="modal" data-bs-target="#cardModal" onclick="const cardTitle = this.querySelector('#cardImage').getAttribute('alt'); dataLayer.push({'event': 'virtualPageview', 'pageUrl': this.getAttribute('hx-get'), 'pageTitle': cardTitle, 'previousUrl': '/pokemon'});">
|
||
<div class="image-grow rounded-4 card-image" data-energy={card.energyType} data-rarity={card.rarityName} data-variant={card.variant} data-name={card.productName}><img src={`/static/cards/${card.productId}.jpg`} alt={card.productName} id="cardImage" loading="lazy" decoding="async" class="img-fluid rounded-4 mb-2 w-100" onerror="this.onerror=null; this.src='/static/cards/default.jpg'; this.closest('.image-grow')?.setAttribute('data-default','true')"/><span class="position-absolute top-50 start-0 d-inline medium-icon"><FirstEditionIcon edition={card?.variant} /></span>
|
||
<div class="holo-shine"></div>
|
||
<div class="holo-glare"></div>
|
||
</div>
|
||
</div>
|
||
<div class="row row-cols-5 gx-1 price-row mb-2">
|
||
{conditionOrder.map((condition) => (
|
||
<div class="col price-label ps-1">
|
||
{ conditionShort(condition) }
|
||
<br />{formatPrice(condition, card.skus)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<div class="h5 my-0">{card.productName}</div>
|
||
<div class="d-flex flex-row lh-1 mt-1 justify-content-between">
|
||
<div class="text-secondary flex-grow-1 d-none d-lg-flex">{card.setName}</div>
|
||
<div class="text-body-tertiary">{card.number}</div>
|
||
<span class="ps-2 small-icon"><RarityIcon rarity={card.rarityName} /></span>
|
||
</div>
|
||
<div class="text-body-tertiary">{card.variant}</div><span class="d-none">{card.productId}</span>
|
||
</div>
|
||
|
||
))}
|
||
{start + 20 < totalHits &&
|
||
<div hx-post="/partials/cards" hx-trigger="revealed" hx-include="#searchform" hx-target="#cardGrid" hx-swap="beforeend" hx-on--after-request="afterUpdate(event)">
|
||
Loading...
|
||
</div>
|
||
} |