MapView: 'Mapped by' column values should always be delivered - new approach - WIP

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

@@ -56,6 +56,10 @@ eventBus.on((event) => {
   if (event === SmartsheetStoreEvents.FIELD_RELOAD) {
     loadViewColumns()
   }
+  else if (event === SmartsheetStoreEvents.MAPPED_BY_COLUMN_CHANGE) {
+    // alert('SmartsheetStoreEvents.MAPPED_BY_COLUMN_CHANGE')
+    loadViewColumns()
+  }
 })
 
 watch(
@@ -163,21 +167,11 @@ useMenuCloseOnEsc(open)
     <template #overlay>
       <div
         class="p-3 min-w-[280px] bg-gray-50 shadow-lg nc-table-toolbar-menu max-h-[max(80vh,500px)] overflow-auto !border"
-        data-testid="nc-fields-menu"
+        data-testid="nc-fields-menu" @click.stop>
-        @click.stop
+        <a-card v-if="activeView.type === ViewTypes.GALLERY || activeView.type === ViewTypes.KANBAN" size="small"
-      >
+          title="Cover image">
-        <a-card
+          <a-select v-model:value="coverImageColumnId" class="w-full" :options="coverOptions"
-          v-if="activeView.type === ViewTypes.GALLERY || activeView.type === ViewTypes.KANBAN"
+            dropdown-class-name="nc-dropdown-cover-image" @click.stop />
-          size="small"
-          title="Cover image"
-        >
-          <a-select
-            v-model:value="coverImageColumnId"
-            class="w-full"
-            :options="coverOptions"
-            dropdown-class-name="nc-dropdown-cover-image"
-            @click.stop
-          />
         </a-card>
 
         <div class="p-1" @click.stop>
@@ -187,20 +181,10 @@ useMenuCloseOnEsc(open)
         <div class="nc-fields-list py-1">
           <Draggable v-model="fields" item-key="id" @change="onMove($event)">
             <template #item="{ element: field, index: index }">
-              <div
+              <div v-show="filteredFieldList.includes(field)" :key="field.id" class="px-2 py-1 flex items-center"
-                v-show="filteredFieldList.includes(field)"
+                :data-testid="`nc-fields-menu-${field.title}`" @click.stop>
-                :key="field.id"
+                <a-checkbox v-model:checked="field.show" v-e="['a:fields:show-hide']" class="shrink"
-                class="px-2 py-1 flex items-center"
+                  :disabled="field.isViewEssentialField" @change="saveOrUpdate(field, index)">
-                :data-testid="`nc-fields-menu-${field.title}`"
-                @click.stop
-              >
-                <a-checkbox
-                  v-model:checked="field.show"
-                  v-e="['a:fields:show-hide']"
-                  class="shrink"
-                  :disabled="field.isViewEssentialField"
-                  @change="saveOrUpdate(field, index)"
-                >
                   <div class="flex items-center">
                     <component :is="getIcon(metaColumnById[field.fk_column_id])" />
 

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

@@ -14,6 +14,8 @@ import {
   watch,
 } from '#imports'
 
+const { eventBus } = useSmartsheetStoreOrThrow()
+
 const meta = inject(MetaInj, ref())
 
 const activeView = inject(ActiveViewInj, ref())
@@ -48,6 +50,7 @@ const geoDataMappingFieldColumnId = computed({
       await loadMapMeta()
       await loadMapData()
       ;(activeView.value?.view as MapType).fk_geo_data_col_id = val
+      eventBus.emit(SmartsheetStoreEvents.MAPPED_BY_COLUMN_CHANGE)
     }
   },
 })

packages/nc-gui/composables/useViewColumns.ts

@@ -1,4 +1,4 @@
-import { isSystemColumn } from 'nocodb-sdk'
+import { isSystemColumn, MapType, ViewTypes } from 'nocodb-sdk'
 import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { IsPublicInj, computed, inject, ref, useNuxtApp, useProject, useUIPermission, watch } from '#imports'

packages/nc-gui/lib/enums.ts

@@ -88,6 +88,7 @@ export enum SmartsheetStoreEvents {
   DATA_RELOAD = 'data-reload',
   FIELD_RELOAD = 'field-reload',
   FIELD_ADD = 'field-add',
+  MAPPED_BY_COLUMN_CHANGE = 'mapped-by-column-change',
 }
 
 export enum DataSourcesSubTab {