Follow up fixes on geodata column and map view

packages/nc-gui/components.d.ts

@@ -104,6 +104,7 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
     MaterialSymbolsKeyboardReturn: typeof import('~icons/material-symbols/keyboard-return')['default']
     MaterialSymbolsLightModeOutline: typeof import('~icons/material-symbols/light-mode-outline')['default']
+    MaterialSymbolsMobileFriendly: typeof import('~icons/material-symbols/mobile-friendly')['default']
     MaterialSymbolsRocketLaunchOutline: typeof import('~icons/material-symbols/rocket-launch-outline')['default']
     MaterialSymbolsSendOutline: typeof import('~icons/material-symbols/send-outline')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']

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

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { GeoLocationType } from 'nocodb-sdk'
 import { Modal as AModal, latLongToJoinedString, useVModel } from '#imports'
+import GpsFixedIcon from '~icons/mdi/gps-fixed'
+import OpenInNewIcon from '~icons/mdi/open-in-new'
 
 interface Props {
   modelValue?: string | null
@@ -49,14 +51,14 @@ const clear = () => {
 
 const onClickSetCurrentLocation = () => {
   isLoading = true
-  const onSuccess = (position) => {
+  const onSuccess: PositionCallback = (position: GeolocationPosition) => {
     const crd = position.coords
-    formState.latitude = crd.latitude
-    formState.longitude = crd.longitude
+    formState.latitude = `${crd.latitude}`
+    formState.longitude = `${crd.longitude}`
     isLoading = false
   }
 
-  const onError = (err) => {
+  const onError: PositionErrorCallback = (err) => {
     console.error(`ERROR(${err.code}): ${err.message}`)
     isLoading = false
   }
@@ -68,13 +70,25 @@ const onClickSetCurrentLocation = () => {
   }
   navigator.geolocation.getCurrentPosition(onSuccess, onError, options)
 }
+
+const openInGoogleMaps = () => {
+  const [latitude, longitude] = (vModel.value || '').split(';')
+  const url = `https://www.google.com/maps/search/?api=1&query=${latitude},${longitude}`
+  window.open(url, '_blank')
+}
+
+const openInOSM = () => {
+  const [latitude, longitude] = (vModel.value || '').split(';')
+  const url = `https://www.openstreetmap.org/?mlat=${latitude}&mlon=${longitude}#map=15/${latitude}/${longitude}`
+  window.open(url, '_blank')
+}
 </script>
 
 <template>
   <a-dropdown :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" trigger="click">
     <div
       v-if="!isLocationSet"
-      class="group cursor-pointer flex gap-1 items-center mx-auto max-w-32 justify-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
+      class="group cursor-pointer flex gap-1 items-center mx-auto max-w-64 justify-center active:(ring ring-accent ring-opacity-100) rounded border-1 p-1 shadow-sm hover:(bg-primary bg-opacity-10) dark:(!bg-slate-500)"
     >
       <div class="flex items-center gap-2" data-testid="nc-geo-data-set-location-button">
         <MdiMapMarker class="transform dark:(!text-white) group-hover:(!text-accent scale-120) text-gray-500 text-[0.75rem]" />
@@ -85,7 +99,7 @@ const onClickSetCurrentLocation = () => {
     </div>
     <div v-else data-testid="nc-geo-data-lat-long-set">{{ latLongStr }}</div>
     <template #overlay>
-      <a-form :model="formState" class="flex flex-col" @finish="handleFinish">
+      <a-form :model="formState" class="flex flex-col w-max-64" @finish="handleFinish">
         <a-form-item>
           <div class="flex mt-4 items-center mx-2">
             <div class="mr-2">{{ $t('labels.lat') }}:</div>
@@ -122,13 +136,21 @@ const onClickSetCurrentLocation = () => {
           </div>
         </a-form-item>
         <a-form-item>
-          <div class="flex items-center mr-2">
+          <div class="mr-2 flex flex-col items-end gap-1 text-left">
             <MdiReload v-if="isLoading" :class="{ 'animate-infinite animate-spin text-gray-500': isLoading }" />
-            <a-button class="ml-2" @click="onClickSetCurrentLocation">{{ $t('labels.yourLocation') }}</a-button>
+            <a-button class="ml-2" @click="onClickSetCurrentLocation"
+              ><GpsFixedIcon class="mr-2" />{{ $t('labels.currentLocation') }}</a-button
+            >
+          </div>
+        </a-form-item>
+        <a-form-item v-if="vModel">
+          <div class="mr-2 flex flex-row items-end gap-1 text-left">
+            <a-button @click="openInOSM"><OpenInNewIcon class="mr-2" />{{ $t('activity.map.openInOpenStreetMap') }}</a-button>
+            <a-button @click="openInGoogleMaps"><OpenInNewIcon class="mr-2" />{{ $t('activity.map.openInGoogleMaps') }}</a-button>
           </div>
         </a-form-item>
         <a-form-item>
-          <div class="ml-auto mr-2">
+          <div class="ml-auto mr-2 w-auto">
             <a-button type="text" @click="clear">{{ $t('general.cancel') }}</a-button>
             <a-button type="primary" html-type="submit" data-testid="nc-geo-data-save">{{ $t('general.submit') }}</a-button>
           </div>

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

@@ -4,10 +4,14 @@ import L, { LatLng } from 'leaflet'
 import 'leaflet.markercluster'
 import { ViewTypes } from 'nocodb-sdk'
 import { IsPublicInj, OpenNewRecordFormHookInj, latLongToJoinedString, onMounted, provide, ref } from '#imports'
-import type { Row as RowType } from '~/lib'
+import type { Row, Row as RowType } from '~/lib'
 
 const route = useRoute()
 
+const popupIsOpen = ref(false)
+const popUpRow = ref<Row>()
+const fields = inject(FieldsInj, ref([]))
+
 const router = useRouter()
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
@@ -90,7 +94,12 @@ const addMarker = (lat: number, long: number, row: RowType) => {
   const newMarker = L.marker([lat, long], {
     alt: `${lat}, ${long}`,
   }).on('click', () => {
-    expandForm(row)
+    if (newMarker && isPublic.value) {
+      popUpRow.value = row
+      popupIsOpen.value = true
+    } else {
+      expandForm(row)
+    }
   })
   markersClusterGroupRef.value?.addLayer(newMarker)
 }
@@ -188,9 +197,7 @@ watch([formattedData, mapMetaData, markersClusterGroupRef], () => {
     if (primaryGeoDataValue == null) {
       return
     }
-
     const [lat, long] = primaryGeoDataValue.split(';').map(parseFloat)
-
     addMarker(lat, long, row)
   })
 })
@@ -206,6 +213,10 @@ const count = computed(() => paginationData.value.totalRows)
 </script>
 
 <template>
+  <a-modal v-model:visible="popupIsOpen" :footer="null" centered :closable="false" @close="popupIsOpen = false">
+    <LazySmartsheetSharedMapMarkerPopup v-if="popUpRow" :fields="fields" :row="popUpRow"></LazySmartsheetSharedMapMarkerPopup>
+  </a-modal>
+
   <div class="flex flex-col h-full w-full no-underline" data-testid="nc-map-wrapper">
     <div id="mapContainer" ref="mapContainerRef" class="w-full h-screen">
       <a-tooltip placement="bottom" class="h-2 w-auto max-w-fit-content absolute top-3 right-3 p-2 z-500 cursor-default">
@@ -259,8 +270,16 @@ const count = computed(() => paginationData.value.totalRows)
 .no-underline a {
   text-decoration: none !important;
 }
+
 .leaflet-popup-content-wrapper {
   max-height: 255px;
   overflow: scroll;
 }
+
+.popup-content {
+  user-select: text;
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+}
 </style>

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

@@ -0,0 +1,182 @@
+<script lang="ts" setup>
+import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+
+import { ViewTypes, isVirtualCol } from 'nocodb-sdk'
+import {
+  ActiveViewInj,
+  ChangePageInj,
+  FieldsInj,
+  IsFormInj,
+  IsGalleryInj,
+  IsGridInj,
+  MetaInj,
+  PaginationDataInj,
+  ReloadRowDataHookInj,
+  ReloadViewDataHookInj,
+  ReloadViewMetaHookInj,
+  computed,
+  inject,
+  isImage,
+  isLTAR,
+  nextTick,
+  onMounted,
+  provide,
+  ref,
+  useAttachment,
+  useViewData,
+} from '#imports'
+import type { Row } from '~/lib'
+
+interface Attachment {
+  url: string
+}
+
+const props = defineProps<{
+  fields: ColumnType[]
+  row: Row
+}>()
+
+const meta = inject(MetaInj, ref())
+const view = inject(ActiveViewInj, ref())
+const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
+const reloadViewDataHook = inject(ReloadViewDataHookInj)
+
+const { loadData, paginationData, loadGalleryData, galleryData, changePage } = useViewData(meta, view)
+
+provide(IsFormInj, ref(false))
+provide(IsGalleryInj, ref(true))
+provide(IsGridInj, ref(false))
+provide(PaginationDataInj, paginationData)
+provide(ChangePageInj, changePage)
+
+const fields = inject(FieldsInj, ref([]))
+
+const { getPossibleAttachmentSrc } = useAttachment()
+
+const fieldsWithoutCover = computed(() => fields.value.filter((f) => f.id !== galleryData.value?.fk_cover_image_col_id))
+
+const coverImageColumn: any = $(
+  computed(() =>
+    meta.value?.columnsById
+      ? meta.value.columnsById[galleryData.value?.fk_cover_image_col_id as keyof typeof meta.value.columnsById]
+      : {},
+  ),
+)
+
+const isRowEmpty = (record: any, col: any) => {
+  const val = record.row[col.title]
+  if (!val) return true
+
+  return Array.isArray(val) && val.length === 0
+}
+
+const attachments = (record: any): Attachment[] => {
+  try {
+    if (coverImageColumn?.title && record.row[coverImageColumn.title]) {
+      return typeof record.row[coverImageColumn.title] === 'string'
+        ? JSON.parse(record.row[coverImageColumn.title])
+        : record.row[coverImageColumn.title]
+    }
+    return []
+  } catch (e) {
+    return []
+  }
+}
+
+const reloadAttachments = ref(false)
+
+reloadViewMetaHook?.on(async () => {
+  await loadGalleryData()
+
+  reloadAttachments.value = true
+
+  nextTick(() => {
+    reloadAttachments.value = false
+  })
+})
+reloadViewDataHook?.on(async () => {
+  await loadData()
+})
+
+onMounted(async () => {
+  await loadData()
+
+  await loadGalleryData()
+})
+
+provide(ReloadRowDataHookInj, reloadViewDataHook)
+
+watch(view, async (nextView) => {
+  if (nextView?.type === ViewTypes.GALLERY) {
+    await loadData()
+    await loadGalleryData()
+  }
+})
+
+const currentRow = toRef(props, 'row')
+
+const { row } = useProvideSmartsheetRowStore(meta as Ref<TableType>, currentRow)
+</script>
+
+<template>
+  <LazySmartsheetRow :row="row">
+    <a-card
+      hoverable
+      class="!rounded-lg h-full overflow-hidden break-all max-w-[450px]"
+      :data-testid="`nc-gallery-card-${row.row.id}`"
+    >
+      <template v-if="galleryData?.fk_cover_image_col_id" #cover>
+        <a-carousel v-if="!reloadAttachments && attachments(row).length" autoplay class="gallery-carousel" arrows>
+          <template #customPaging>
+            <a>
+              <div class="pt-[12px]">
+                <div></div>
+              </div>
+            </a>
+          </template>
+
+          <template #prevArrow>
+            <div style="z-index: 1"></div>
+          </template>
+
+          <template #nextArrow>
+            <div style="z-index: 1"></div>
+          </template>
+
+          <template v-for="(attachment, index) in attachments(row)">
+            <LazyCellAttachmentImage
+              v-if="isImage(attachment.title, attachment.mimetype ?? attachment.type)"
+              :key="`carousel-${row.row.id}-${index}`"
+              class="h-52 object-contain"
+              :srcs="getPossibleAttachmentSrc(attachment)"
+            />
+          </template>
+        </a-carousel>
+
+        <MdiFileImageBox v-else class="w-full h-48 my-4 text-cool-gray-200" />
+      </template>
+
+      <div v-for="col in fieldsWithoutCover" :key="`record-${row.row.id}-${col.id}`">
+        <div
+          v-if="!isRowEmpty(row, col) || isLTAR(col.uidt)"
+          class="flex flex-col space-y-1 px-4 mb-6 bg-gray-50 rounded-lg w-full"
+        >
+          <div class="flex flex-row w-full justify-start border-b-1 border-gray-100 py-2.5">
+            <div class="w-full text-gray-600">
+              <LazySmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="true" />
+
+              <LazySmartsheetHeaderCell v-else :column="col" :hide-menu="true" />
+            </div>
+          </div>
+
+          <div class="flex flex-row w-full pb-3 pt-2 pl-2 items-center justify-start">
+            <LazySmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :column="col" :row="row" />
+
+            <LazySmartsheetCell v-else v-model="row.row[col.title]" :column="col" :edit-enabled="false" :read-only="true" />
+          </div>
+        </div>
+      </div>
+    </a-card>
+  </LazySmartsheetRow>
+</template>

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -22,7 +22,7 @@ const formatData = (list: Record<string, any>[]) =>
 
 const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
   (
-    meta: Ref<TableType | undefined>,
+    meta: Ref<MapType | undefined>,
     viewMeta: Ref<ViewType | MapType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
     shared = false,
     where?: ComputedRef<string | undefined>,
@@ -31,6 +31,8 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
       throw new Error('Table meta is not available')
     }
 
+    const defaultPageSize = 1000
+
     const formattedData = ref<Row[]>([])
 
     const { api } = useApi()
@@ -45,14 +47,12 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
 
     const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
 
-    const { fetchSharedViewData } = useSharedView()
+    const { sharedView, fetchSharedViewData } = useSharedView(defaultPageSize)
 
     const mapMetaData = ref<MapType>({})
 
     const geoDataFieldColumn = ref<ColumnType | undefined>()
 
-    const defaultPageSize = 1000
-
     const paginationData = ref<PaginatedType>({ page: 1, pageSize: defaultPageSize })
 
     const queryParams = computed(() => ({
@@ -72,7 +72,10 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
 
     async function loadMapMeta() {
       if (!viewMeta?.value?.id || !meta?.value?.columns) return
-      mapMetaData.value = await $api.dbView.mapRead(viewMeta.value.id)
+      mapMetaData.value = isPublic.value ? (sharedView.value?.view as MapType) : await $api.dbView.mapRead(viewMeta.value.id)
+
+      // 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] || {}
     }