Add public condition lookup options, condition filtering, and stable price/recent sorting with URL-backed catalog controls.
This commit is contained in:
@@ -3,15 +3,17 @@ import { onMounted, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
|
||||
import { useCatalogSearch } from '@/composables/useCatalogSearch.js';
|
||||
import { listPublicCategories } from '@/services/catalog-service.js';
|
||||
import { listPublicCategories, listPublicConditions } from '@/services/catalog-service.js';
|
||||
import ListingCard from '@/components/molecules/ListingCard.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const categories = ref([]);
|
||||
const { query, category, minPriceMinor, maxPriceMinor, sort, page, result, isLoading, error, load, goToPage } = useCatalogSearch({
|
||||
const conditions = ref([]);
|
||||
const { query, category, conditionId, 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 : '',
|
||||
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',
|
||||
@@ -19,14 +21,19 @@ const { query, category, minPriceMinor, maxPriceMinor, sort, page, result, isLoa
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([load(), listPublicCategories().then((items) => { categories.value = items; }).catch(() => {})]);
|
||||
await Promise.all([
|
||||
load(),
|
||||
listPublicCategories().then((items) => { categories.value = items; }).catch(() => {}),
|
||||
listPublicConditions().then((items) => { conditions.value = items; }).catch(() => {}),
|
||||
]);
|
||||
});
|
||||
|
||||
watch([query, category, minPriceMinor, maxPriceMinor, sort, page], ([nextQuery, nextCategory, nextMin, nextMax, nextSort, nextPage]) => {
|
||||
watch([query, category, conditionId, minPriceMinor, maxPriceMinor, sort, page], ([nextQuery, nextCategory, nextCondition, nextMin, nextMax, nextSort, nextPage]) => {
|
||||
router.replace({
|
||||
query: {
|
||||
...(nextQuery ? { q: nextQuery } : {}),
|
||||
...(nextCategory ? { category: nextCategory } : {}),
|
||||
...(nextCondition ? { conditionId: nextCondition } : {}),
|
||||
...(typeof nextMin === 'number' ? { min: String(nextMin) } : {}),
|
||||
...(typeof nextMax === 'number' ? { max: String(nextMax) } : {}),
|
||||
...(nextSort !== 'recent' ? { sort: nextSort } : {}),
|
||||
@@ -48,6 +55,7 @@ watch([query, category, minPriceMinor, maxPriceMinor, sort, page], ([nextQuery,
|
||||
</label>
|
||||
<div class="catalog-filters">
|
||||
<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>
|
||||
<label>Sort <select v-model="sort"><option value="recent">Recently added</option><option value="price_low">Price: low to high</option><option value="price_high">Price: high to low</option></select></label>
|
||||
|
||||
Reference in New Issue
Block a user