fix: separate list items from map points in orders page
All checks were successful
Build Docker Image / build (push) Successful in 4m58s
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:
@@ -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)
|
||||||
|
|||||||
@@ -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()
|
||||||
|
|||||||
Reference in New Issue
Block a user