add share view to map view

packages/nc-gui/components/shared-view/Map.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import {
+  ActiveViewInj,
+  FieldsInj,
+  IsPublicInj,
+  MetaInj,
+  ReadonlyInj,
+  ReloadViewDataHookInj,
+  useProvideMapViewStore,
+} from '#imports'
+
+const { sharedView, meta, sorts, nestedFilters } = useSharedView()
+
+const reloadEventHook = createEventHook()
+
+provide(ReloadViewDataHookInj, reloadEventHook)
+
+provide(ReadonlyInj, ref(true))
+
+provide(MetaInj, meta)
+
+provide(ActiveViewInj, sharedView)
+
+provide(FieldsInj, ref(meta.value?.columns || []))
+
+provide(IsPublicInj, ref(true))
+
+useProvideSmartsheetStore(sharedView, meta, true, sorts, nestedFilters)
+
+useProvideMapViewStore(meta, sharedView, true)
+</script>
+
+<template>
+  <div class="nc-container h-full mt-1.5 px-12">
+    <div class="flex flex-col h-full flex-1 min-w-0">
+      <LazySmartsheetToolbar />
+      <div class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
+        <LazySmartsheetMap />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -35,9 +35,9 @@ const { allowCSVDownload } = useSharedView()
 
     <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
 
-    <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
+    <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban || isMap" />
 
-    <LazySmartsheetToolbarShareView v-if="(isForm || isGrid || isKanban || isGallery) && !isPublic" />
+    <LazySmartsheetToolbarShareView v-if="(isForm || isGrid || isKanban || isGallery || isMap) && !isPublic" />
 
     <LazySmartsheetToolbarExport v-if="(!isPublic && !isUIAllowed('dataInsert')) || (isPublic && allowCSVDownload)" />
     <div class="flex-1" />

packages/nc-gui/components/smartsheet/toolbar/ShareView.vue

@@ -109,6 +109,9 @@ const sharedViewUrl = computed(() => {
     case ViewTypes.GALLERY:
       viewType = 'gallery'
       break
+    case ViewTypes.MAP:
+      viewType = 'map'
+      break
     default:
       viewType = 'view'
   }
@@ -334,7 +337,11 @@ const copyIframeCode = async () => {
 
           <div
             v-if="
-              shared && (shared.type === ViewTypes.GRID || shared.type === ViewTypes.KANBAN || shared.type === ViewTypes.GALLERY)
+              shared &&
+              (shared.type === ViewTypes.GRID ||
+                shared.type === ViewTypes.KANBAN ||
+                shared.type === ViewTypes.GALLERY ||
+                shared.type === ViewTypes.MAP)
             "
           >
             <!-- Allow Download -->

packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue

@@ -56,6 +56,9 @@ const sharedViewUrl = (view: SharedViewType) => {
     case ViewTypes.FORM:
       viewType = 'form'
       break
+    case ViewTypes.MAP:
+      viewType = 'map'
+      break
     case ViewTypes.KANBAN:
       viewType = 'kanban'
       break

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -1,7 +1,7 @@
 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'
+import { IsPublicInj, ref, useInjectionState, useMetas, useProject } from '#imports'
 import type { Row } from '~/lib'
 
 export const geodataToggleState = reactive({ show: false })
@@ -19,14 +19,26 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
     viewMeta: Ref<ViewType | MapType | undefined> | ComputedRef<(ViewType & { id: string }) | undefined>,
     where?: ComputedRef<string | undefined>,
   ) => {
+    if (!meta) {
+      throw new Error('Table meta is not available')
+    }
+
     const formattedData = ref<Row[]>([])
 
     const { api } = useApi()
+
     const { project } = useProject()
+
     const { $api } = useNuxtApp()
 
     const { isUIAllowed } = useUIPermission()
 
+    const isPublic = inject(IsPublicInj, ref(false))
+
+    const { sorts, nestedFilters } = useSmartsheetStoreOrThrow()
+
+    const { fetchSharedViewData } = useSharedView()
+
     const mapMetaData = ref<MapType>({})
 
     const geoDataFieldColumn = ref<ColumnType | undefined>()
@@ -41,6 +53,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
     }))
 
     async function syncCount() {
+      if (!isPublic) {
         const { count } = await $api.dbViewRow.count(
           NOCO,
           project?.value?.title as string,
@@ -49,6 +62,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
         )
         paginationData.value.totalRows = count
       }
+    }
 
     async function loadMapMeta() {
       if (!viewMeta?.value?.id || !meta?.value?.columns) return
@@ -58,14 +72,15 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
     }
 
     async function loadMapData() {
-      if (!viewMeta?.value?.id || !meta?.value?.columns) return
+      if ((!project?.value?.id || !meta.value?.id || !viewMeta.value?.id) && !isPublic.value) return
 
-      const res = await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!, {
+      const res = !isPublic.value
+        ? await api.dbViewRow.list('noco', project.value.id!, meta.value!.id!, viewMeta.value!.id!, {
             ...queryParams.value,
+            ...(isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(nestedFilters.value) }),
             where: where?.value,
           })
-
-      // syncCount()
+        : await fetchSharedViewData({ sortsArr: sorts.value, filtersArr: nestedFilters.value })
 
       formattedData.value = formatData(res.list)
     }

packages/nc-gui/pages/[projectType]/map/[viewId]/index.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import { definePageMeta } from '#imports'
+
+definePageMeta({
+  public: true,
+  requiresAuth: false,
+  layout: 'shared-view',
+})
+
+const route = useRoute()
+
+const { loadSharedView } = useSharedView()
+
+const showPassword = ref(false)
+
+try {
+  await loadSharedView(route.params.viewId as string)
+} catch (e: any) {
+  if (e?.response?.status === 403) {
+    showPassword.value = true
+  } else {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+</script>
+
+<template>
+  <NuxtLayout class="flex" name="shared-view">
+    <div v-if="showPassword">
+      <LazySharedViewAskPassword v-model="showPassword" />
+    </div>
+    <LazySharedViewMap v-else />
+  </NuxtLayout>
+</template>