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

---
 .../smartsheet/sidebar/MenuBottom.vue         | 237 +++++++++---------
 .../nc-gui/composables/useMapViewDataStore.ts |   2 +-
 2 files changed, 117 insertions(+), 122 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
index 97c8dd8b78..2c111b3137 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
@@ -25,127 +25,122 @@ function onOpenModal(type: ViewTypes, title = '') {
 </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>
-
-      <a-menu-item
-        key="gallery"
-        class="group !flex !items-center !my-0 !h-2.5rem nc-create-gallery-view"
-        @click="onOpenModal(ViewTypes.GALLERY)"
-      >
-        <a-tooltip :mouse-enter-delay="1" placement="left">
-          <template #title>
-            {{ $t('msg.info.addView.gallery') }}
-          </template>
-
-          <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.GALLERY].icon" :style="{ color: viewIcons[ViewTypes.GALLERY].color }" />
-
-            <div>{{ $t('objects.viewType.gallery') }}</div>
-
-            <div class="flex-1" />
-
-            <mdi-plus class="group-hover:text-primary" />
-          </div>
-        </a-tooltip>
-      </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)"
-      >
-        <a-tooltip :mouse-enter-delay="1" placement="left">
-          <template #title>
-            {{ $t('msg.info.addView.form') }}
-          </template>
-
-          <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.FORM].icon" :style="{ color: viewIcons[ViewTypes.FORM].color }" />
-
-            <div>{{ $t('objects.viewType.form') }}</div>
-
-            <div class="flex-1" />
-
-            <mdi-plus class="group-hover:text-primary" />
-          </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"
-        @click="onOpenModal(ViewTypes.KANBAN)"
-      >
-        <a-tooltip :mouse-enter-delay="1" placement="left">
-          <template #title>
-            {{ $t('msg.info.addView.kanban') }}
-          </template>
-
-          <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.KANBAN].icon" :style="{ color: viewIcons[ViewTypes.KANBAN].color }" />
-
-            <div>{{ $t('objects.viewType.kanban') }}</div>
-
-            <div class="flex-1" />
-
-            <mdi-plus class="group-hover:text-primary" />
-          </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 }}
-
-        <a-tooltip :mouse-enter-delay="1" placement="left">
-          <template #title>
-            {{ $t('msg.info.addView.map') }}
-          </template>
-
-          <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
-            <component :is="viewIcons[ViewTypes.MAP].icon" :style="{ color: viewIcons[ViewTypes.MAP].color }" />
-
-            <div>{{ $t('objects.viewType.map') }}</div>
-
-            <div class="flex-1" />
-
-            <mdi-plus class="group-hover:text-primary" />
-          </div>
-        </a-tooltip>
-      </a-menu-item>
-
-      <div class="w-full h-4" />
-    </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>
+
+    <a-menu-item
+      key="gallery"
+      class="group !flex !items-center !my-0 !h-2.5rem nc-create-gallery-view"
+      @click="onOpenModal(ViewTypes.GALLERY)"
+    >
+      <a-tooltip :mouse-enter-delay="1" placement="left">
+        <template #title>
+          {{ $t('msg.info.addView.gallery') }}
+        </template>
+
+        <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
+          <component :is="viewIcons[ViewTypes.GALLERY].icon" :style="{ color: viewIcons[ViewTypes.GALLERY].color }" />
+
+          <div>{{ $t('objects.viewType.gallery') }}</div>
+
+          <div class="flex-1" />
+
+          <mdi-plus class="group-hover:text-primary" />
+        </div>
+      </a-tooltip>
+    </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)"
+    >
+      <a-tooltip :mouse-enter-delay="1" placement="left">
+        <template #title>
+          {{ $t('msg.info.addView.form') }}
+        </template>
+
+        <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
+          <component :is="viewIcons[ViewTypes.FORM].icon" :style="{ color: viewIcons[ViewTypes.FORM].color }" />
+
+          <div>{{ $t('objects.viewType.form') }}</div>
+
+          <div class="flex-1" />
+
+          <mdi-plus class="group-hover:text-primary" />
+        </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"
+      @click="onOpenModal(ViewTypes.KANBAN)"
+    >
+      <a-tooltip :mouse-enter-delay="1" placement="left">
+        <template #title>
+          {{ $t('msg.info.addView.kanban') }}
+        </template>
+
+        <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
+          <component :is="viewIcons[ViewTypes.KANBAN].icon" :style="{ color: viewIcons[ViewTypes.KANBAN].color }" />
+
+          <div>{{ $t('objects.viewType.kanban') }}</div>
+
+          <div class="flex-1" />
+
+          <mdi-plus class="group-hover:text-primary" />
+        </div>
+      </a-tooltip>
+    </a-menu-item>
+    <a-menu-item
+      v-if="geodataToggleState.show"
+      key="map"
+      class="group !flex !items-center !my-0 !h-2.5rem nc-create-map-view"
+      @click="onOpenModal(ViewTypes.MAP)"
+    >
+      <a-tooltip :mouse-enter-delay="1" placement="left">
+        <template #title>
+          {{ $t('msg.info.addView.map') }}
+        </template>
+
+        <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
+          <component :is="viewIcons[ViewTypes.MAP].icon" :style="{ color: viewIcons[ViewTypes.MAP].color }" />
+
+          <div>{{ $t('objects.viewType.map') }}</div>
+
+          <div class="flex-1" />
+
+          <mdi-plus class="group-hover:text-primary" />
+        </div>
+      </a-tooltip>
+    </a-menu-item>
+
+    <div class="w-full h-4" />
   </a-menu>
 </template>
diff --git a/packages/nc-gui/composables/useMapViewDataStore.ts b/packages/nc-gui/composables/useMapViewDataStore.ts
index 167f859b1e..33db9ba331 100644
--- a/packages/nc-gui/composables/useMapViewDataStore.ts
+++ b/packages/nc-gui/composables/useMapViewDataStore.ts
@@ -4,7 +4,7 @@ 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: true })
 
 const formatData = (list: Row[]) =>
   list.map((row) => ({