GeoData: show detail popup/sidebar when clicking on map marper (WIP; url query param is already updating correctly)

packages/nc-gui/components/smartsheet/Map.vue

@@ -4,9 +4,13 @@ import L from 'leaflet'
 import 'leaflet.markercluster'
 import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imports'
 
+import type { Row as RowType } from '~/lib'
+
 provide(IsGalleryInj, ref(false))
 provide(IsGridInj, ref(false))
 provide(IsMapInj, ref(true))
+const route = useRoute()
+const router = useRouter()
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow()
 
@@ -14,8 +18,34 @@ const markersClusterGroupRef = ref<L.MarkerClusterGroup>()
 const mapContainerRef = ref<HTMLElement>()
 const myMapRef = ref<L.Map>()
 
+const meta = inject(MetaInj, ref())
+const view = inject(ActiveViewInj, ref())
+
+const expandedFormDlg = ref(false)
+const expandedFormRow = ref<RowType>()
+const expandedFormRowState = ref<Record<string, any>>()
+
 console.log('meta', mapMetaData)
 
+const expandForm = (row: RowType, state?: Record<string, any>) => {
+  const rowId = extractPkFromRow(row.row, meta.value!.columns!)
+
+  // debugger
+
+  if (rowId) {
+    router.push({
+      query: {
+        ...route.query,
+        rowId,
+      },
+    })
+  } else {
+    expandedFormRow.value = row
+    expandedFormRowState.value = state
+    expandedFormDlg.value = true
+  }
+}
+
 onBeforeMount(async () => {
   await loadMapMeta()
   await loadMapData()
@@ -26,16 +56,18 @@ reloadViewDataHook?.on(async () => {
   loadMapMeta()
 })
 
-function addMarker(lat: number, long: number, popupContent: string) {
+function addMarker(lat: number, long: number, row: RowType) {
   if (markersClusterGroupRef.value == null) {
     throw new Error('Map is null')
   }
-  const newMarker = L.marker([lat, long])
+  const newMarker = L.marker([lat, long]).on('click', () => {
+    expandForm(row)
+  })
   markersClusterGroupRef.value?.addLayer(newMarker)
 
-  if (newMarker) {
-    newMarker.bindPopup(popupContent)
-  }
+  // if (newMarker) {
+  //   newMarker.bindPopup(popupContent)
+  // }
 }
 
 watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
@@ -54,15 +86,15 @@ watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
 
     const primaryGeoDataValue = row.row[primaryGeoDataColumnTitle]
 
-    const listItems = Object.entries(row)
-      .map(([key, val]) => {
-        const prettyVal = val !== null && (typeof val === 'object' || Array.isArray(val)) ? JSON.stringify(val) : val
+    // const listItems = Object.entries(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('')
+    //     return `<li><b>${key}</b>: <br/>${prettyVal}</li>`
+    //   })
+    //   .join('')
 
-    const popupContent = `<ul>${listItems}</ul>`
+    // const popupContent = `<ul>${listItems}</ul>`
 
     if (primaryGeoDataValue == null) {
       return
@@ -70,7 +102,7 @@ watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
 
     const [lat, long] = primaryGeoDataValue.split(';').map(parseFloat)
 
-    addMarker(lat, long, popupContent)
+    addMarker(lat, long, row)
   })
 })
 
@@ -116,9 +148,28 @@ onMounted(async () => {
 </script>
 
 <template>
+  <!-- {{ JSON.stringify(expandedFormDlg) }} -->
+  expandedFormRow: {{ JSON.stringify(expandedFormRow) }}
+  <br />
+  expandedFormRowState: {{ JSON.stringify(expandedFormRowState) }}
+  <!-- {{ JSON.stringify(meta) }} -->
+  <!-- {{ JSON.stringify(view) }} -->
+
   <div class="flex flex-col h-full w-full no-underline">
     <div id="mapContainer" ref="mapContainerRef"></div>
   </div>
+  <div :style="{ width: '200px', height: '200px', backgroundColor: 'red' }" class="FOO_BAR"></div>
+
+  <Suspense>
+    <LazySmartsheetExpandedForm
+      v-model="expandedFormDlg"
+      :row="expandedFormRow"
+      :state="expandedFormRowState"
+      :meta="meta"
+      :view="view"
+    />
+    <template #fallback> Loading... </template>
+  </Suspense>
 </template>
 
 <style scoped lang="scss">