geodata: create new row on right-click/tap on map (pass data into expand form dialog - hacky code / needs refactoring

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

@@ -3,6 +3,8 @@ import 'leaflet/dist/leaflet.css'
 import L, { LatLng } from 'leaflet'
 import 'leaflet.markercluster'
 import { ViewTypes } from 'nocodb-sdk'
+// import contextmenu from 'vue3-contextmenu'
+// import 'vue3-contextmenu/dist/vue3-contextmenu.css'
 import { IsGalleryInj, IsGridInj, IsMapInj, OpenNewRecordFormHookInj, onMounted, provide, ref } from '#imports'
 
 import type { Row as RowType } from '~/lib'
@@ -28,6 +30,7 @@ const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook()
 const expandedFormDlg = ref(false)
 const expandedFormRow = ref<RowType>()
 const expandedFormRowState = ref<Record<string, any>>()
+const expandedFormClickedLatLongForNewRow = ref<[number, number]>()
 
 const fallBackCenterLocation = {
   lat: 51,
@@ -39,9 +42,11 @@ const getMapZoomLocalStorageKey = (viewId: string) => {
 }
 const getMapCenterLocalStorageKey = (viewId: string) => `mapView.center.${viewId}`
 
-const expandForm = (row: RowType, state?: Record<string, any>) => {
+const expandForm = (row: RowType, state?: Record<string, any>, clickedLatLongForNewRow?: [number, number]) => {
   const rowId = extractPkFromRow(row.row, meta.value!.columns!)
-
+  console.log('state in expandForm', state)
+  console.log('row in expandForm', row)
+  console.log('clickedLatLongForNewRow', clickedLatLongForNewRow)
   if (rowId) {
     router.push({
       query: {
@@ -50,9 +55,13 @@ const expandForm = (row: RowType, state?: Record<string, any>) => {
       },
     })
   } else {
+    expandedFormClickedLatLongForNewRow.value = clickedLatLongForNewRow
     expandedFormRow.value = row
     expandedFormRowState.value = state
     expandedFormDlg.value = true
+
+    // const lat = state?.lat
+    // const lng = state?.lng
   }
 }
 
@@ -81,8 +90,10 @@ const addMarker = (lat: number, long: number, row: RowType) => {
     throw new Error('Map is null')
   }
   const newMarker = L.marker([lat, long]).on('click', () => {
+    console.log('OnNewMarker')
     expandForm(row)
   })
+  console.log('onaddMarker', lat, long)
   markersClusterGroupRef.value?.addLayer(newMarker)
 }
 
@@ -135,6 +146,25 @@ onMounted(async () => {
       localStorage.setItem(getMapCenterLocalStorageKey(mapMetaData?.value?.fk_view_id), JSON.stringify(myMap.getCenter()))
     }
   })
+
+  // myMap.on('contextmenu', async function (e) {
+  // console.log('onContext')
+  // const newRow = await addEmptyRow()
+  // const lat = e.latlng.lat
+  // const lng = e.latlng.lng
+  // addMarker(lat, lng, newRow)
+  // expandForm(newRow)
+  // submitForm()
+  // })
+
+  myMap.on('contextmenu', async function (e) {
+    const newRow = await addEmptyRow()
+    const lat = e.latlng.lat
+    const lng = e.latlng.lng
+    addMarker(lat, lng, newRow)
+    console.log('oncontextClick', lat, lng, newRow)
+    expandForm(newRow, undefined, [lat, lng])
+  })
 })
 
 reloadViewMetaHook?.on(async () => {
@@ -182,13 +212,19 @@ watch(view, async (nextView) => {
   }
 })
 
-const count = computed(() => paginationData.value.totalRows)
+const expandedFormDlgInitialGeoPositionData = computed(() => ({
+  lat: expandedFormClickedLatLongForNewRow.value?.[0],
+  long: expandedFormClickedLatLongForNewRow.value?.[1],
+  geoColId: geoDataFieldColumn.value?.id,
+}))
 
-syncCount()
+const count = computed(() => paginationData.value.totalRows)
 </script>
 
 <template>
   <div class="flex flex-col h-full w-full no-underline">
+    expandedFormDlgInitialGeoPositionData: {{ JSON.stringify(expandedFormDlgInitialGeoPositionData) }}
+
     <div id="mapContainer" ref="mapContainerRef">
       <a-tooltip placement="bottom" class="tooltip">
         <template #title>
@@ -213,6 +249,7 @@ syncCount()
       :state="expandedFormRowState"
       :meta="meta"
       :view="view"
+      :initial-geo-position-data="expandedFormDlgInitialGeoPositionData"
     />
   </Suspense>
 

packages/nc-gui/components/smartsheet/expanded-form/index.vue

@@ -23,6 +23,12 @@ import {
 } from '#imports'
 import type { Row } from '~/lib'
 
+interface InitialGeoPositionData {
+  lat?: number
+  long?: number
+  geoColId?: string
+}
+
 interface Props {
   modelValue?: boolean
   row: Row
@@ -32,6 +38,7 @@ interface Props {
   useMetaFields?: boolean
   rowId?: string
   view?: ViewType
+  initialGeoPositionData?: InitialGeoPositionData
 }
 
 const props = defineProps<Props>()
@@ -44,6 +51,9 @@ const state = toRef(props, 'state')
 
 const meta = toRef(props, 'meta')
 
+// const initialGeoPositionData = toRef(props, 'initialGeoPositionData')
+const initialGeoPositionData = ref(props.initialGeoPositionData)
+
 const router = useRouter()
 
 const fields = computedInject(FieldsInj, (_fields) => {
@@ -125,6 +135,7 @@ if (isKanban.value) {
 const cellWrapperEl = ref<HTMLElement>()
 
 onMounted(() => {
+
   setTimeout(() => {
     ;(cellWrapperEl.value?.querySelector('input,select,textarea') as HTMLInputElement)?.focus()
   })
@@ -150,6 +161,8 @@ export default {
     <SmartsheetExpandedFormHeader :view="props.view" @cancel="onClose" />
 
     <div class="!bg-gray-100 rounded flex-1">
+      FOO geodata: {{ JSON.stringify(initialGeoPositionData) }} BAR
+
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[max(70vh,100%)]">
         <div class="flex-1 overflow-auto scrollbar-thin-dull nc-form-fields-container">
           <div class="w-[500px] mx-auto">

packages/nc-gui/package-lock.json

@@ -27,6 +27,8 @@
         "jsep": "^1.3.6",
         "just-clone": "^6.1.1",
         "jwt-decode": "^3.1.2",
+        "leaflet": "^1.9.2",
+        "leaflet.markercluster": "^1.5.3",
         "locale-codes": "^1.3.1",
         "monaco-editor": "^0.33.0",
         "nocodb-sdk": "file:../nocodb-sdk",
@@ -41,6 +43,7 @@
         "vue-dompurify-html": "^3.0.0",
         "vue-github-button": "^3.0.3",
         "vue-i18n": "^9.2.2",
+        "vue3-contextmenu": "^0.2.12",
         "vuedraggable": "^4.1.0",
         "xlsx": "^0.18.5"
       },
@@ -67,6 +70,9 @@
         "@nuxt/image-edge": "^1.0.0-27657146.da85542",
         "@types/axios": "^0.14.0",
         "@types/dagre": "^0.7.48",
+        "@types/file-saver": "^2.0.5",
+        "@types/leaflet": "^1.9.0",
+        "@types/leaflet.markercluster": "^1.5.1",
         "@types/papaparse": "^5.3.2",
         "@types/sortablejs": "^1.13.0",
         "@types/tinycolor2": "^1.4.3",
@@ -3120,7 +3126,8 @@
     "node_modules/@types/file-saver": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
-      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ=="
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
     },
     "node_modules/@types/form-data": {
       "version": "0.0.33",
@@ -3131,6 +3138,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
+      "dev": true
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -3143,6 +3156,24 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "node_modules/@types/leaflet": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.0.tgz",
+      "integrity": "sha512-7LeOSj7EloC5UcyOMo+1kc3S1UT3MjJxwqsMT1d2PTyvQz53w0Y0oSSk9nwZnOZubCmBvpSNGceucxiq+ZPEUw==",
+      "dev": true,
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
+    "node_modules/@types/leaflet.markercluster": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.1.tgz",
+      "integrity": "sha512-gzJzP10qO6Zkts5QNVmSAEDLYicQHTEBLT9HZpFrJiSww9eDAs5OWHvIskldf41MvDv1gbMukuEBQEawHn+wtA==",
+      "dev": true,
+      "dependencies": {
+        "@types/leaflet": "*"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
@@ -10650,6 +10681,19 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/leaflet": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
+      "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
+    },
+    "node_modules/leaflet.markercluster": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
+      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
+      "peerDependencies": {
+        "leaflet": "^1.3.1"
+      }
+    },
     "node_modules/less": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
@@ -11263,6 +11307,11 @@
         "minipass": "^2.9.0"
       }
     },
+    "node_modules/mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+    },
     "node_modules/mkdir": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/mkdir/-/mkdir-0.0.2.tgz",
@@ -17156,6 +17205,16 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue3-contextmenu": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/vue3-contextmenu/-/vue3-contextmenu-0.2.12.tgz",
+      "integrity": "sha512-lSA+Pq4wozbf9nDmMBvz2Z2DXwGwCEeXEDsmQi+cIxc5FzPa1Ia013hv5/DQZwr4dPilNxrOXPht1u0CMXcpVw==",
+      "dependencies": {
+        "core-js": "^3.6.5",
+        "mitt": "^2.1.0",
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vuedraggable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",
@@ -20023,7 +20082,8 @@
     "@types/file-saver": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.5.tgz",
-      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ=="
+      "integrity": "sha512-zv9kNf3keYegP5oThGLaPk8E081DFDuwfqjtiTzm6PoxChdJ1raSuADf2YGCVIyrSynLrgc8JWv296s7Q7pQSQ==",
+      "dev": true
     },
     "@types/form-data": {
       "version": "0.0.33",
@@ -20034,6 +20094,12 @@
         "@types/node": "*"
       }
     },
+    "@types/geojson": {
+      "version": "7946.0.10",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.10.tgz",
+      "integrity": "sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==",
+      "dev": true
+    },
     "@types/json-schema": {
       "version": "7.0.11",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -20046,6 +20112,24 @@
       "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
       "dev": true
     },
+    "@types/leaflet": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.0.tgz",
+      "integrity": "sha512-7LeOSj7EloC5UcyOMo+1kc3S1UT3MjJxwqsMT1d2PTyvQz53w0Y0oSSk9nwZnOZubCmBvpSNGceucxiq+ZPEUw==",
+      "dev": true,
+      "requires": {
+        "@types/geojson": "*"
+      }
+    },
+    "@types/leaflet.markercluster": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.1.tgz",
+      "integrity": "sha512-gzJzP10qO6Zkts5QNVmSAEDLYicQHTEBLT9HZpFrJiSww9eDAs5OWHvIskldf41MvDv1gbMukuEBQEawHn+wtA==",
+      "dev": true,
+      "requires": {
+        "@types/leaflet": "*"
+      }
+    },
     "@types/mdast": {
       "version": "3.0.10",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.10.tgz",
@@ -25443,6 +25527,17 @@
         }
       }
     },
