259 lines
9.0 KiB
Vue
259 lines
9.0 KiB
Vue
<template>
|
|
<div class="flex flex-col flex-1 min-h-0 relative">
|
|
<!-- Loading state -->
|
|
<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 />
|
|
<Text tone="muted">{{ $t('catalogLanding.states.loading') }}</Text>
|
|
</Stack>
|
|
</Card>
|
|
</div>
|
|
|
|
<!-- 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="activePointColor"
|
|
:hovered-item-id="hoveredId"
|
|
:hovered-item="hoveredItem"
|
|
@select-item="onMapSelect"
|
|
@bounds-change="onBoundsChange"
|
|
/>
|
|
</ClientOnly>
|
|
</div>
|
|
|
|
<!-- View toggle (top RIGHT overlay) - works in both modes -->
|
|
<div class="absolute top-4 right-4 z-20 hidden lg:block">
|
|
<div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
|
|
<button
|
|
class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
|
|
:class="mapViewMode === 'offers' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
|
|
@click="setMapViewMode('offers')"
|
|
>
|
|
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #f97316">
|
|
<Icon name="lucide:shopping-bag" size="12" class="text-white" />
|
|
</span>
|
|
{{ $t('catalog.views.offers') }}
|
|
</button>
|
|
<button
|
|
class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
|
|
:class="mapViewMode === 'hubs' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
|
|
@click="setMapViewMode('hubs')"
|
|
>
|
|
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #22c55e">
|
|
<Icon name="lucide:warehouse" size="12" class="text-white" />
|
|
</span>
|
|
{{ $t('catalog.views.hubs') }}
|
|
</button>
|
|
<button
|
|
class="flex items-center gap-2 px-3 py-1.5 rounded-md text-sm font-medium transition-colors"
|
|
:class="mapViewMode === 'suppliers' ? 'bg-white/20 text-white' : 'text-white/70 hover:text-white hover:bg-white/10'"
|
|
@click="setMapViewMode('suppliers')"
|
|
>
|
|
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
|
|
<Icon name="lucide:factory" size="12" class="text-white" />
|
|
</span>
|
|
{{ $t('catalog.views.suppliers') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Left overlay panel (shown when showPanel is true) -->
|
|
<div
|
|
v-if="showPanel"
|
|
class="absolute top-4 left-4 bottom-4 z-10 w-96 max-w-[calc(100vw-2rem)] hidden lg:block"
|
|
>
|
|
<div class="bg-base-100/70 backdrop-blur-md rounded-xl shadow-lg border border-base-300/50 p-4 h-full overflow-y-auto">
|
|
<slot name="panel" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile bottom sheet -->
|
|
<div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
|
|
<!-- Mobile view toggle -->
|
|
<div class="flex justify-end px-4 mb-2">
|
|
<div class="flex gap-1 bg-black/30 backdrop-blur-md rounded-lg p-1 border border-white/10">
|
|
<button
|
|
class="flex items-center justify-center w-8 h-8 rounded-md transition-colors"
|
|
:class="mapViewMode === 'offers' ? 'bg-white/20' : 'hover:bg-white/10'"
|
|
@click="setMapViewMode('offers')"
|
|
>
|
|
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #f97316">
|
|
<Icon name="lucide:shopping-bag" size="12" class="text-white" />
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="flex items-center justify-center w-8 h-8 rounded-md transition-colors"
|
|
:class="mapViewMode === 'hubs' ? 'bg-white/20' : 'hover:bg-white/10'"
|
|
@click="setMapViewMode('hubs')"
|
|
>
|
|
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #22c55e">
|
|
<Icon name="lucide:warehouse" size="12" class="text-white" />
|
|
</span>
|
|
</button>
|
|
<button
|
|
class="flex items-center justify-center w-8 h-8 rounded-md transition-colors"
|
|
:class="mapViewMode === 'suppliers' ? 'bg-white/20' : 'hover:bg-white/10'"
|
|
@click="setMapViewMode('suppliers')"
|
|
>
|
|
<span class="w-5 h-5 rounded-full flex items-center justify-center" style="background-color: #3b82f6">
|
|
<Icon name="lucide:factory" size="12" class="text-white" />
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile panel (collapsible) - only when showPanel is true -->
|
|
<div
|
|
v-if="showPanel"
|
|
class="bg-base-100/70 backdrop-blur-md rounded-t-xl shadow-lg border border-base-300/50 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>
|
|
|
|
<div class="px-4 pb-4 overflow-y-auto" :class="mobilePanelExpanded ? 'h-[calc(60vh-2rem)]' : 'max-h-48'">
|
|
<slot name="panel" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
|
|
|
|
const { mapViewMode, setMapViewMode } = useCatalogSearch()
|
|
|
|
// Point color based on map view mode
|
|
const VIEW_MODE_COLORS = {
|
|
offers: '#f97316', // orange
|
|
hubs: '#22c55e', // green
|
|
suppliers: '#3b82f6' // blue
|
|
} as const
|
|
|
|
const activePointColor = computed(() => VIEW_MODE_COLORS[mapViewMode.value] || VIEW_MODE_COLORS.offers)
|
|
|
|
// Node type for server clustering based on view mode
|
|
const VIEW_MODE_NODE_TYPES = {
|
|
offers: 'offer',
|
|
hubs: 'logistics',
|
|
suppliers: 'supplier'
|
|
} as const
|
|
|
|
const activeClusterNodeType = computed(() => VIEW_MODE_NODE_TYPES[mapViewMode.value] || VIEW_MODE_NODE_TYPES.offers)
|
|
|
|
interface MapItem {
|
|
uuid: string
|
|
latitude?: number | null
|
|
longitude?: number | null
|
|
name?: string
|
|
country?: string
|
|
[key: string]: any
|
|
}
|
|
|
|
const props = withDefaults(defineProps<{
|
|
loading?: boolean
|
|
useServerClustering?: boolean
|
|
clusterNodeType?: string
|
|
mapId?: string
|
|
pointColor?: string
|
|
hoveredId?: string
|
|
items?: MapItem[]
|
|
showPanel?: boolean
|
|
}>(), {
|
|
loading: false,
|
|
useServerClustering: true,
|
|
clusterNodeType: 'offer',
|
|
mapId: 'catalog-map',
|
|
pointColor: '#f97316',
|
|
items: () => [],
|
|
showPanel: false
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'select': [item: MapItem]
|
|
'bounds-change': [bounds: MapBounds]
|
|
'update:hoveredId': [uuid: string | undefined]
|
|
}>()
|
|
|
|
// Server-side clustering - use computed node type based on view mode
|
|
const { clusteredNodes, fetchClusters } = useClusteredNodes(undefined, activeClusterNodeType)
|
|
|
|
// Map refs
|
|
const mapRef = ref<{ flyTo: (lat: number, lng: number, zoom?: number) => void } | null>(null)
|
|
|
|
// Selected item from map click
|
|
const selectedMapItem = ref<MapItem | null>(null)
|
|
|
|
// Mobile panel state
|
|
const mobilePanelExpanded = ref(false)
|
|
|
|
// Hovered item with coordinates for map highlight
|
|
const hoveredItem = computed(() => {
|
|
if (!props.hoveredId) return null
|
|
const item = props.items.find(i => i.uuid === props.hoveredId)
|
|
if (!item?.latitude || !item?.longitude) return null
|
|
return { latitude: Number(item.latitude), longitude: Number(item.longitude) }
|
|
})
|
|
|
|
// Filter items with valid coordinates for map (client-side mode only)
|
|
const itemsWithCoords = computed(() =>
|
|
props.items.filter(item =>
|
|
item.latitude != null &&
|
|
item.longitude != null &&
|
|
!isNaN(Number(item.latitude)) &&
|
|
!isNaN(Number(item.longitude))
|
|
).map(item => ({
|
|
uuid: item.uuid,
|
|
name: item.name || '',
|
|
latitude: Number(item.latitude),
|
|
longitude: Number(item.longitude),
|
|
country: item.country
|
|
}))
|
|
)
|
|
|
|
const onBoundsChange = (bounds: MapBounds) => {
|
|
emit('bounds-change', bounds)
|
|
if (props.useServerClustering) {
|
|
fetchClusters(bounds)
|
|
}
|
|
}
|
|
|
|
// Handle selection from map
|
|
const onMapSelect = (uuid: string) => {
|
|
const item = props.items.find(i => i.uuid === uuid)
|
|
if (item) {
|
|
selectedMapItem.value = item
|
|
emit('select', item)
|
|
} else if (props.useServerClustering) {
|
|
// For server clustering, item might not be in props.items
|
|
// Create minimal item with just uuid
|
|
selectedMapItem.value = { uuid }
|
|
emit('select', { uuid })
|
|
}
|
|
}
|
|
|
|
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)
|
|
}
|
|
|
|
defineExpose({ flyTo })
|
|
</script>
|