|
|
|
@ -2,7 +2,7 @@ |
|
|
|
import { nextTick } from '@vue/runtime-core' |
|
|
|
import { nextTick } from '@vue/runtime-core' |
|
|
|
import { message } from 'ant-design-vue' |
|
|
|
import { message } from 'ant-design-vue' |
|
|
|
import { stringifyRolesObj } from 'nocodb-sdk' |
|
|
|
import { stringifyRolesObj } from 'nocodb-sdk' |
|
|
|
import type { BaseType, ProjectType, TableType } from 'nocodb-sdk' |
|
|
|
import type { SourceType, BaseType, TableType } from 'nocodb-sdk' |
|
|
|
import { LoadingOutlined } from '@ant-design/icons-vue' |
|
|
|
import { LoadingOutlined } from '@ant-design/icons-vue' |
|
|
|
import { useTitle } from '@vueuse/core' |
|
|
|
import { useTitle } from '@vueuse/core' |
|
|
|
import { |
|
|
|
import { |
|
|
|
@ -13,7 +13,7 @@ import { |
|
|
|
extractSdkResponseErrorMsg, |
|
|
|
extractSdkResponseErrorMsg, |
|
|
|
openLink, |
|
|
|
openLink, |
|
|
|
storeToRefs, |
|
|
|
storeToRefs, |
|
|
|
useProjects, |
|
|
|
useBases, |
|
|
|
} from '#imports' |
|
|
|
} from '#imports' |
|
|
|
import type { NcProject } from '#imports' |
|
|
|
import type { NcProject } from '#imports' |
|
|
|
import { useNuxtApp } from '#app' |
|
|
|
import { useNuxtApp } from '#app' |
|
|
|
@ -29,19 +29,19 @@ const indicator = h(LoadingOutlined, { |
|
|
|
const router = useRouter() |
|
|
|
const router = useRouter() |
|
|
|
const route = router.currentRoute |
|
|
|
const route = router.currentRoute |
|
|
|
|
|
|
|
|
|
|
|
const { isSharedBase } = storeToRefs(useProject()) |
|
|
|
const { isSharedBase } = storeToRefs(useBase()) |
|
|
|
const { projectUrl } = useProject() |
|
|
|
const { projectUrl } = useBase() |
|
|
|
|
|
|
|
|
|
|
|
const { setMenuContext, openRenameTableDialog, duplicateTable, contextMenuTarget } = inject(TreeViewInj)! |
|
|
|
const { setMenuContext, openRenameTableDialog, duplicateTable, contextMenuTarget } = inject(TreeViewInj)! |
|
|
|
|
|
|
|
|
|
|
|
const project = inject(ProjectInj)! |
|
|
|
const base = inject(ProjectInj)! |
|
|
|
|
|
|
|
|
|
|
|
const projectsStore = useProjects() |
|
|
|
const basesStore = useBases() |
|
|
|
|
|
|
|
|
|
|
|
const { isMobileMode } = useGlobal() |
|
|
|
const { isMobileMode } = useGlobal() |
|
|
|
|
|
|
|
|
|
|
|
const { loadProject, loadProjects, createProject: _createProject, updateProject, getProjectMetaInfo } = projectsStore |
|
|
|
const { loadProject, loadProjects, createProject: _createProject, updateProject, getProjectMetaInfo } = basesStore |
|
|
|
const { projects } = storeToRefs(projectsStore) |
|
|
|
const { bases } = storeToRefs(basesStore) |
|
|
|
|
|
|
|
|
|
|
|
const { loadProjectTables } = useTablesStore() |
|
|
|
const { loadProjectTables } = useTablesStore() |
|
|
|
const { activeTable } = storeToRefs(useTablesStore()) |
|
|
|
const { activeTable } = storeToRefs(useTablesStore()) |
|
|
|
@ -64,9 +64,11 @@ const { t } = useI18n() |
|
|
|
|
|
|
|
|
|
|
|
const input = ref<HTMLInputElement>() |
|
|
|
const input = ref<HTMLInputElement>() |
|
|
|
|
|
|
|
|
|
|
|
const projectRole = inject(ProjectRoleInj) |
|
|
|
const baseRole = inject(ProjectRoleInj) |
|
|
|
|
|
|
|
|
|
|
|
const { activeProjectId } = storeToRefs(useProjects()) |
|
|
|
const { activeProjectId } = storeToRefs(useBases()) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { baseUrl } = useBase() |
|
|
|
|
|
|
|
|
|
|
|
const toggleDialog = inject(ToggleDialogInj, () => {}) |
|
|
|
const toggleDialog = inject(ToggleDialogInj, () => {}) |
|
|
|
|
|
|
|
|
|
|
|
@ -82,9 +84,9 @@ const keys = ref<Record<string, number>>({}) |
|
|
|
const isTableDeleteDialogVisible = ref(false) |
|
|
|
const isTableDeleteDialogVisible = ref(false) |
|
|
|
const isProjectDeleteDialogVisible = ref(false) |
|
|
|
const isProjectDeleteDialogVisible = ref(false) |
|
|
|
|
|
|
|
|
|
|
|
// If only project is open, i.e in case of docs, project view is open and not the page view |
|
|
|
// If only base is open, i.e in case of docs, base view is open and not the page view |
|
|
|
const projectViewOpen = computed(() => { |
|
|
|
const baseViewOpen = computed(() => { |
|
|
|
const routeNameSplit = String(route.value?.name).split('projectId-index-index') |
|
|
|
const routeNameSplit = String(route.value?.name).split('baseId-index-index') |
|
|
|
if (routeNameSplit.length <= 1) return false |
|
|
|
if (routeNameSplit.length <= 1) return false |
|
|
|
|
|
|
|
|
|
|
|
const routeNameAfterProjectView = routeNameSplit[routeNameSplit.length - 1] |
|
|
|
const routeNameAfterProjectView = routeNameSplit[routeNameSplit.length - 1] |
|
|
|
@ -97,7 +99,7 @@ const showBaseOption = computed(() => { |
|
|
|
|
|
|
|
|
|
|
|
const enableEditMode = () => { |
|
|
|
const enableEditMode = () => { |
|
|
|
editMode.value = true |
|
|
|
editMode.value = true |
|
|
|
tempTitle.value = project.value.title! |
|
|
|
tempTitle.value = base.value.title! |
|
|
|
nextTick(() => { |
|
|
|
nextTick(() => { |
|
|
|
input.value?.focus() |
|
|
|
input.value?.focus() |
|
|
|
input.value?.select() |
|
|
|
input.value?.select() |
|
|
|
@ -109,15 +111,15 @@ const updateProjectTitle = async () => { |
|
|
|
if (!tempTitle.value) return |
|
|
|
if (!tempTitle.value) return |
|
|
|
|
|
|
|
|
|
|
|
try { |
|
|
|
try { |
|
|
|
await updateProject(project.value.id!, { |
|
|
|
await updateProject(base.value.id!, { |
|
|
|
title: tempTitle.value, |
|
|
|
title: tempTitle.value, |
|
|
|
}) |
|
|
|
}) |
|
|
|
editMode.value = false |
|
|
|
editMode.value = false |
|
|
|
tempTitle.value = '' |
|
|
|
tempTitle.value = '' |
|
|
|
|
|
|
|
|
|
|
|
$e('a:project:rename') |
|
|
|
$e('a:base:rename') |
|
|
|
|
|
|
|
|
|
|
|
useTitle(`${project.value?.title}`) |
|
|
|
useTitle(`${base.value?.title}`) |
|
|
|
} catch (e: any) { |
|
|
|
} catch (e: any) { |
|
|
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
|
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
|
|
} |
|
|
|
} |
|
|
|
@ -129,7 +131,7 @@ const copyProjectInfo = async () => { |
|
|
|
try { |
|
|
|
try { |
|
|
|
if ( |
|
|
|
if ( |
|
|
|
await copy( |
|
|
|
await copy( |
|
|
|
Object.entries(await getProjectMetaInfo(project.value.id!)!) |
|
|
|
Object.entries(await getProjectMetaInfo(base.value.id!)!) |
|
|
|
.map(([k, v]) => `${k}: **${v}**`) |
|
|
|
.map(([k, v]) => `${k}: **${v}**`) |
|
|
|
.join('\n'), |
|
|
|
.join('\n'), |
|
|
|
) |
|
|
|
) |
|
|
|
@ -147,34 +149,34 @@ defineExpose({ |
|
|
|
enableEditMode, |
|
|
|
enableEditMode, |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
const setIcon = async (icon: string, project: ProjectType) => { |
|
|
|
const setIcon = async (icon: string, base: BaseType) => { |
|
|
|
try { |
|
|
|
try { |
|
|
|
const meta = { |
|
|
|
const meta = { |
|
|
|
...((project.meta as object) || {}), |
|
|
|
...((base.meta as object) || {}), |
|
|
|
icon, |
|
|
|
icon, |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
projectsStore.updateProject(project.id!, { meta: JSON.stringify(meta) }) |
|
|
|
basesStore.updateProject(base.id!, { meta: JSON.stringify(meta) }) |
|
|
|
|
|
|
|
|
|
|
|
$e('a:project:icon:navdraw', { icon }) |
|
|
|
$e('a:base:icon:navdraw', { icon }) |
|
|
|
} catch (e: any) { |
|
|
|
} catch (e: any) { |
|
|
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
|
|
message.error(await extractSdkResponseErrorMsg(e)) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function openTableCreateDialog(baseIndex?: number | undefined) { |
|
|
|
function openTableCreateDialog(sourceIndex?: number | undefined) { |
|
|
|
const isOpen = ref(true) |
|
|
|
const isOpen = ref(true) |
|
|
|
let baseId = project.value!.bases?.[0].id |
|
|
|
let sourceId = base.value!.sources?.[0].id |
|
|
|
if (typeof baseIndex === 'number') { |
|
|
|
if (typeof sourceIndex === 'number') { |
|
|
|
baseId = project.value!.bases?.[baseIndex].id |
|
|
|
sourceId = base.value!.sources?.[sourceIndex].id |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (!baseId || !project.value?.id) return |
|
|
|
if (!sourceId || !base.value?.id) return |
|
|
|
|
|
|
|
|
|
|
|
const { close } = useDialog(resolveComponent('DlgTableCreate'), { |
|
|
|
const { close } = useDialog(resolveComponent('DlgTableCreate'), { |
|
|
|
'modelValue': isOpen, |
|
|
|
'modelValue': isOpen, |
|
|
|
baseId, // || bases.value[0].id, |
|
|
|
sourceId, // || sources.value[0].id, |
|
|
|
'projectId': project.value!.id, |
|
|
|
'baseId': base.value!.id, |
|
|
|
'onCreate': closeDialog, |
|
|
|
'onCreate': closeDialog, |
|
|
|
'onUpdate:modelValue': () => closeDialog(), |
|
|
|
'onUpdate:modelValue': () => closeDialog(), |
|
|
|
}) |
|
|
|
}) |
|
|
|
@ -184,10 +186,10 @@ function openTableCreateDialog(baseIndex?: number | undefined) { |
|
|
|
|
|
|
|
|
|
|
|
if (!table) return |
|
|
|
if (!table) return |
|
|
|
|
|
|
|
|
|
|
|
project.value.isExpanded = true |
|
|
|
base.value.isExpanded = true |
|
|
|
|
|
|
|
|
|
|
|
if (!activeKey.value || !activeKey.value.includes(`collapse-${baseId}`)) { |
|
|
|
if (!activeKey.value || !activeKey.value.includes(`collapse-${sourceId}`)) { |
|
|
|
activeKey.value.push(`collapse-${baseId}`) |
|
|
|
activeKey.value.push(`collapse-${sourceId}`) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// TODO: Better way to know when the table node dom is available |
|
|
|
// TODO: Better way to know when the table node dom is available |
|
|
|
@ -208,27 +210,27 @@ const addNewProjectChildEntity = async () => { |
|
|
|
|
|
|
|
|
|
|
|
isAddNewProjectChildEntityLoading.value = true |
|
|
|
isAddNewProjectChildEntityLoading.value = true |
|
|
|
|
|
|
|
|
|
|
|
const isProjectPopulated = projectsStore.isProjectPopulated(project.value.id!) |
|
|
|
const isProjectPopulated = basesStore.isProjectPopulated(base.value.id!) |
|
|
|
if (!isProjectPopulated && project.value.type === NcProjectType.DB) { |
|
|
|
if (!isProjectPopulated && base.value.type === NcProjectType.DB) { |
|
|
|
// We do not wait for tables api, so that add new table is seamless. |
|
|
|
// We do not wait for tables api, so that add new table is seamless. |
|
|
|
// Only con would be while saving table duplicate table name FE validation might not work |
|
|
|
// Only con would be while saving table duplicate table name FE validation might not work |
|
|
|
// If the table list api takes time to load before the table name validation |
|
|
|
// If the table list api takes time to load before the table name validation |
|
|
|
loadProjectTables(project.value.id!) |
|
|
|
loadProjectTables(base.value.id!) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
try { |
|
|
|
try { |
|
|
|
openTableCreateDialog() |
|
|
|
openTableCreateDialog() |
|
|
|
|
|
|
|
|
|
|
|
if (!project.value.isExpanded && project.value.type !== NcProjectType.DB) { |
|
|
|
if (!base.value.isExpanded && base.value.type !== NcProjectType.DB) { |
|
|
|
project.value.isExpanded = true |
|
|
|
base.value.isExpanded = true |
|
|
|
} |
|
|
|
} |
|
|
|
} finally { |
|
|
|
} finally { |
|
|
|
isAddNewProjectChildEntityLoading.value = false |
|
|
|
isAddNewProjectChildEntityLoading.value = false |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => { |
|
|
|
const onProjectClick = async (base: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => { |
|
|
|
if (!project) { |
|
|
|
if (!base) { |
|
|
|
return |
|
|
|
return |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -238,19 +240,19 @@ const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, to |
|
|
|
toggleIsExpanded = isMobileMode.value || toggleIsExpanded |
|
|
|
toggleIsExpanded = isMobileMode.value || toggleIsExpanded |
|
|
|
|
|
|
|
|
|
|
|
if (toggleIsExpanded) { |
|
|
|
if (toggleIsExpanded) { |
|
|
|
project.isExpanded = !project.isExpanded |
|
|
|
base.isExpanded = !base.isExpanded |
|
|
|
} else { |
|
|
|
} else { |
|
|
|
project.isExpanded = true |
|
|
|
base.isExpanded = true |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const isProjectPopulated = projectsStore.isProjectPopulated(project.id!) |
|
|
|
const isProjectPopulated = basesStore.isProjectPopulated(base.id!) |
|
|
|
|
|
|
|
|
|
|
|
if (!isProjectPopulated) project.isLoading = true |
|
|
|
if (!isProjectPopulated) base.isLoading = true |
|
|
|
|
|
|
|
|
|
|
|
if (!ignoreNavigation) { |
|
|
|
if (!ignoreNavigation) { |
|
|
|
await navigateTo( |
|
|
|
await navigateTo( |
|
|
|
projectUrl({ |
|
|
|
baseUrl({ |
|
|
|
id: project.id!, |
|
|
|
id: base.id!, |
|
|
|
type: 'database', |
|
|
|
type: 'database', |
|
|
|
isSharedBase: isSharedBase.value, |
|
|
|
isSharedBase: isSharedBase.value, |
|
|
|
}), |
|
|
|
}), |
|
|
|
@ -258,32 +260,32 @@ const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, to |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (!isProjectPopulated) { |
|
|
|
if (!isProjectPopulated) { |
|
|
|
await loadProjectTables(project.id!) |
|
|
|
await loadProjectTables(base.id!) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (!isProjectPopulated) { |
|
|
|
if (!isProjectPopulated) { |
|
|
|
const updatedProject = projects.value.get(project.id!)! |
|
|
|
const updatedProject = bases.value.get(base.id!)! |
|
|
|
updatedProject.isLoading = false |
|
|
|
updatedProject.isLoading = false |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function openErdView(base: BaseType) { |
|
|
|
function openErdView(source: SourceType) { |
|
|
|
activeBaseId.value = base.id |
|
|
|
activeBaseId.value = source.id |
|
|
|
isErdModalOpen.value = !isErdModalOpen.value |
|
|
|
isErdModalOpen.value = !isErdModalOpen.value |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
async function openProjectErdView(_project: ProjectType) { |
|
|
|
async function openProjectErdView(_project: BaseType) { |
|
|
|
if (!_project.id) return |
|
|
|
if (!_project.id) return |
|
|
|
|
|
|
|
|
|
|
|
if (!projectsStore.isProjectPopulated(_project.id)) { |
|
|
|
if (!basesStore.isProjectPopulated(_project.id)) { |
|
|
|
await loadProject(_project.id) |
|
|
|
await loadProject(_project.id) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const project = projects.value.get(_project.id) |
|
|
|
const base = bases.value.get(_project.id) |
|
|
|
|
|
|
|
|
|
|
|
const base = project?.bases?.[0] |
|
|
|
const source = base?.sources?.[0] |
|
|
|
if (!base) return |
|
|
|
if (!source) return |
|
|
|
openErdView(base) |
|
|
|
openErdView(source) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const reloadTables = async () => { |
|
|
|
const reloadTables = async () => { |
|
|
|
@ -293,11 +295,11 @@ const reloadTables = async () => { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const contextMenuBase = computed(() => { |
|
|
|
const contextMenuBase = computed(() => { |
|
|
|
if (contextMenuTarget.type === 'base') { |
|
|
|
if (contextMenuTarget.type === 'source') { |
|
|
|
return contextMenuTarget.value |
|
|
|
return contextMenuTarget.value |
|
|
|
} else if (contextMenuTarget.type === 'table') { |
|
|
|
} else if (contextMenuTarget.type === 'table') { |
|
|
|
const base = project.value?.bases?.find((b) => b.id === contextMenuTarget.value.base_id) |
|
|
|
const source = base.value?.sources?.find((b) => b.id === contextMenuTarget.value.source_id) |
|
|
|
if (base) return base |
|
|
|
if (source) return source |
|
|
|
} |
|
|
|
} |
|
|
|
return null |
|
|
|
return null |
|
|
|
}) |
|
|
|
}) |
|
|
|
@ -307,11 +309,11 @@ watch( |
|
|
|
async () => { |
|
|
|
async () => { |
|
|
|
if (!activeTable.value) return |
|
|
|
if (!activeTable.value) return |
|
|
|
|
|
|
|
|
|
|
|
const baseId = activeTable.value.base_id |
|
|
|
const sourceId = activeTable.value.source_id |
|
|
|
if (!baseId) return |
|
|
|
if (!sourceId) return |
|
|
|
|
|
|
|
|
|
|
|
if (!activeKey.value.includes(`collapse-${baseId}`)) { |
|
|
|
if (!activeKey.value.includes(`collapse-${sourceId}`)) { |
|
|
|
activeKey.value.push(`collapse-${baseId}`) |
|
|
|
activeKey.value.push(`collapse-${sourceId}`) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
{ |
|
|
|
@ -332,13 +334,13 @@ onKeyStroke('Escape', () => { |
|
|
|
const isDuplicateDlgOpen = ref(false) |
|
|
|
const isDuplicateDlgOpen = ref(false) |
|
|
|
const selectedProjectToDuplicate = ref() |
|
|
|
const selectedProjectToDuplicate = ref() |
|
|
|
|
|
|
|
|
|
|
|
const duplicateProject = (project: ProjectType) => { |
|
|
|
const duplicateProject = (base: BaseType) => { |
|
|
|
selectedProjectToDuplicate.value = project |
|
|
|
selectedProjectToDuplicate.value = base |
|
|
|
isDuplicateDlgOpen.value = true |
|
|
|
isDuplicateDlgOpen.value = true |
|
|
|
} |
|
|
|
} |
|
|
|
const { $poller } = useNuxtApp() |
|
|
|
const { $poller } = useNuxtApp() |
|
|
|
|
|
|
|
|
|
|
|
const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string }) => { |
|
|
|
const DlgProjectDuplicateOnOk = async (jobData: { id: string; base_id: string }) => { |
|
|
|
await loadProjects('workspace') |
|
|
|
await loadProjects('workspace') |
|
|
|
|
|
|
|
|
|
|
|
$poller.subscribe( |
|
|
|
$poller.subscribe( |
|
|
|
@ -358,23 +360,23 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string |
|
|
|
if (data.status === JobStatus.COMPLETED) { |
|
|
|
if (data.status === JobStatus.COMPLETED) { |
|
|
|
await loadProjects('workspace') |
|
|
|
await loadProjects('workspace') |
|
|
|
|
|
|
|
|
|
|
|
const project = projects.value.get(jobData.project_id) |
|
|
|
const base = bases.value.get(jobData.base_id) |
|
|
|
|
|
|
|
|
|
|
|
// open project after duplication |
|
|
|
// open base after duplication |
|
|
|
if (project) { |
|
|
|
if (base) { |
|
|
|
await navigateToProject({ |
|
|
|
await navigateToProject({ |
|
|
|
projectId: project.id, |
|
|
|
baseId: base.id, |
|
|
|
type: project.type, |
|
|
|
type: base.type, |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
} else if (data.status === JobStatus.FAILED) { |
|
|
|
} else if (data.status === JobStatus.FAILED) { |
|
|
|
message.error('Failed to duplicate project') |
|
|
|
message.error('Failed to duplicate base') |
|
|
|
await loadProjects('workspace') |
|
|
|
await loadProjects('workspace') |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
) |
|
|
|
) |
|
|
|
$e('a:project:duplicate') |
|
|
|
$e('a:base:duplicate') |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const tableDelete = () => { |
|
|
|
const tableDelete = () => { |
|
|
|
@ -391,54 +393,54 @@ const projectDelete = () => { |
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<NcDropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu"> |
|
|
|
<NcDropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu"> |
|
|
|
<div |
|
|
|
<div |
|
|
|
class="mx-1 nc-project-sub-menu rounded-md" |
|
|
|
class="mx-1 nc-base-sub-menu rounded-md" |
|
|
|
:class="{ active: project.isExpanded }" |
|
|
|
:class="{ active: base.isExpanded }" |
|
|
|
:data-testid="`nc-sidebar-project-${project.title}`" |
|
|
|
:data-testid="`nc-sidebar-base-${base.title}`" |
|
|
|
:data-project-id="project.id" |
|
|
|
:data-base-id="base.id" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="flex items-center gap-0.75 py-0.25 cursor-pointer" @contextmenu="setMenuContext('project', project)"> |
|
|
|
<div class="flex items-center gap-0.75 py-0.25 cursor-pointer" @contextmenu="setMenuContext('base', base)"> |
|
|
|
<div |
|
|
|
<div |
|
|
|
ref="projectNodeRefs" |
|
|
|
ref="baseNodeRefs" |
|
|
|
:class="{ |
|
|
|
:class="{ |
|
|
|
'bg-primary-selected active': activeProjectId === project.id && projectViewOpen && !isMobileMode, |
|
|
|
'bg-primary-selected active': activeProjectId === base.id && baseViewOpen && !isMobileMode, |
|
|
|
'hover:bg-gray-200': !(activeProjectId === project.id && projectViewOpen), |
|
|
|
'hover:bg-gray-200': !(activeProjectId === base.id && baseViewOpen), |
|
|
|
}" |
|
|
|
}" |
|
|
|
:data-testid="`nc-sidebar-project-title-${project.title}`" |
|
|
|
:data-testid="`nc-sidebar-base-title-${base.title}`" |
|
|
|
class="nc-sidebar-node project-title-node h-7.25 flex-grow rounded-md group flex items-center w-full pr-1" |
|
|
|
class="nc-sidebar-node base-title-node h-7.25 flex-grow rounded-md group flex items-center w-full pr-1" |
|
|
|
> |
|
|
|
> |
|
|
|
<NcButton |
|
|
|
<NcButton |
|
|
|
v-e="['c:base:expand']" |
|
|
|
v-e="['c:base:expand']" |
|
|
|
type="text" |
|
|
|
type="text" |
|
|
|
size="xxsmall" |
|
|
|
size="xxsmall" |
|
|
|
class="nc-sidebar-node-btn nc-sidebar-expand ml-0.75 !xs:visible" |
|
|
|
class="nc-sidebar-node-btn nc-sidebar-expand ml-0.75 !xs:visible" |
|
|
|
@click="onProjectClick(project, true, true)" |
|
|
|
@click="onProjectClick(base, true, true)" |
|
|
|
> |
|
|
|
> |
|
|
|
<GeneralIcon |
|
|
|
<GeneralIcon |
|
|
|
icon="triangleFill" |
|
|
|
icon="triangleFill" |
|
|
|
class="group-hover:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.75 rotate-90 !xs:visible" |
|
|
|
class="group-hover:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.75 rotate-90 !xs:visible" |
|
|
|
:class="{ '!rotate-180': project.isExpanded, '!visible': isOptionsOpen }" |
|
|
|
:class="{ '!rotate-180': base.isExpanded, '!visible': isOptionsOpen }" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</NcButton> |
|
|
|
</NcButton> |
|
|
|
|
|
|
|
|
|
|
|
<div class="flex items-center mr-1" @click="onProjectClick(project)"> |
|
|
|
<div class="flex items-center mr-1" @click="onProjectClick(base)"> |
|
|
|
<div class="flex items-center select-none w-6 h-full"> |
|
|
|
<div class="flex items-center select-none w-6 h-full"> |
|
|
|
<a-spin |
|
|
|
<a-spin |
|
|
|
v-if="project.isLoading" |
|
|
|
v-if="base.isLoading" |
|
|
|
class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" |
|
|
|
class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" |
|
|
|
:indicator="indicator" |
|
|
|
:indicator="indicator" |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
|
|
|
|
<LazyGeneralEmojiPicker |
|
|
|
<LazyGeneralEmojiPicker |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
:key="project.meta?.icon" |
|
|
|
:key="base.meta?.icon" |
|
|
|
|
|
|
|
:emoji="base.meta?.icon" |
|
|
|
v-e="['c:base:emojiSelect']" |
|
|
|
v-e="['c:base:emojiSelect']" |
|
|
|
:emoji="project.meta?.icon" |
|
|
|
|
|
|
|
:readonly="true" |
|
|
|
:readonly="true" |
|
|
|
size="small" |
|
|
|
size="small" |
|
|
|
@emoji-selected="setIcon($event, project)" |
|
|
|
@emoji-selected="setIcon($event, base)" |
|
|
|
> |
|
|
|
> |
|
|
|
<template #default> |
|
|
|
<template #default> |
|
|
|
<GeneralProjectIcon :type="project.type" /> |
|
|
|
<GeneralProjectIcon :type="base.type" /> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</LazyGeneralEmojiPicker> |
|
|
|
</LazyGeneralEmojiPicker> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -449,7 +451,7 @@ const projectDelete = () => { |
|
|
|
ref="input" |
|
|
|
ref="input" |
|
|
|
v-model="tempTitle" |
|
|
|
v-model="tempTitle" |
|
|
|
class="flex-grow leading-1 outline-0 ring-none capitalize !text-inherit !bg-transparent w-4/5" |
|
|
|
class="flex-grow leading-1 outline-0 ring-none capitalize !text-inherit !bg-transparent w-4/5" |
|
|
|
:class="{ 'text-black font-semibold': activeProjectId === project.id && projectViewOpen && !isMobileMode }" |
|
|
|
:class="{ 'text-black font-semibold': activeProjectId === base.id && baseViewOpen && !isMobileMode }" |
|
|
|
@click.stop |
|
|
|
@click.stop |
|
|
|
@keyup.enter="updateProjectTitle" |
|
|
|
@keyup.enter="updateProjectTitle" |
|
|
|
@keyup.esc="updateProjectTitle" |
|
|
|
@keyup.esc="updateProjectTitle" |
|
|
|
@ -459,12 +461,12 @@ const projectDelete = () => { |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
class="nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none" |
|
|
|
class="nc-sidebar-node-title capitalize text-ellipsis overflow-hidden select-none" |
|
|
|
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }" |
|
|
|
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }" |
|
|
|
:class="{ 'text-black font-semibold': activeProjectId === project.id && projectViewOpen }" |
|
|
|
:class="{ 'text-black font-semibold': activeProjectId === base.id && baseViewOpen }" |
|
|
|
@click="onProjectClick(project)" |
|
|
|
@click="onProjectClick(base)" |
|
|
|
> |
|
|
|
> |
|
|
|
{{ project.title }} |
|
|
|
{{ base.title }} |
|
|
|
</span> |
|
|
|
</span> |
|
|
|
<div :class="{ 'flex flex-grow h-full': !editMode }" @click="onProjectClick(project)"></div> |
|
|
|
<div :class="{ 'flex flex-grow h-full': !editMode }" @click="onProjectClick(base)"></div> |
|
|
|
|
|
|
|
|
|
|
|
<NcDropdown v-model:visible="isOptionsOpen" :trigger="['click']"> |
|
|
|
<NcDropdown v-model:visible="isOptionsOpen" :trigger="['click']"> |
|
|
|
<NcButton |
|
|
|
<NcButton |
|
|
|
@ -485,12 +487,12 @@ const projectDelete = () => { |
|
|
|
maxHeight: '70vh', |
|
|
|
maxHeight: '70vh', |
|
|
|
overflow: 'overlay', |
|
|
|
overflow: 'overlay', |
|
|
|
}" |
|
|
|
}" |
|
|
|
:data-testid="`nc-sidebar-project-${project.title}-options`" |
|
|
|
:data-testid="`nc-sidebar-base-${base.title}-options`" |
|
|
|
@click="isOptionsOpen = false" |
|
|
|
@click="isOptionsOpen = false" |
|
|
|
> |
|
|
|
> |
|
|
|
<template v-if="!isSharedBase"> |
|
|
|
<template v-if="!isSharedBase"> |
|
|
|
<NcMenuItem |
|
|
|
<NcMenuItem |
|
|
|
v-if="isUIAllowed('projectRename')" |
|
|
|
v-if="isUIAllowed('baseRename')" |
|
|
|
v-e="['c:base:rename']" |
|
|
|
v-e="['c:base:rename']" |
|
|
|
data-testid="nc-sidebar-project-rename" |
|
|
|
data-testid="nc-sidebar-project-rename" |
|
|
|
@click="enableEditMode" |
|
|
|
@click="enableEditMode" |
|
|
|
@ -500,23 +502,23 @@ const projectDelete = () => { |
|
|
|
</NcMenuItem> |
|
|
|
</NcMenuItem> |
|
|
|
|
|
|
|
|
|
|
|
<NcMenuItem |
|
|
|
<NcMenuItem |
|
|
|
v-if="isUIAllowed('projectDuplicate', { roles: [stringifyRolesObj(orgRoles), projectRole].join() })" |
|
|
|
v-if="isUIAllowed('baseDuplicate', { roles: [stringifyRolesObj(orgRoles), baseRole].join() })" |
|
|
|
v-e="['c:base:duplicate']" |
|
|
|
v-e="['c:base:duplicate']" |
|
|
|
data-testid="nc-sidebar-project-duplicate" |
|
|
|
data-testid="nc-sidebar-base-duplicate" |
|
|
|
@click="duplicateProject(project)" |
|
|
|
@click="duplicateProject(base)" |
|
|
|
> |
|
|
|
> |
|
|
|
<GeneralIcon icon="duplicate" class="text-gray-700" /> |
|
|
|
<GeneralIcon icon="duplicate" class="text-gray-700" /> |
|
|
|
{{ $t('general.duplicate') }} |
|
|
|
{{ $t('general.duplicate') }} |
|
|
|
</NcMenuItem> |
|
|
|
</NcMenuItem> |
|
|
|
|
|
|
|
|
|
|
|
<NcDivider v-if="['projectDuplicate', 'projectRename'].some((permission) => isUIAllowed(permission))" /> |
|
|
|
<NcDivider v-if="['baseDuplicate', 'baseRename'].some((permission) => isUIAllowed(permission))" /> |
|
|
|
|
|
|
|
|
|
|
|
<!-- Copy Project Info --> |
|
|
|
<!-- Copy Project Info --> |
|
|
|
<NcMenuItem |
|
|
|
<NcMenuItem |
|
|
|
v-if="!isEeUI" |
|
|
|
v-if="!isEeUI" |
|
|
|
key="copy" |
|
|
|
key="copy" |
|
|
|
|
|
|
|
data-testid="nc-sidebar-base-copy-base-info" |
|
|
|
v-e="['c:base:copy-proj-info']" |
|
|
|
v-e="['c:base:copy-proj-info']" |
|
|
|
data-testid="nc-sidebar-project-copy-project-info" |
|
|
|
|
|
|
|
@click.stop="copyProjectInfo" |
|
|
|
@click.stop="copyProjectInfo" |
|
|
|
> |
|
|
|
> |
|
|
|
<GeneralIcon icon="copy" class="group-hover:text-black" /> |
|
|
|
<GeneralIcon icon="copy" class="group-hover:text-black" /> |
|
|
|
@ -527,8 +529,8 @@ const projectDelete = () => { |
|
|
|
<NcMenuItem |
|
|
|
<NcMenuItem |
|
|
|
key="erd" |
|
|
|
key="erd" |
|
|
|
v-e="['c:base:erd']" |
|
|
|
v-e="['c:base:erd']" |
|
|
|
data-testid="nc-sidebar-project-relations" |
|
|
|
data-testid="nc-sidebar-base-relations" |
|
|
|
@click="openProjectErdView(project)" |
|
|
|
@click="openProjectErdView(base)" |
|
|
|
> |
|
|
|
> |
|
|
|
<GeneralIcon icon="erd" /> |
|
|
|
<GeneralIcon icon="erd" /> |
|
|
|
{{ $t('title.relations') }} |
|
|
|
{{ $t('title.relations') }} |
|
|
|
@ -539,11 +541,11 @@ const projectDelete = () => { |
|
|
|
v-if="isUIAllowed('apiDocs')" |
|
|
|
v-if="isUIAllowed('apiDocs')" |
|
|
|
key="api" |
|
|
|
key="api" |
|
|
|
v-e="['c:base:api-docs']" |
|
|
|
v-e="['c:base:api-docs']" |
|
|
|
data-testid="nc-sidebar-project-rest-apis" |
|
|
|
data-testid="nc-sidebar-base-rest-apis" |
|
|
|
@click.stop=" |
|
|
|
@click.stop=" |
|
|
|
() => { |
|
|
|
() => { |
|
|
|
$e('c:base:api-docs') |
|
|
|
$e('c:base:api-docs') |
|
|
|
openLink(`/api/v1/db/meta/projects/${project.id}/swagger`, appInfo.ncSiteUrl) |
|
|
|
openLink(`/api/v1/meta/bases/${base.id}/swagger`, appInfo.ncSiteUrl) |
|
|
|
} |
|
|
|
} |
|
|
|
" |
|
|
|
" |
|
|
|
> |
|
|
|
> |
|
|
|
@ -552,27 +554,27 @@ const projectDelete = () => { |
|
|
|
</NcMenuItem> |
|
|
|
</NcMenuItem> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<template v-if="project.bases && project.bases[0] && showBaseOption"> |
|
|
|
<template v-if="base.sources && base.sources[0] && showBaseOption"> |
|
|
|
<NcDivider /> |
|
|
|
<NcDivider /> |
|
|
|
<DashboardTreeViewBaseOptions v-model:project="project" :base="project.bases[0]" /> |
|
|
|
<DashboardTreeViewBaseOptions v-model:base="base" :source="base.sources[0]" /> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
|
|
<NcDivider v-if="['projectMiscSettings', 'projectDelete'].some((permission) => isUIAllowed(permission))" /> |
|
|
|
<NcDivider v-if="['baseMiscSettings', 'baseDelete'].some((permission) => isUIAllowed(permission))" /> |
|
|
|
|
|
|
|
|
|
|
|
<NcMenuItem |
|
|
|
<NcMenuItem |
|
|
|
v-if="isUIAllowed('projectMiscSettings')" |
|
|
|
v-if="isUIAllowed('baseMiscSettings')" |
|
|
|
key="teamAndSettings" |
|
|
|
key="teamAndSettings" |
|
|
|
v-e="['c:base:settings']" |
|
|
|
v-e="['c:base:settings']" |
|
|
|
data-testid="nc-sidebar-project-settings" |
|
|
|
data-testid="nc-sidebar-base-settings" |
|
|
|
class="nc-sidebar-project-project-settings" |
|
|
|
class="nc-sidebar-base-base-settings" |
|
|
|
@click="toggleDialog(true, 'teamAndAuth', undefined, project.id)" |
|
|
|
@click="toggleDialog(true, 'teamAndAuth', undefined, base.id)" |
|
|
|
> |
|
|
|
> |
|
|
|
<GeneralIcon icon="settings" class="group-hover:text-black" /> |
|
|
|
<GeneralIcon icon="settings" class="group-hover:text-black" /> |
|
|
|
{{ $t('activity.settings') }} |
|
|
|
{{ $t('activity.settings') }} |
|
|
|
</NcMenuItem> |
|
|
|
</NcMenuItem> |
|
|
|
<NcMenuItem |
|
|
|
<NcMenuItem |
|
|
|
v-if="isUIAllowed('projectDelete', { roles: [stringifyRolesObj(orgRoles), projectRole].join() })" |
|
|
|
v-if="isUIAllowed('baseDelete', { roles: [stringifyRolesObj(orgRoles), baseRole].join() })" |
|
|
|
data-testid="nc-sidebar-project-delete" |
|
|
|
data-testid="nc-sidebar-base-delete" |
|
|
|
class="!text-red-500 !hover:bg-red-50" |
|
|
|
class="!text-red-500 !hover:bg-red-50" |
|
|
|
@click="projectDelete" |
|
|
|
@click="projectDelete" |
|
|
|
> |
|
|
|
> |
|
|
|
@ -584,12 +586,12 @@ const projectDelete = () => { |
|
|
|
</NcDropdown> |
|
|
|
</NcDropdown> |
|
|
|
|
|
|
|
|
|
|
|
<NcButton |
|
|
|
<NcButton |
|
|
|
v-if="isUIAllowed('tableCreate', { roles: projectRole })" |
|
|
|
v-if="isUIAllowed('tableCreate', { roles: baseRole })" |
|
|
|
v-e="['c:base:create-table']" |
|
|
|
v-e="['c:base:create-table']" |
|
|
|
class="nc-sidebar-node-btn" |
|
|
|
class="nc-sidebar-node-btn" |
|
|
|
size="xxsmall" |
|
|
|
size="xxsmall" |
|
|
|
type="text" |
|
|
|
type="text" |
|
|
|
data-testid="nc-sidebar-add-project-entity" |
|
|
|
data-testid="nc-sidebar-add-base-entity" |
|
|
|
:class="{ '!text-black !visible': isAddNewProjectChildEntityLoading, '!visible': isOptionsOpen }" |
|
|
|
:class="{ '!text-black !visible': isAddNewProjectChildEntityLoading, '!visible': isOptionsOpen }" |
|
|
|
:loading="isAddNewProjectChildEntityLoading" |
|
|
|
:loading="isAddNewProjectChildEntityLoading" |
|
|
|
@click.stop="addNewProjectChildEntity" |
|
|
|
@click.stop="addNewProjectChildEntity" |
|
|
|
@ -600,28 +602,28 @@ const projectDelete = () => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div |
|
|
|
<div |
|
|
|
v-if="project.id && !project.isLoading" |
|
|
|
v-if="base.id && !base.isLoading" |
|
|
|
key="g1" |
|
|
|
key="g1" |
|
|
|
class="overflow-x-hidden transition-max-height" |
|
|
|
class="overflow-x-hidden transition-max-height" |
|
|
|
:class="{ 'max-h-0': !project.isExpanded }" |
|
|
|
:class="{ 'max-h-0': !base.isExpanded }" |
|
|
|
> |
|
|
|
> |
|
|
|
<template v-if="project && project?.bases"> |
|
|
|
<template v-if="base && base?.sources"> |
|
|
|
<div class="flex-1 overflow-y-auto overflow-x-hidden flex flex-col" :class="{ 'mb-[20px]': isSharedBase }"> |
|
|
|
<div class="flex-1 overflow-y-auto overflow-x-hidden flex flex-col" :class="{ 'mb-[20px]': isSharedBase }"> |
|
|
|
<div v-if="project?.bases?.[0]?.enabled" class="flex-1"> |
|
|
|
<div v-if="base?.sources?.[0]?.enabled" class="flex-1"> |
|
|
|
<div class="transition-height duration-200"> |
|
|
|
<div class="transition-height duration-200"> |
|
|
|
<DashboardTreeViewTableList :project="project" :base-index="0" /> |
|
|
|
<DashboardTreeViewTableList :base="base" :source-index="0" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div v-if="project?.bases?.slice(1).filter((el) => el.enabled)?.length" class="transition-height duration-200"> |
|
|
|
<div v-if="base?.sources?.slice(1).filter((el) => el.enabled)?.length" class="transition-height duration-200"> |
|
|
|
<div class="border-none sortable-list"> |
|
|
|
<div class="border-none sortable-list"> |
|
|
|
<div v-for="(base, baseIndex) of project.bases" :key="`base-${base.id}`"> |
|
|
|
<div v-for="(source, sourceIndex) of base.sources" :key="`source-${source.id}`"> |
|
|
|
<template v-if="baseIndex === 0"></template> |
|
|
|
<template v-if="sourceIndex === 0"></template> |
|
|
|
<a-collapse |
|
|
|
<a-collapse |
|
|
|
v-else-if="base && base.enabled" |
|
|
|
v-else-if="source && source.enabled" |
|
|
|
v-model:activeKey="activeKey" |
|
|
|
v-model:activeKey="activeKey" |
|
|
|
|
|
|
|
class="!mx-0 !px-0 nc-sidebar-source-node" |
|
|
|
v-e="['c:source:toggle-expand']" |
|
|
|
v-e="['c:source:toggle-expand']" |
|
|
|
class="!mx-0 !px-0 nc-sidebar-base-node" |
|
|
|
|
|
|
|
:class="[{ hidden: searchActive && !!filterQuery }]" |
|
|
|
:class="[{ hidden: searchActive && !!filterQuery }]" |
|
|
|
expand-icon-position="left" |
|
|
|
expand-icon-position="left" |
|
|
|
:bordered="false" |
|
|
|
:bordered="false" |
|
|
|
@ -633,34 +635,34 @@ const projectDelete = () => { |
|
|
|
> |
|
|
|
> |
|
|
|
<GeneralIcon |
|
|
|
<GeneralIcon |
|
|
|
icon="triangleFill" |
|
|
|
icon="triangleFill" |
|
|
|
class="nc-sidebar-base-node-btns -mt-0.75 invisible xs:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 text-gray-500 rotate-90" |
|
|
|
class="nc-sidebar-source-node-btns -mt-0.75 invisible xs:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 text-gray-500 rotate-90" |
|
|
|
:class="{ '!rotate-180': isActive }" |
|
|
|
:class="{ '!rotate-180': isActive }" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<a-collapse-panel :key="`collapse-${base.id}`"> |
|
|
|
<a-collapse-panel :key="`collapse-${source.id}`"> |
|
|
|
<template #header> |
|
|
|
<template #header> |
|
|
|
<div class="nc-sidebar-node min-w-20 w-full flex flex-row group py-0.25"> |
|
|
|
<div class="nc-sidebar-node min-w-20 w-full flex flex-row group py-0.25"> |
|
|
|
<div |
|
|
|
<div |
|
|
|
v-if="baseIndex === 0" |
|
|
|
v-if="sourceIndex === 0" |
|
|
|
class="base-context flex items-center gap-2 text-gray-800 nc-sidebar-node-title" |
|
|
|
class="source-context flex items-center gap-2 text-gray-800 nc-sidebar-node-title" |
|
|
|
@contextmenu="setMenuContext('base', base)" |
|
|
|
@contextmenu="setMenuContext('source', source)" |
|
|
|
> |
|
|
|
> |
|
|
|
<GeneralBaseLogo :base-type="base.type" class="min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" /> |
|
|
|
<GeneralBaseLogo :source-type="source.type" class="min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" /> |
|
|
|
{{ $t('general.default') }} |
|
|
|
{{ $t('general.default') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
<div |
|
|
|
v-else |
|
|
|
v-else |
|
|
|
class="base-context flex flex-grow items-center gap-1.75 text-gray-800 min-w-1/20 max-w-full" |
|
|
|
class="source-context flex flex-grow items-center gap-1.75 text-gray-800 min-w-1/20 max-w-full" |
|
|
|
@contextmenu="setMenuContext('base', base)" |
|
|
|
@contextmenu="setMenuContext('source', source)" |
|
|
|
> |
|
|
|
> |
|
|
|
<GeneralBaseLogo :base-type="base.type" class="min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" /> |
|
|
|
<GeneralBaseLogo :source-type="source.type" class="min-w-4 !xs:(min-w-4.25 w-4.25 text-sm)" /> |
|
|
|
<div |
|
|
|
<div |
|
|
|
:data-testid="`nc-sidebar-project-${base.alias}`" |
|
|
|
:data-testid="`nc-sidebar-base-${source.alias}`" |
|
|
|
class="nc-sidebar-node-title flex capitalize text-ellipsis overflow-hidden select-none" |
|
|
|
class="nc-sidebar-node-title flex capitalize text-ellipsis overflow-hidden select-none" |
|
|
|
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }" |
|
|
|
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }" |
|
|
|
> |
|
|
|
> |
|
|
|
{{ base.alias || '' }} |
|
|
|
{{ source.alias || '' }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<a-tooltip class="xs:(hidden)"> |
|
|
|
<a-tooltip class="xs:(hidden)"> |
|
|
|
<template #title>{{ $t('objects.externalDb') }}</template> |
|
|
|
<template #title>{{ $t('objects.externalDb') }}</template> |
|
|
|
@ -671,17 +673,17 @@ const projectDelete = () => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="flex flex-row items-center gap-x-0.25 w-12.25"> |
|
|
|
<div class="flex flex-row items-center gap-x-0.25 w-12.25"> |
|
|
|
<NcDropdown |
|
|
|
<NcDropdown |
|
|
|
:visible="isBasesOptionsOpen[base!.id!]" |
|
|
|
:visible="isBasesOptionsOpen[source!.id!]" |
|
|
|
:trigger="['click']" |
|
|
|
:trigger="['click']" |
|
|
|
@update:visible="isBasesOptionsOpen[base!.id!] = $event" |
|
|
|
@update:visible="isBasesOptionsOpen[source!.id!] = $event" |
|
|
|
> |
|
|
|
> |
|
|
|
<NcButton |
|
|
|
<NcButton |
|
|
|
v-e="['c:source:options']" |
|
|
|
v-e="['c:source:options']" |
|
|
|
class="nc-sidebar-node-btn" |
|
|
|
class="nc-sidebar-node-btn" |
|
|
|
:class="{ '!text-black !opacity-100': isBasesOptionsOpen[base!.id!] }" |
|
|
|
:class="{ '!text-black !opacity-100': isBasesOptionsOpen[source!.id!] }" |
|
|
|
type="text" |
|
|
|
type="text" |
|
|
|
size="xxsmall" |
|
|
|
size="xxsmall" |
|
|
|
@click.stop="isBasesOptionsOpen[base!.id!] = !isBasesOptionsOpen[base!.id!]" |
|
|
|
@click.stop="isBasesOptionsOpen[source!.id!] = !isBasesOptionsOpen[source!.id!]" |
|
|
|
> |
|
|
|
> |
|
|
|
<GeneralIcon icon="threeDotHorizontal" class="text-xl w-4.75" /> |
|
|
|
<GeneralIcon icon="threeDotHorizontal" class="text-xl w-4.75" /> |
|
|
|
</NcButton> |
|
|
|
</NcButton> |
|
|
|
@ -692,26 +694,26 @@ const projectDelete = () => { |
|
|
|
maxHeight: '70vh', |
|
|
|
maxHeight: '70vh', |
|
|
|
overflow: 'overlay', |
|
|
|
overflow: 'overlay', |
|
|
|
}" |
|
|
|
}" |
|
|
|
@click="isBasesOptionsOpen[base!.id!] = false" |
|
|
|
@click="isBasesOptionsOpen[source!.id!] = false" |
|
|
|
> |
|
|
|
> |
|
|
|
<!-- ERD View --> |
|
|
|
<!-- ERD View --> |
|
|
|
<NcMenuItem key="erd" v-e="['c:source:erd']" @click="openErdView(base)"> |
|
|
|
<NcMenuItem key="erd" v-e="['c:source:erd']" @click="openErdView(source)"> |
|
|
|
<GeneralIcon icon="erd" /> |
|
|
|
<GeneralIcon icon="erd" /> |
|
|
|
{{ $t('title.relations') }} |
|
|
|
{{ $t('title.relations') }} |
|
|
|
</NcMenuItem> |
|
|
|
</NcMenuItem> |
|
|
|
|
|
|
|
|
|
|
|
<DashboardTreeViewBaseOptions v-if="showBaseOption" v-model:project="project" :base="base" /> |
|
|
|
<DashboardTreeViewBaseOptions v-if="showBaseOption" v-model:base="base" :source="source" /> |
|
|
|
</NcMenu> |
|
|
|
</NcMenu> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</NcDropdown> |
|
|
|
</NcDropdown> |
|
|
|
|
|
|
|
|
|
|
|
<NcButton |
|
|
|
<NcButton |
|
|
|
v-if="isUIAllowed('tableCreate', { roles: projectRole })" |
|
|
|
v-if="isUIAllowed('tableCreate', { roles: baseRole })" |
|
|
|
v-e="['c:source:add-table']" |
|
|
|
v-e="['c:source:add-table']" |
|
|
|
type="text" |
|
|
|
type="text" |
|
|
|
size="xxsmall" |
|
|
|
size="xxsmall" |
|
|
|
class="nc-sidebar-node-btn" |
|
|
|
class="nc-sidebar-node-btn" |
|
|
|
@click.stop="openTableCreateDialog(baseIndex)" |
|
|
|
@click.stop="openTableCreateDialog(sourceIndex)" |
|
|
|
> |
|
|
|
> |
|
|
|
<GeneralIcon icon="plus" class="text-xl leading-5" style="-webkit-text-stroke: 0.15px" /> |
|
|
|
<GeneralIcon icon="plus" class="text-xl leading-5" style="-webkit-text-stroke: 0.15px" /> |
|
|
|
</NcButton> |
|
|
|
</NcButton> |
|
|
|
@ -720,10 +722,10 @@ const projectDelete = () => { |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<div |
|
|
|
<div |
|
|
|
ref="menuRefs" |
|
|
|
ref="menuRefs" |
|
|
|
:key="`sortable-${base.id}-${base.id && base.id in keys ? keys[base.id] : '0'}`" |
|
|
|
:key="`sortable-${source.id}-${source.id && source.id in keys ? keys[source.id] : '0'}`" |
|
|
|
:nc-base="base.id" |
|
|
|
:nc-source="source.id" |
|
|
|
> |
|
|
|
> |
|
|
|
<DashboardTreeViewTableList :project="project" :base-index="baseIndex" /> |
|
|
|
<DashboardTreeViewTableList :base="base" :source-index="sourceIndex" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-collapse-panel> |
|
|
|
</a-collapse-panel> |
|
|
|
</a-collapse> |
|
|
|
</a-collapse> |
|
|
|
@ -736,14 +738,13 @@ const projectDelete = () => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<template v-if="!isSharedBase" #overlay> |
|
|
|
<template v-if="!isSharedBase" #overlay> |
|
|
|
<NcMenu class="!py-0 rounded text-sm"> |
|
|
|
<NcMenu class="!py-0 rounded text-sm"> |
|
|
|
<template v-if="contextMenuTarget.type === 'project' && project.type === 'database'"></template> |
|
|
|
<template v-if="contextMenuTarget.type === 'base' && base.type === 'database'"></template> |
|
|
|
|
|
|
|
|
|
|
|
<template v-else-if="contextMenuTarget.type === 'base'"></template> |
|
|
|
<template v-else-if="contextMenuTarget.type === 'source'"></template> |
|
|
|
|
|
|
|
|
|
|
|
<template v-else-if="contextMenuTarget.type === 'table'"> |
|
|
|
<template v-else-if="contextMenuTarget.type === 'table'"> |
|
|
|
v-e="['c:table:rename']" |
|
|
|
<NcMenuItem v-if="isUIAllowed('tableRename')" v-e="['c:table:rename']" @click="openRenameTableDialog(contextMenuTarget.value, true)"> |
|
|
|
<NcMenuItem v-if="isUIAllowed('tableRename')" @click="openRenameTableDialog(contextMenuTarget.value, true)"> |
|
|
|
<div class="nc-base-option-item"> |
|
|
|
<div class="nc-project-option-item"> |
|
|
|
|
|
|
|
<GeneralIcon icon="edit" class="text-gray-700" /> |
|
|
|
<GeneralIcon icon="edit" class="text-gray-700" /> |
|
|
|
{{ $t('general.rename') }} |
|
|
|
{{ $t('general.rename') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -754,14 +755,14 @@ const projectDelete = () => { |
|
|
|
v-e="['c:table:duplicate']" |
|
|
|
v-e="['c:table:duplicate']" |
|
|
|
@click="duplicateTable(contextMenuTarget.value)" |
|
|
|
@click="duplicateTable(contextMenuTarget.value)" |
|
|
|
> |
|
|
|
> |
|
|
|
<div class="nc-project-option-item"> |
|
|
|
<div class="nc-base-option-item"> |
|
|
|
<GeneralIcon icon="duplicate" class="text-gray-700" /> |
|
|
|
<GeneralIcon icon="duplicate" class="text-gray-700" /> |
|
|
|
{{ $t('general.duplicate') }} |
|
|
|
{{ $t('general.duplicate') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</NcMenuItem> |
|
|
|
</NcMenuItem> |
|
|
|
<NcDivider /> |
|
|
|
<NcDivider /> |
|
|
|
<NcMenuItem v-if="isUIAllowed('table-delete')" class="!hover:bg-red-50" @click="tableDelete"> |
|
|
|
<NcMenuItem v-if="isUIAllowed('table-delete')" class="!hover:bg-red-50" @click="tableDelete"> |
|
|
|
<div class="nc-project-option-item text-red-600"> |
|
|
|
<div class="nc-base-option-item text-red-600"> |
|
|
|
<GeneralIcon icon="delete" /> |
|
|
|
<GeneralIcon icon="delete" /> |
|
|
|
{{ $t('general.delete') }} |
|
|
|
{{ $t('general.delete') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -770,7 +771,7 @@ const projectDelete = () => { |
|
|
|
|
|
|
|
|
|
|
|
<template v-else> |
|
|
|
<template v-else> |
|
|
|
<NcMenuItem @click="reloadTables"> |
|
|
|
<NcMenuItem @click="reloadTables"> |
|
|
|
<div class="nc-project-option-item"> |
|
|
|
<div class="nc-base-option-item"> |
|
|
|
{{ $t('general.reload') }} |
|
|
|
{{ $t('general.reload') }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</NcMenuItem> |
|
|
|
</NcMenuItem> |
|
|
|
@ -779,21 +780,21 @@ const projectDelete = () => { |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</NcDropdown> |
|
|
|
</NcDropdown> |
|
|
|
<DlgTableDelete |
|
|
|
<DlgTableDelete |
|
|
|
v-if="contextMenuTarget.value?.id && project?.id" |
|
|
|
v-if="contextMenuTarget.value?.id && base?.id" |
|
|
|
v-model:visible="isTableDeleteDialogVisible" |
|
|
|
v-model:visible="isTableDeleteDialogVisible" |
|
|
|
:table-id="contextMenuTarget.value?.id" |
|
|
|
:table-id="contextMenuTarget.value?.id" |
|
|
|
:project-id="project?.id" |
|
|
|
:base-id="base?.id" |
|
|
|
/> |
|
|
|
/> |
|
|
|
<DlgProjectDelete v-model:visible="isProjectDeleteDialogVisible" :project-id="project?.id" /> |
|
|
|
<DlgProjectDelete v-model:visible="isProjectDeleteDialogVisible" :base-id="base?.id" /> |
|
|
|
<DlgProjectDuplicate |
|
|
|
<DlgProjectDuplicate |
|
|
|
v-if="selectedProjectToDuplicate" |
|
|
|
v-if="selectedProjectToDuplicate" |
|
|
|
v-model="isDuplicateDlgOpen" |
|
|
|
v-model="isDuplicateDlgOpen" |
|
|
|
:project="selectedProjectToDuplicate" |
|
|
|
:base="selectedProjectToDuplicate" |
|
|
|
:on-ok="DlgProjectDuplicateOnOk" |
|
|
|
:on-ok="DlgProjectDuplicateOnOk" |
|
|
|
/> |
|
|
|
/> |
|
|
|
<GeneralModal v-model:visible="isErdModalOpen" size="large"> |
|
|
|
<GeneralModal v-model:visible="isErdModalOpen" size="large"> |
|
|
|
<div class="h-[80vh]"> |
|
|
|
<div class="h-[80vh]"> |
|
|
|
<LazyDashboardSettingsErd :base-id="activeBaseId" /> |
|
|
|
<LazyDashboardSettingsErd :source-id="activeBaseId" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</GeneralModal> |
|
|
|
</GeneralModal> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
@ -811,7 +812,7 @@ const projectDelete = () => { |
|
|
|
@apply !px-0 !pb-0 !pt-0.25; |
|
|
|
@apply !px-0 !pb-0 !pt-0.25; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
:deep(.ant-collapse-header:hover .nc-sidebar-base-node-btns) { |
|
|
|
:deep(.ant-collapse-header:hover .nc-sidebar-source-node-btns) { |
|
|
|
@apply visible; |
|
|
|
@apply visible; |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |
|
|
|
|
Pranav C
1 year ago
committed by
GitHub
