geodata: work on mapViewStore

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

@@ -14,11 +14,11 @@ provide(IsMapInj, ref(true))
 provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
 
-
+// const meta = inject(MetaInj, ref())
-const meta = inject(MetaInj, ref())
 const view = inject(ActiveViewInj, ref())
 
-const { loadData, formattedData: data } = useViewData(meta, view)
+// const { loadData, formattedData: data } = useViewData(meta, view)
+const { formattedData, loadMapData } = useMapViewStoreOrThrow()
 
 watch(view, async (nextView) => {
   if (nextView?.type === ViewTypes.MAP) {
@@ -31,7 +31,7 @@ watch(view, async (nextView) => {
 // const { isUIAllowed } = useUIPermission()
 
 onMounted(async () => {
-  await loadData()
+  await loadMapData()
   // const geodata = data.value[0].row.geo.split(';')
 })
 
@@ -41,10 +41,8 @@ const myMapRef = ref()
 // const longitude = ref()
 const markersRef = ref()
 
-const { staticData } = useMapViewStoreOrThrow()
-
 reloadViewDataHook?.on(async () => {
-  alert('reloadViewDataHook for Map')
+  loadMapData()
 })
 
 // function addMarker() {
@@ -76,7 +74,7 @@ onMounted(async () => {
 
 <template>
   <div class="flex flex-col h-full w-full">
-    {{ JSON.stringify(staticData) }}
+    {{ JSON.stringify(formattedData) }}
     <!-- <div class="flex m-4 gap-4">
       <label :for="latitude">latitude</label>
       <input v-model="latitude" />

packages/nc-gui/components/tabs/Smartsheet.vue

@@ -44,7 +44,7 @@ const reloadViewMetaEventHook = createEventHook<void | boolean>()
 const openNewRecordFormHook = createEventHook<void>()
 
 useProvideKanbanViewStore(meta, activeView)
-useProvideMapViewStore()
+useProvideMapViewStore(meta, activeView)
 
 // todo: move to store
 provide(MetaInj, meta)

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -1,12 +1,41 @@
-// const { project } = useProject()
+import type { ComputedRef, Ref } from 'vue'
+import type { MapType, TableType, ViewType } from 'nocodb-sdk'
+import { ref, useApi, useInjectionState } from '#imports'
 
-const [useProvideMapViewStore, useMapViewStore] = useInjectionState(() => {
+const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
-  const staticData = ['1', '2']
+  (
+    meta: Ref<TableType | MapType | undefined>,
+    viewMeta: Ref<ViewType | MapType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
+  ) => {
+    const formattedData = ref<string[]>()
 
-  return {
+    const { api } = useApi()
-    staticData,
+    const { project } = useProject()
-  }
+
-})
+    async function loadMapData() {
+      // 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
+      formattedData.value = []
+
+      //   alert('in loadMapData')
+      //   debugger
+      const res = await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!)
+
+      console.log('res in mapviewdatastore', res)
+
+      //   for (const data of res.list) {
+      //     formattedData.value = data.value
+      //   }
+      formattedData.value = res.list
+    }
+
+    return {
+      formattedData,
+      loadMapData,
+    }
+  },
+)
 
 export { useProvideMapViewStore }