Add strict public search numeric validation and URL-backed category and price filters to the catalog UI.
This commit is contained in:
@@ -7,17 +7,23 @@ import ListingCard from '@/components/molecules/ListingCard.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { query, page, result, isLoading, error, load, goToPage } = useCatalogSearch({
|
||||
const { query, category, minPriceMinor, maxPriceMinor, 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 : '',
|
||||
initialMinPriceMinor: Number.parseInt(route.query.min, 10) || undefined,
|
||||
initialMaxPriceMinor: Number.parseInt(route.query.max, 10) || undefined,
|
||||
initialPage: Number.parseInt(route.query.page, 10) || 1,
|
||||
});
|
||||
|
||||
onMounted(load);
|
||||
|
||||
watch([query, page], ([nextQuery, nextPage]) => {
|
||||
watch([query, category, minPriceMinor, maxPriceMinor, page], ([nextQuery, nextCategory, nextMin, nextMax, nextPage]) => {
|
||||
router.replace({
|
||||
query: {
|
||||
...(nextQuery ? { q: nextQuery } : {}),
|
||||
...(nextCategory ? { category: nextCategory } : {}),
|
||||
...(typeof nextMin === 'number' ? { min: String(nextMin) } : {}),
|
||||
...(typeof nextMax === 'number' ? { max: String(nextMax) } : {}),
|
||||
...(nextPage > 1 ? { page: String(nextPage) } : {}),
|
||||
},
|
||||
});
|
||||
@@ -34,6 +40,11 @@ watch([query, page], ([nextQuery, nextPage]) => {
|
||||
<span>Search the catalog</span>
|
||||
<input v-model="query" type="search" placeholder="Try Charizard, 151, plush..." />
|
||||
</label>
|
||||
<div class="catalog-filters">
|
||||
<label>Category <input v-model="category" type="search" placeholder="Cards or plush" /></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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="catalog-results" aria-live="polite">
|
||||
|
||||
Reference in New Issue
Block a user