From 5b28c5eb78f79d14c033c4bcccd4bae0412676d8 Mon Sep 17 00:00:00 2001
From: flisowna <ewa.agnieszka.flis@gmail.com>
Date: Fri, 4 Nov 2022 13:45:31 +0400
Subject: [PATCH] geodata: setting markers (still in hacky way) in map

---
 packages/nc-gui/components/smartsheet/Map.vue | 116 +++++++++++-------
 .../nc-gui/composables/useMapViewDataStore.ts |  63 ++++++----
 2 files changed, 109 insertions(+), 70 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/Map.vue b/packages/nc-gui/components/smartsheet/Map.vue
index 089496bf00..53ff32d6e9 100644
--- a/packages/nc-gui/components/smartsheet/Map.vue
+++ b/packages/nc-gui/components/smartsheet/Map.vue
@@ -3,49 +3,44 @@ import 'leaflet/dist/leaflet.css'
 import * as L from 'leaflet'
 // import { ViewTypes } from '~~/../nocodb-sdk/build/main'
 // import { ViewTypes } from 'nocodb-sdk'
-import { IsFormInj, IsGalleryInj, IsGridInj, IsMapInj, ReadonlyInj, onMounted, provide, ref, useUIPermission } from '#imports'
+// import { IsFormInj, IsGalleryInj, IsGridInj, IsMapInj, ReadonlyInj, onMounted, provide, ref, useUIPermission } from '#imports'
+import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imports'
+import type { Row } from '~/lib'
 
-const { isUIAllowed } = useUIPermission()
+// const { isUIAllowed } = useUIPermission()
 
 // provide(IsFormInj, ref(false))
 provide(IsGalleryInj, ref(false))
 provide(IsGridInj, ref(false))
 provide(IsMapInj, ref(true))
-provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
-
-
+// provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 // const meta = inject(MetaInj, ref())
 // const view = inject(ActiveViewInj, ref())
 
-const view = inject(ActiveViewInj, ref())
-const meta = inject(MetaInj, ref())
+// const view = inject(ActiveViewInj, ref())
+// const meta = inject(MetaInj, ref())
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 
 // const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
-const { formattedData, loadMapData, loadMapMeta, mapMetaData } = useMapViewStoreOrThrow()
-
-// const { loadData, formattedData: data } = useViewData(meta, view)
-// const { sharedView, sorts, nestedFilters } = useSharedView()
-
-
-const {
-  showSystemFields,
-  // sortedAndFilteredFields,
-  fields,
-  filteredFieldList,
-  // filterQuery,
-  showAll,
-  // hideAll,
-  // saveOrUpdate,
-  // metaColumnById,
-} = useViewColumns(view, meta)
-
-console.log('fields.value', fields.value)
-console.log('showSystemFields.value', showSystemFields.value)
-console.log('filteredFieldList.value', filteredFieldList.value)
-console.log('showAll.value', showAll.value)
-console.log('fields.value', fields.value)
+const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow()
+// const {
+//   showSystemFields,
+//   // sortedAndFilteredFields,
+//   fields,
+//   filteredFieldList,
+//   // filterQuery,
+//   showAll,
+//   // hideAll,
+//   // saveOrUpdate,
+//   // metaColumnById,
+// } = useViewColumns(view, meta)
+
+// console.log('fields.value', fields.value)
+// console.log('showSystemFields.value', showSystemFields.value)
+// console.log('filteredFieldList.value', filteredFieldList.value)
+// console.log('showAll.value', showAll.value)
+// console.log('fields.value', fields.value)
 
 const markerRef = ref()
 const myMapRef = ref()
@@ -64,9 +59,11 @@ const markersRef = ref<L.MarkerClusterGroup | undefined>()
 // const { isUIAllowed } = useUIPermission()
 
 onBeforeMount(async () => {
-  await loadMapData()
+  // console.log('onBeforeMount')
   await loadMapMeta()
-  console.log('on mapview mapMetaData', mapMetaData)
+  await loadMapData()
+  // console.log('IN BEFOREMOUNT: geoDataFieldColumn.value.title', geoDataFieldColumn?.value?.title)
+  // console.log('on mapview formatted', formattedData)
   // const geodata = data.value[0].row.geo.split(';')
 })
 
