geodata easter egg: debugging weird template reactivity issue for the bottom menu

packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue

@@ -22,21 +22,31 @@ function onOpenModal(type: ViewTypes, title = '') {
   $e('c:view:create', { view: type })
   emits('openModal', { type, title })
 }
+
+const BAR = ref(true)
+
+setInterval(() => {
+  // alert('jo')
+  BAR.value = !BAR.value
+}, 2000)
 </script>
 
 <template>
-  {{ geodataToggleState.show }}
   <a-menu :selected-keys="[]" class="flex flex-col">
     <div>
       <h3 class="px-3 text-xs font-semibold flex items-center gap-4 text-gray-500">
         {{ $t('activity.createView') }}
       </h3>
 
+      <!-- <div v-if="BAR"> -->
+        BAR IS TRUE
         <a-menu-item
+          v-if="BAR"
           key="grid"
           class="group !flex !items-center !my-0 !h-2.5rem nc-create-grid-view"
           @click="onOpenModal(ViewTypes.GRID)"
-      >
+          >GRID BAR
+          <div v-if="BAR">BAR IS TRUE</div>
           <a-tooltip :mouse-enter-delay="1" placement="left">
             <template #title>
               {{ $t('msg.info.addView.grid') }}
@@ -53,7 +63,7 @@ function onOpenModal(type: ViewTypes, title = '') {
             </div>
           </a-tooltip>
         </a-menu-item>
-
+      <!-- </div> -->
       <a-menu-item
         key="gallery"
         class="group !flex !items-center !my-0 !h-2.5rem nc-create-gallery-view"
@@ -77,7 +87,6 @@ function onOpenModal(type: ViewTypes, title = '') {
       </a-menu-item>
 
       <a-menu-item
-        v-if="!isSqlView"
         key="form"
         class="group !flex !items-center !my-0 !h-2.5rem nc-create-form-view"
         @click="onOpenModal(ViewTypes.FORM)"
@@ -98,7 +107,6 @@ function onOpenModal(type: ViewTypes, title = '') {
           </div>
         </a-tooltip>
       </a-menu-item>
-
       <a-menu-item
         key="kanban"
         class="group !flex !items-center !my-0 !h-2.5rem nc-create-kanban-view"
@@ -120,13 +128,13 @@ function onOpenModal(type: ViewTypes, title = '') {
           </div>
         </a-tooltip>
       </a-menu-item>
-      <div v-if="geodataToggleState.show">SHOW</div>
+
       <a-menu-item
         key="map"
         class="group !flex !items-center !my-0 !h-2.5rem nc-create-map-view"
         @click="onOpenModal(ViewTypes.MAP)"
       >
-        {{ geodataToggleState.show }}
+        <div id="FOO">FOO: {{ geodataToggleState }}</div>
 
         <a-tooltip :mouse-enter-delay="1" placement="left">
           <template #title>

packages/nc-gui/components/smartsheet/sidebar/toolbar/GeodataSwitcher.vue

@@ -12,7 +12,7 @@ import { IsGeodataActiveInj, ReadonlyInj, useGlobal } from '#imports'
 // provide(ReadonlyInj, GeoDataToggleRef)
 
 async function toggleGeodataFeature() {
-  geodataToggleState.show = !geodataToggleState.show
+  geodataToggleState.value = !geodataToggleState.value
   // console.log(GeoDataToggleRef.value)
 }
 

packages/nc-gui/composables/useMapViewDataStore.ts

@@ -1,10 +1,10 @@
-import { reactive } from 'vue';
 import type { ComputedRef, Ref } from 'vue'
 import type { ColumnType, MapType, TableType, ViewType } from 'nocodb-sdk'
 import { ref, useInjectionState, useMetas } from '#imports'
 import type { Row } from '~/lib'
 
-export const geodataToggleState = reactive({ show: false })
+// export const geodataToggleState = reactive({ show: false })
+export const geodataToggleState = ref(false)
 
 const formatData = (list: Row[]) =>
   list.map((row) => ({