From 3f7db98c55ee11e1accb4676dff75cd0e12cc39a Mon Sep 17 00:00:00 2001
From: flisowna <ewa.agnieszka.flis@gmail.com>
Date: Mon, 19 Dec 2022 21:00:10 +0300
Subject: [PATCH] geodata easter egg: debugging weird template reactivity issue
 for the bottom menu

---
 .../smartsheet/sidebar/MenuBottom.vue         | 62 +++++++++++--------
 .../sidebar/toolbar/GeodataSwitcher.vue       |  2 +-
 .../nc-gui/composables/useMapViewDataStore.ts |  4 +-
 3 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
index 97c8dd8b78..69d0482b61 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
@@ -22,38 +22,48 @@ 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>
 
-      <a-menu-item
-        key="grid"
-        class="group !flex !items-center !my-0 !h-2.5rem nc-create-grid-view"
-        @click="onOpenModal(ViewTypes.GRID)"
-      >
-        <a-tooltip :mouse-enter-delay="1" placement="left">
-          <template #title>
-            {{ $t('msg.info.addView.grid') }}
-          </template>
-
-          <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" />
-
-            <div>{{ $t('objects.viewType.grid') }}</div>
-
-            <div class="flex-1" />
-
-            <mdi-plus class="group-hover:text-primary" />
-          </div>
-        </a-tooltip>
-      </a-menu-item>
-
+      <!-- <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') }}
+            </template>
+
+            <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
+              <component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" />
+
+              <div>{{ $t('objects.viewType.grid') }}</div>
+
+              <div class="flex-1" />
+
+              <mdi-plus class="group-hover:text-primary" />
+            </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>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/toolbar/GeodataSwitcher.vue b/packages/nc-gui/components/smartsheet/sidebar/toolbar/GeodataSwitcher.vue
index 6de566974c..2d434d1c33 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/toolbar/GeodataSwitcher.vue
+++ b/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)
 }
 
diff --git a/packages/nc-gui/composables/useMapViewDataStore.ts b/packages/nc-gui/composables/useMapViewDataStore.ts
index 167f859b1e..e2763da141 100644
--- a/packages/nc-gui/composables/useMapViewDataStore.ts
+++ b/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) => ({