fix: separate list items from map points in orders page
All checks were successful
Build Docker Image / build (push) Successful in 4m58s

- Add mapItems prop to CatalogPage for separate map data
- List shows one card per order, map shows source+dest points
- Fix hover to match by orderUuid pattern
This commit is contained in:
Ruslan Bakiev
2026-01-08 14:52:58 +07:00
parent 75ef38c8b2
commit 01e8eb2cfa
2 changed files with 31 additions and 11 deletions

View File

@@ -166,6 +166,7 @@ interface MapItem {
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
items: MapItem[] items: MapItem[]
mapItems?: MapItem[] // Optional separate items for map (if different from list items)
loading?: boolean loading?: boolean
withMap?: boolean withMap?: boolean
mapId?: string mapId?: string
@@ -191,9 +192,12 @@ const emit = defineEmits<{
'update:hoveredId': [uuid: string | undefined] 'update:hoveredId': [uuid: string | undefined]
}>() }>()
// Use mapItems if provided, otherwise fall back to items
const itemsForMap = computed(() => props.mapItems || props.items)
// Filter items with valid coordinates for map // Filter items with valid coordinates for map
const itemsWithCoords = computed(() => const itemsWithCoords = computed(() =>
props.items.filter(item => itemsForMap.value.filter(item =>
item.latitude != null && item.latitude != null &&
item.longitude != null && item.longitude != null &&
!isNaN(Number(item.latitude)) && !isNaN(Number(item.latitude)) &&
@@ -203,7 +207,8 @@ const itemsWithCoords = computed(() =>
name: item.name || '', name: item.name || '',
latitude: Number(item.latitude), latitude: Number(item.latitude),
longitude: Number(item.longitude), longitude: Number(item.longitude),
country: item.country country: item.country,
orderUuid: item.orderUuid // Preserve orderUuid for hover matching
})) }))
) )
@@ -249,7 +254,12 @@ watch(() => props.selectedId, (uuid) => {
// Watch hoveredId and fly to it // Watch hoveredId and fly to it
watch(() => props.hoveredId, (uuid) => { watch(() => props.hoveredId, (uuid) => {
if (uuid && props.withMap) { if (uuid && props.withMap) {
const item = itemsWithCoords.value.find(i => i.uuid === uuid) // Try direct match first
let item = itemsWithCoords.value.find(i => i.uuid === uuid)
// If not found, try matching by orderUuid (for mapItems with separate source/dest points)
if (!item) {
item = itemsWithCoords.value.find(i => i.uuid === `${uuid}-source` || (i as any).orderUuid === uuid)
}
if (item) { if (item) {
mapRef.value?.flyTo(item.latitude, item.longitude, 8) mapRef.value?.flyTo(item.latitude, item.longitude, 8)
mobileMapRef.value?.flyTo(item.latitude, item.longitude, 8) mobileMapRef.value?.flyTo(item.latitude, item.longitude, 8)

View File

@@ -1,6 +1,7 @@
<template> <template>
<CatalogPage <CatalogPage
:items="itemsForMap" :items="listItems"
:map-items="mapPoints"
:loading="isLoading" :loading="isLoading"
map-id="orders-map" map-id="orders-map"
point-color="#6366f1" point-color="#6366f1"
@@ -94,14 +95,25 @@ const {
const selectedOrderId = ref<string>() const selectedOrderId = ref<string>()
const hoveredOrderId = ref<string>() const hoveredOrderId = ref<string>()
// Map items for CatalogPage - two points per order (source + destination) // List items - one per order (for card rendering)
const itemsForMap = computed(() => { const listItems = computed(() => {
return filteredItems.value.map(order => ({
...order,
uuid: order.uuid,
name: order.name || `#${order.uuid.slice(0, 8)}`,
latitude: order.sourceLatitude,
longitude: order.sourceLongitude,
country: order.sourceLocationName
}))
})
// Map points - two per order (source + destination)
const mapPoints = computed(() => {
const result: any[] = [] const result: any[] = []
filteredItems.value.forEach(order => { filteredItems.value.forEach(order => {
// Source point // Source point
if (order.sourceLatitude && order.sourceLongitude) { if (order.sourceLatitude && order.sourceLongitude) {
result.push({ result.push({
...order,
uuid: `${order.uuid}-source`, uuid: `${order.uuid}-source`,
name: `📦 ${order.sourceLocationName}`, name: `📦 ${order.sourceLocationName}`,
latitude: order.sourceLatitude, latitude: order.sourceLatitude,
@@ -114,7 +126,6 @@ const itemsForMap = computed(() => {
const lastStage = order.stages?.[order.stages.length - 1] const lastStage = order.stages?.[order.stages.length - 1]
if (lastStage?.destinationLatitude && lastStage?.destinationLongitude) { if (lastStage?.destinationLatitude && lastStage?.destinationLongitude) {
result.push({ result.push({
...order,
uuid: `${order.uuid}-dest`, uuid: `${order.uuid}-dest`,
name: `🏁 ${order.destinationLocationName}`, name: `🏁 ${order.destinationLocationName}`,
latitude: lastStage.destinationLatitude, latitude: lastStage.destinationLatitude,
@@ -128,9 +139,8 @@ const itemsForMap = computed(() => {
}) })
const onSelectOrder = (item: any) => { const onSelectOrder = (item: any) => {
const orderUuid = item.orderUuid || item.uuid selectedOrderId.value = item.uuid
selectedOrderId.value = orderUuid navigateTo(localePath(`/clientarea/orders/${item.uuid}`))
navigateTo(localePath(`/clientarea/orders/${orderUuid}`))
} }
await init() await init()