Browse Source

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

* state: simply string rendering of the reactive value works,
  but only at the top of the menu
* doesn't work when used on the level of the menu-items (also not as a conditional variable)
pull/4723/head
flisowna 2 years ago
parent
commit
1f89769750
  1. 11
      packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
  2. 15
      packages/nc-gui/components/smartsheet/sidebar/toolbar/GeodataSwitcher.vue
  3. 4
      packages/nc-gui/composables/useMapViewDataStore.ts
  4. 39759
      packages/nc-gui/package-lock.json

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

@ -1,6 +1,6 @@
<script lang="ts" setup>
import { ViewTypes } from 'nocodb-sdk'
import { IsGeodataActiveInj, ReadonlyInj, ref, useNuxtApp, useSmartsheetStoreOrThrow, viewIcons } from '#imports'
import { IsGeodataActiveInj, ReadonlyInj, ref, useGlobal, useNuxtApp, useSmartsheetStoreOrThrow, viewIcons } from '#imports'
const isGeodataActive = inject(IsGeodataActiveInj, ref(false))
@ -12,6 +12,8 @@ const emits = defineEmits<Emits>()
const readOnly = inject(ReadonlyInj)
const { includeM2M } = useGlobal()
const { $e } = useNuxtApp()
const { isSqlView } = useSmartsheetStoreOrThrow()
@ -23,6 +25,7 @@ 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">
@ -117,14 +120,14 @@ function onOpenModal(type: ViewTypes, title = '') {
</div>
</a-tooltip>
</a-menu-item>
isGeodataActive: {{ isGeodataActive }} readOnly: {{ readOnly }}
<div v-if="geodataToggleState.show">SHOW</div>
<a-menu-item
v-if="readOnly"
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') }}

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

@ -1,16 +1,19 @@
<script setup lang="ts">
import { IsGeodataActiveInj, inject, provide } from '#imports'
import { IsGeodataActiveInj, ReadonlyInj, useGlobal } from '#imports'
// import { geodataToggleState } from ''
// const { t } = useI18n()
// const { api } = useApi()
const GeoDataToggleRef = ref(false)
// const { includeM2M } = useGlobal()
// const GeoDataToggleRef = ref(true)
// provide(IsGeodataActiveInj, GeoDataToggleRef)
provide(ReadonlyInj, GeoDataToggleRef)
// provide(ReadonlyInj, GeoDataToggleRef)
async function toggleGeodataFeature() {
GeoDataToggleRef.value = !GeoDataToggleRef.value
console.log(GeoDataToggleRef.value)
geodataToggleState.show = !geodataToggleState.show
// console.log(GeoDataToggleRef.value)
}
// watch(FOO?.value, () => {
@ -23,7 +26,7 @@ async function toggleGeodataFeature() {
<template #title>
<span> Toggle GeoData </span>
</template>
<div style="{{fontSize: '5px';}}">I: {{ GeoDataToggleRef }}</div>
<!-- <div style="{{fontSize: '5px';}}"></div> -->
<mdi-map-marker class="cursor-pointer" @click="toggleGeodataFeature" />
</a-tooltip>
</template>

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

@ -1,8 +1,11 @@
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 })
const formatData = (list: Row[]) =>
list.map((row) => ({
row: { ...row },
@ -103,6 +106,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
mapMetaData,
geoDataFieldColumn,
insertRow,
geodataToggleState,
}
},
)

39759
packages/nc-gui/package-lock.json generated

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save