309 lines
8.9 KiB
Vue
309 lines
8.9 KiB
Vue
<script setup>
|
|
import { computed, onMounted, ref, watch } from "vue";
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
import { usePublicPage } from '@/composables/usePublicPage.js';
|
|
import { useCatalogSearch } from "@/composables/useCatalogSearch.js";
|
|
import {
|
|
listPublicCategories,
|
|
listPublicConditions,
|
|
} from "@/services/catalog-service.js";
|
|
import ListingCard from "@/components/molecules/ListingCard.vue";
|
|
import CatalogSortSelect from "@/components/atoms/CatalogSortSelect.vue";
|
|
import CatalogTextFilter from "@/components/atoms/CatalogTextFilter.vue";
|
|
import CatalogToggle from "@/components/atoms/CatalogToggle.vue";
|
|
|
|
const pageRoot = ref(null);
|
|
usePublicPage(pageRoot, () => 'Catalog');
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const categories = ref([]);
|
|
const conditions = ref([]);
|
|
const filtersOpen = ref(false);
|
|
const {
|
|
query,
|
|
category,
|
|
conditionId,
|
|
setName,
|
|
eventName,
|
|
tag,
|
|
status,
|
|
newlyAdded,
|
|
minPriceMinor,
|
|
maxPriceMinor,
|
|
sort,
|
|
page,
|
|
result,
|
|
isLoading,
|
|
error,
|
|
load,
|
|
goToPage,
|
|
} = useCatalogSearch({
|
|
initialQuery: typeof route.query.q === "string" ? route.query.q : "",
|
|
initialCategory:
|
|
typeof route.query.category === "string" ? route.query.category : "",
|
|
initialConditionId:
|
|
typeof route.query.conditionId === "string" ? route.query.conditionId : "",
|
|
initialSetName: typeof route.query.setName === "string" ? route.query.setName : "",
|
|
initialEventName: typeof route.query.eventName === "string" ? route.query.eventName : "",
|
|
initialTag: typeof route.query.tag === "string" ? route.query.tag : "",
|
|
initialStatus: typeof route.query.status === "string" ? route.query.status : "",
|
|
initialNewlyAdded: route.query.newlyAdded === "true",
|
|
initialMinPriceMinor: Number.parseInt(route.query.min, 10) || undefined,
|
|
initialMaxPriceMinor: Number.parseInt(route.query.max, 10) || undefined,
|
|
initialSort:
|
|
typeof route.query.sort === "string" ? route.query.sort : "recent",
|
|
initialPage: Number.parseInt(route.query.page, 10) || 1,
|
|
});
|
|
|
|
const activeFilterCount = computed(() => [
|
|
category.value,
|
|
conditionId.value,
|
|
setName.value,
|
|
eventName.value,
|
|
tag.value,
|
|
status.value,
|
|
newlyAdded.value,
|
|
typeof minPriceMinor.value === "number",
|
|
typeof maxPriceMinor.value === "number",
|
|
sort.value !== "recent",
|
|
].filter(Boolean).length);
|
|
|
|
function resetFilters() {
|
|
category.value = "";
|
|
conditionId.value = "";
|
|
setName.value = "";
|
|
eventName.value = "";
|
|
tag.value = "";
|
|
status.value = "";
|
|
newlyAdded.value = false;
|
|
minPriceMinor.value = undefined;
|
|
maxPriceMinor.value = undefined;
|
|
sort.value = "recent";
|
|
page.value = 1;
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await Promise.all([
|
|
load(),
|
|
listPublicCategories()
|
|
.then((items) => {
|
|
categories.value = items;
|
|
})
|
|
.catch(() => {}),
|
|
listPublicConditions()
|
|
.then((items) => {
|
|
conditions.value = items;
|
|
})
|
|
.catch(() => {}),
|
|
]);
|
|
});
|
|
|
|
watch(
|
|
[query, category, conditionId, setName, eventName, tag, status, newlyAdded, minPriceMinor, maxPriceMinor, sort, page],
|
|
([
|
|
nextQuery,
|
|
nextCategory,
|
|
nextCondition,
|
|
nextSetName,
|
|
nextEventName,
|
|
nextTag,
|
|
nextStatus,
|
|
nextNewlyAdded,
|
|
nextMin,
|
|
nextMax,
|
|
nextSort,
|
|
nextPage,
|
|
]) => {
|
|
router.replace({
|
|
query: {
|
|
...(nextQuery ? { q: nextQuery } : {}),
|
|
...(nextCategory ? { category: nextCategory } : {}),
|
|
...(nextCondition ? { conditionId: nextCondition } : {}),
|
|
...(nextSetName ? { setName: nextSetName } : {}),
|
|
...(nextEventName ? { eventName: nextEventName } : {}),
|
|
...(nextTag ? { tag: nextTag } : {}),
|
|
...(nextStatus ? { status: nextStatus } : {}),
|
|
...(nextNewlyAdded ? { newlyAdded: "true" } : {}),
|
|
...(typeof nextMin === "number" ? { min: String(nextMin) } : {}),
|
|
...(typeof nextMax === "number" ? { max: String(nextMax) } : {}),
|
|
...(nextSort !== "recent" ? { sort: nextSort } : {}),
|
|
...(nextPage > 1 ? { page: String(nextPage) } : {}),
|
|
},
|
|
});
|
|
},
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<main ref="pageRoot" class="catalog-page public-page-focus" tabindex="-1" aria-label="Catalog">
|
|
<header class="catalog-header">
|
|
<p class="catalog-kicker">Pokemon inventory</p>
|
|
<h1>Find the next favorite.</h1>
|
|
<p class="catalog-intro">
|
|
Browse available cards, collectibles, and carefully cataloged pieces.
|
|
</p>
|
|
<label class="search-field">
|
|
<span>Search the catalog</span>
|
|
<input
|
|
v-model="query"
|
|
type="search"
|
|
placeholder="Try Charizard, 151, plush..."
|
|
/>
|
|
</label>
|
|
<div class="catalog-filter-toolbar">
|
|
<button
|
|
class="catalog-filter-toggle"
|
|
type="button"
|
|
:aria-expanded="filtersOpen"
|
|
aria-controls="catalog-filter-panel"
|
|
@click="filtersOpen = !filtersOpen"
|
|
>
|
|
Filters<span v-if="activeFilterCount"> ({{ activeFilterCount }})</span>
|
|
</button>
|
|
<button
|
|
v-if="activeFilterCount"
|
|
class="catalog-filter-reset"
|
|
type="button"
|
|
@click="resetFilters"
|
|
>
|
|
Reset filters
|
|
</button>
|
|
</div>
|
|
<div
|
|
id="catalog-filter-panel"
|
|
:class="['catalog-filters', { 'catalog-filters--open': filtersOpen }]"
|
|
>
|
|
<CatalogTextFilter v-model="setName" label="Set" placeholder="SV151" />
|
|
<CatalogTextFilter v-model="eventName" label="Event" placeholder="Worlds" />
|
|
<CatalogTextFilter v-model="tag" label="Tag" placeholder="binder" />
|
|
<CatalogToggle v-model="newlyAdded" label="Newly added" />
|
|
<label>
|
|
Status
|
|
<select v-model="status">
|
|
<option value="">Available and pending</option>
|
|
<option value="AVAILABLE">Available</option>
|
|
<option value="PENDING">Pending</option>
|
|
<option value="SOLD">Sold only</option>
|
|
<option value="ALL">Include sold</option>
|
|
</select>
|
|
</label>
|
|
<label
|
|
>Category
|
|
<select v-model="category">
|
|
<option value="">All categories</option>
|
|
<option v-for="item in categories" :key="item.id" :value="item.id">
|
|
{{ item.name }}
|
|
</option>
|
|
</select></label
|
|
>
|
|
<label
|
|
>Condition
|
|
<select v-model="conditionId">
|
|
<option value="">All conditions</option>
|
|
<option v-for="item in conditions" :key="item.id" :value="item.id">
|
|
{{ item.name }} ({{ item.code }})
|
|
</option>
|
|
</select></label
|
|
>
|
|
<label
|
|
>Min price (cents)
|
|
<input v-model.number="minPriceMinor" type="number" min="0"
|
|
/></label>
|
|
<label
|
|
>Max price (cents)
|
|
<input v-model.number="maxPriceMinor" type="number" min="0"
|
|
/></label>
|
|
<CatalogSortSelect v-model="sort" />
|
|
</div>
|
|
</header>
|
|
|
|
<section class="catalog-results" aria-live="polite">
|
|
<div class="results-heading">
|
|
<h2>Available now</h2>
|
|
<span v-if="!isLoading">{{ result.pagination.total }} results</span>
|
|
</div>
|
|
|
|
<p v-if="isLoading" class="catalog-state">Searching the catalog...</p>
|
|
<p v-else-if="error" class="catalog-state catalog-state--error">
|
|
{{ error.message }}
|
|
</p>
|
|
<p v-else-if="result.items.length === 0" class="catalog-state">
|
|
No relevant matches found.
|
|
</p>
|
|
<div v-else class="listing-grid">
|
|
<ListingCard
|
|
v-for="item in result.items"
|
|
:key="item.id"
|
|
:listing="item"
|
|
/>
|
|
</div>
|
|
|
|
<nav
|
|
v-if="result.pagination.totalPages > 1"
|
|
class="pagination"
|
|
aria-label="Catalog pages"
|
|
>
|
|
<button
|
|
type="button"
|
|
:disabled="page <= 1 || isLoading"
|
|
@click="goToPage(page - 1)"
|
|
>
|
|
Previous
|
|
</button>
|
|
<span aria-live="polite"
|
|
>Page {{ page }} of {{ result.pagination.totalPages }}</span
|
|
>
|
|
<button
|
|
type="button"
|
|
:disabled="page >= result.pagination.totalPages || isLoading"
|
|
@click="goToPage(page + 1)"
|
|
>
|
|
Next
|
|
</button>
|
|
</nav>
|
|
</section>
|
|
</main>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.catalog-filter-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
margin-top: var(--space-4);
|
|
}
|
|
|
|
.catalog-filter-toggle,
|
|
.catalog-filter-reset {
|
|
min-height: 44px;
|
|
border: var(--border-thin) solid var(--color-border-strong);
|
|
border-radius: var(--radius-md);
|
|
padding: var(--space-2) var(--space-3);
|
|
background: var(--color-surface);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.catalog-filter-reset {
|
|
border-color: transparent;
|
|
color: var(--color-interactive-text);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.catalog-filters {
|
|
display: none;
|
|
}
|
|
|
|
.catalog-filters.catalog-filters--open {
|
|
display: grid;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.catalog-filter-toolbar {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|