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