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. 22
      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

22
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>

2
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)
}

4
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) => ({

Loading…
Cancel
Save