geodata: add a new row on clicking on the plus icon

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

@@ -3,7 +3,7 @@ import 'leaflet/dist/leaflet.css'
 import L, { LatLng } from 'leaflet'
 import 'leaflet.markercluster'
 import { ViewTypes } from 'nocodb-sdk'
-import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imports'
+import { IsGalleryInj, IsGridInj, IsMapInj, OpenNewRecordFormHookInj, onMounted, provide, ref } from '#imports'
 
 import type { Row as RowType } from '~/lib'
 
@@ -13,7 +13,8 @@ provide(IsMapInj, ref(true))
 const route = useRoute()
 const router = useRouter()
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
-const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn, insertRow } = useMapViewStoreOrThrow()
+const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
+const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn, addEmptyRow } = useMapViewStoreOrThrow()
 
 const markersClusterGroupRef = ref<L.MarkerClusterGroup>()
 const mapContainerRef = ref<HTMLElement>()
@@ -21,6 +22,7 @@ const myMapRef = ref<L.Map>()
 
 const meta = inject(MetaInj, ref())
 const view = inject(ActiveViewInj, ref())
+const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
 
 const expandedFormDlg = ref(false)
 const expandedFormRow = ref<RowType>()
@@ -53,6 +55,11 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
   }
 }
 
+openNewRecordFormHook?.on(async () => {
+  const newRow = await addEmptyRow()
+  expandForm(newRow)
+})
+
 const expandedFormOnRowIdDlg = computed({
   get() {
     return !!route.query.rowId
@@ -137,11 +144,16 @@ onMounted(async () => {
   // })
 })
 
+reloadViewMetaHook?.on(async () => {
+  await loadMapMeta()
+})
+
 reloadViewDataHook?.on(async () => {
-  loadMapData()
-  loadMapMeta()
+  await loadMapData()
 })
 
+provide(ReloadRowDataHookInj, reloadViewDataHook)
+
 watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
   if (formattedData.value == null || mapMetaData.value?.fk_view_id == null || markersClusterGroupRef.value == null) {
     return

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -1,4 +1,4 @@
-import { reactive } from 'vue';
+import { reactive } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import type { ColumnType, MapType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import { ref, useInjectionState, useMetas } from '#imports'
@@ -116,6 +116,16 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
       }
     }
 
+    function addEmptyRow(addAfter = formattedData.value.length) {
+      formattedData.value.splice(addAfter, 0, {
+        row: {},
+        oldRow: {},
+        rowMeta: { new: true },
+      })
+
+      return formattedData.value[addAfter]
+    }
+
     return {
       formattedData,
       loadMapData,
@@ -123,6 +133,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
       updateMapMeta,
       mapMetaData,
       geoDataFieldColumn,
+      addEmptyRow,
       insertRow,
       geodataToggleState,
     }