71 lines
2.4 KiB
Vue
71 lines
2.4 KiB
Vue
<script setup>
|
|
import { onMounted, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
|
|
import { useCatalogSearch } from '@/composables/useCatalogSearch.js';
|
|
import ListingCard from '@/components/molecules/ListingCard.vue';
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const { query, page, result, isLoading, error, load, goToPage } = useCatalogSearch({
|
|
initialQuery: typeof route.query.q === 'string' ? route.query.q : '',
|
|
initialPage: Number.parseInt(route.query.page, 10) || 1,
|
|
});
|
|
|
|
onMounted(load);
|
|
|
|
watch([query, page], ([nextQuery, nextPage]) => {
|
|
router.replace({
|
|
query: {
|
|
...(nextQuery ? { q: nextQuery } : {}),
|
|
...(nextPage > 1 ? { page: String(nextPage) } : {}),
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<main class="catalog-page">
|
|
<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>
|
|
</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> |