fix: remove separate /map pages, add hover highlight to CatalogPage
All checks were successful
Build Docker Image / build (push) Successful in 4m48s

- Delete hubs/map.vue, offers/map.vue, suppliers/map.vue
- Pass hoveredId to CatalogMap for marker highlighting
- Split view on main pages (like Airbnb) is the correct approach
This commit is contained in:
Ruslan Bakiev
2026-01-14 10:46:04 +07:00
parent 844878ce85
commit b75459c8be
4 changed files with 2 additions and 298 deletions

View File

@@ -1,86 +0,0 @@
<template>
<NuxtLayout name="map">
<template #sidebar>
<CatalogMapSidebar
:title="t('catalogHubsSection.header.title')"
:back-link="localePath('/catalog/hubs')"
:back-label="t('catalogMap.actions.list_view')"
:items-count="items.length"
:filters="filters"
:selected-filter="selectedFilter"
:loading="isLoading"
:empty-text="t('catalogMap.empty.hubs')"
@update:selected-filter="selectedFilter = $event"
>
<template #cards>
<HubCard
v-for="hub in items"
:key="hub.uuid"
:hub="hub"
selectable
:is-selected="selectedItemId === hub.uuid"
@select="selectItem(hub)"
@hover="(hovered) => onHubHover(hub.uuid, hovered)"
/>
</template>
</CatalogMapSidebar>
</template>
<CatalogMap
ref="mapRef"
map-id="hubs-fullscreen-map"
:clustered-points="clusteredNodes"
use-server-clustering
:hovered-item-id="hoveredItemId"
point-color="#10b981"
@select-item="onMapSelectItem"
@bounds-change="onBoundsChange"
/>
</NuxtLayout>
</template>
<script setup lang="ts">
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
definePageMeta({
layout: false
})
const { t } = useI18n()
const localePath = useLocalePath()
const {
items,
selectedFilter,
filters,
isLoading,
init
} = useCatalogHubs()
await init()
const { clusteredNodes, fetchClusters } = useClusteredNodes()
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
const selectedItemId = ref<string | null>(null)
const hoveredItemId = ref<string | null>(null)
const selectItem = (item: any) => {
selectedItemId.value = item.uuid
if (item.latitude && item.longitude) {
mapRef.value?.flyTo(item.latitude, item.longitude, 8)
}
}
const onMapSelectItem = (uuid: string) => {
selectedItemId.value = uuid
}
const onHubHover = (uuid: string | undefined | null, hovered: boolean) => {
hoveredItemId.value = hovered && uuid ? uuid : null
}
const onBoundsChange = (bounds: MapBounds) => {
fetchClusters(bounds)
}
</script>