github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

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

pull/4723/head
flisowna 2 years ago
parent
ca9d3889b4
commit
ceabbf3f6e
2 changed files with 117 additions and 122 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 237
      packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
  2. 2
      packages/nc-gui/composables/useMapViewDataStore.ts

237
packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
Unescape View File

@ -25,127 +25,122 @@ function onOpenModal(type: ViewTypes, title = '') {
</script> </script>
<template> <template>
{{ geodataToggleState.show }}
<a-menu :selected-keys="[]" class="flex flex-col"> <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">
<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
<a-menu-item key="grid"
key="grid" class="group !flex !items-center !my-0 !h-2.5rem nc-create-grid-view"
class="group !flex !items-center !my-0 !h-2.5rem nc-create-grid-view" @click="onOpenModal(ViewTypes.GRID)"
@click="onOpenModal(ViewTypes.GRID)" >
> <a-tooltip :mouse-enter-delay="1" placement="left">
<a-tooltip :mouse-enter-delay="1" placement="left"> <template #title>
<template #title> {{ $t('msg.info.addView.grid') }}
{{ $t('msg.info.addView.grid') }} </template>
</template>
<div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
<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 }" />
<component :is="viewIcons[ViewTypes.GRID].icon" :style="{ color: viewIcons[ViewTypes.GRID].color }" />
<div>{{ $t('objects.viewType.grid') }}</div>
<div>{{ $t('objects.viewType.grid') }}</div>
<div class="flex-1" />
<div class="flex-1" />
<mdi-plus class="group-hover:text-primary" />
<mdi-plus class="group-hover:text-primary" /> </div>
</div> </a-tooltip>
</a-tooltip> </a-menu-item>
</a-menu-item>
<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" @click="onOpenModal(ViewTypes.GALLERY)"
@click="onOpenModal(ViewTypes.GALLERY)" >
> <a-tooltip :mouse-enter-delay="1" placement="left">
<a-tooltip :mouse-enter-delay="1" placement="left"> <template #title>
<template #title> {{ $t('msg.info.addView.gallery') }}
{{ $t('msg.info.addView.gallery') }} </template>
</template>
<div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
<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 }" />
<component :is="viewIcons[ViewTypes.GALLERY].icon" :style="{ color: viewIcons[ViewTypes.GALLERY].color }" />
<div>{{ $t('objects.viewType.gallery') }}</div>
<div>{{ $t('objects.viewType.gallery') }}</div>
<div class="flex-1" />
<div class="flex-1" />
<mdi-plus class="group-hover:text-primary" />
<mdi-plus class="group-hover:text-primary" /> </div>
</div> </a-tooltip>
</a-tooltip> </a-menu-item>
</a-menu-item>
<a-menu-item
<a-menu-item v-if="!isSqlView"
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)" >
> <a-tooltip :mouse-enter-delay="1" placement="left">
<a-tooltip :mouse-enter-delay="1" placement="left"> <template #title>
<template #title> {{ $t('msg.info.addView.form') }}
{{ $t('msg.info.addView.form') }} </template>
</template>
<div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
<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 }" />
<component :is="viewIcons[ViewTypes.FORM].icon" :style="{ color: viewIcons[ViewTypes.FORM].color }" />
<div>{{ $t('objects.viewType.form') }}</div>
<div>{{ $t('objects.viewType.form') }}</div>
<div class="flex-1" />
<div class="flex-1" />
<mdi-plus class="group-hover:text-primary" />
<mdi-plus class="group-hover:text-primary" /> </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" @click="onOpenModal(ViewTypes.KANBAN)"
@click="onOpenModal(ViewTypes.KANBAN)" >
> <a-tooltip :mouse-enter-delay="1" placement="left">
<a-tooltip :mouse-enter-delay="1" placement="left"> <template #title>
<template #title> {{ $t('msg.info.addView.kanban') }}
{{ $t('msg.info.addView.kanban') }} </template>
</template>
<div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
<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 }" />
<component :is="viewIcons[ViewTypes.KANBAN].icon" :style="{ color: viewIcons[ViewTypes.KANBAN].color }" />
<div>{{ $t('objects.viewType.kanban') }}</div>
<div>{{ $t('objects.viewType.kanban') }}</div>
<div class="flex-1" />
<div class="flex-1" />
<mdi-plus class="group-hover:text-primary" />
<mdi-plus class="group-hover:text-primary" /> </div>
</div> </a-tooltip>
</a-tooltip> </a-menu-item>
</a-menu-item> <a-menu-item
<div v-if="geodataToggleState.show">SHOW</div> v-if="geodataToggleState.show"
<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)" >
> <a-tooltip :mouse-enter-delay="1" placement="left">
{{ geodataToggleState.show }} <template #title>
{{ $t('msg.info.addView.map') }}
<a-tooltip :mouse-enter-delay="1" placement="left"> </template>
<template #title>
{{ $t('msg.info.addView.map') }} <div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2">
</template> <component :is="viewIcons[ViewTypes.MAP].icon" :style="{ color: viewIcons[ViewTypes.MAP].color }" />
<div class="nc-project-menu-item !py-0 text-xs flex items-center h-full w-full gap-2"> <div>{{ $t('objects.viewType.map') }}</div>
<component :is="viewIcons[ViewTypes.MAP].icon" :style="{ color: viewIcons[ViewTypes.MAP].color }" />
<div class="flex-1" />
<div>{{ $t('objects.viewType.map') }}</div>
<mdi-plus class="group-hover:text-primary" />
<div class="flex-1" /> </div>
</a-tooltip>
<mdi-plus class="group-hover:text-primary" /> </a-menu-item>
</div>
</a-tooltip> <div class="w-full h-4" />
</a-menu-item>
<div class="w-full h-4" />
</div>
</a-menu> </a-menu>
</template> </template>

2
packages/nc-gui/composables/useMapViewDataStore.ts
Unescape View File

@ -4,7 +4,7 @@ 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: true })
const formatData = (list: Row[]) => const formatData = (list: Row[]) =>
list.map((row) => ({ list.map((row) => ({

Write Preview
Loading…
Cancel
Save