Add Explore/Quote dual mode to catalog page
All checks were successful
Build Docker Image / build (push) Successful in 3m52s
All checks were successful
Build Docker Image / build (push) Successful in 3m52s
- Add CatalogMode type (explore/quote) to useCatalogSearch - Create ExplorePanel component with view toggle (offers/hubs/suppliers) - Create QuoteForm and QuotePanel components for search form - Refactor CatalogPage to fullscreen map with overlay panel - Simplify catalog/index.vue to use new components - Add translations for modes and quote form (ru/en) The catalog now has two modes: - Explore: Browse map with offers/hubs/suppliers toggle - Quote: Search form with product/hub/qty filters to find offers
This commit is contained in:
Ruslan Bakiev
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex flex-col flex-1 min-h-0">
|
||||
<div class="flex flex-col flex-1 min-h-0 relative">
|
||||
<!-- Loading state -->
|
||||
<div v-if="loading" class="flex-1 flex items-center justify-center">
|
||||
<div v-if="loading" class="absolute inset-0 z-50 flex items-center justify-center bg-base-100/80">
|
||||
<Card padding="lg">
|
||||
<Stack align="center" justify="center" gap="3">
|
||||
<Spinner />
|
||||
@@ -10,241 +10,130 @@
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<template v-else>
|
||||
<!-- Search bar slot (sticky third bar - like navigation) -->
|
||||
<div v-if="$slots.searchBar" class="sticky z-20 h-16 -mx-3 lg:-mx-6 px-3 lg:px-6 bg-base-200 border-b border-base-300" :style="searchBarStyle">
|
||||
<div class="flex items-center gap-2 h-full">
|
||||
<!-- Expand button - appears when header collapsed -->
|
||||
<!-- Fullscreen Map -->
|
||||
<div class="absolute inset-0">
|
||||
<ClientOnly>
|
||||
<CatalogMap
|
||||
ref="mapRef"
|
||||
:map-id="mapId"
|
||||
:items="useServerClustering ? [] : itemsWithCoords"
|
||||
:clustered-points="useServerClustering ? clusteredNodes : []"
|
||||
:use-server-clustering="useServerClustering"
|
||||
:point-color="pointColor"
|
||||
:hovered-item-id="hoveredId"
|
||||
:hovered-item="hoveredItem"
|
||||
@select-item="onMapSelect"
|
||||
@bounds-change="onBoundsChange"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
<!-- Mode tabs (top left overlay) -->
|
||||
<div class="absolute top-4 left-4 z-20">
|
||||
<div class="tabs tabs-boxed bg-white/95 backdrop-blur shadow-lg">
|
||||
<button
|
||||
class="tab"
|
||||
:class="{ 'tab-active': catalogMode === 'explore' }"
|
||||
@click="setCatalogMode('explore')"
|
||||
>
|
||||
<Icon name="lucide:compass" size="16" class="mr-1" />
|
||||
{{ $t('catalog.modes.explore') }}
|
||||
</button>
|
||||
<button
|
||||
class="tab"
|
||||
:class="{ 'tab-active': catalogMode === 'quote' }"
|
||||
@click="setCatalogMode('quote')"
|
||||
>
|
||||
<Icon name="lucide:search" size="16" class="mr-1" />
|
||||
{{ $t('catalog.modes.quote') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Left overlay panel -->
|
||||
<div
|
||||
class="absolute top-20 left-4 bottom-4 z-10 w-80 max-w-[calc(100vw-2rem)] hidden lg:block"
|
||||
>
|
||||
<div class="bg-white/95 backdrop-blur rounded-xl shadow-lg p-4 h-full overflow-hidden flex flex-col">
|
||||
<!-- Explore mode panel -->
|
||||
<template v-if="catalogMode === 'explore'">
|
||||
<slot name="explore-panel">
|
||||
<ExplorePanel
|
||||
:selected-item="selectedMapItem"
|
||||
@close-selected="selectedMapItem = null"
|
||||
@view-details="onViewDetails"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
|
||||
<!-- Quote mode panel -->
|
||||
<template v-else>
|
||||
<slot name="quote-panel" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile bottom sheet (simplified) -->
|
||||
<div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
|
||||
<!-- Mobile mode toggle -->
|
||||
<div class="flex justify-center mb-2">
|
||||
<div class="tabs tabs-boxed bg-white/95 backdrop-blur shadow-lg tabs-sm">
|
||||
<button
|
||||
v-if="isCollapsed"
|
||||
class="btn btn-ghost btn-sm gap-1 flex-shrink-0"
|
||||
@click="expand"
|
||||
class="tab"
|
||||
:class="{ 'tab-active': catalogMode === 'explore' }"
|
||||
@click="setCatalogMode('explore')"
|
||||
>
|
||||
<span class="font-bold text-primary text-lg">O</span>
|
||||
<Icon name="lucide:chevron-up" size="14" />
|
||||
{{ $t('catalog.modes.explore') }}
|
||||
</button>
|
||||
<button
|
||||
class="tab"
|
||||
:class="{ 'tab-active': catalogMode === 'quote' }"
|
||||
@click="setCatalogMode('quote')"
|
||||
>
|
||||
{{ $t('catalog.modes.quote') }}
|
||||
</button>
|
||||
<div class="flex-1">
|
||||
<slot name="searchBar" :displayed-count="displayItems.length" :total-count="totalCount" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- With Map: Split Layout or Full Width Map -->
|
||||
<template v-if="withMap">
|
||||
<!-- Full Width Map Mode (after selection) -->
|
||||
<div v-if="fullWidthMap" class="hidden lg:flex flex-1 min-h-0 py-4">
|
||||
<div class="w-full">
|
||||
<div class="sticky rounded-xl overflow-hidden shadow-lg" :style="mapStyle">
|
||||
<!-- View mode toggle -->
|
||||
<div class="absolute top-4 left-4 z-10">
|
||||
<div class="btn-group shadow-lg bg-white/90 backdrop-blur rounded-lg">
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="{ 'btn-active': mapViewMode === 'offers' }"
|
||||
@click="setMapViewMode('offers')"
|
||||
>
|
||||
{{ $t('catalog.views.offers') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="{ 'btn-active': mapViewMode === 'hubs' }"
|
||||
@click="setMapViewMode('hubs')"
|
||||
>
|
||||
{{ $t('catalog.views.hubs') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="{ 'btn-active': mapViewMode === 'suppliers' }"
|
||||
@click="setMapViewMode('suppliers')"
|
||||
>
|
||||
{{ $t('catalog.views.suppliers') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ClientOnly>
|
||||
<CatalogMap
|
||||
ref="mapRef"
|
||||
:map-id="mapId"
|
||||
:items="useServerClustering ? [] : itemsWithCoords"
|
||||
:clustered-points="useServerClustering ? clusteredNodes : []"
|
||||
:use-server-clustering="useServerClustering"
|
||||
:point-color="pointColor"
|
||||
:hovered-item-id="hoveredId"
|
||||
:hovered-item="hoveredItem"
|
||||
@select-item="onMapSelect"
|
||||
@bounds-change="onBoundsChange"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile panel (collapsible) -->
|
||||
<div
|
||||
class="bg-white/95 backdrop-blur rounded-t-xl shadow-lg transition-all duration-300"
|
||||
:class="mobilePanelExpanded ? 'h-[60vh]' : 'h-auto'"
|
||||
>
|
||||
<!-- Drag handle -->
|
||||
<div
|
||||
class="flex justify-center py-2 cursor-pointer"
|
||||
@click="mobilePanelExpanded = !mobilePanelExpanded"
|
||||
>
|
||||
<div class="w-10 h-1 bg-base-300 rounded-full" />
|
||||
</div>
|
||||
|
||||
<!-- Desktop: side-by-side (during selection) -->
|
||||
<div v-else class="hidden lg:flex flex-1 gap-4 min-h-0 py-4">
|
||||
<!-- Left: List (scrollable) -->
|
||||
<div class="w-2/5 overflow-y-auto pr-2">
|
||||
<Stack gap="4">
|
||||
<slot name="header" />
|
||||
<slot name="filters" />
|
||||
|
||||
<div :class="gridClass">
|
||||
<div
|
||||
v-for="item in displayItems"
|
||||
:key="item.uuid"
|
||||
:class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedId }"
|
||||
@click="onItemClick(item)"
|
||||
@mouseenter="emit('update:hoveredId', item.uuid)"
|
||||
@mouseleave="emit('update:hoveredId', undefined)"
|
||||
>
|
||||
<slot name="card" :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot name="pagination" />
|
||||
|
||||
<Stack v-if="displayItems.length === 0" align="center" gap="2">
|
||||
<slot name="empty">
|
||||
<Text tone="muted">{{ $t('common.values.not_available') }}</Text>
|
||||
</slot>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<!-- Right: Map (sticky, inside content container) -->
|
||||
<div class="w-3/5">
|
||||
<div class="sticky rounded-xl overflow-hidden shadow-lg" :style="mapStyle">
|
||||
<!-- Search with map checkbox -->
|
||||
<label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
|
||||
<span class="text-sm">{{ $t('catalogMap.searchWithMap') }}</span>
|
||||
</label>
|
||||
<ClientOnly>
|
||||
<CatalogMap
|
||||
ref="mapRef"
|
||||
:map-id="mapId"
|
||||
:items="useServerClustering ? [] : itemsWithCoords"
|
||||
:clustered-points="useServerClustering ? clusteredNodes : []"
|
||||
:use-server-clustering="useServerClustering"
|
||||
:point-color="pointColor"
|
||||
:hovered-item-id="hoveredId"
|
||||
:hovered-item="hoveredItem"
|
||||
@select-item="onMapSelect"
|
||||
@bounds-change="onBoundsChange"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile: toggle between list and map -->
|
||||
<div class="lg:hidden flex-1 flex flex-col min-h-0">
|
||||
<div class="flex-1 overflow-y-auto py-4" v-show="mobileView === 'list'">
|
||||
<Stack gap="4">
|
||||
<slot name="header" />
|
||||
<slot name="filters" />
|
||||
|
||||
<div :class="gridClass">
|
||||
<div
|
||||
v-for="item in displayItems"
|
||||
:key="item.uuid"
|
||||
:class="{ 'ring-2 ring-primary rounded-lg': item.uuid === selectedId }"
|
||||
@click="onItemClick(item)"
|
||||
@mouseenter="emit('update:hoveredId', item.uuid)"
|
||||
@mouseleave="emit('update:hoveredId', undefined)"
|
||||
>
|
||||
<slot name="card" :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot name="pagination" />
|
||||
|
||||
<Stack v-if="displayItems.length === 0" align="center" gap="2">
|
||||
<slot name="empty">
|
||||
<Text tone="muted">{{ $t('common.values.not_available') }}</Text>
|
||||
</slot>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 relative" v-show="mobileView === 'map'">
|
||||
<!-- Search with map checkbox (mobile) -->
|
||||
<label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
|
||||
<input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />
|
||||
<span class="text-sm">{{ $t('catalogMap.searchWithMap') }}</span>
|
||||
</label>
|
||||
<ClientOnly>
|
||||
<CatalogMap
|
||||
ref="mobileMapRef"
|
||||
:map-id="`${mapId}-mobile`"
|
||||
:items="useServerClustering ? [] : itemsWithCoords"
|
||||
:clustered-points="useServerClustering ? clusteredNodes : []"
|
||||
:use-server-clustering="useServerClustering"
|
||||
:point-color="pointColor"
|
||||
:hovered-item-id="hoveredId"
|
||||
:hovered-item="hoveredItem"
|
||||
@select-item="onMapSelect"
|
||||
@bounds-change="onBoundsChange"
|
||||
<div class="px-4 pb-4 overflow-y-auto" :class="mobilePanelExpanded ? 'h-[calc(60vh-2rem)]' : 'max-h-48'">
|
||||
<!-- Explore mode panel -->
|
||||
<template v-if="catalogMode === 'explore'">
|
||||
<slot name="explore-panel">
|
||||
<ExplorePanel
|
||||
:selected-item="selectedMapItem"
|
||||
@close-selected="selectedMapItem = null"
|
||||
@view-details="onViewDetails"
|
||||
/>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
<!-- Mobile toggle -->
|
||||
<div class="fixed bottom-4 left-1/2 -translate-x-1/2 z-30">
|
||||
<div class="btn-group shadow-lg">
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="{ 'btn-active': mobileView === 'list' }"
|
||||
@click="mobileView = 'list'"
|
||||
>
|
||||
{{ $t('common.list') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-sm"
|
||||
:class="{ 'btn-active': mobileView === 'map' }"
|
||||
@click="mobileView = 'map'"
|
||||
>
|
||||
{{ $t('common.map') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Without Map: Simple List -->
|
||||
<div v-else class="flex-1 overflow-y-auto py-4">
|
||||
<Stack gap="4">
|
||||
<slot name="header" />
|
||||
<slot name="filters" />
|
||||
|
||||
<div :class="gridClass">
|
||||
<div
|
||||
v-for="item in items"
|
||||
:key="item.uuid"
|
||||
@click="onItemClick(item)"
|
||||
>
|
||||
<slot name="card" :item="item" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<slot name="pagination" />
|
||||
|
||||
<Stack v-if="items.length === 0" align="center" gap="2">
|
||||
<slot name="empty">
|
||||
<Text tone="muted">{{ $t('common.values.not_available') }}</Text>
|
||||
</slot>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</template>
|
||||
|
||||
<!-- Quote mode panel -->
|
||||
<template v-else>
|
||||
<slot name="quote-panel" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
|
||||
|
||||
// Map view mode for full width map
|
||||
const { mapViewMode, setMapViewMode } = useCatalogSearch()
|
||||
const { mapViewMode, catalogMode, setCatalogMode } = useCatalogSearch()
|
||||
|
||||
interface MapItem {
|
||||
uuid: string
|
||||
@@ -256,62 +145,25 @@ interface MapItem {
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
items: MapItem[]
|
||||
mapItems?: MapItem[] // Optional separate items for map (if different from list items)
|
||||
loading?: boolean
|
||||
withMap?: boolean
|
||||
fullWidthMap?: boolean // Map takes full width (no grid), used after filter selection
|
||||
useServerClustering?: boolean // Use server-side h3 clustering for ALL points
|
||||
clusterNodeType?: string // Node type for clustering: 'logistics' | 'offer' | 'supplier'
|
||||
useServerClustering?: boolean
|
||||
clusterNodeType?: string
|
||||
mapId?: string
|
||||
pointColor?: string
|
||||
selectedId?: string
|
||||
hoveredId?: string
|
||||
hasSubNav?: boolean
|
||||
totalCount?: number // Total count for search bar counter (can differ from items.length with pagination)
|
||||
gridColumns?: number // Number of columns for card grid (1 = stack, 2/3 = grid)
|
||||
items?: MapItem[]
|
||||
}>(), {
|
||||
loading: false,
|
||||
withMap: true,
|
||||
fullWidthMap: false,
|
||||
useServerClustering: false,
|
||||
clusterNodeType: 'logistics',
|
||||
useServerClustering: true,
|
||||
clusterNodeType: 'offer',
|
||||
mapId: 'catalog-map',
|
||||
pointColor: '#3b82f6',
|
||||
hasSubNav: true,
|
||||
totalCount: 0,
|
||||
gridColumns: 1
|
||||
pointColor: '#f97316',
|
||||
items: () => []
|
||||
})
|
||||
|
||||
// Grid class based on gridColumns prop
|
||||
const gridClass = computed(() => {
|
||||
if (props.gridColumns === 1) return 'flex flex-col gap-3'
|
||||
if (props.gridColumns === 2) return 'grid grid-cols-2 gap-3'
|
||||
if (props.gridColumns === 3) return 'grid grid-cols-3 gap-3'
|
||||
return 'flex flex-col gap-3'
|
||||
})
|
||||
|
||||
// Smooth scroll collapse - pixel values for smooth animation
|
||||
// MainNav: 64px, SubNav: 54px, Header total: 118px, SearchBar: 64px
|
||||
const { searchBarTop, mapTop, isCollapsed, expand } = useScrollCollapse(118, 64)
|
||||
|
||||
const slots = useSlots()
|
||||
const hasSearchBar = computed(() => !!slots.searchBar)
|
||||
|
||||
// SearchBar style - smooth pixel positioning
|
||||
const searchBarStyle = computed(() => ({
|
||||
top: `${searchBarTop.value}px`
|
||||
}))
|
||||
|
||||
// Map style - smooth pixel positioning with bottom padding
|
||||
const mapStyle = computed(() => ({
|
||||
top: hasSearchBar.value ? `${mapTop.value}px` : `${searchBarTop.value}px`,
|
||||
height: `calc(100vh - ${hasSearchBar.value ? mapTop.value : searchBarTop.value}px - 16px)`
|
||||
}))
|
||||
|
||||
const emit = defineEmits<{
|
||||
'select': [item: MapItem]
|
||||
'update:selectedId': [uuid: string]
|
||||
'bounds-change': [bounds: MapBounds]
|
||||
'update:hoveredId': [uuid: string | undefined]
|
||||
}>()
|
||||
|
||||
@@ -319,28 +171,14 @@ const emit = defineEmits<{
|
||||
const nodeTypeRef = computed(() => props.clusterNodeType)
|
||||
const { clusteredNodes, fetchClusters } = useClusteredNodes(undefined, nodeTypeRef)
|
||||
|
||||
// Search with map checkbox
|
||||
const searchWithMap = ref(false)
|
||||
const currentBounds = ref<MapBounds | null>(null)
|
||||
// Map refs
|
||||
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
|
||||
|
||||
const onBoundsChange = (bounds: MapBounds) => {
|
||||
currentBounds.value = bounds
|
||||
if (props.useServerClustering) {
|
||||
fetchClusters(bounds)
|
||||
}
|
||||
}
|
||||
// Selected item from map click
|
||||
const selectedMapItem = ref<MapItem | null>(null)
|
||||
|
||||
// Filtered items when searchWithMap is enabled
|
||||
const displayItems = computed(() => {
|
||||
if (!searchWithMap.value || !currentBounds.value) return props.items
|
||||
return props.items.filter(item => {
|
||||
if (item.latitude == null || item.longitude == null) return false
|
||||
const { west, east, north, south } = currentBounds.value!
|
||||
const lng = Number(item.longitude)
|
||||
const lat = Number(item.latitude)
|
||||
return lng >= west && lng <= east && lat >= south && lat <= north
|
||||
})
|
||||
})
|
||||
// Mobile panel state
|
||||
const mobilePanelExpanded = ref(false)
|
||||
|
||||
// Hovered item with coordinates for map highlight
|
||||
const hoveredItem = computed(() => {
|
||||
@@ -350,12 +188,9 @@ const hoveredItem = computed(() => {
|
||||
return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
|
||||
})
|
||||
|
||||
// Use mapItems if provided, otherwise fall back to items
|
||||
const itemsForMap = computed(() => props.mapItems || props.items)
|
||||
|
||||
// Filter items with valid coordinates for map (client-side mode only)
|
||||
const itemsWithCoords = computed(() =>
|
||||
itemsForMap.value.filter(item =>
|
||||
props.items.filter(item =>
|
||||
item.latitude != null &&
|
||||
item.longitude != null &&
|
||||
!isNaN(Number(item.latitude)) &&
|
||||
@@ -365,27 +200,14 @@ const itemsWithCoords = computed(() =>
|
||||
name: item.name || '',
|
||||
latitude: Number(item.latitude),
|
||||
longitude: Number(item.longitude),
|
||||
country: item.country,
|
||||
orderUuid: item.orderUuid // Preserve orderUuid for hover matching
|
||||
country: item.country
|
||||
}))
|
||||
)
|
||||
|
||||
// Mobile view toggle
|
||||
const mobileView = ref<'list' | 'map'>('list')
|
||||
|
||||
// Map refs
|
||||
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
|
||||
const mobileMapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
|
||||
|
||||
// Handle item click from list
|
||||
const onItemClick = (item: MapItem) => {
|
||||
emit('select', item)
|
||||
emit('update:selectedId', item.uuid)
|
||||
|
||||
// Fly to item on map
|
||||
if (props.withMap && item.latitude && item.longitude) {
|
||||
mapRef.value?.flyTo(Number(item.latitude), Number(item.longitude), 8)
|
||||
mobileMapRef.value?.flyTo(Number(item.latitude), Number(item.longitude), 8)
|
||||
const onBoundsChange = (bounds: MapBounds) => {
|
||||
emit('bounds-change', bounds)
|
||||
if (props.useServerClustering) {
|
||||
fetchClusters(bounds)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -393,32 +215,23 @@ const onItemClick = (item: MapItem) => {
|
||||
const onMapSelect = (uuid: string) => {
|
||||
const item = props.items.find(i => i.uuid === uuid)
|
||||
if (item) {
|
||||
selectedMapItem.value = item
|
||||
emit('select', item)
|
||||
emit('update:selectedId', uuid)
|
||||
} else if (props.useServerClustering) {
|
||||
// For server clustering, item might not be in paginated props.items
|
||||
// Emit minimal item with just uuid so parent can still navigate
|
||||
// For server clustering, item might not be in props.items
|
||||
// Create minimal item with just uuid
|
||||
selectedMapItem.value = { uuid }
|
||||
emit('select', { uuid })
|
||||
emit('update:selectedId', uuid)
|
||||
}
|
||||
}
|
||||
|
||||
// Watch selectedId and fly to it
|
||||
watch(() => props.selectedId, (uuid) => {
|
||||
if (uuid && props.withMap) {
|
||||
const item = itemsWithCoords.value.find(i => i.uuid === uuid)
|
||||
if (item) {
|
||||
mapRef.value?.flyTo(item.latitude, item.longitude, 8)
|
||||
mobileMapRef.value?.flyTo(item.latitude, item.longitude, 8)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const onViewDetails = (item: MapItem) => {
|
||||
emit('select', item)
|
||||
}
|
||||
|
||||
// Expose flyTo for external use
|
||||
const flyTo = (lat: number, lng: number, zoom = 8) => {
|
||||
mapRef.value?.flyTo(lat, lng, zoom)
|
||||
mobileMapRef.value?.flyTo(lat, lng, zoom)
|
||||
}
|
||||
|
||||
defineExpose({ flyTo })
|
||||
|
||||
Reference in New Issue
Block a user