geodata: changing primary geodata column on map view

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

@@ -18,7 +18,7 @@ const { allowCSVDownload } = useSharedView()
     style="z-index: 7"
   >
     <LazySmartsheetToolbarViewActions
-      v-if="(isGrid || isGallery || isKanban) && !isPublic && isUIAllowed('dataInsert')"
+      v-if="(isGrid || isGallery || isKanban || isMap) && !isPublic && isUIAllowed('dataInsert')"
       :show-system-fields="false"
       class="ml-1"
     />
@@ -29,9 +29,11 @@ const { allowCSVDownload } = useSharedView()
 
     <LazySmartsheetToolbarKanbanStackEditOrAdd v-if="isKanban" />
 
+    <LazySmartsheetToolbarMappedBy v-if="isMap" />
+
     <LazySmartsheetToolbarFieldsMenu v-if="isGrid || isGallery || isKanban || isMap" :show-system-fields="false" />
 
-    <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban" />
+    <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap" />
 
     <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban" />
 

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

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import type { MapType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import type { SelectProps } from 'ant-design-vue'
+import {
+  ActiveViewInj,
+  IsLockedInj,
+  IsPublicInj,
+  MetaInj,
+  ReloadViewDataHookInj,
+  computed,
+  inject,
+  ref,
+  useViewColumns,
+  watch,
+} from '#imports'
+
+const meta = inject(MetaInj, ref())
+
+const activeView = inject(ActiveViewInj, ref())
+
+const IsPublic = inject(IsPublicInj, ref(false))
+
+const reloadDataHook = inject(ReloadViewDataHookInj)!
+
+const isLocked = inject(IsLockedInj, ref(false))
+
+const { fields, loadViewColumns, metaColumnById } = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
+
+const { loadMapData, loadMapMeta, updateMapMeta, mapMetaData, geoDataFieldColumn } = useMapViewStoreOrThrow()
+
+const stackedByDropdown = ref(false)
+
+watch(
+  () => activeView.value?.id,
+  async (newVal, oldVal) => {
+    if (newVal !== oldVal && meta.value) {
+      await loadViewColumns()
+    }
+  },
+  { immediate: true },
+)
+
+const geoDataMappingFieldColumnId = computed({
+  get: () => mapMetaData.value.fk_geo_data_col_id,
+  set: async (val) => {
+    if (val) {
+      await updateMapMeta({
+        fk_geo_data_col_id: val,
+      })
+      await loadMapMeta()
+      await loadMapData()
+      ;(activeView.value?.view as MapType).fk_geo_data_col_id = val
+    }
+  },
+})
+
+const geoDataFieldOptions = computed<SelectProps['options']>(() => {
+  return fields.value
+    ?.filter((el) => el.fk_column_id && metaColumnById.value[el.fk_column_id].uidt === UITypes.GeoData)
+    .map((field) => {
+      return {
+        value: field.fk_column_id,
+        label: field.title,
+      }
+    })
+})
+
+const handleChange = () => {
+  stackedByDropdown.value = false
+}
+</script>
+
+<template>
+  <a-dropdown
+    v-if="!IsPublic"
+    v-model:visible="stackedByDropdown"
+    :trigger="['click']"
+    overlay-class-name="nc-dropdown-kanban-stacked-by-menu"
+  >
+    <div class="nc-kanban-btn">
+      <a-button
+        v-e="['c:kanban:change-grouping-field']"
+        class="nc-kanban-stacked-by-menu-btn nc-toolbar-btn"
+        :disabled="isLocked"
+      >
+        <div class="flex items-center gap-1">
+          <mdi-arrow-down-drop-circle-outline />
+          <span class="text-capitalize !text-sm font-weight-normal">
+            {{ $t('activity.map.mappedBy') }}
+            <span class="font-bold">{{ geoDataFieldColumn?.title }}</span>
+          </span>
+          <MdiMenuDown class="text-grey" />
+        </div>
+      </a-button>
+    </div>
+    <template #overlay>
+      <div
+        v-if="stackedByDropdown"
+        class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
+        @click.stop
+      >
+        <div>
+          <span class="font-bold"> {{ $t('activity.map.chooseMappingField') }}</span>
+          <a-divider class="!my-2" />
+        </div>
+        <div class="nc-fields-list py-1">
+          <div class="grouping-field">
+            <a-select
+              v-model:value="geoDataMappingFieldColumnId"
+              class="w-full nc-kanban-grouping-field-select"
+              :options="geoDataFieldOptions"
+              placeholder="Select a Mapping Field"
+              @change="handleChange"
+              @click.stop
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+  </a-dropdown>
+</template>

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -14,6 +14,8 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
     const { project } = useProject()
     const { $api } = useNuxtApp()
 
+    const { isUIAllowed } = useUIPermission()
+
     const mapMetaData = ref<MapType>({})
 
     const geoDataFieldColumn = ref<ColumnType | undefined>()
@@ -35,10 +37,19 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
       formattedData.value = res.list
     }
 
+    async function updateMapMeta(updateObj: Partial<MapType>) {
+      if (!viewMeta?.value?.id || !isUIAllowed('xcDatatableEditable')) return
+      await $api.dbView.mapUpdate(viewMeta.value.id, {
+        ...mapMetaData.value,
+        ...updateObj,
+      })
+    }
+
     return {
       formattedData,
       loadMapData,
       loadMapMeta,
+      updateMapMeta,
       mapMetaData,
       geoDataFieldColumn,
     }

packages/nc-gui/lang/en.json

@@ -431,6 +431,10 @@
       "stackedBy": "Stacked By",
       "chooseGroupingField": "Choose a Grouping Field",
       "addOrEditStack": "Add / Edit Stack"
+    },
+    "map": {
+      "mappedBy": "Mapped By",
+      "chooseMappingField": "Choose a Mapping Field"
     }
   },
   "tooltip": {