Browse Source

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

pull/4723/head
flisowna 2 years ago
parent
commit
3f7db98c55
  1. 62
      packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
  2. 2
      packages/nc-gui/components/smartsheet/sidebar/toolbar/GeodataSwitcher.vue
  3. 4
      packages/nc-gui/composables/useMapViewDataStore.ts

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

@ -22,38 +22,48 @@ function onOpenModal(type: ViewTypes, title = '') {
$e('c:view:create', { view: type }) $e('c:view:create', { view: type })
emits('openModal', { type, title }) emits('openModal', { type, title })
} }
const BAR = ref(true)
setInterval(() => {
// alert('jo')
BAR.value = !BAR.value
}, 2000)
</script> </script>
<template> <template>
{{ geodataToggleState.show }}
<a-menu :selected-keys="[]" class="flex flex-col"> <a-menu :selected-keys="[]" class="flex flex-col">
<div> <div>
<h3 class="px-3 text-xs font-semibold flex items-center gap-4 text-gray-500"> <h3 class="px-3 text-xs font-semibold flex items-center gap-4 text-gray-500">
{{ $t('activity.createView') }} {{ $t('activity.createView') }}
</h3> </h3>
<a-menu-item <!-- <div v-if="BAR"> -->
key="grid" BAR IS TRUE
class="group !flex !items-center !my-0 !h-2.5rem nc-create-grid-view" <a-menu-item
@click="onOpenModal(ViewTypes.GRID)" v-if="BAR"
> key="grid"
<a-tooltip :mouse-enter-delay="1" placement="left"> class="group !flex !items-center !my-0 !h-2.5rem nc-create-grid-view"
<template #title> @click="onOpenModal(ViewTypes.GRID)"
{{ $t('msg.info.addView.grid') }} >GRID BAR
</template> <div v-if="BAR">BAR IS TRUE</div>
<a-tooltip :mouse-enter-delay="1" placement="left">
<div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2"> <template #title>
<component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" /> {{ $t('msg.info.addView.grid') }}
</template>
<div>{{ $t('objects.viewType.grid') }}</div>
<div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
<div class="flex-1" /> <component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" />
<mdi-plus class="group-hover:text-primary" /> <div>{{ $t('objects.viewType.grid') }}</div>
</div>
</a-tooltip> <div class="flex-1" />
</a-menu-item>
<mdi-plus class="group-hover:text-primary" />
</div>
</a-tooltip>
</a-menu-item>
<!-- </div> -->
<a-menu-item <a-menu-item
key="gallery" key="gallery"
class="group !flex !items-center !my-0 !h-2.5rem nc-create-gallery-view" 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>
<a-menu-item <a-menu-item
v-if="!isSqlView"
key="form" key="form"
class="group !flex !items-center !my-0 !h-2.5rem nc-create-form-view" class="group !flex !items-center !my-0 !h-2.5rem nc-create-form-view"
@click="onOpenModal(ViewTypes.FORM)" @click="onOpenModal(ViewTypes.FORM)"
@ -98,7 +107,6 @@ function onOpenModal(type: ViewTypes, title = '') {
</div> </div>
</a-tooltip> </a-tooltip>
</a-menu-item> </a-menu-item>
<a-menu-item <a-menu-item
key="kanban" key="kanban"
class="group !flex !items-center !my-0 !h-2.5rem nc-create-kanban-view" class="group !flex !items-center !my-0 !h-2.5rem nc-create-kanban-view"
@ -120,13 +128,13 @@ function onOpenModal(type: ViewTypes, title = '') {
</div> </div>
</a-tooltip> </a-tooltip>
</a-menu-item> </a-menu-item>
<div v-if="geodataToggleState.show">SHOW</div>
<a-menu-item <a-menu-item
key="map" key="map"
class="group !flex !items-center !my-0 !h-2.5rem nc-create-map-view" class="group !flex !items-center !my-0 !h-2.5rem nc-create-map-view"
@click="onOpenModal(ViewTypes.MAP)" @click="onOpenModal(ViewTypes.MAP)"
> >
{{ geodataToggleState.show }} <div id="FOO">FOO: {{ geodataToggleState }}</div>
<a-tooltip :mouse-enter-delay="1" placement="left"> <a-tooltip :mouse-enter-delay="1" placement="left">
<template #title> <template #title>

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

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

4
packages/nc-gui/composables/useMapViewDataStore.ts

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

Loading…
Cancel
Save