From cf6151d462a2edefcb27bba0ef09174169c82aa5 Mon Sep 17 00:00:00 2001
From: flisowna <ewa.agnieszka.flis@gmail.com>
Date: Mon, 27 Feb 2023 22:17:16 +0100
Subject: [PATCH] add popup in the map shared view, popup opens on click

---
 packages/nc-gui/components/smartsheet/Map.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Map.vue b/packages/nc-gui/components/smartsheet/Map.vue
index d47d531303..41b11548af 100644
--- a/packages/nc-gui/components/smartsheet/Map.vue
+++ b/packages/nc-gui/components/smartsheet/Map.vue
@@ -83,7 +83,7 @@ const expandedFormOnRowIdDlg = computed({
   },
 })
 
-const addMarker = (lat: number, long: number, row: RowType) => {
+const addMarker = (lat: number, long: number, row: RowType, popupContent: string) => {
   if (markersClusterGroupRef.value == null) {
     throw new Error('Marker cluster is null')
   }
@@ -93,6 +93,10 @@ const addMarker = (lat: number, long: number, row: RowType) => {
     expandForm(row)
   })
   markersClusterGroupRef.value?.addLayer(newMarker)
+
+  if (newMarker && isPublic.value) {
+    newMarker.bindPopup(popupContent)
+  }
 }
 
 const resetZoomAndCenterBasedOnLocalStorage = () => {
@@ -189,9 +193,17 @@ watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
       return
     }
 
+    const listItems = Object.entries(row.row)
+      .map(([key, val]) => {
+        const prettyVal = val !== null && (typeof val === 'object' || Array.isArray(val)) ? JSON.stringify(val) : val
+        return `<li><b>${key}</b>: <br/>${prettyVal}</li>`
+      })
+      .join('')
+    const popupContent = `<ul>${listItems}</ul>`
+
     const [lat, long] = primaryGeoDataValue.split(';').map(parseFloat)
 
-    addMarker(lat, long, row)
+    addMarker(lat, long, row, popupContent)
   })
 })