WIP layout in input of geodata column and adding markers to the map

packages/nc-gui/components/cell/GeoData.vue

@@ -139,7 +139,6 @@ const formState = reactive({
 })
 
 const handleFinish = () => {
-  console.log(`handleFinish - formState: `, formState)
   vModel.value = `${formState.latitude};${formState.longitude}`
   isExpanded = false
 }
@@ -191,15 +190,15 @@ const onGetCurrentLocation = () => {
   <a-dropdown :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" trigger="click">
     <a-button>{{ latLongStr }}</a-button>
     <template #overlay>
-      <a-form :model="formState" class="flex flex-col w-full" @finish="handleFinish">
+      <a-form :model="formState" class="flex flex-col dropdown" @finish="handleFinish">
-        <a-form-item label="Latitude">
+        <a-form-item class="inputLat" label="Lat">
           <a-input v-model:value="formState.latitude" type="number" step="0.0000001" required :max="90" :min="-90" />
         </a-form-item>
-        <a-form-item label="Longitude">
+        <a-form-item class="inputLng" label="Lng">
           <a-input v-model:value="formState.longitude" type="number" step="0.0000001" required :min="-180" :max="180" />
         </a-form-item>
         <a-form-item>
-          <a-form-item>
+          <a-form-item class="button-location">
             <a-button @click="onGetCurrentLocation">Your Location</a-button>
             <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin': isLoading }" />
           </a-form-item>
@@ -215,11 +214,26 @@ const onGetCurrentLocation = () => {
 input[type='number']:focus {
   @apply ring-transparent;
 }
-input {
+.dropdown {
-  max-width: 150px;
+  background-color: beige;
+  // padding-top: 2rem;
+  align-items: start;
+  height: 230px !important;
+  width: 200px !important;
+}
+.inputLat {
+  width: 180px;
+  margin-top: 2rem;
+  margin-right: 0.5rem;
+  margin-left: 0.5rem;
+}
+.inputLng {
+  width: 180px;
+  margin-right: 0.5rem;
+  margin-left: 0.5rem;
 }
-.heja {
+.button-location {
-  background-color: red;
+  margin-left: auto;
-  padding-top: 2rem;
+  margin-right: auto;
 }
 </style>

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

@@ -7,17 +7,21 @@ import { IsGalleryInj, IsGridInj, IsMapInj, onMounted, provide, ref } from '#imp
 
 import type { Row as RowType } from '~/lib'
 
+// const props = defineProps<Props>()
+// const emits = defineEmits<Emits>()
 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()
+// const openNewRecordFormHook = inject(OpenNewRecordFormHookInj, createEventHook())
+const { formattedData, loadMapData, loadMapMeta, mapMetaData, geoDataFieldColumn, insertRow } = useMapViewStoreOrThrow()
 
 const markersClusterGroupRef = ref<L.MarkerClusterGroup>()
 const mapContainerRef = ref<HTMLElement>()
 const myMapRef = ref<L.Map>()
+// const submitted = ref(false)
 
 const meta = inject(MetaInj, ref())
 const view = inject(ActiveViewInj, ref())
@@ -26,6 +30,39 @@ const expandedFormDlg = ref(false)
 const expandedFormRow = ref<RowType>()
 const expandedFormRowState = ref<Record<string, any>>()
 
+// const formState = reactive({})
+
+// const { syncLTARRefs, row } = useProvideSmartsheetRowStore(
+//   meta,
+//   ref({
+//     row: formState,
+//     oldRow: {},
+//     rowMeta: { new: true },
+//   }),
+// )
+
+// async function submitForm() {
+//   const insertedRowData = await insertRow({ row: formState, oldRow: {}, rowMeta: { new: true } })
+
+//   if (insertedRowData) {
+//     await syncLTARRefs(insertedRowData)
+//   }
+//   console.log('onsubmitForm')
+//   submitted.value = true
+// }
+
+
+// interface Props {
+//   // modelValue?: GeoLocationType | null
+//   modelValue?: string | null
+// }
+
+// interface Emits {
+//   (event: 'update:modelValue', model: GeoLocationType): void
+// }
+
+// const vModel = useVModel(props, 'modelValue', emits)
+
 const getMapZoomLocalStorageKey = (viewId: string) => {
   return `mapView.zoom.${viewId}`
 }
@@ -135,7 +172,7 @@ const resetZoomAndCenterBasedOnLocalStorage = () => {
   const initialCenter = initialCenterLocalStorageStr
     ? JSON.parse(initialCenterLocalStorageStr)
     : {
-        lat: 0.0,
+        lat: 51,
         lng: 0.0,
       }
 
@@ -171,6 +208,14 @@ onMounted(async () => {
       localStorage.setItem(getMapCenterLocalStorageKey(mapMetaData?.value?.fk_view_id), JSON.stringify(myMap.getCenter()))
     }
   })
+  myMap.on('contextmenu', async function (e) {
+    // const newRow = await addEmptyRow()
+    const lat = e.latlng.lat
+    const lng = e.latlng.lng
+    addMarker(lat, lng, newRow)
+    expandForm(newRow)
+    // submitForm()
+  })
 })
 
 watch(view, async (nextView) => {
@@ -180,14 +225,29 @@ watch(view, async (nextView) => {
     await resetZoomAndCenterBasedOnLocalStorage()
   }
 })
+
+// openNewRecordFormHook?.on(async () => {
+//   const newRow = await addEmptyRow()
+//   expandForm(newRow)
+// })
 </script>
 
 <template>
-  {{ JSON.stringify(mapMetaData) }}
   <div class="flex flex-col h-full w-full no-underline">
     <div id="mapContainer" ref="mapContainerRef"></div>
   </div>
 
+  <Suspense>
+    <LazySmartsheetExpandedForm
+      v-if="expandedFormRow && expandedFormDlg"
+      v-model="expandedFormDlg"
+      :row="expandedFormRow"
+      :state="expandedFormRowState"
+      :meta="meta"
+      :view="view"
+    />
+  </Suspense>
+
   <Suspense>
     <LazySmartsheetExpandedForm
       v-if="expandedFormOnRowIdDlg"

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef, Ref } from 'vue'
 import type { ColumnType, MapType, TableType, ViewType } from 'nocodb-sdk'
-import { ref, useInjectionState } from '#imports'
+import { ref, useInjectionState, useMetas } from '#imports'
 import type { Row } from '~/lib'
 
 const formatData = (list: Row[]) =>
@@ -50,6 +50,51 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
       })
     }
 
