461 lines
16 KiB
Vue
461 lines
16 KiB
Vue
<template>
|
|
<div class="fixed inset-0 flex flex-col">
|
|
<!-- 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="isInfoMode ? [] : (useServerClustering ? [] : itemsWithCoords)"
|
|
:clustered-points="isInfoMode ? [] : (useServerClustering && !useTypedClusters ? clusteredNodes : [])"
|
|
:clustered-points-by-type="isInfoMode ? undefined : (useServerClustering && useTypedClusters ? clusteredPointsByType : undefined)"
|
|
:use-server-clustering="useServerClustering && !isInfoMode"
|
|
:point-color="activePointColor"
|
|
:entity-type="activeEntityType"
|
|
:hovered-item-id="hoveredId"
|
|
:hovered-item="hoveredItem"
|
|
:related-points="relatedPoints"
|
|
:info-loading="infoLoading"
|
|
@select-item="onMapSelect"
|
|
@bounds-change="onBoundsChange"
|
|
/>
|
|
</ClientOnly>
|
|
</div>
|
|
|
|
<!-- View mode loading indicator -->
|
|
<div
|
|
v-if="clusterLoading"
|
|
class="absolute top-[116px] left-1/2 -translate-x-1/2 z-30 flex items-center gap-2 bg-black/50 backdrop-blur-md rounded-full px-4 py-2 border border-white/20"
|
|
>
|
|
<span class="loading loading-spinner loading-sm text-white" />
|
|
<span class="text-white text-sm">{{ $t('common.loading') }}</span>
|
|
</div>
|
|
|
|
<!-- List button (LEFT, opens panel) - hide when panel is open -->
|
|
<button
|
|
v-if="!isPanelOpen"
|
|
class="absolute top-[116px] left-4 z-20 hidden lg:flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-1.5 border border-white/10 text-white text-sm hover:bg-black/40 transition-colors"
|
|
@click="openPanel"
|
|
>
|
|
<Icon name="lucide:menu" size="16" />
|
|
<span>{{ $t('catalog.list') }}</span>
|
|
</button>
|
|
|
|
<!-- Filter by bounds checkbox (LEFT, next to panel when open) - only in selection mode -->
|
|
<label
|
|
v-if="selectMode !== null"
|
|
class="absolute top-[116px] left-[420px] z-20 hidden lg:flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-1.5 border border-white/10 cursor-pointer text-white text-sm hover:bg-black/40 transition-colors"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
:checked="filterByBounds"
|
|
class="checkbox checkbox-xs checkbox-primary"
|
|
@change="$emit('update:filter-by-bounds', ($event.target as HTMLInputElement).checked)"
|
|
/>
|
|
<span>{{ $t('catalog.search.filterByMap') }}</span>
|
|
</label>
|
|
|
|
|
|
<!-- View toggle (top RIGHT overlay, below header) - hide in info mode or when hideViewToggle -->
|
|
<div v-if="!isInfoMode && !hideViewToggle" class="absolute top-[116px] right-4 z-20 hidden lg:flex items-center gap-2">
|
|
<!-- View mode toggle -->
|
|
<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 panel (slides from left when isPanelOpen is true) -->
|
|
<Transition name="slide-left">
|
|
<div
|
|
v-if="isPanelOpen"
|
|
class="absolute top-[116px] left-4 bottom-4 z-30 max-w-[calc(100vw-2rem)] hidden lg:block"
|
|
:class="panelWidth"
|
|
>
|
|
<div class="bg-black/50 backdrop-blur-md rounded-xl shadow-lg border border-white/10 h-full flex flex-col text-white">
|
|
<slot name="panel" />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
|
|
<!-- Mobile bottom sheet -->
|
|
<div class="lg:hidden absolute bottom-0 left-0 right-0 z-20">
|
|
<!-- Mobile controls: List button + view toggle -->
|
|
<div class="flex justify-between px-4 mb-2">
|
|
<!-- List button (mobile) -->
|
|
<button
|
|
class="flex items-center gap-2 bg-black/30 backdrop-blur-md rounded-lg px-3 py-2 border border-white/10 text-white text-sm"
|
|
@click="openPanel"
|
|
>
|
|
<Icon name="lucide:menu" size="16" />
|
|
<span>{{ $t('catalog.list') }}</span>
|
|
</button>
|
|
|
|
<!-- Mobile view toggle - hide in info mode or when hideViewToggle -->
|
|
<div v-if="!isInfoMode && !hideViewToggle" 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 panel is open -->
|
|
<Transition name="slide-up">
|
|
<div
|
|
v-if="isPanelOpen"
|
|
class="bg-black/50 backdrop-blur-md rounded-t-xl shadow-lg border border-white/10 transition-all duration-300 text-white h-[60vh]"
|
|
>
|
|
<!-- Drag handle / close -->
|
|
<div
|
|
class="flex justify-center py-2 cursor-pointer"
|
|
@click="closePanel"
|
|
>
|
|
<div class="w-10 h-1 bg-white/30 rounded-full" />
|
|
</div>
|
|
|
|
<div class="px-4 pb-4 overflow-y-auto h-[calc(60vh-2rem)]">
|
|
<slot name="panel" />
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { MapBounds } from '~/components/catalog/CatalogMap.vue'
|
|
|
|
const { mapViewMode, setMapViewMode, selectMode, startSelect, cancelSelect } = useCatalogSearch()
|
|
|
|
// Panel is open when selectMode is set OR when showPanel prop is true (info/quote)
|
|
const isPanelOpen = computed(() => props.showPanel || selectMode.value !== null)
|
|
|
|
// Open panel based on current mapViewMode
|
|
const openPanel = () => {
|
|
const newSelectMode = mapViewMode.value === 'hubs' ? 'hub'
|
|
: mapViewMode.value === 'suppliers' ? 'supplier'
|
|
: 'product'
|
|
startSelect(newSelectMode)
|
|
}
|
|
|
|
// Close panel
|
|
const closePanel = () => {
|
|
cancelSelect()
|
|
}
|
|
|
|
// 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)
|
|
|
|
// Entity type for icons based on view mode
|
|
const VIEW_MODE_ENTITY_TYPES = {
|
|
offers: 'offer',
|
|
hubs: 'hub',
|
|
suppliers: 'supplier'
|
|
} as const
|
|
|
|
const activeEntityType = computed(() => VIEW_MODE_ENTITY_TYPES[mapViewMode.value] || VIEW_MODE_ENTITY_TYPES.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)
|
|
|
|
// Store current bounds for refetching when view mode changes
|
|
const currentBounds = ref<MapBounds | null>(null)
|
|
|
|
interface MapItem {
|
|
uuid?: string | null
|
|
latitude?: number | null
|
|
longitude?: number | null
|
|
name?: string | null
|
|
country?: string | null
|
|
}
|
|
|
|
const props = withDefaults(defineProps<{
|
|
loading?: boolean
|
|
useServerClustering?: boolean
|
|
clusterNodeType?: string
|
|
useTypedClusters?: boolean
|
|
mapId?: string
|
|
pointColor?: string
|
|
hoveredId?: string
|
|
items?: MapItem[]
|
|
showPanel?: boolean
|
|
filterByBounds?: boolean
|
|
infoLoading?: boolean
|
|
panelWidth?: string
|
|
hideViewToggle?: boolean
|
|
relatedPoints?: Array<{
|
|
uuid: string
|
|
name: string
|
|
latitude: number
|
|
longitude: number
|
|
type: 'hub' | 'supplier' | 'offer'
|
|
}>
|
|
}>(), {
|
|
loading: false,
|
|
useServerClustering: true,
|
|
clusterNodeType: 'offer',
|
|
useTypedClusters: false,
|
|
mapId: 'catalog-map',
|
|
pointColor: '#f97316',
|
|
items: () => [],
|
|
showPanel: false,
|
|
filterByBounds: false,
|
|
infoLoading: false,
|
|
panelWidth: 'w-96',
|
|
hideViewToggle: false,
|
|
relatedPoints: () => []
|
|
})
|
|
|
|
const emit = defineEmits<{
|
|
'select': [item: MapItem]
|
|
'bounds-change': [bounds: MapBounds]
|
|
'update:hoveredId': [uuid: string | undefined]
|
|
'update:filter-by-bounds': [value: boolean]
|
|
}>()
|
|
|
|
const useTypedClusters = computed(() => props.useTypedClusters && props.useServerClustering)
|
|
|
|
// Server-side clustering (single-type mode)
|
|
const { clusteredNodes, fetchClusters, loading: singleClusterLoading, clearNodes } = useClusteredNodes(undefined, activeClusterNodeType)
|
|
|
|
// Server-side clustering (typed mode)
|
|
const offerClusters = useClusteredNodes(undefined, ref('offer'))
|
|
const hubClusters = useClusteredNodes(undefined, ref('logistics'))
|
|
const supplierClusters = useClusteredNodes(undefined, ref('supplier'))
|
|
|
|
const clusteredPointsByType = computed(() => ({
|
|
offer: offerClusters.clusteredNodes.value,
|
|
hub: hubClusters.clusteredNodes.value,
|
|
supplier: supplierClusters.clusteredNodes.value
|
|
}))
|
|
|
|
const activeClusterType = computed<'offer' | 'hub' | 'supplier'>(() => {
|
|
if (mapViewMode.value === 'hubs') return 'hub'
|
|
if (mapViewMode.value === 'suppliers') return 'supplier'
|
|
return 'offer'
|
|
})
|
|
|
|
const clusterLoading = computed(() => {
|
|
if (!useTypedClusters.value) return singleClusterLoading.value
|
|
if (activeClusterType.value === 'hub') return hubClusters.loading.value
|
|
if (activeClusterType.value === 'supplier') return supplierClusters.loading.value
|
|
return offerClusters.loading.value
|
|
})
|
|
|
|
const clearInactiveClusters = (active: 'offer' | 'hub' | 'supplier') => {
|
|
if (active !== 'offer') offerClusters.clearNodes()
|
|
if (active !== 'hub') hubClusters.clearNodes()
|
|
if (active !== 'supplier') supplierClusters.clearNodes()
|
|
}
|
|
|
|
const fetchActiveClusters = async () => {
|
|
if (!currentBounds.value) return
|
|
clearInactiveClusters(activeClusterType.value)
|
|
if (activeClusterType.value === 'hub') {
|
|
await hubClusters.fetchClusters(currentBounds.value)
|
|
return
|
|
}
|
|
if (activeClusterType.value === 'supplier') {
|
|
await supplierClusters.fetchClusters(currentBounds.value)
|
|
return
|
|
}
|
|
await offerClusters.fetchClusters(currentBounds.value)
|
|
}
|
|
|
|
// Refetch clusters when view mode changes
|
|
watch(mapViewMode, async () => {
|
|
if (!props.useServerClustering) return
|
|
if (useTypedClusters.value) {
|
|
clearInactiveClusters(activeClusterType.value)
|
|
if (currentBounds.value) {
|
|
await fetchActiveClusters()
|
|
}
|
|
return
|
|
}
|
|
// Clear old data first
|
|
clearNodes()
|
|
// Refetch with current bounds if available
|
|
if (currentBounds.value) {
|
|
await fetchClusters(currentBounds.value)
|
|
}
|
|
})
|
|
|
|
// 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)
|
|
|
|
// Info mode - when relatedPoints are present, hide clusters and show only related points
|
|
const isInfoMode = computed(() => props.relatedPoints && props.relatedPoints.length > 0)
|
|
|
|
// 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) => {
|
|
currentBounds.value = bounds
|
|
emit('bounds-change', bounds)
|
|
// Don't fetch clusters when in info mode
|
|
if (props.useServerClustering && !isInfoMode.value) {
|
|
if (useTypedClusters.value) {
|
|
fetchActiveClusters()
|
|
} else {
|
|
fetchClusters(bounds)
|
|
}
|
|
}
|
|
}
|
|
|
|
// Handle selection from map
|
|
const onMapSelect = (uuid: string, properties?: Record<string, any>) => {
|
|
const item = props.items.find(i => i.uuid === uuid)
|
|
if (item) {
|
|
selectedMapItem.value = item
|
|
emit('select', item)
|
|
} else if (props.useServerClustering) {
|
|
// For server clustering, include properties from cluster data
|
|
const mapItem: MapItem = {
|
|
uuid,
|
|
name: properties?.name,
|
|
...properties
|
|
}
|
|
selectedMapItem.value = mapItem
|
|
emit('select', mapItem)
|
|
}
|
|
}
|
|
|
|
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, currentBounds })
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Drawer slide animation (desktop - left) */
|
|
.slide-left-enter-active,
|
|
.slide-left-leave-active {
|
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
|
|
.slide-left-enter-from,
|
|
.slide-left-leave-to {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Drawer slide animation (mobile - up) */
|
|
.slide-up-enter-active,
|
|
.slide-up-leave-active {
|
|
transition: transform 0.3s ease, opacity 0.3s ease;
|
|
}
|
|
|
|
.slide-up-enter-from,
|
|
.slide-up-leave-to {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
</style>
|