+    "leaflet": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.3.tgz",
+      "integrity": "sha512-iB2cR9vAkDOu5l3HAay2obcUHZ7xwUBBjph8+PGtmW/2lYhbLizWtG7nTeYht36WfOslixQF9D/uSIzhZgGMfQ=="
+    },
+    "leaflet.markercluster": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
+      "integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
+      "requires": {}
+    },
     "less": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz",
@@ -25936,6 +26031,11 @@
         "minipass": "^2.9.0"
       }
     },
+    "mitt": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mitt/-/mitt-2.1.0.tgz",
+      "integrity": "sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg=="
+    },
     "mkdir": {
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/mkdir/-/mkdir-0.0.2.tgz",
@@ -30124,6 +30224,16 @@
         "is-plain-object": "3.0.1"
       }
     },
+    "vue3-contextmenu": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/vue3-contextmenu/-/vue3-contextmenu-0.2.12.tgz",
+      "integrity": "sha512-lSA+Pq4wozbf9nDmMBvz2Z2DXwGwCEeXEDsmQi+cIxc5FzPa1Ia013hv5/DQZwr4dPilNxrOXPht1u0CMXcpVw==",
+      "requires": {
+        "core-js": "^3.6.5",
+        "mitt": "^2.1.0",
+        "vue": "^3.0.0"
+      }
+    },
     "vuedraggable": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz",

packages/nc-gui/package.json

@@ -66,6 +66,7 @@
     "vue-dompurify-html": "^3.0.0",
     "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.2.2",
+    "vue3-contextmenu": "^0.2.12",
     "vuedraggable": "^4.1.0",
     "xlsx": "^0.18.5"
   },