feat(catalog): persist bounds filter state in URL
All checks were successful
Build Docker Image / build (push) Successful in 4m14s
All checks were successful
Build Docker Image / build (push) Successful in 4m14s
- Add urlBounds and filterByBounds computed from URL query - Add setBoundsInUrl and clearBoundsFromUrl actions - Update index.vue to use URL-based bounds state - Bounds written to URL as comma-separated values (west,south,east,north) This enables sharing links with map viewport bounds filter.
This commit is contained in:
@@ -13,7 +13,7 @@
|
||||
:related-points="relatedPoints"
|
||||
@select="onMapSelect"
|
||||
@bounds-change="onBoundsChange"
|
||||
@update:filter-by-bounds="filterByBounds = $event"
|
||||
@update:filter-by-bounds="$event ? setBoundsInUrl(currentMapBounds) : clearBoundsFromUrl()"
|
||||
>
|
||||
<!-- Panel slot - shows selection list OR info OR quote results -->
|
||||
<template #panel>
|
||||
@@ -82,8 +82,7 @@ const localePath = useLocalePath()
|
||||
// Ref to CatalogPage for accessing bounds
|
||||
const catalogPageRef = ref<{ currentBounds: Ref<MapBounds | null> } | null>(null)
|
||||
|
||||
// Filter by map bounds state
|
||||
const filterByBounds = ref(false)
|
||||
// Current map bounds (local state, updated when map moves)
|
||||
const currentMapBounds = ref<MapBounds | null>(null)
|
||||
|
||||
// Hovered item for map highlight
|
||||
@@ -103,6 +102,10 @@ const currentSelectionItems = computed(() => {
|
||||
// Handle bounds change from map
|
||||
const onBoundsChange = (bounds: MapBounds) => {
|
||||
currentMapBounds.value = bounds
|
||||
// If filter by bounds is enabled, write to URL
|
||||
if (filterByBounds.value) {
|
||||
setBoundsInUrl(bounds)
|
||||
}
|
||||
}
|
||||
|
||||
const {
|
||||
@@ -122,7 +125,11 @@ const {
|
||||
openInfo,
|
||||
closeInfo,
|
||||
setInfoProduct,
|
||||
setLabel
|
||||
setLabel,
|
||||
urlBounds,
|
||||
filterByBounds,
|
||||
setBoundsInUrl,
|
||||
clearBoundsFromUrl
|
||||
} = useCatalogSearch()
|
||||
|
||||
// Info panel composable
|
||||
@@ -230,12 +237,15 @@ watch(productId, (newProductId) => {
|
||||
}, { immediate: true })
|
||||
|
||||
// Apply bounds filter when "filter by map bounds" is enabled
|
||||
watch([filterByBounds, currentMapBounds], ([enabled, bounds]) => {
|
||||
// Use URL bounds if available, otherwise use current map bounds
|
||||
watch([filterByBounds, urlBounds, currentMapBounds], ([enabled, urlB, mapB]) => {
|
||||
// Use URL bounds if available, otherwise current map bounds
|
||||
const bounds = urlB || mapB
|
||||
const boundsToApply = enabled && bounds ? bounds : null
|
||||
setHubBoundsFilter(boundsToApply)
|
||||
setSupplierBoundsFilter(boundsToApply)
|
||||
setProductBoundsFilter(boundsToApply)
|
||||
})
|
||||
}, { immediate: true })
|
||||
|
||||
// Watch infoId to load info data
|
||||
watch(infoId, async (info) => {
|
||||
|
||||
Reference in New Issue
Block a user