From 01e8eb2cfa9e7706e4a4024a2a96b6acbaa5f41a Mon Sep 17 00:00:00 2001
From: Ruslan Bakiev <572431+veikab@users.noreply.github.com>
Date: Thu, 8 Jan 2026 14:52:58 +0700
Subject: [PATCH] fix: separate list items from map points in orders page

- 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
---
 app/components/page/CatalogPage.vue   | 16 +++++++++++++---
 app/pages/clientarea/orders/index.vue | 26 ++++++++++++++++++--------
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/app/components/page/CatalogPage.vue b/app/components/page/CatalogPage.vue
index 226e322..2a7f2bd 100644
--- a/app/components/page/CatalogPage.vue
+++ b/app/components/page/CatalogPage.vue
@@ -166,6 +166,7 @@ interface MapItem {
 
 const props = withDefaults(defineProps<{
   items: MapItem[]
+  mapItems?: MapItem[]  // Optional separate items for map (if different from list items)
   loading?: boolean
   withMap?: boolean
   mapId?: string
@@ -191,9 +192,12 @@ const emit = defineEmits<{
   '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
 const itemsWithCoords = computed(() =>
-  props.items.filter(item =>
+  itemsForMap.value.filter(item =>
     item.latitude != null &&
     item.longitude != null &&
     !isNaN(Number(item.latitude)) &&
@@ -203,7 +207,8 @@ const itemsWithCoords = computed(() =>
     name: item.name || '',
     latitude: Number(item.latitude),
     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(() => props.hoveredId, (uuid) => {
   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) {
       mapRef.value?.flyTo(item.latitude, item.longitude, 8)
       mobileMapRef.value?.flyTo(item.latitude, item.longitude, 8)
diff --git a/app/pages/clientarea/orders/index.vue b/app/pages/clientarea/orders/index.vue
index 3376a85..110f6b6 100644
--- a/app/pages/clientarea/orders/index.vue
+++ b/app/pages/clientarea/orders/index.vue
@@ -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()