fix: remove separate /map pages, add hover highlight to CatalogPage
All checks were successful
Build Docker Image / build (push) Successful in 4m48s
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
@@ -54,6 +54,7 @@
|
|||||||
:map-id="mapId"
|
:map-id="mapId"
|
||||||
:items="itemsWithCoords"
|
:items="itemsWithCoords"
|
||||||
:point-color="pointColor"
|
:point-color="pointColor"
|
||||||
|
:hovered-item-id="hoveredId"
|
||||||
@select-item="onMapSelect"
|
@select-item="onMapSelect"
|
||||||
/>
|
/>
|
||||||
</ClientOnly>
|
</ClientOnly>
|
||||||
@@ -98,6 +99,7 @@
|
|||||||
:map-id="`${mapId}-mobile`"
|
:map-id="`${mapId}-mobile`"
|
||||||
:items="itemsWithCoords"
|
:items="itemsWithCoords"
|
||||||
:point-color="pointColor"
|
:point-color="pointColor"
|
||||||
|
:hovered-item-id="hoveredId"
|
||||||
@select-item="onMapSelect"
|
@select-item="onMapSelect"
|
||||||
/>
|
/>
|
||||||
</ClientOnly>
|
</ClientOnly>
|
||||||
|
|||||||
@@ -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>
|
|
||||||
@@ -1,142 +0,0 @@
|
|||||||
<template>
|
|
||||||
<NuxtLayout name="map">
|
|
||||||
<template #sidebar>
|
|
||||||
<!-- Product selection mode -->
|
|
||||||
<CatalogMapSidebar
|
|
||||||
v-if="!selectedProductUuid"
|
|
||||||
:title="t('catalogOffersSection.header.select_product')"
|
|
||||||
:back-link="localePath('/catalog/offers')"
|
|
||||||
:back-label="t('catalogMap.actions.list_view')"
|
|
||||||
:items-count="products.length"
|
|
||||||
:loading="productsLoading"
|
|
||||||
:empty-text="t('catalogOffersSection.empty.no_products')"
|
|
||||||
>
|
|
||||||
<template #cards>
|
|
||||||
<Card
|
|
||||||
v-for="product in products"
|
|
||||||
:key="product.uuid"
|
|
||||||
padding="sm"
|
|
||||||
interactive
|
|
||||||
@click="selectProduct(product)"
|
|
||||||
>
|
|
||||||
<Stack gap="2">
|
|
||||||
<Text size="base" weight="semibold">{{ product.name }}</Text>
|
|
||||||
<Text tone="muted">{{ product.categoryName || t('catalogProduct.labels.category_unknown') }}</Text>
|
|
||||||
</Stack>
|
|
||||||
</Card>
|
|
||||||
</template>
|
|
||||||
</CatalogMapSidebar>
|
|
||||||
|
|
||||||
<!-- Offers for selected product -->
|
|
||||||
<CatalogMapSidebar
|
|
||||||
v-else
|
|
||||||
:title="sidebarTitle"
|
|
||||||
:back-link="localePath('/catalog/offers/map')"
|
|
||||||
:back-label="t('common.back')"
|
|
||||||
:items-count="items.length"
|
|
||||||
:filters="filters"
|
|
||||||
:selected-filter="selectedFilter"
|
|
||||||
:loading="isLoading"
|
|
||||||
:empty-text="t('catalogMap.empty.offers')"
|
|
||||||
@update:selected-filter="selectedFilter = $event"
|
|
||||||
>
|
|
||||||
<template #cards>
|
|
||||||
<OfferCard
|
|
||||||
v-for="offer in items"
|
|
||||||
:key="offer.uuid"
|
|
||||||
:offer="offer"
|
|
||||||
selectable
|
|
||||||
:is-selected="selectedItemId === offer.uuid"
|
|
||||||
@select="selectItem(offer)"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</CatalogMapSidebar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<CatalogMap
|
|
||||||
ref="mapRef"
|
|
||||||
map-id="offers-fullscreen-map"
|
|
||||||
:items="itemsWithCoords"
|
|
||||||
point-color="#f59e0b"
|
|
||||||
@select-item="onMapSelectItem"
|
|
||||||
/>
|
|
||||||
</NuxtLayout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
definePageMeta({
|
|
||||||
layout: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
const localePath = useLocalePath()
|
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
// Products
|
|
||||||
const {
|
|
||||||
items: products,
|
|
||||||
isLoading: productsLoading,
|
|
||||||
init: initProducts
|
|
||||||
} = useCatalogProducts()
|
|
||||||
|
|
||||||
// Offers
|
|
||||||
const {
|
|
||||||
items,
|
|
||||||
selectedFilter,
|
|
||||||
filters,
|
|
||||||
isLoading,
|
|
||||||
itemsWithCoords,
|
|
||||||
init: initOffers,
|
|
||||||
setProductUuid
|
|
||||||
} = useCatalogOffers()
|
|
||||||
|
|
||||||
// Product from query
|
|
||||||
const selectedProductUuid = computed(() => route.query.product as string | undefined)
|
|
||||||
|
|
||||||
const selectedProduct = computed(() => {
|
|
||||||
if (!selectedProductUuid.value) return null
|
|
||||||
return products.value.find(p => p.uuid === selectedProductUuid.value)
|
|
||||||
})
|
|
||||||
|
|
||||||
const sidebarTitle = computed(() => {
|
|
||||||
if (selectedProduct.value) {
|
|
||||||
return `${t('catalogOffersSection.header.title')}: ${selectedProduct.value.name}`
|
|
||||||
}
|
|
||||||
return t('catalogOffersSection.header.title')
|
|
||||||
})
|
|
||||||
|
|
||||||
// Initialize products
|
|
||||||
await initProducts()
|
|
||||||
|
|
||||||
// Watch for product changes
|
|
||||||
watch(selectedProductUuid, async (uuid) => {
|
|
||||||
setProductUuid(uuid || null)
|
|
||||||
if (uuid) {
|
|
||||||
await initOffers()
|
|
||||||
}
|
|
||||||
}, { immediate: true })
|
|
||||||
|
|
||||||
const selectProduct = (product: any) => {
|
|
||||||
router.push({
|
|
||||||
path: route.path,
|
|
||||||
query: { product: product.uuid }
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
|
|
||||||
const selectedItemId = ref<string | null>(null)
|
|
||||||
|
|
||||||
const selectItem = (item: any) => {
|
|
||||||
selectedItemId.value = item.uuid
|
|
||||||
const lat = item.locationLatitude
|
|
||||||
const lng = item.locationLongitude
|
|
||||||
if (lat && lng) {
|
|
||||||
mapRef.value?.flyTo(lat, lng, 8)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const onMapSelectItem = (uuid: string) => {
|
|
||||||
selectedItemId.value = uuid
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,70 +0,0 @@
|
|||||||
<template>
|
|
||||||
<NuxtLayout name="map">
|
|
||||||
<template #sidebar>
|
|
||||||
<CatalogMapSidebar
|
|
||||||
:title="t('catalogSuppliersSection.header.title')"
|
|
||||||
:back-link="localePath('/catalog/suppliers')"
|
|
||||||
:back-label="t('catalogMap.actions.list_view')"
|
|
||||||
:items-count="items.length"
|
|
||||||
:filters="filters"
|
|
||||||
:selected-filter="selectedFilter"
|
|
||||||
:loading="isLoading"
|
|
||||||
:empty-text="t('catalogMap.empty.suppliers')"
|
|
||||||
@update:selected-filter="selectedFilter = $event"
|
|
||||||
>
|
|
||||||
<template #cards>
|
|
||||||
<SupplierCard
|
|
||||||
v-for="supplier in items"
|
|
||||||
:key="supplier.uuid"
|
|
||||||
:supplier="supplier"
|
|
||||||
selectable
|
|
||||||
:is-selected="selectedItemId === supplier.uuid"
|
|
||||||
@select="selectItem(supplier)"
|
|
||||||
/>
|
|
||||||
</template>
|
|
||||||
</CatalogMapSidebar>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<CatalogMap
|
|
||||||
ref="mapRef"
|
|
||||||
map-id="suppliers-fullscreen-map"
|
|
||||||
:items="itemsWithCoords"
|
|
||||||
point-color="#3b82f6"
|
|
||||||
@select-item="onMapSelectItem"
|
|
||||||
/>
|
|
||||||
</NuxtLayout>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
definePageMeta({
|
|
||||||
layout: false
|
|
||||||
})
|
|
||||||
|
|
||||||
const { t } = useI18n()
|
|
||||||
const localePath = useLocalePath()
|
|
||||||
|
|
||||||
const {
|
|
||||||
items,
|
|
||||||
selectedFilter,
|
|
||||||
filters,
|
|
||||||
isLoading,
|
|
||||||
itemsWithCoords,
|
|
||||||
init
|
|
||||||
} = useCatalogSuppliers()
|
|
||||||
|
|
||||||
await init()
|
|
||||||
|
|
||||||
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
|
|
||||||
const selectedItemId = 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
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
Reference in New Issue
Block a user