@@ -82,25 +79,48 @@ const { fk_geo_data_col_id } = mapMetaData.value
 
 console.log('fk_geo_data_col_id', fk_geo_data_col_id)
 
-watch(formattedData, () => {
+watch([formattedData, mapMetaData], () => {
+  // console.log('WATCH CALL FOR formattedData')
   markersRef.value?.clearLayers()
-  console.log('mapMetaData', mapMetaData?.value?.fk_geo_data_col_id)
+  // formattedData.get()
+  // const rows = Array.from(formattedData.value.values())
+  // console.log('rows', rows)
+
+  // console.log('IN WATCHER: geoDataFieldColumn.value', geoDataFieldColumn?.value)
+
   formattedData.value?.forEach((row) => {
-    console.log('fk_geo_data_col_id', fk_geo_data_col_id)
     // const [lat, long] =
-    console.log('meta', meta?.value?.columns)
+    // console.log('meta', meta?.value?.columns)
     console.log('row', row)
-    if (row?.geonew == null) return
 
-    const [lat, long] = row?.geonew.split(';').map(parseFloat)
-    if (lat == null || long == null) {
-      return
+    const primaryGeoDataColumnTitle = geoDataFieldColumn.value?.title
+
+    if (primaryGeoDataColumnTitle == null) {
+      throw new Error('Cannot find primary geo data column title')
     }
-    console.log('lat', lat)
+
+    console.log('primaryGeoDataColumnTitle', primaryGeoDataColumnTitle)
+
+    const primaryGeoDataValue = row[primaryGeoDataColumnTitle]
+    console.log('primaryGeoDataValue', primaryGeoDataValue)
+
+    const [lat, long] = primaryGeoDataValue.split(';')
+
+    console.log('lat, long', lat, long)
+
     addMarker(lat, long)
 
-    const selected = row?.rowMeta?.selected
-    console.log(selected)
+    // if (geoDataFieldColumn?.value?.title === null) return
+
+    // const [lat, long] = row?.split(';').map(parseFloat)
+    // if (lat == null || long == null) {
+    //   return
+    // }
+    // console.log('lat', lat)
+    // addMarker(lat, long)
+
+    // const selected = row?.rowMeta?.selected
+    // console.log(selected)
   })
 })
 
@@ -109,9 +129,8 @@ reloadViewDataHook?.on(async () => {
 })
 
 function addMarker(lat: number, long: number) {
-  // markersRef.value?.clearLayers()
   const markerNew = markerRef?.value?.([lat, long])
-  console.log(markersRef.value)
+  // console.log(markersRef.value)
   markersRef?.value?.addLayer(markerNew)
 
   myMapRef?.value?.addLayer(markersRef.value)
@@ -123,13 +142,15 @@ onMounted(async () => {
   const myMap = map('map').setView([51.505, -0.09], 13)
   markerRef.value = marker
   myMapRef.value = myMap
-  console.log('markerClusterGroup', L.markerClusterGroup)
+  // console.log('markerClusterGroup', L.markerClusterGroup)
   markersRef.value = L.markerClusterGroup()
 
   tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 19,
     attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
   }).addTo(myMap)
+
+  // addMarker(52, 0)
 })
 
 // const geodata = data.value[0].row.geo.split(';')
@@ -137,7 +158,8 @@ onMounted(async () => {
 
 <template>
   <div class="flex flex-col h-full w-full">
-    {{ JSON.stringify(mapMetaData) }}
+    {{ JSON.stringify(formattedData) }}
+    {{ JSON.stringify(geoDataFieldColumn?.title) }}
     <!-- {{ JSON.stringify(selected) }} -->
     <!-- {{ JSON.stringify(meta?.columns) }} -->
     <!-- <div class="flex m-4 gap-4">
diff --git a/packages/nc-gui/composables/useMapViewDataStore.ts b/packages/nc-gui/composables/useMapViewDataStore.ts
index 0012a5dd45..395722c4b6 100644
--- a/packages/nc-gui/composables/useMapViewDataStore.ts
+++ b/packages/nc-gui/composables/useMapViewDataStore.ts
@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref } from 'vue'
-import type { MapType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, MapType, TableType, ViewType } from 'nocodb-sdk'
 import { ref, useInjectionState } from '#imports'
 import type { Row } from '~/lib'
 
@@ -8,10 +8,10 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
     meta: Ref<TableType | MapType | undefined>,
     viewMeta: Ref<ViewType | MapType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
   ) => {
-    const formattedData = ref<Row[]>()
+    const formattedData = ref<Row[]>([])
 
-    // const { api } = useApi()
-    // const { project } = useProject()
+    const { api } = useApi()
+    const { project } = useProject()
     // const { $e, $api } = useNuxtApp()
     const { $api } = useNuxtApp()
 
@@ -19,43 +19,59 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
 
     // const geoDataField = ref<string>('')
 
-    // const geoDataFieldColumn = ref<ColumnType | undefined>()
+    const geoDataFieldColumn = ref<ColumnType | undefined>()
 
     async function loadMapMeta() {
       if (!viewMeta?.value?.id || !meta?.value?.columns) return
       mapMetaData.value = await $api.dbView.mapRead(viewMeta.value.id)
+      geoDataFieldColumn.value =
+        (meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}
     }
 
     async function loadMapData() {
-    //   if (!viewMeta?.value?.id || !meta?.value?.columns) return
+      if (!viewMeta?.value?.id || !meta?.value?.columns) return
+
+      //   formattedData.value = []
+
+      const res = await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!)
+
+      console.log('in useMapViewDataStore - res.list: ', res.list)
+
+      formattedData.value = res.list
 
-    //   formattedData.value = []
+      //   for (const data of res) {
+      //     const key = data.key
+      //     formattedData.value.set(key, data.value.list)
+      //   }
 
-    //   const res = await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!)
+      // //   geoDataFieldColumn.value =
+      // //     (meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}
 
-    // //   geoDataFieldColumn.value =
-    // //     (meta.value.columns as ColumnType[]).filter((f) => f.id === mapMetaData.value.fk_geo_data_col_id)[0] || {}
+      //   geoDataField.value = geoDataFieldColumn!.value!.title!
 
-    //   geoDataField.value = geoDataFieldColumn!.value!.title!
+      // //   const { fk_geo_data_col_id, meta: geo_meta } = mapMetaData.value
 
-    // //   const { fk_geo_data_col_id, meta: geo_meta } = mapMetaData.value
+      // //   const geoMetaObj: any.value = geo_meta ? JSON.parse(geo_meta as string) : {}
 
-    // //   const geoMetaObj: any.value = geo_meta ? JSON.parse(geo_meta as string) : {}
+      // //   console.log('column geodata', stackMetaObj.value[fk_geo_data_col_id])
+      //   // if ((!project?.value?.id || !meta.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
 
-    // //   console.log('column geodata', stackMetaObj.value[fk_geo_data_col_id])
-    //   // if ((!project?.value?.id || !meta.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
+      //   // reset formattedData & countByStack to avoid storing previous data after changing grouping field
 
-    //   // reset formattedData & countByStack to avoid storing previous data after changing grouping field
+      //   //   alert('in loadMapData')
+      //   //   debugger
 
-    //   //   alert('in loadMapData')
-    //   //   debugger
+      //   console.log('res in mapviewdatastore', res)
 
-    //   console.log('res in mapviewdatastore', res)
+      //   for (const data of res.list) {
+      //     formattedData.value = data.value
+      //     formattedData.value = res.list
+      //   }
 
-    //   //   for (const data of res.list) {
-    //   //     formattedData.value = data.value
-    //   //   }
-    //   formattedData.value = res.list
+      // for (const data of res) {
+      //     const key = data.key
+      //     formattedData.value.set(key, formatData(data.value.list))
+      //   }
     }
 
     return {
@@ -63,6 +79,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
       loadMapData,
       loadMapMeta,
       mapMetaData,
+      geoDataFieldColumn,
     }
   },
 )