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:
@@ -84,6 +84,18 @@ export function useCatalogSearch() {
|
||||
const hubId = computed(() => route.query.hub as string | undefined)
|
||||
const quantity = computed(() => route.query.qty as string | undefined)
|
||||
|
||||
// Map bounds from URL (format: west,south,east,north)
|
||||
const urlBounds = computed(() => {
|
||||
const b = route.query.bounds as string | undefined
|
||||
if (!b) return null
|
||||
const parts = b.split(',').map(Number)
|
||||
if (parts.length !== 4 || parts.some(isNaN)) return null
|
||||
return { west: parts[0], south: parts[1], east: parts[2], north: parts[3] }
|
||||
})
|
||||
|
||||
// Filter by bounds checkbox state from URL
|
||||
const filterByBounds = computed(() => route.query.bounds !== undefined)
|
||||
|
||||
// Get label for a filter (from cache or fallback to ID)
|
||||
const getLabel = (type: string, id: string | undefined): string | null => {
|
||||
if (!id) return null
|
||||
@@ -237,6 +249,21 @@ export function useCatalogSearch() {
|
||||
updateQuery({ qty })
|
||||
}
|
||||
|
||||
// Set map bounds in URL (for filter by map feature)
|
||||
const setBoundsInUrl = (bounds: { west: number; south: number; east: number; north: number } | null) => {
|
||||
if (bounds) {
|
||||
const boundsStr = `${bounds.west.toFixed(4)},${bounds.south.toFixed(4)},${bounds.east.toFixed(4)},${bounds.north.toFixed(4)}`
|
||||
updateQuery({ bounds: boundsStr })
|
||||
} else {
|
||||
updateQuery({ bounds: null })
|
||||
}
|
||||
}
|
||||
|
||||
// Clear bounds from URL
|
||||
const clearBoundsFromUrl = () => {
|
||||
updateQuery({ bounds: null })
|
||||
}
|
||||
|
||||
const openInfo = (type: InfoEntityType, uuid: string) => {
|
||||
updateQuery({ info: `${type}:${uuid}`, select: null, infoTab: null, infoProduct: null })
|
||||
}
|
||||
@@ -350,6 +377,8 @@ export function useCatalogSearch() {
|
||||
quantity,
|
||||
searchQuery,
|
||||
mapViewMode,
|
||||
urlBounds,
|
||||
filterByBounds,
|
||||
|
||||
// Drawer state
|
||||
isDrawerOpen,
|
||||
@@ -373,6 +402,8 @@ export function useCatalogSearch() {
|
||||
removeFilter,
|
||||
editFilter,
|
||||
setQuantity,
|
||||
setBoundsInUrl,
|
||||
clearBoundsFromUrl,
|
||||
openInfo,
|
||||
closeInfo,
|
||||
setInfoTab,
|
||||
|
||||
Reference in New Issue
Block a user