+    const { getMeta } = useMetas()
+
+    async function insertRow(
+      currentRow: Row,
+      _rowIndex = formattedData.value?.length,
+      ltarState: Record<string, any> = {},
+      {
+        metaValue = meta.value,
+        viewMetaValue = viewMeta.value,
+      }: { metaValue?: MapType; viewMetaValue?: ViewType | MapType } = {},
+    ) {
+      const row = currentRow.row
+      if (currentRow.rowMeta) currentRow.rowMeta.saving = true
+      try {
+        const { missingRequiredColumns, insertObj } = await populateInsertObject({
+          meta: metaValue!,
+          ltarState,
+          getMeta,
+          row,
+        })
+
+        if (missingRequiredColumns.size) return
+
+        const insertedData = await $api.dbViewRow.create(
+          NOCO,
+          project?.value.id as string,
+          metaValue?.id as string,
+          viewMetaValue?.id as string,
+          insertObj,
+        )
+
+        Object.assign(currentRow, {
+          row: { ...insertedData, ...row },
+          rowMeta: { ...(currentRow.rowMeta || {}), new: undefined },
+          oldRow: { ...insertedData },
+        })
+
+        return insertedData
+      } catch (error: any) {
+        message.error(await extractSdkResponseErrorMsg(error))
+      } finally {
+        if (currentRow.rowMeta) currentRow.rowMeta.saving = false
+      }
+    }
+
     return {
       formattedData,
       loadMapData,
@@ -57,6 +102,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
       updateMapMeta,
       mapMetaData,
       geoDataFieldColumn,
+      insertRow,
     }
   },
 )