多维表格
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

286 lines
7.1 KiB

<script setup lang="ts">
import type { TableType } from 'nocodb-sdk'
import { message } from 'ant-design-vue'
import ProjectWrapper from './ProjectWrapper.vue'
import type { TabType } from '#imports'
import {
TreeViewInj,
computed,
isDrawerOrModalExist,
isElementInvisible,
isMac,
reactive,
ref,
resolveComponent,
storeToRefs,
useBase,
useBases,
useDialog,
useNuxtApp,
useRoles,
useTablesStore,
useTabs,
} from '#imports'
import { useRouter } from '#app'
const { isUIAllowed } = useRoles()
const { addTab } = useTabs()
const { $e, $poller } = useNuxtApp()
const router = useRouter()
const route = router.currentRoute
const basesStore = useBases()
const { createProject: _createProject } = basesStore
const { bases, basesList, activeProjectId } = storeToRefs(basesStore)
const { isWorkspaceLoading } = storeToRefs(useWorkspace())
const { openTable } = useTablesStore()
const baseCreateDlg = ref(false)
const baseStore = useBase()
const { loadTables } = baseStore
const { tables, isSharedBase } = storeToRefs(baseStore)
const { t } = useI18n()
const { activeTable: _activeTable } = storeToRefs(useTablesStore())
const { refreshCommandPalette } = useCommandPalette()
const contextMenuTarget = reactive<{ type?: 'base' | 'source' | 'table' | 'main' | 'layout'; value?: any }>({})
const setMenuContext = (type: 'base' | 'source' | 'table' | 'main' | 'layout', value?: any) => {
contextMenuTarget.type = type
contextMenuTarget.value = value
}
function openRenameTableDialog(table: TableType, _ = false) {
if (!table || !table.source_id) return
$e('c:table:rename')
const isOpen = ref(true)
const { close } = useDialog(resolveComponent('DlgTableRename'), {
'modelValue': isOpen,
'tableMeta': table,
'sourceId': table.source_id, // || sources.value[0].id,
'onUpdate:modelValue': closeDialog,
})
function closeDialog() {
isOpen.value = false
close(1000)
}
}
function openTableCreateDialog(sourceId?: string, baseId?: string) {
if (!sourceId && !(baseId || basesList.value[0].id)) return
$e('c:table:create:navdraw')
const isOpen = ref(true)
const { close } = useDialog(resolveComponent('DlgTableCreate'), {
'modelValue': isOpen,
'sourceId': sourceId, // || sources.value[0].id,
'baseId': baseId || basesList.value[0].id,
'onUpdate:modelValue': closeDialog,
})
function closeDialog() {
isOpen.value = false
close(1000)
}
}
const duplicateTable = async (table: TableType) => {
if (!table || !table.id || !table.base_id) return
const isOpen = ref(true)
$e('c:table:duplicate')
const { close } = useDialog(resolveComponent('DlgTableDuplicate'), {
'modelValue': isOpen,
'table': table,
'onOk': async (jobData: { id: string }) => {
$poller.subscribe(
{ id: jobData.id },
async (data: {
id: string
status?: string
data?: {
error?: {
message: string
}
message?: string
result?: any
}
}) => {
if (data.status !== 'close') {
if (data.status === JobStatus.COMPLETED) {
await loadTables()
refreshCommandPalette()
const newTable = tables.value.find((el) => el.id === data?.data?.result?.id)
if (newTable) addTab({ title: newTable.title, id: newTable.id, type: newTable.type as TabType })
openTable(newTable!)
} else if (data.status === JobStatus.FAILED) {
message.error(t('msg.error.failedToDuplicateTable'))
await loadTables()
}
}
},
)
$e('a:table:duplicate')
},
'onUpdate:modelValue': closeDialog,
})
function closeDialog() {
isOpen.value = false
close(1000)
}
}
const isCreateTableAllowed = computed(
() =>
isUIAllowed('tableCreate') &&
route.value.name !== 'index' &&
route.value.name !== 'index-index' &&
route.value.name !== 'index-index-create' &&
route.value.name !== 'index-index-create-external' &&
route.value.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' })
const baseId = activeProjectId.value
const base = baseId ? bases.value.get(baseId) : undefined
if (!base) return
if (baseId) openTableCreateDialog(base.sources?.[0].id, baseId)
}
break
}
// ALT + L - only show active base
case 76: {
if (route.value.params.baseId) {
router.push({
query: {
...route.value.query,
clear: route.value.query.clear === '1' ? undefined : '1',
},
})
}
break
}
// ALT + D
case 68: {
e.stopPropagation()
baseCreateDlg.value = true
break
}
}
}
})
const handleContext = (e: MouseEvent) => {
if (!document.querySelector('.source-context, .table-context')?.contains(e.target as Node)) {
setMenuContext('main')
}
}
provide(TreeViewInj, {
setMenuContext,
duplicateTable,
openRenameTableDialog,
contextMenuTarget,
})
useEventListener(document, 'contextmenu', handleContext, true)
const scrollTableNode = () => {
const activeTableDom = document.querySelector(`.nc-treeview [data-table-id="${_activeTable.value?.id}"]`)
if (!activeTableDom) return
// Scroll to the table node
activeTableDom?.scrollIntoView({ behavior: 'smooth', block: 'nearest' })
}
watch(
() => _activeTable.value?.id,
() => {
if (!_activeTable.value?.id) return
// TODO: Find a better way to scroll to the table node
setTimeout(() => {
scrollTableNode()
}, 1000)
},
{
immediate: true,
},
)
watch(
activeProjectId,
() => {
const activeProjectDom = document.querySelector(`.nc-treeview [data-base-id="${activeProjectId.value}"]`)
if (!activeProjectDom) return
if (isElementInvisible(activeProjectDom)) {
// Scroll to the table node
activeProjectDom?.scrollIntoView({ behavior: 'smooth' })
}
},
{
immediate: true,
},
)
</script>
<template>
<div class="nc-treeview-container flex flex-col justify-between select-none">
<div v-if="!isSharedBase" class="text-gray-500 font-medium pl-3.5 mb-1">{{ $t('objects.projects') }}</div>
<div mode="inline" class="nc-treeview pb-0.5 flex-grow min-h-50 overflow-x-hidden">
<template v-if="basesList?.length">
<ProjectWrapper v-for="base of basesList" :key="base.id" :base-role="base.project_role" :base="base">
<DashboardTreeViewProjectNode />
</ProjectWrapper>
</template>
<WorkspaceEmptyPlaceholder v-else-if="!isWorkspaceLoading" />
</div>
<WorkspaceCreateProjectDlg v-model="baseCreateDlg" />
</div>
</template>
<style scoped lang="scss"></style>