|
|
|
<script setup lang="ts">
|
|
|
|
import type { TableType } from 'nocodb-sdk'
|
|
|
|
import type { Input } from 'ant-design-vue'
|
|
|
|
import { Dropdown, Tooltip, message } from 'ant-design-vue'
|
|
|
|
import Sortable from 'sortablejs'
|
|
|
|
import GithubButton from 'vue-github-button'
|
|
|
|
import { Icon } from '@iconify/vue'
|
|
|
|
import type { VNodeRef } from '#imports'
|
|
|
|
import {
|
|
|
|
ClientType,
|
|
|
|
Empty,
|
|
|
|
TabType,
|
|
|
|
computed,
|
|
|
|
extractSdkResponseErrorMsg,
|
|
|
|
isDrawerOrModalExist,
|
|
|
|
isMac,
|
|
|
|
reactive,
|
|
|
|
ref,
|
|
|
|
resolveComponent,
|
|
|
|
useDialog,
|
|
|
|
useGlobal,
|
|
|
|
useNuxtApp,
|
|
|
|
useProject,
|
|
|
|
useRoute,
|
|
|
|
useTable,
|
|
|
|
useTabs,
|
|
|
|
useToggle,
|
|
|
|
useUIPermission,
|
|
|
|
watchEffect,
|
|
|
|
} from '#imports'
|
|
|
|
import MdiView from '~icons/mdi/eye-circle-outline'
|
|
|
|
import MdiTableLarge from '~icons/mdi/table-large'
|
|
|
|
|
|
|
|
const { addTab, updateTab } = useTabs()
|
|
|
|
|
|
|
|
const { $api, $e } = useNuxtApp()
|
|
|
|
|
|
|
|
const { project, loadProject, bases, tables, loadTables, isSharedBase } = useProject()
|
|
|
|
|
|
|
|
const { activeTab } = useTabs()
|
|
|
|
|
|
|
|
const { deleteTable } = useTable()
|
|
|
|
|
|
|
|
const { isUIAllowed } = useUIPermission()
|
|
|
|
|
|
|
|
const route = useRoute()
|
|
|
|
|
|
|
|
const [searchActive, toggleSearchActive] = useToggle()
|
|
|
|
|
|
|
|
const { appInfo } = useGlobal()
|
|
|
|
|
|
|
|
const toggleDialog = inject(ToggleDialogInj, () => {})
|
|
|
|
|
|
|
|
const keys = $ref<Record<string, number>>({})
|
|
|
|
|
|
|
|
const activeKey = ref<string[]>([])
|
|
|
|
|
|
|
|
const menuRefs = $ref<HTMLElement[] | HTMLElement>()
|
|
|
|
|
|
|
|
let filterQuery = $ref('')
|
|
|
|
|
|
|
|
const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.id : null))
|
|
|
|
|
|
|
|
const tablesById = $computed(() =>
|
|
|
|
tables.value?.reduce<Record<string, TableType>>((acc, table) => {
|
|
|
|
acc[table.id!] = table
|
|
|
|
|
|
|
|
return acc
|
|
|
|
}, {}),
|
|
|
|
)
|
|
|
|
|
|
|
|
const filteredTables = $computed(() =>
|
|
|
|
tables.value?.filter(
|
|
|
|
(table) => !searchActive.value || !filterQuery || table.title.toLowerCase().includes(filterQuery.toLowerCase()),
|
|
|
|
),
|
|
|
|
)
|
|
|
|
|
|
|
|
const sortables: Record<string, Sortable> = {}
|
|
|
|
|
|
|
|
// todo: replace with vuedraggable
|
|
|
|
const initSortable = (el: Element) => {
|
|
|
|
const base_id = el.getAttribute('nc-base')
|
|
|
|
if (!base_id) return
|
|
|
|
if (sortables[base_id]) sortables[base_id].destroy()
|
|
|
|
Sortable.create(el as HTMLLIElement, {
|
|
|
|
onEnd: async (evt) => {
|
|
|
|
const offset = tables.value.findIndex((table) => table.base_id === base_id)
|
|
|
|
|
|
|
|
const { newIndex = 0, oldIndex = 0 } = evt
|
|
|
|
|
|
|
|
const itemEl = evt.item as HTMLLIElement
|
|
|
|
const item = tablesById[itemEl.dataset.id as string]
|
|
|
|
|
|
|
|
// get the html collection of all list items
|
|
|
|
const children: HTMLCollection = evt.to.children
|
|
|
|
|
|
|
|
// skip if children count is 1
|
|
|
|
if (children.length < 2) return
|
|
|
|
|
|
|
|
// get items before and after the moved item
|
|
|
|
const itemBeforeEl = children[newIndex - 1] as HTMLLIElement
|
|
|
|
const itemAfterEl = children[newIndex + 1] as HTMLLIElement
|
|
|
|
|
|
|
|
// get items meta of before and after the moved item
|
|
|
|
const itemBefore = itemBeforeEl && tablesById[itemBeforeEl.dataset.id as string]
|
|
|
|
const itemAfter = itemAfterEl && tablesById[itemAfterEl.dataset.id as string]
|
|
|
|
|
|
|
|
// set new order value based on the new order of the items
|
|
|
|
if (children.length - 1 === evt.newIndex) {
|
|
|
|
item.order = (itemBefore.order as number) + 1
|
|
|
|
} else if (newIndex === 0) {
|
|
|
|
item.order = (itemAfter.order as number) / 2
|
|
|
|
} else {
|
|
|
|
item.order = ((itemBefore.order as number) + (itemAfter.order as number)) / 2
|
|
|
|
}
|
|
|
|
|
|
|
|
// update the order of the moved item
|
|
|
|
tables.value?.splice(newIndex + offset, 0, ...tables.value?.splice(oldIndex + offset, 1))
|
|
|
|
|
|
|
|
// force re-render the list
|
|
|
|
if (keys[base_id]) {
|
|
|
|
keys[base_id] = keys[base_id] + 1
|
|
|
|
} else {
|
|
|
|
keys[base_id] = 1
|
|
|
|
}
|
|
|
|
|
|
|
|
// update the item order
|
|
|
|
await $api.dbTable.reorder(item.id as string, {
|
|
|
|
order: item.order,
|
|
|
|
})
|
|
|
|
},
|
|
|
|
animation: 150,
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
watchEffect(() => {
|
|
|
|
if (menuRefs) {
|
|
|
|
if (menuRefs instanceof HTMLElement) {
|
|
|
|
initSortable(menuRefs)
|
|
|
|
} else {
|
|
|
|
menuRefs.forEach((el) => initSortable(el))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
const icon = (table: TableType) => {
|
|
|
|
if (table.type === 'table') {
|
|
|
|
return MdiTableLarge
|
|
|
|
}
|
|
|
|
if (table.type === 'view') {
|
|
|
|
return MdiView
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const contextMenuTarget = reactive<{ type?: 'table' | 'main'; value?: any }>({})
|
|
|
|
|
|
|
|
const setMenuContext = (type: 'table' | 'main', value?: any) => {
|
|
|
|
contextMenuTarget.type = type
|
|
|
|
contextMenuTarget.value = value
|
|
|
|
}
|
|
|
|
|
|
|
|
const reloadTables = async () => {
|
|
|
|
$e('a:table:refresh:navdraw')
|
|
|
|
|
|
|
|
await loadTables()
|
|
|
|
}
|
|
|
|
|
|
|
|
const addTableTab = (table: TableType) => {
|
|
|
|
addTab({ title: table.title, id: table.id, type: table.type as TabType })
|
|
|
|
}
|
|
|
|
|
|
|
|
function openRenameTableDialog(table: TableType, baseId?: string, rightClick = false) {
|
|
|
|
$e(rightClick ? 'c:table:rename:navdraw:right-click' : 'c:table:rename:navdraw:options')
|
|
|
|
|
|
|
|
const isOpen = ref(true)
|
|
|
|
|
|
|
|
const { close } = useDialog(resolveComponent('DlgTableRename'), {
|
|
|
|
'modelValue': isOpen,
|
|
|
|
'tableMeta': table,
|
|
|
|
'baseId': baseId || bases.value[0].id,
|
|
|
|
'onUpdate:modelValue': closeDialog,
|
|
|
|
})
|
|
|
|
|
|
|
|
function closeDialog() {
|
|
|
|
isOpen.value = false
|
|
|
|
|
|
|
|
close(1000)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function openQuickImportDialog(type: string, baseId?: string) {
|
|
|
|
$e(`a:actions:import-${type}`)
|
|
|
|
|
|
|
|
const isOpen = ref(true)
|
|
|
|
|
|
|
|
const { close } = useDialog(resolveComponent('DlgQuickImport'), {
|
|
|
|
'modelValue': isOpen,
|
|
|
|
'importType': type,
|
|
|
|
'baseId': baseId || bases.value[0].id,
|
|
|
|
'onUpdate:modelValue': closeDialog,
|
|
|
|
})
|
|
|
|
|
|
|
|
function closeDialog() {
|
|
|
|
isOpen.value = false
|
|
|
|
|
|
|
|
close(1000)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function openAirtableImportDialog(baseId?: string) {
|
|
|
|
$e('a:actions:import-airtable')
|
|
|
|
|
|
|
|
const isOpen = ref(true)
|
|
|
|
|
|
|
|
const { close } = useDialog(resolveComponent('DlgAirtableImport'), {
|
|
|
|
'modelValue': isOpen,
|
|
|
|
'baseId': baseId || bases.value[0].id,
|
|
|
|
'onUpdate:modelValue': closeDialog,
|
|
|
|
})
|
|
|
|
|
|
|
|
function closeDialog() {
|
|
|
|
isOpen.value = false
|
|
|
|
|
|
|
|
close(1000)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function openTableCreateDialog(baseId?: string) {
|
|
|
|
$e('c:table:create:navdraw')
|
|
|
|
|
|
|
|
const isOpen = ref(true)
|
|
|
|
|
|
|
|
const { close } = useDialog(resolveComponent('DlgTableCreate'), {
|
|
|
|
'modelValue': isOpen,
|
|
|
|
'baseId': baseId || bases.value[0].id,
|
|
|
|
'onUpdate:modelValue': closeDialog,
|
|
|
|
})
|
|
|
|
|
|
|
|
function closeDialog() {
|
|
|
|
isOpen.value = false
|
|
|
|
|
|
|
|
close(1000)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const searchInputRef: VNodeRef = (vnode: typeof Input) => vnode?.$el?.focus()
|
|
|
|
|
|
|
|
const beforeSearch = ref<string[]>([])
|
|
|
|
|
|
|
|
const onSearchCloseIconClick = () => {
|
|
|
|
filterQuery = ''
|
|
|
|
toggleSearchActive(false)
|
|
|
|
activeKey.value = beforeSearch.value
|
|
|
|
}
|
|
|
|
|
|
|
|
const onSearchIconClick = () => {
|
|
|
|
beforeSearch.value = activeKey.value
|
|
|
|
toggleSearchActive(true)
|
|
|
|
activeKey.value = bases.value.filter((el) => el.enabled).map((el) => `collapse-${el.id}`)
|
|
|
|
}
|
|
|
|
|
|
|
|
const isCreateTableAllowed = computed(
|
|
|
|
() =>
|
|
|
|
isUIAllowed('table-create') &&
|
|
|
|
route.name !== 'index' &&
|
|
|
|
route.name !== 'index-index' &&
|
|
|
|
route.name !== 'index-index-create' &&
|
|
|
|
route.name !== 'index-index-create-external' &&
|
|
|
|
route.name !== 'index-user-index',
|
|
|
|
)
|
|
|
|
|
|
|
|
useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
|
|
|
|
const cmdOrCtrl = isMac() ? e.metaKey : e.ctrlKey
|
|
|
|
if (e.altKey && !e.shiftKey && !cmdOrCtrl) {
|
|
|
|
switch (e.keyCode) {
|
|
|
|
case 84: {
|
|
|
|
// ALT + T
|
|
|
|
if (isCreateTableAllowed.value && !isDrawerOrModalExist()) {
|
|
|
|
// prevent the key `T` is inputted to table title input
|
|
|
|
e.preventDefault()
|
|
|
|
$e('c:shortcut', { key: 'ALT + T' })
|
|
|
|
openTableCreateDialog()
|
|
|
|
}
|
|
|
|
break
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
watch(
|
|
|
|
activeTable,
|
|
|
|
(value, oldValue) => {
|
|
|
|
if (value) {
|
|
|
|
if (value !== oldValue) {
|
|
|
|
const fndTable = tables.value.find((el) => el.id === value)
|
|
|
|
if (fndTable) {
|
|
|
|
activeKey.value = [`collapse-${fndTable.base_id}`]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if (bases.value.filter((el) => el.enabled)[0]?.id)
|
|
|
|
activeKey.value = [`collapse-${bases.value.filter((el) => el.enabled)[0].id}`]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{ immediate: true },
|
|
|
|
)
|
|
|
|
|
|
|
|
const setIcon = async (icon: string, table: TableType) => {
|
|
|
|
try {
|
|
|
|
table.meta = {
|
|
|
|
...(table.meta || {}),
|
|
|
|
icon,
|
|
|
|
}
|
|
|
|
tables.value.splice(tables.value.indexOf(table), 1, { ...table })
|
|
|
|
|
|
|
|
updateTab({ id: table.id }, { meta: table.meta })
|
|
|
|
|
|
|
|
$api.dbTable.update(table.id as string, {
|
|
|
|
meta: table.meta,
|
|
|
|
})
|
|
|
|
|
|
|
|
$e('a:table:icon:navdraw', { icon })
|
|
|
|
} catch (e) {
|
|
|
|
message.error(await extractSdkResponseErrorMsg(e))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
onMounted(async () => {
|
|
|
|
if (!project.value?.id) {
|
|
|
|
await loadProject()
|
|
|
|
}
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div class="nc-treeview-container flex flex-col">
|
|
|
|
<a-dropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu">
|
|
|
|
<div class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-col scrollbar-thin-dull" :class="{ 'mb-[20px]': isSharedBase }">
|
|
|
|
<div
|
|
|
|
v-if="bases[0] && bases[0].enabled && !bases.slice(1).filter((el) => el.enabled)?.length"
|
|
|
|
class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer"
|
|
|
|
@contextmenu="setMenuContext('main')"
|
|
|
|
>
|
|
|
|
<Transition name="slide-left" mode="out-in">
|
|
|
|
<a-input
|
|
|
|
v-if="searchActive"
|
|
|
|
:ref="searchInputRef"
|
|
|
|
v-model:value="filterQuery"
|
|
|
|
class="flex-1 rounded"
|
|
|
|
:placeholder="$t('placeholder.searchProjectTree')"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
|
|
|
|
{{ $t('objects.tables') }}
|
|
|
|
|
|
|
|
<template v-if="tables.filter((table) => table.base_id === bases[0].id)?.length">
|
|
|
|
({{ tables.filter((table) => table.base_id === bases[0].id).length }})
|
|
|
|
</template>
|
|
|
|
</span>
|
|
|
|
</Transition>
|
|
|
|
|
|
|
|
<Transition name="layout" mode="out-in">
|
|
|
|
<MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
|
|
|
|
<IcRoundSearch v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="toggleSearchActive(true)" />
|
|
|
|
</Transition>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
v-else
|
|
|
|
class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer"
|
|
|
|
@contextmenu="setMenuContext('main')"
|
|
|
|
>
|
|
|
|
<Transition name="slide-left" mode="out-in">
|
|
|
|
<a-input
|
|
|
|
v-if="searchActive"
|
|
|
|
:ref="searchInputRef"
|
|
|
|
v-model:value="filterQuery"
|
|
|
|
class="flex-1 rounded"
|
|
|
|
:placeholder="$t('placeholder.searchProjectTree')"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
|
|
|
|
BASES
|
|
|
|
<template v-if="tables.filter((table) => table.base_id === bases[0].id)?.length">
|
|
|
|
({{ bases.filter((el) => el.enabled).length }})
|
|
|
|
</template>
|
|
|
|
</span>
|
|
|
|
</Transition>
|
|
|
|
|
|
|
|
<Transition name="slide-right" mode="out-in">
|
|
|
|
<MdiClose v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
|
|
|
|
<IcRoundSearch v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchIconClick" />
|
|
|
|
</Transition>
|
|
|
|
|
|
|
|
<a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
|
|
|
|
<Transition name="slide-right" mode="out-in">
|
|
|
|
<MdiDotsVertical v-if="!searchActive" class="hover:text-accent outline-0" />
|
|
|
|
</Transition>
|
|
|
|
|
|
|
|
<template #overlay>
|
|
|
|
<a-menu class="!py-0 rounded text-sm">
|
|
|
|
<a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
|
|
|
|
<a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<LogosMysqlIcon class="group-hover:text-accent" />
|
|
|
|
MySQL
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
<a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.PG)">
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<LogosPostgresql class="group-hover:text-accent" />
|
|
|
|
Postgres
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
<a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.SQLITE)">
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<VscodeIconsFileTypeSqlite class="group-hover:text-accent" />
|
|
|
|
SQLite
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
<a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MSSQL)">
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<SimpleIconsMicrosoftsqlserver class="group-hover:text-accent" />
|
|
|
|
MSSQL
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
<a-menu-item
|
|
|
|
v-if="appInfo.ee"
|
|
|
|
key="connect-new-source"
|
|
|
|
@click="toggleDialog(true, 'dataSources', ClientType.SNOWFLAKE)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<LogosSnowflakeIcon class="group-hover:text-accent" />
|
|
|
|
Snowflake
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
</a-menu-item-group>
|
|
|
|
|
|
|
|
<a-menu-divider class="my-0" />
|
|
|
|
|
|
|
|
<a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
|
|
|
|
<a
|
|
|
|
v-e="['e:datasource:import-request']"
|
|
|
|
href="https://github.com/nocodb/nocodb/issues/2052"
|
|
|
|
target="_blank"
|
|
|
|
class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
|
|
|
|
>
|
|
|
|
<MdiOpenInNew class="group-hover:text-accent" />
|
|
|
|
<!-- Request a data source you need? -->
|
|
|
|
{{ $t('labels.requestDataSource') }}
|
|
|
|
</a>
|
|
|
|
</a-menu-item>
|
|
|
|
</a-menu>
|
|
|
|
</template>
|
|
|
|
</a-dropdown>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div v-if="bases[0] && bases[0].enabled && !bases.slice(1).filter((el) => el.enabled)?.length" class="flex-1">
|
|
|
|
<div
|
|
|
|
v-if="isUIAllowed('table-create')"
|
|
|
|
class="group flex items-center gap-2 pl-2 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
|
|
|
|
@click="openTableCreateDialog(bases[0].id)"
|
|
|
|
>
|
|
|
|
<MdiPlus class="w-5" />
|
|
|
|
|
|
|
|
<span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ $t('tooltip.addTable') }}</span>
|
|
|
|
|
|
|
|
<a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
|
|
|
|
<MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" />
|
|
|
|
|
|
|
|
<template #overlay>
|
|
|
|
<a-menu class="!py-0 rounded text-sm">
|
|
|
|
<!-- Quick Import From -->
|
|
|
|
<a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0">
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('airtableImport')"
|
|
|
|
key="quick-import-airtable"
|
|
|
|
@click="openAirtableImportDialog(bases[0].id)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<MdiTableLarge class="group-hover:text-accent" />
|
|
|
|
Airtable
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('csvImport')"
|
|
|
|
key="quick-import-csv"
|
|
|
|
@click="openQuickImportDialog('csv', bases[0].id)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<MdiFileDocumentOutline class="group-hover:text-accent" />
|
|
|
|
CSV file
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('jsonImport')"
|
|
|
|
key="quick-import-json"
|
|
|
|
@click="openQuickImportDialog('json', bases[0].id)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<MdiCodeJson class="group-hover:text-accent" />
|
|
|
|
JSON file
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('excelImport')"
|
|
|
|
key="quick-import-excel"
|
|
|
|
@click="openQuickImportDialog('excel', bases[0].id)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<MdiFileExcel class="group-hover:text-accent" />
|
|
|
|
Microsoft Excel
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
</a-menu-item-group>
|
|
|
|
|
|
|
|
<a-menu-divider class="my-0" />
|
|
|
|
|
|
|
|
<a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
|
|
|
|
<a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<LogosMysqlIcon class="group-hover:text-accent" />
|
|
|
|
MySQL
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
<a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.PG)">
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<LogosPostgresql class="group-hover:text-accent" />
|
|
|
|
Postgres
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
<a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.SQLITE)">
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<VscodeIconsFileTypeSqlite class="group-hover:text-accent" />
|
|
|
|
SQLite
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
<a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MSSQL)">
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<SimpleIconsMicrosoftsqlserver class="group-hover:text-accent" />
|
|
|
|
MSSQL
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
<a-menu-item
|
|
|
|
v-if="appInfo.ee"
|
|
|
|
key="connect-new-source"
|
|
|
|
@click="toggleDialog(true, 'dataSources', ClientType.SNOWFLAKE)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<LogosSnowflakeIcon class="group-hover:text-accent" />
|
|
|
|
Snowflake
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
</a-menu-item-group>
|
|
|
|
|
|
|
|
<a-menu-divider class="my-0" />
|
|
|
|
|
|
|
|
<a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
|
|
|
|
<a
|
|
|
|
v-e="['e:datasource:import-request']"
|
|
|
|
href="https://github.com/nocodb/nocodb/issues/2052"
|
|
|
|
target="_blank"
|
|
|
|
class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
|
|
|
|
>
|
|
|
|
<MdiOpenInNew class="group-hover:text-accent" />
|
|
|
|
<!-- Request a data source you need? -->
|
|
|
|
{{ $t('labels.requestDataSource') }}
|
|
|
|
</a>
|
|
|
|
</a-menu-item>
|
|
|
|
</a-menu>
|
|
|
|
</template>
|
|
|
|
</a-dropdown>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="transition-height duration-200">
|
|
|
|
<div class="border-none sortable-list">
|
|
|
|
<div v-if="bases[0]" :key="`base-${bases[0].id}`">
|
|
|
|
<div
|
|
|
|
v-if="bases[0] && bases[0].enabled"
|
|
|
|
ref="menuRefs"
|
|
|
|
:key="`sortable-${bases[0].id}-${bases[0].id && bases[0].id in keys ? keys[bases[0].id] : '0'}`"
|
|
|
|
:nc-base="bases[0].id"
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
v-for="table of tables.filter((table) => table.base_id === bases[0].id)"
|
|
|
|
:key="table.id"
|
|
|
|
v-e="['a:table:open']"
|
|
|
|
:class="[
|
|
|
|
{ hidden: !filteredTables?.includes(table), active: activeTable === table.id },
|
|
|
|
`nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
|
|
|
|
]"
|
|
|
|
class="nc-tree-item text-sm cursor-pointer group"
|
|
|
|
:data-order="table.order"
|
|
|
|
:data-id="table.id"
|
|
|
|
:data-testid="`tree-view-table-${table.title}`"
|
|
|
|
@click="addTableTab(table)"
|
|
|
|
>
|
|
|
|
<GeneralTooltip class="pl-2 pr-3 py-2" modifier-key="Alt">
|
|
|
|
<template #title>{{ table.table_name }}</template>
|
|
|
|
<div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
|
|
|
|
<div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
|
|
|
|
<component
|
|
|
|
:is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
|
|
|
|
trigger="click"
|
|
|
|
destroy-popup-on-hide
|
|
|
|
class="flex items-center"
|
|
|
|
@click.stop
|
|
|
|
>
|
|
|
|
<div class="flex items-center" @click.stop>
|
|
|
|
<component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
|
|
|
|
<span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
|
|
|
|
<Icon
|
|
|
|
:key="table.meta?.icon"
|
|
|
|
:data-testid="`nc-icon-${table.meta?.icon}`"
|
|
|
|
class="text-xl"
|
|
|
|
:icon="table.meta?.icon"
|
|
|
|
></Icon>
|
|
|
|
</span>
|
|
|
|
<component
|
|
|
|
:is="icon(table)"
|
|
|
|
v-else
|
|
|
|
class="nc-table-icon nc-view-icon w-5"
|
|
|
|
:class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
|
|
|
|
</component>
|
|
|
|
</div>
|
|
|
|
<template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
|
|
|
|
<GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
|
|
|
|
</template>
|
|
|
|
</component>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="nc-tbl-title flex-1">
|
|
|
|
<GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{
|
|
|
|
table.title
|
|
|
|
}}</GeneralTruncateText>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<a-dropdown
|
|
|
|
v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
|
|
|
|
:trigger="['click']"
|
|
|
|
@click.stop
|
|
|
|
>
|
|
|
|
<MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
|
|
|
|
|
|
|
|
<template #overlay>
|
|
|
|
<a-menu class="!py-0 rounded text-sm">
|
|
|
|
<a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table, bases[0].id)">
|
|
|
|
<div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
|
|
|
|
{{ $t('general.rename') }}
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('table-delete')"
|
|
|
|
:data-testid="`sidebar-table-delete-${table.title}`"
|
|
|
|
@click="deleteTable(table)"
|
|
|
|
>
|
|
|
|
<div class="nc-project-menu-item">
|
|
|
|
{{ $t('general.delete') }}
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
</a-menu>
|
|
|
|
</template>
|
|
|
|
</a-dropdown>
|
|
|
|
</div>
|
|
|
|
</GeneralTooltip>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div
|
|
|
|
v-if="!tables.filter((table) => table.base_id === bases[0].id)?.length"
|
|
|
|
class="mt-0.5 pt-16 mx-3 flex flex-col items-center border-t-1 border-gray-50"
|
|
|
|
>
|
|
|
|
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div v-else class="transition-height duration-200">
|
|
|
|
<div class="border-none sortable-list">
|
|
|
|
<div v-for="[index, base] of Object.entries(bases)" :key="`base-${base.id}`">
|
|
|
|
<a-collapse
|
|
|
|
v-if="base && base.enabled"
|
|
|
|
v-model:activeKey="activeKey"
|
|
|
|
:class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
|
|
|
|
expand-icon-position="right"
|
|
|
|
:bordered="false"
|
|
|
|
:accordion="!searchActive"
|
|
|
|
ghost
|
|
|
|
>
|
|
|
|
<a-collapse-panel :key="`collapse-${base.id}`">
|
|
|
|
<template #header>
|
|
|
|
<div v-if="index === '0'" class="flex items-center gap-2 text-gray-500 font-bold">
|
|
|
|
<GeneralBaseLogo :base-type="base.type" />
|
|
|
|
Default ({{ tables.filter((table) => table.base_id === base.id).length || '0' }})
|
|
|
|
</div>
|
|
|
|
<div v-else class="flex items-center gap-2 text-gray-500 font-bold">
|
|
|
|
<GeneralBaseLogo :base-type="base.type" />
|
|
|
|
{{ base.alias || '' }}
|
|
|
|
({{ tables.filter((table) => table.base_id === base.id).length || '0' }})
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<div
|
|
|
|
v-if="index === '0' && isUIAllowed('table-create')"
|
|
|
|
class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
|
|
|
|
@click="openTableCreateDialog(bases[0].id)"
|
|
|
|
>
|
|
|
|
<MdiPlus />
|
|
|
|
|
|
|
|
<span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{
|
|
|
|
$t('tooltip.addTable')
|
|
|
|
}}</span>
|
|
|
|
|
|
|
|
<a-dropdown
|
|
|
|
v-if="!isSharedBase"
|
|
|
|
:trigger="['click']"
|
|
|
|
overlay-class-name="nc-dropdown-import-menu"
|
|
|
|
@click.stop
|
|
|
|
>
|
|
|
|
<MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" />
|
|
|
|
|
|
|
|
<template #overlay>
|
|
|
|
<a-menu class="!py-0 rounded text-sm">
|
|
|
|
<!-- Quick Import From -->
|
|
|
|
<a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0">
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('airtableImport')"
|
|
|
|
key="quick-import-airtable"
|
|
|
|
@click="openAirtableImportDialog(bases[0].id)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<MdiTableLarge class="group-hover:text-accent" />
|
|
|
|
Airtable
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('csvImport')"
|
|
|
|
key="quick-import-csv"
|
|
|
|
@click="openQuickImportDialog('csv', bases[0].id)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<MdiFileDocumentOutline class="group-hover:text-accent" />
|
|
|
|
CSV file
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('jsonImport')"
|
|
|
|
key="quick-import-json"
|
|
|
|
@click="openQuickImportDialog('json', bases[0].id)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<MdiCodeJson class="group-hover:text-accent" />
|
|
|
|
JSON file
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('excelImport')"
|
|
|
|
key="quick-import-excel"
|
|
|
|
@click="openQuickImportDialog('excel', bases[0].id)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<MdiFileExcel class="group-hover:text-accent" />
|
|
|
|
Microsoft Excel
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
</a-menu-item-group>
|
|
|
|
|
|
|
|
<a-menu-divider class="my-0" />
|
|
|
|
|
|
|
|
<a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
|
|
|
|
<a
|
|
|
|
v-e="['e:datasource:import-request']"
|
|
|
|
href="https://github.com/nocodb/nocodb/issues/2052"
|
|
|
|
target="_blank"
|
|
|
|
class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
|
|
|
|
>
|
|
|
|
<MdiOpenInNew class="group-hover:text-accent" />
|
|
|
|
<!-- Request a data source you need? -->
|
|
|
|
{{ $t('labels.requestDataSource') }}
|
|
|
|
</a>
|
|
|
|
</a-menu-item>
|
|
|
|
</a-menu>
|
|
|
|
</template>
|
|
|
|
</a-dropdown>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
v-else-if="isUIAllowed('table-create')"
|
|
|
|
class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
|
|
|
|
@click="openTableCreateDialog(base.id)"
|
|
|
|
>
|
|
|
|
<MdiPlus />
|
|
|
|
|
|
|
|
<span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{
|
|
|
|
$t('tooltip.addTable')
|
|
|
|
}}</span>
|
|
|
|
|
|
|
|
<a-dropdown
|
|
|
|
v-if="!isSharedBase"
|
|
|
|
:trigger="['click']"
|
|
|
|
overlay-class-name="nc-dropdown-import-menu"
|
|
|
|
@click.stop
|
|
|
|
>
|
|
|
|
<MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" />
|
|
|
|
|
|
|
|
<template #overlay>
|
|
|
|
<a-menu class="!py-0 rounded text-sm">
|
|
|
|
<!-- Quick Import From -->
|
|
|
|
<a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0">
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('airtableImport')"
|
|
|
|
key="quick-import-airtable"
|
|
|
|
@click="openAirtableImportDialog(base.id)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<MdiTableLarge class="group-hover:text-accent" />
|
|
|
|
Airtable
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('csvImport')"
|
|
|
|
key="quick-import-csv"
|
|
|
|
@click="openQuickImportDialog('csv', base.id)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<MdiFileDocumentOutline class="group-hover:text-accent" />
|
|
|
|
CSV file
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('jsonImport')"
|
|
|
|
key="quick-import-json"
|
|
|
|
@click="openQuickImportDialog('json', base.id)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<MdiCodeJson class="group-hover:text-accent" />
|
|
|
|
JSON file
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('excelImport')"
|
|
|
|
key="quick-import-excel"
|
|
|
|
@click="openQuickImportDialog('excel', base.id)"
|
|
|
|
>
|
|
|
|
<div class="color-transition nc-project-menu-item group">
|
|
|
|
<MdiFileExcel class="group-hover:text-accent" />
|
|
|
|
Microsoft Excel
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
</a-menu-item-group>
|
|
|
|
|
|
|
|
<a-menu-divider class="my-0" />
|
|
|
|
|
|
|
|
<a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
|
|
|
|
<a
|
|
|
|
v-e="['e:datasource:import-request']"
|
|
|
|
href="https://github.com/nocodb/nocodb/issues/2052"
|
|
|
|
target="_blank"
|
|
|
|
class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
|
|
|
|
>
|
|
|
|
<MdiOpenInNew class="group-hover:text-accent" />
|
|
|
|
<!-- Request a data source you need? -->
|
|
|
|
{{ $t('labels.requestDataSource') }}
|
|
|
|
</a>
|
|
|
|
</a-menu-item>
|
|
|
|
</a-menu>
|
|
|
|
</template>
|
|
|
|
</a-dropdown>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
ref="menuRefs"
|
|
|
|
:key="`sortable-${base.id}-${base.id && base.id in keys ? keys[base.id] : '0'}`"
|
|
|
|
:nc-base="base.id"
|
|
|
|
>
|
|
|
|
<div
|
|
|
|
v-for="table of tables.filter((table) => table.base_id === base.id)"
|
|
|
|
:key="table.id"
|
|
|
|
v-e="['a:table:open']"
|
|
|
|
:class="[
|
|
|
|
{ hidden: !filteredTables?.includes(table), active: activeTable === table.id },
|
|
|
|
`nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
|
|
|
|
]"
|
|
|
|
class="nc-tree-item text-sm cursor-pointer group"
|
|
|
|
:data-order="table.order"
|
|
|
|
:data-id="table.id"
|
|
|
|
:data-testid="`tree-view-table-${table.title}`"
|
|
|
|
@click="addTableTab(table)"
|
|
|
|
>
|
|
|
|
<GeneralTooltip class="pl-8 pr-3 py-2" modifier-key="Alt">
|
|
|
|
<template #title>{{ table.table_name }}</template>
|
|
|
|
<div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
|
|
|
|
<div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
|
|
|
|
<component
|
|
|
|
:is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
|
|
|
|
trigger="click"
|
|
|
|
destroy-popup-on-hide
|
|
|
|
class="flex items-center"
|
|
|
|
@click.stop
|
|
|
|
>
|
|
|
|
<div class="flex items-center" @click.stop>
|
|
|
|
<component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
|
|
|
|
<span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
|
|
|
|
<Icon
|
|
|
|
:key="table.meta?.icon"
|
|
|
|
:data-testid="`nc-icon-${table.meta?.icon}`"
|
|
|
|
class="text-xl"
|
|
|
|
:icon="table.meta?.icon"
|
|
|
|
></Icon>
|
|
|
|
</span>
|
|
|
|
<component
|
|
|
|
:is="icon(table)"
|
|
|
|
v-else
|
|
|
|
class="nc-table-icon nc-view-icon w-5"
|
|
|
|
:class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
|
|
|
|
</component>
|
|
|
|
</div>
|
|
|
|
<template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
|
|
|
|
<GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
|
|
|
|
</template>
|
|
|
|
</component>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="nc-tbl-title flex-1">
|
|
|
|
<GeneralTruncateText>{{ table.title }}</GeneralTruncateText>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<a-dropdown
|
|
|
|
v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
|
|
|
|
:trigger="['click']"
|
|
|
|
@click.stop
|
|
|
|
>
|
|
|
|
<MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
|
|
|
|
|
|
|
|
<template #overlay>
|
|
|
|
<a-menu class="!py-0 rounded text-sm">
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('table-rename')"
|
|
|
|
:data-testid="`sidebar-table-rename-${table.title}`"
|
|
|
|
@click="openRenameTableDialog(table, base.id)"
|
|
|
|
>
|
|
|
|
<div class="nc-project-menu-item">
|
|
|
|
{{ $t('general.rename') }}
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('table-delete')"
|
|
|
|
:data-testid="`sidebar-table-delete-${table.title}`"
|
|
|
|
@click="deleteTable(table)"
|
|
|
|
>
|
|
|
|
<div class="nc-project-menu-item">
|
|
|
|
{{ $t('general.delete') }}
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
</a-menu>
|
|
|
|
</template>
|
|
|
|
</a-dropdown>
|
|
|
|
</div>
|
|
|
|
</GeneralTooltip>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</a-collapse-panel>
|
|
|
|
</a-collapse>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<template v-if="!isSharedBase" #overlay>
|
|
|
|
<a-menu class="!py-0 rounded text-sm">
|
|
|
|
<template v-if="contextMenuTarget.type === 'table'">
|
|
|
|
<a-menu-item
|
|
|
|
v-if="isUIAllowed('table-rename')"
|
|
|
|
@click="openRenameTableDialog(contextMenuTarget.value, bases[0].id, true)"
|
|
|
|
>
|
|
|
|
<div class="nc-project-menu-item">
|
|
|
|
{{ $t('general.rename') }}
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
|
|
|
|
<a-menu-item v-if="isUIAllowed('table-delete')" @click="deleteTable(contextMenuTarget.value)">
|
|
|
|
<div class="nc-project-menu-item">
|
|
|
|
{{ $t('general.delete') }}
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<template v-else>
|
|
|
|
<a-menu-item @click="reloadTables">
|
|
|
|
<div class="nc-project-menu-item">
|
|
|
|
{{ $t('general.reload') }}
|
|
|
|
</div>
|
|
|
|
</a-menu-item>
|
|
|
|
</template>
|
|
|
|
</a-menu>
|
|
|
|
</template>
|
|
|
|
</a-dropdown>
|
|
|
|
|
|
|
|
<a-divider class="!my-0" />
|
|
|
|
|
|
|
|
<div class="flex items-start flex-col justify-start px-2 py-3 gap-2">
|
|
|
|
<LazyGeneralAddBaseButton
|
|
|
|
class="color-transition py-1.5 px-2 text-primary font-bold cursor-pointer select-none hover:text-accent"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<LazyGeneralHelpAndSupport class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
|
|
|
|
|
|
|
|
<GeneralJoinCloud class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
|
|
|
|
|
|
|
|
<GithubButton
|
|
|
|
class="ml-2 py-1"
|
|
|
|
href="https://github.com/nocodb/nocodb"
|
|
|
|
data-icon="octicon-star"
|
|
|
|
data-show-count="true"
|
|
|
|
data-size="large"
|
|
|
|
>
|
|
|
|
Star
|
|
|
|
</GithubButton>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.nc-treeview-container {
|
|
|
|
@apply h-[calc(100vh_-_var(--header-height))];
|
|
|
|
}
|
|
|
|
|
|
|
|
.nc-treeview-footer-item {
|
|
|
|
@apply cursor-pointer px-4 py-2 flex items-center hover:bg-gray-200/20 text-xs text-current;
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.nc-filter-input input::placeholder) {
|
|
|
|
@apply !text-xs;
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.ant-dropdown-menu-title-content) {
|
|
|
|
@apply !p-2;
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.ant-input-group-addon:last-child) {
|
|
|
|
@apply top-[-0.5px];
|
|
|
|
}
|
|
|
|
|
|
|
|
.nc-treeview-container {
|
|
|
|
.ghost,
|
|
|
|
.ghost > * {
|
|
|
|
@apply !pointer-events-none;
|
|
|
|
}
|
|
|
|
|
|
|
|
& .dragging {
|
|
|
|
.nc-icon {
|
|
|
|
@apply !hidden;
|
|
|
|
}
|
|
|
|
|
|
|
|
.nc-view-icon {
|
|
|
|
@apply !block;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ant-menu-item:not(.sortable-chosen) {
|
|
|
|
@apply color-transition hover:!bg-transparent;
|
|
|
|
}
|
|
|
|
|
|
|
|
.sortable-chosen {
|
|
|
|
@apply !bg-primary bg-opacity-25 text-primary;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.nc-tree-item {
|
|
|
|
@apply relative cursor-pointer after:(pointer-events-none content-[''] absolute top-0 left-0 w-full h-full right-0 !bg-current transition transition-opactity duration-100 opacity-0);
|
|
|
|
}
|
|
|
|
|
|
|
|
.nc-tree-item svg {
|
|
|
|
@apply text-primary text-opacity-60;
|
|
|
|
}
|
|
|
|
|
|
|
|
.nc-tree-item.active {
|
|
|
|
@apply text-primary font-weight-bold after:(!opacity-20);
|
|
|
|
@apply border-r-3 border-primary;
|
|
|
|
|
|
|
|
svg {
|
|
|
|
@apply text-primary !text-opacity-100;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.nc-tree-item:hover {
|
|
|
|
@apply text-primary after:(!opacity-5);
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.nc-filter-input) {
|
|
|
|
.ant-input {
|
|
|
|
@apply pr-6 !border-0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.ant-dropdown-menu-item-group-title) {
|
|
|
|
@apply border-b-1;
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.ant-dropdown-menu-item-group-list) {
|
|
|
|
@apply !mx-0;
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.ant-dropdown-menu-item-group-title) {
|
|
|
|
@apply border-b-1;
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.ant-dropdown-menu-item-group-list) {
|
|
|
|
@apply m-0;
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.ant-dropdown-menu-item) {
|
|
|
|
@apply !py-0 active:(ring ring-accent ring-opacity-100);
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.ant-dropdown-menu-title-content) {
|
|
|
|
@apply !p-0;
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.ant-collapse-content-box) {
|
|
|
|
@apply !p-0;
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.ant-collapse-header) {
|
|
|
|
@apply !border-0;
|
|
|
|
}
|
|
|
|
</style>
|