mirror of https://github.com/nocodb/nocodb
Wing-Kam Wong
1 year ago
1192 changed files with 61421 additions and 18826 deletions
@ -0,0 +1,31 @@
|
||||
.nc-dashboard-layouts-propspanel-value-input { |
||||
@apply flex-grow py-1 px-3 border-grey-light border border-solid rounded-lg text-sm w-full my-2; |
||||
} |
||||
|
||||
.nc-dashboard-layouts-propspanel-description-input { |
||||
@apply flex-grow py-1 px-3 !border-gray-200 border border-solid rounded-lg text-sm w-full my-2; |
||||
} |
||||
|
||||
.nc-dashboard-layouts-propspanel-selectable-config-section { |
||||
@apply bg-gray-100 rouwded-lg p-2; |
||||
h3 { |
||||
@apply text-black; |
||||
} |
||||
h4 { |
||||
@apply text-gray-500 |
||||
} |
||||
} |
||||
|
||||
.nc-dashboard-layouts-propspanel-collapse { |
||||
background-color: transparent; |
||||
.nc-dashboard-layouts-propspanel-collapse-panel { |
||||
@apply border-1 border-grey-light rounded-lg my-2 min-w-full; |
||||
.ant-collapse-header { |
||||
@apply font-semibold; |
||||
@apply !text-sm !2xl:text-base; |
||||
} |
||||
h3 { |
||||
@apply text-gray-500; |
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,529 @@
|
||||
.nc-docs-page { |
||||
overflow-y: overlay; |
||||
height: calc(100vh - var(--topbar-height)); |
||||
|
||||
&::-webkit-scrollbar { |
||||
width: 6px; |
||||
} |
||||
&::-webkit-scrollbar-track { |
||||
background: #f6f6f600 !important; |
||||
} |
||||
&::-webkit-scrollbar-thumb { |
||||
background: #f6f6f600; |
||||
} |
||||
&::-webkit-scrollbar-thumb:hover { |
||||
background: #f6f6f600; |
||||
} |
||||
} |
||||
.nc-docs-page:hover { |
||||
&::-webkit-scrollbar { |
||||
width: 6px; |
||||
} |
||||
&::-webkit-scrollbar-track { |
||||
background: #f6f6f600 !important; |
||||
} |
||||
&::-webkit-scrollbar-thumb { |
||||
background: rgb(215, 215, 215); |
||||
} |
||||
&::-webkit-scrollbar-thumb:hover { |
||||
background: rgb(203, 203, 203); |
||||
} |
||||
} |
||||
|
||||
.nc-docs-page-title { |
||||
font-weight: 600; |
||||
font-size: 3rem; |
||||
line-height: 1.25; |
||||
word-break: break-all; |
||||
outline: none; |
||||
padding: 0; |
||||
color: black; |
||||
} |
||||
|
||||
.nc-docs-page-content { |
||||
@apply min-h-full; |
||||
.ProseMirror { |
||||
@apply min-h-full; |
||||
} |
||||
.ProseMirror-focused { |
||||
// remove all border |
||||
outline: none; |
||||
} |
||||
|
||||
[data-diff-node='ins'] { |
||||
@apply !bg-green-200 rounded-sm p-0.5 m-0.5; |
||||
} |
||||
|
||||
[data-diff-node='del'] { |
||||
@apply !bg-red-200 rounded-sm p-0.5 m-0.5; |
||||
} |
||||
|
||||
del { |
||||
@apply !bg-red-200 rounded-sm my-0.5; |
||||
text-decoration: none; |
||||
} |
||||
ins { |
||||
@apply !bg-green-200 rounded-sm my-0.5 mx-0.5; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
ins[isempty='true'] { |
||||
display: block; |
||||
color: transparent; |
||||
user-select: none; |
||||
@apply !w-full; |
||||
} |
||||
del[isempty='true'] { |
||||
display: block; |
||||
color: transparent; |
||||
user-select: none; |
||||
@apply !w-full; |
||||
} |
||||
|
||||
td { |
||||
ins { |
||||
@apply !p-0 !m-0; |
||||
} |
||||
} |
||||
|
||||
.draggable-block-wrapper{ |
||||
overflow: visible; |
||||
} |
||||
.draggable-block-wrapper.focused { |
||||
.attachment-wrapper .attachment { |
||||
@apply !bg-primary-selected; |
||||
} |
||||
} |
||||
|
||||
.draggable-block-wrapper.selected { |
||||
table { |
||||
@apply !bg-primary-selected; |
||||
tr:first-child td { |
||||
@apply !bg-primary-selected; |
||||
} |
||||
} |
||||
.attachment-wrapper .attachment { |
||||
@apply !bg-primary-selected; |
||||
} |
||||
p, |
||||
h1, |
||||
h2, |
||||
h3, |
||||
h4, |
||||
h5, |
||||
h6, |
||||
li, |
||||
blockquote, |
||||
pre, |
||||
code, |
||||
img, |
||||
.link-to-page-wrapper { |
||||
@apply !bg-primary-selected; |
||||
} |
||||
|
||||
.node-view-drag-content > ul { |
||||
@apply !bg-primary-selected; |
||||
} |
||||
} |
||||
|
||||
div[contenteditable='false'].ProseMirror { |
||||
user-select: text !important; |
||||
} |
||||
|
||||
p.is-empty::after, |
||||
h1.is-empty::after, |
||||
h2.is-empty::after, |
||||
h3.is-empty::after { |
||||
content: attr(data-placeholder); |
||||
float: left; |
||||
color: #afafaf; |
||||
pointer-events: none; |
||||
margin-top: -1.55rem; |
||||
margin-left: 0.01rem; |
||||
} |
||||
|
||||
[data-one-content='true'] [data-type='collapsable_content'] { |
||||
p.is-empty::after { |
||||
content: 'Empty collapsable. Press / to open the command menu or start writing'; |
||||
} |
||||
} |
||||
|
||||
p.is-empty::after { |
||||
margin-top: -1.55rem; |
||||
} |
||||
h1.is-empty::after { |
||||
margin-top: -2.85rem; |
||||
} |
||||
h2.is-empty::after { |
||||
margin-top: -2.25rem; |
||||
} |
||||
h3.is-empty::after { |
||||
margin-top: -1.8rem; |
||||
} |
||||
.collapsable-wrapper { |
||||
h1, |
||||
h2, |
||||
h3 { |
||||
margin-top: 0; |
||||
margin-bottom: 0; |
||||
} |
||||
} |
||||
|
||||
.editable { |
||||
.focused { |
||||
div[data-is-empty='true'] { |
||||
p::after { |
||||
content: 'Press / to open the command menu or start writing' !important; |
||||
float: left; |
||||
color: #afafaf; |
||||
pointer-events: none; |
||||
margin-top: -1.55rem; |
||||
margin-left: 0.01rem; |
||||
} |
||||
} |
||||
} |
||||
div.is-empty.focused { |
||||
p::after { |
||||
content: 'Press / to open the command menu or start writing' !important; |
||||
float: left; |
||||
color: #afafaf; |
||||
pointer-events: none; |
||||
margin-top: -1.55rem; |
||||
margin-left: 0.01rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
h1.is-empty::before, |
||||
h2.is-empty::before, |
||||
h3.is-empty::before { |
||||
color: #d6d6d6; |
||||
} |
||||
|
||||
.nc-docs-list-item > p { |
||||
margin-top: 0.25rem !important; |
||||
margin-bottom: 0.25rem !important; |
||||
} |
||||
|
||||
p { |
||||
font-weight: 400; |
||||
color: #000000; |
||||
font-size: 1rem; |
||||
margin-top: 0.25rem; |
||||
margin-bottom: 0.25rem; |
||||
} |
||||
|
||||
h1 { |
||||
font-weight: 600; |
||||
font-size: 1.85rem; |
||||
margin-bottom: 0.6em; |
||||
} |
||||
|
||||
h2 { |
||||
font-weight: 600; |
||||
font-size: 1.45rem; |
||||
margin-bottom: 0.5em; |
||||
} |
||||
|
||||
h3 { |
||||
font-weight: 600; |
||||
font-size: 1.15rem; |
||||
margin-bottom: 0.3em; |
||||
} |
||||
|
||||
h4 { |
||||
font-size: 1.2rem; |
||||
} |
||||
|
||||
h5 { |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
h6 { |
||||
font-size: 1rem; |
||||
} |
||||
|
||||
// Pre tag is the parent wrapper for Code block |
||||
pre { |
||||
background: #f2f4f7; |
||||
border-color: #d0d5dd; |
||||
border: 1px; |
||||
color: black; |
||||
font-family: 'JetBrainsMono', monospace; |
||||
padding: 1rem; |
||||
border-radius: 0.5rem; |
||||
@apply overflow-auto mt-3; |
||||
|
||||
code { |
||||
@apply !px-0; |
||||
} |
||||
} |
||||
|
||||
code { |
||||
background: #f2f4f7; |
||||
@apply rounded-md px-2 py-1; |
||||
color: inherit; |
||||
font-size: 0.8rem; |
||||
} |
||||
|
||||
|
||||
[data-group-type='list-item'] { |
||||
@apply flex items-start; |
||||
.tiptap-list-item-start { |
||||
@apply flex mt-1.125 pr-2 !select-none; |
||||
|
||||
input { |
||||
@apply mt-0.75 flex rounded-sm; |
||||
} |
||||
// Unchecked |
||||
input:not(:checked) { |
||||
// Add border to checkbox |
||||
border-width: 1.5px; |
||||
@apply border-gray-700; |
||||
} |
||||
} |
||||
|
||||
} |
||||
table { |
||||
[data-group-type='list-item'] { |
||||
.tiptap-list-item-start { |
||||
@apply mt-0.125; |
||||
} |
||||
} |
||||
} |
||||
|
||||
[data-type='ordered'] { |
||||
@apply flex flex-row items-start gap-x-1; |
||||
.tiptap-list-item-start > span::before { |
||||
margin-top: 6px; |
||||
content: attr(data-number) '. '; |
||||
display: inline-block; |
||||
white-space: nowrap; |
||||
} |
||||
.tiptap-list-item-content { |
||||
@apply flex flex-grow; |
||||
} |
||||
} |
||||
|
||||
[data-type='image'] { |
||||
@apply mb-3 |
||||
} |
||||
|
||||
hr { |
||||
border: 0; |
||||
border-top: 1px solid #ccc; |
||||
margin: 1.5em 0; |
||||
} |
||||
|
||||
hr.ProseMirror-selectednode { |
||||
// outline with rounded corners |
||||
outline: 4px solid #e8eafd; |
||||
border-radius: 4px; |
||||
} |
||||
.focused { |
||||
hr { |
||||
// outline with rounded corners |
||||
outline: 4px solid #e8eafd; |
||||
border-radius: 4px; |
||||
} |
||||
} |
||||
.selected { |
||||
hr { |
||||
// outline with rounded corners |
||||
outline: 4px solid #e8eafd; |
||||
border-radius: 4px; |
||||
} |
||||
} |
||||
|
||||
.selected { |
||||
.external-content-wrapper { |
||||
// outline with rounded corners |
||||
outline: 2px solid #e8eafd; |
||||
border-radius: 1px; |
||||
} |
||||
} |
||||
|
||||
.external-content-wrapper.ProseMirror-selectednode { |
||||
// outline with rounded corners |
||||
outline: 2px solid #e8eafd; |
||||
border-radius: 1px; |
||||
} |
||||
|
||||
blockquote { |
||||
border-left: 3px solid #d0d5dd; |
||||
padding: 0 1em; |
||||
color: #666; |
||||
margin: 1em 0; |
||||
font-style: italic; |
||||
} |
||||
|
||||
.column-resize-handle { |
||||
background-color: #e3e5ff !important; |
||||
width: 6px; |
||||
cursor: col-resize; |
||||
z-index: 1; |
||||
} |
||||
|
||||
.resize-cursor { |
||||
cursor: ew-resize; |
||||
cursor: col-resize; |
||||
} |
||||
|
||||
.external-content-wrapper { |
||||
@apply bg-gray-100 my-2; |
||||
} |
||||
|
||||
div[data-type='column'] { |
||||
@apply flex flex-row gap-x-12 justify-between; |
||||
} |
||||
|
||||
|
||||
/** |
||||
* Table styles |
||||
*/ |
||||
|
||||
.tiptap-table-wrapper { |
||||
@apply !pb-4 !pt-4; |
||||
} |
||||
|
||||
table { |
||||
border-collapse: collapse; |
||||
table-layout: fixed; |
||||
width: 100%; |
||||
padding-top: 2rem; |
||||
padding-bottom: 2rem; |
||||
overflow: visible; |
||||
tbody { |
||||
overflow: visible; |
||||
} |
||||
td { |
||||
.tiptap-list-item-start { |
||||
@apply -mt-1; |
||||
} |
||||
position: relative; |
||||
min-width: 1em; |
||||
border: 1px solid #e5e5e5; |
||||
overflow: visible !important; |
||||
height: 20px; |
||||
border-top: 0; |
||||
padding-left: 1rem; |
||||
padding-right: 1rem; |
||||
padding-top: 0.5rem; |
||||
padding-bottom: 0.5rem; |
||||
} |
||||
|
||||
// First row's td |
||||
tr:first-child { |
||||
td { |
||||
border-top: 1px solid #e5e5e5 !important; |
||||
background-color: #fafbfb; |
||||
p { |
||||
font-weight: 500; |
||||
} |
||||
} |
||||
} |
||||
|
||||
th { |
||||
@apply font-semibold; |
||||
background-color: #fafbfb; |
||||
} |
||||
|
||||
.column-resize-handle { |
||||
position: absolute; |
||||
right: -2px; |
||||
top: 0; |
||||
bottom: 0px; |
||||
margin-top: 1px; |
||||
margin-bottom: 1px; |
||||
width: 8px; |
||||
outline: 1px solid #e3e5ff; |
||||
} |
||||
|
||||
p { |
||||
margin: 0; |
||||
} |
||||
|
||||
.column-resize-handle { |
||||
background-color: #e3e5ff !important; |
||||
width: 3px; |
||||
cursor: col-resize; |
||||
z-index: 1; |
||||
} |
||||
} |
||||
|
||||
// First cell |
||||
tr:hover > td:first-child .row-drag-handle { |
||||
display: block; |
||||
} |
||||
|
||||
tr:first-child > td:hover .tiptap-column-options { |
||||
display: flex; |
||||
} |
||||
|
||||
tr:first-child > td:only-child:hover .tiptap-column-options { |
||||
display: none; |
||||
} |
||||
|
||||
|
||||
.selectedCell { |
||||
@apply !bg-primary-selected; |
||||
|
||||
// transition for white to blue background with delay as row/column creation causes cell selection for a moment which causes flicker |
||||
transition: background-color 1ms ease-out 1ms; |
||||
|
||||
.tiptap-column-options { |
||||
display: none !important; |
||||
} |
||||
.row-drag-handle { |
||||
display: none !important; |
||||
} |
||||
} |
||||
|
||||
.tiptap-table-cell { |
||||
@apply w-full; |
||||
} |
||||
|
||||
.selected { |
||||
.callout { |
||||
@apply bg-primary-selected; |
||||
} |
||||
} |
||||
.callout { |
||||
@apply my-2.5 px-2 py-2 rounded-md; |
||||
[data-type='bullet'] { |
||||
margin-left: 0.7rem; |
||||
} |
||||
.nc-callout-emoji { |
||||
@apply text-base; |
||||
} |
||||
} |
||||
|
||||
|
||||
[data-bg-color='gray'] { |
||||
@apply bg-gray-100 bg-opacity-30; |
||||
} |
||||
[data-bg-color='brown'] { |
||||
@apply bg-amber-600 bg-opacity-20; |
||||
} |
||||
[data-bg-color='orange'] { |
||||
@apply bg-orange-100 bg-opacity-50; |
||||
} |
||||
[data-bg-color='yellow'] { |
||||
@apply bg-yellow-100 bg-opacity-50; |
||||
} |
||||
[data-bg-color='green'] { |
||||
@apply bg-green-100 bg-opacity-50; |
||||
} |
||||
[data-bg-color='blue'] { |
||||
@apply bg-blue-100 bg-opacity-50; |
||||
} |
||||
[data-bg-color='purple'] { |
||||
@apply bg-purple-100 bg-opacity-50; |
||||
} |
||||
[data-bg-color='pink'] { |
||||
@apply bg-pink-100 bg-opacity-50; |
||||
} |
||||
[data-bg-color='red'] { |
||||
@apply bg-red-100 bg-opacity-50; |
||||
} |
||||
} |
||||
|
After Width: | Height: | Size: 462 B |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 5.5 KiB |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 6.0 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 647 B |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 9.5 KiB |
|
After Width: | Height: | Size: 7.4 KiB |
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 7.1 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 722 B |
|
After Width: | Height: | Size: 557 B |
|
After Width: | Height: | Size: 845 B |
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 300 B |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 712 B |
|
After Width: | Height: | Size: 602 B |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 518 B |
|
After Width: | Height: | Size: 486 B |
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
@ -0,0 +1,3 @@
|
||||
<template> |
||||
<div /> |
||||
</template> |
||||
@ -0,0 +1,153 @@
|
||||
<script lang="ts" setup> |
||||
import { storeToRefs } from 'pinia' |
||||
import { useGlobal } from '#imports' |
||||
|
||||
const router = useRouter() |
||||
|
||||
const route = router.currentRoute |
||||
|
||||
const workspaceStore = useWorkspace() |
||||
|
||||
const { activeWorkspace, isWorkspaceOwnerOrCreator } = storeToRefs(workspaceStore) |
||||
|
||||
const projectStore = useProject() |
||||
|
||||
const { isSharedBase } = storeToRefs(projectStore) |
||||
|
||||
const { navigateToWorkspaceSettings } = useWorkspace() |
||||
|
||||
const { isUIAllowed } = useUIPermission() |
||||
|
||||
const dialogOpen = ref(false) |
||||
|
||||
const openDialogKey = ref<string>('') |
||||
|
||||
const dataSourcesState = ref<string>('') |
||||
|
||||
const projectId = ref<string>() |
||||
|
||||
const isCreateProjectOpen = ref(false) |
||||
|
||||
function toggleDialog(value?: boolean, key?: string, dsState?: string, pId?: string) { |
||||
dialogOpen.value = value ?? !dialogOpen.value |
||||
openDialogKey.value = key || '' |
||||
dataSourcesState.value = dsState || '' |
||||
projectId.value = pId || '' |
||||
} |
||||
|
||||
// todo: |
||||
const currentVersion = ref('') |
||||
|
||||
const isTreeViewOnScrollTop = ref(true) |
||||
const onTreeViewScrollTop = (onScrollTop: boolean) => { |
||||
isTreeViewOnScrollTop.value = !onScrollTop |
||||
} |
||||
|
||||
const { appInfo } = useGlobal() |
||||
|
||||
const navigateToSettings = () => { |
||||
navigateToWorkspaceSettings() |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div |
||||
class="nc-sidebar flex flex-col bg-gray-50 outline-r-1 outline-gray-100 select-none" |
||||
:style="{ |
||||
outlineWidth: '1px', |
||||
height: isSharedBase ? '100%' : null, |
||||
}" |
||||
> |
||||
<div class="flex flex-col"> |
||||
<div style="border-bottom-width: 1px" class="flex items-center px-1 nc-sidebar-header !border-0 py-1.25 pl-2"> |
||||
<div class="flex flex-row flex-grow hover:bg-gray-100 pl-2 pr-1 py-0.5 rounded-md max-w-full"> |
||||
<a |
||||
v-if="isSharedBase" |
||||
class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105" |
||||
href="https://github.com/nocodb/nocodb" |
||||
target="_blank" |
||||
> |
||||
<img width="25" alt="NocoDB" src="~/assets/img/icons/512x512.png" /> |
||||
</a> |
||||
|
||||
<WorkspaceMenu :workspace="activeWorkspace" :is-open="true"> |
||||
<template #brandIcon> |
||||
<div |
||||
v-if="!isSharedBase" |
||||
v-e="['c:navbar:home']" |
||||
data-testid="nc-noco-brand-icon" |
||||
class="w-[29px] min-w-[29px] nc-noco-brand-icon" |
||||
> |
||||
<img width="25" class="mr-0" alt="NocoDB" src="~/assets/img/icons/512x512.png" /> |
||||
</div> |
||||
</template> |
||||
</WorkspaceMenu> |
||||
</div> |
||||
</div> |
||||
|
||||
<template v-if="!isSharedBase"> |
||||
<div class="h-auto"> |
||||
<div |
||||
v-if="isWorkspaceOwnerOrCreator" |
||||
role="button" |
||||
class="nc-sidebar-top-button" |
||||
data-testid="nc-sidebar-team-settings-btn" |
||||
@click="navigateToSettings" |
||||
> |
||||
<GeneralIcon icon="settings" class="!h-3.9" /> |
||||
<div>Team & Settings</div> |
||||
</div> |
||||
<WorkspaceCreateProjectBtn |
||||
v-if="isUIAllowed('projectCreate', false)" |
||||
v-model:is-open="isCreateProjectOpen" |
||||
modal |
||||
type="text" |
||||
class="!p-0 mx-1" |
||||
data-testid="nc-sidebar-create-project-btn" |
||||
:active-workspace-id="route.params.typeOrId" |
||||
> |
||||
<div |
||||
class="gap-x-2 flex flex-row w-full items-center nc-sidebar-top-button !my-0 !mx-0" |
||||
:class="{ |
||||
'bg-gray-100': isCreateProjectOpen, |
||||
}" |
||||
> |
||||
<MdiPlus class="!h-4" /> |
||||
|
||||
<div class="flex">{{ $t('title.newProj') }}</div> |
||||
</div> |
||||
</WorkspaceCreateProjectBtn> |
||||
</div> |
||||
|
||||
<div class="w-full mt-2"></div> |
||||
|
||||
<div class="text-gray-500 mx-5 font-medium mb-1.5">{{ $t('objects.projects') }}</div> |
||||
<div |
||||
class="w-full border-b-1" |
||||
:class="{ |
||||
'border-gray-200': !isTreeViewOnScrollTop, |
||||
'border-transparent': isTreeViewOnScrollTop, |
||||
}" |
||||
></div> |
||||
</template> |
||||
</div> |
||||
<LazyDashboardTreeViewNew |
||||
class="flex-1" |
||||
:class="{ |
||||
'nc-shared-base': isSharedBase, |
||||
}" |
||||
@create-base-dlg="toggleDialog(true, 'dataSources', undefined, projectId)" |
||||
@on-scroll-top="onTreeViewScrollTop" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.nc-sidebar-top-button { |
||||
@apply flex flex-row mx-1 px-3.5 rounded-md items-center py-0.75 my-0.5 gap-x-2 hover:bg-gray-200 cursor-pointer; |
||||
} |
||||
|
||||
:deep(.nc-shared-base.nc-treeview-container) { |
||||
@apply !h-full; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,262 @@
|
||||
<script lang="ts" setup> |
||||
import type { ProjectType } from 'nocodb-sdk' |
||||
import { storeToRefs } from 'pinia' |
||||
import { toRef } from '@vue/reactivity' |
||||
import { resolveComponent } from '@vue/runtime-core' |
||||
import { ref } from 'vue' |
||||
import { ProjectRoleInj, useDialog, useUIPermission } from '#imports' |
||||
|
||||
const props = withDefaults( |
||||
defineProps<{ |
||||
project: ProjectType |
||||
baseIndex?: number |
||||
}>(), |
||||
{ |
||||
baseIndex: 0, |
||||
}, |
||||
) |
||||
|
||||
const emit = defineEmits<{ |
||||
openTableCreateDialog: () => void |
||||
}>() |
||||
|
||||
const { isUIAllowed } = useUIPermission() |
||||
|
||||
const project = toRef(props, 'project') |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const projectStore = useProject() |
||||
|
||||
const { isSharedBase } = storeToRefs(projectStore) |
||||
|
||||
const projectRole = inject(ProjectRoleInj) |
||||
|
||||
function openSchemaMagicDialog(baseId?: string) { |
||||
if (!baseId) return |
||||
|
||||
$e('c:table:create:navdraw') |
||||
|
||||
const isOpen = ref(true) |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgSchemaMagic'), { |
||||
'modelValue': isOpen, |
||||
'baseId': baseId, |
||||
'onUpdate:modelValue': closeDialog, |
||||
}) |
||||
|
||||
function closeDialog() { |
||||
isOpen.value = false |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
|
||||
function openQuickImportDialog(type: string, baseId?: string) { |
||||
if (!baseId) return |
||||
|
||||
$e(`a:actions:import-${type}`) |
||||
|
||||
const isOpen = ref(true) |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgQuickImport'), { |
||||
'modelValue': isOpen, |
||||
'importType': type, |
||||
'baseId': baseId, |
||||
'onUpdate:modelValue': closeDialog, |
||||
}) |
||||
|
||||
function closeDialog() { |
||||
isOpen.value = false |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
|
||||
function openAirtableImportDialog(baseId?: string) { |
||||
if (!baseId) return |
||||
|
||||
$e('a:actions:import-airtable') |
||||
|
||||
const isOpen = ref(true) |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgAirtableImport'), { |
||||
'modelValue': isOpen, |
||||
'baseId': baseId, |
||||
'onUpdate:modelValue': closeDialog, |
||||
}) |
||||
|
||||
function closeDialog() { |
||||
isOpen.value = false |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
|
||||
function openTableCreateMagicDialog(baseId?: string) { |
||||
if (!baseId) return |
||||
|
||||
$e('c:table:create:navdraw') |
||||
|
||||
const isOpen = ref(true) |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgTableMagic'), { |
||||
'modelValue': isOpen, |
||||
'baseId': baseId, |
||||
'onUpdate:modelValue': closeDialog, |
||||
}) |
||||
|
||||
function closeDialog() { |
||||
isOpen.value = false |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<div |
||||
v-if="isUIAllowed('table-create', false, projectRole)" |
||||
class="group flex items-center gap-2 pl-2 pr-4.75 py-1 text-primary/70 hover:(text-primary/100) cursor-pointer select-none" |
||||
@click="emit('openTableCreateDialog')" |
||||
> |
||||
<PhPlusThin class="w-5 ml-2" /> |
||||
|
||||
<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> |
||||
<GeneralIcon |
||||
icon="threeDotVertical" |
||||
class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0" |
||||
/> |
||||
|
||||
<template #overlay> |
||||
<a-menu class="!py-0 rounded text-sm"> |
||||
<a-menu-item-group class="!px-0 !mx-0"> |
||||
<template #title> |
||||
<div class="flex items-center"> |
||||
Noco |
||||
<GeneralIcon icon="magic" class="ml-1 text-orange-400" /> |
||||
</div> |
||||
</template> |
||||
<a-menu-item key="table-magic" @click="openTableCreateMagicDialog(project.bases[baseIndex].id)"> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<GeneralIcon icon="magic1" class="group-hover:text-accent" /> |
||||
Create table |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item key="schema-magic" @click="openSchemaMagicDialog(project.bases[baseIndex].id)"> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<GeneralIcon icon="magic1" class="group-hover:text-accent" /> |
||||
Create schema |
||||
</div> |
||||
</a-menu-item> |
||||
</a-menu-item-group> |
||||
|
||||
<a-menu-divider class="my-0" /> |
||||
|
||||
<!-- Quick Import From --> |
||||
<a-menu-item-group :title="$t('title.quickImportFrom')" class="!px-0 !mx-0"> |
||||
<a-menu-item |
||||
v-if="isUIAllowed('airtableImport', false, projectRole)" |
||||
key="quick-import-airtable" |
||||
@click="openAirtableImportDialog(project.bases[baseIndex].id)" |
||||
> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<GeneralIcon icon="airtable" class="group-hover:text-accent" /> |
||||
Airtable |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item |
||||
v-if="isUIAllowed('csvImport', false, projectRole)" |
||||
key="quick-import-csv" |
||||
@click="openQuickImportDialog('csv', project.bases[baseIndex].id)" |
||||
> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<GeneralIcon icon="csv" class="group-hover:text-accent" /> |
||||
CSV file |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item |
||||
v-if="isUIAllowed('jsonImport', false, projectRole)" |
||||
key="quick-import-json" |
||||
@click="openQuickImportDialog('json', project.bases[baseIndex].id)" |
||||
> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<GeneralIcon icon="json" class="group-hover:text-accent" /> |
||||
JSON file |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item |
||||
v-if="isUIAllowed('excelImport', false, projectRole)" |
||||
key="quick-import-excel" |
||||
@click="openQuickImportDialog('excel', project.bases[baseIndex].id)" |
||||
> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<GeneralIcon icon="excel" 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, project.id)"> |
||||
<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, project.id)"> |
||||
<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, project.id)"> |
||||
<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, project.id)"> |
||||
<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, project.id)" |
||||
> |
||||
<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', false, projectRole)" 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)" |
||||
> |
||||
<GeneralIcon icon="openInNew" class="group-hover:text-accent" /> |
||||
<!-- Request a data source you need? --> |
||||
{{ $t('labels.requestDataSource') }} |
||||
</a> |
||||
</a-menu-item> |
||||
</a-menu> |
||||
</template> |
||||
</a-dropdown> |
||||
</div> |
||||
</template> |
||||
@ -0,0 +1,179 @@
|
||||
<script lang="ts" setup> |
||||
import type { BaseType, ProjectType } from 'nocodb-sdk' |
||||
|
||||
const props = defineProps<{ |
||||
base: BaseType |
||||
project: ProjectType |
||||
}>() |
||||
|
||||
const base = toRef(props, 'base') |
||||
|
||||
const { isUIAllowed } = useUIPermission() |
||||
|
||||
const projectRole = inject(ProjectRoleInj) |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
function openAirtableImportDialog(baseId?: string) { |
||||
if (!baseId) return |
||||
|
||||
$e('a:actions:import-airtable') |
||||
|
||||
const isOpen = ref(true) |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgAirtableImport'), { |
||||
'modelValue': isOpen, |
||||
'baseId': baseId, |
||||
'onUpdate:modelValue': closeDialog, |
||||
}) |
||||
|
||||
function closeDialog() { |
||||
isOpen.value = false |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
|
||||
function openQuickImportDialog(type: string) { |
||||
if (!base.value?.id) return |
||||
|
||||
$e(`a:actions:import-${type}`) |
||||
|
||||
const isOpen = ref(true) |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgQuickImport'), { |
||||
'modelValue': isOpen, |
||||
'importType': type, |
||||
'baseId': base.value.id, |
||||
'onUpdate:modelValue': closeDialog, |
||||
}) |
||||
|
||||
function closeDialog() { |
||||
isOpen.value = false |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-menu-divider class="my-0" /> |
||||
|
||||
<!-- Quick Import From --> |
||||
<a-sub-menu class="py-0"> |
||||
<template #title> |
||||
<div class="nc-project-menu-item group"> |
||||
<GeneralIcon icon="download" class="-ml-0.25" /> |
||||
<div class="-ml-0.5"> |
||||
{{ $t('title.quickImportFrom') }} |
||||
</div> |
||||
|
||||
<MaterialSymbolsChevronRightRounded class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<template #expandIcon></template> |
||||
|
||||
<a-menu-item |
||||
v-if="isUIAllowed('airtableImport', false, projectRole)" |
||||
key="quick-import-airtable" |
||||
@click="openAirtableImportDialog(base.id)" |
||||
> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<GeneralIcon icon="airtable" class="group-hover:text-black" /> |
||||
Airtable |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item v-if="isUIAllowed('csvImport', false, projectRole)" key="quick-import-csv" @click="openQuickImportDialog('csv')"> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<GeneralIcon icon="csv" class="group-hover:text-black" /> |
||||
CSV file |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item |
||||
v-if="isUIAllowed('jsonImport', false, projectRole)" |
||||
key="quick-import-json" |
||||
@click="openQuickImportDialog('json')" |
||||
> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<GeneralIcon icon="code" class="group-hover:text-black" /> |
||||
JSON file |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item |
||||
v-if="isUIAllowed('excelImport', false, projectRole)" |
||||
key="quick-import-excel" |
||||
@click="openQuickImportDialog('excel')" |
||||
> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<GeneralIcon icon="excel" class="group-hover:text-black" /> |
||||
Microsoft Excel |
||||
</div> |
||||
</a-menu-item> |
||||
</a-sub-menu> |
||||
|
||||
<a-menu-divider v-if="false" class="my-0" /> |
||||
|
||||
<!-- Connect to new datasource --> |
||||
<!-- <a-sub-menu> |
||||
<template #title> |
||||
<div class="nc-project-menu-item group"> |
||||
<GeneralIcon icon="datasource" class="group-hover:text-black" /> |
||||
Connect to new datasource |
||||
<div class="flex-1" /> |
||||
|
||||
<MaterialSymbolsChevronRightRounded class="transform group-hover:(scale-115 text-accent) text-xl text-gray-400" /> |
||||
</div> |
||||
</template> |
||||
|
||||
<template #expandIcon></template> |
||||
<a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL, project.id)"> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<LogosMysqlIcon class="group-hover:text-black" /> |
||||
MySQL |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.PG, project.id)"> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<LogosPostgresql class="group-hover:text-black" /> |
||||
Postgres |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.SQLITE, project.id)"> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<VscodeIconsFileTypeSqlite class="group-hover:text-black" /> |
||||
SQLite |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MSSQL, project.id)"> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<SimpleIconsMicrosoftsqlserver class="group-hover:text-black" /> |
||||
MSSQL |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item |
||||
v-if="appInfo.ee" |
||||
key="connect-new-source" |
||||
@click="toggleDialog(true, 'dataSources', ClientType.SNOWFLAKE, project.id)" |
||||
> |
||||
<div class="color-transition nc-project-menu-item group"> |
||||
<LogosSnowflakeIcon class="group-hover:text-black" /> |
||||
Snowflake |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item v-if="isUIAllowed('importRequest', false, projectRole)" 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)" |
||||
> |
||||
<GeneralIcon icon="openInNew" class="group-hover:text-black" /> |
||||
{{ $t('labels.requestDataSource') }} |
||||
</a> |
||||
</a-menu-item> |
||||
</a-sub-menu> --> |
||||
</template> |
||||
@ -0,0 +1,742 @@
|
||||
<script lang="ts" setup> |
||||
import { nextTick } from '@vue/runtime-core' |
||||
import { message } from 'ant-design-vue' |
||||
import type { BaseType, ProjectType, TableType } from 'nocodb-sdk' |
||||
import { LoadingOutlined } from '@ant-design/icons-vue' |
||||
import { useTitle } from '@vueuse/core' |
||||
import { |
||||
NcProjectType, |
||||
ProjectInj, |
||||
ProjectRoleInj, |
||||
ToggleDialogInj, |
||||
extractSdkResponseErrorMsg, |
||||
isElementInvisible, |
||||
openLink, |
||||
storeToRefs, |
||||
useProjects, |
||||
} from '#imports' |
||||
import type { NcProject } from '#imports' |
||||
import { useNuxtApp } from '#app' |
||||
|
||||
const indicator = h(LoadingOutlined, { |
||||
class: '!text-gray-400', |
||||
style: { |
||||
fontSize: '0.85rem', |
||||
}, |
||||
spin: true, |
||||
}) |
||||
|
||||
const router = useRouter() |
||||
const route = router.currentRoute |
||||
|
||||
const { setMenuContext, openRenameTableDialog, duplicateTable, contextMenuTarget } = inject(TreeViewInj)! |
||||
|
||||
const project = inject(ProjectInj)! |
||||
|
||||
const projectsStore = useProjects() |
||||
|
||||
const { loadProject, loadProjects, createProject: _createProject, updateProject, getProjectMetaInfo } = projectsStore |
||||
const { projects } = storeToRefs(projectsStore) |
||||
|
||||
const { loadProjectTables } = useTablesStore() |
||||
const { activeTable } = storeToRefs(useTablesStore()) |
||||
|
||||
const { appInfo, navigateToProject } = useGlobal() |
||||
|
||||
useTabs() |
||||
|
||||
const editMode = ref(false) |
||||
|
||||
const tempTitle = ref('') |
||||
|
||||
const { t } = useI18n() |
||||
|
||||
const input = ref<HTMLInputElement>() |
||||
|
||||
const { isUIAllowed } = useUIPermission() |
||||
|
||||
const projectRole = inject(ProjectRoleInj) |
||||
|
||||
const { activeProjectId } = storeToRefs(useProjects()) |
||||
|
||||
const { projectUrl } = useProject() |
||||
|
||||
const toggleDialog = inject(ToggleDialogInj, () => {}) |
||||
|
||||
const { $e } = useNuxtApp() |
||||
|
||||
const isOptionsOpen = ref(false) |
||||
const isBasesOptionsOpen = ref<Record<string, boolean>>({}) |
||||
|
||||
const activeKey = ref<string[]>([]) |
||||
const [searchActive] = useToggle() |
||||
const filterQuery = ref('') |
||||
const keys = ref<Record<string, number>>({}) |
||||
const isTableDeleteDialogVisible = 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 |
||||
const projectViewOpen = computed(() => { |
||||
const routeNameSplit = String(route.value?.name).split('projectId-index-index') |
||||
if (routeNameSplit.length <= 1) return false |
||||
|
||||
const routeNameAfterProjectView = routeNameSplit[routeNameSplit.length - 1] |
||||
return routeNameAfterProjectView.split('-').length === 2 || routeNameAfterProjectView.split('-').length === 1 |
||||
}) |
||||
|
||||
const enableEditMode = () => { |
||||
editMode.value = true |
||||
tempTitle.value = project.value.title! |
||||
nextTick(() => { |
||||
input.value?.focus() |
||||
input.value?.select() |
||||
input.value?.scrollIntoView() |
||||
}) |
||||
} |
||||
|
||||
const updateProjectTitle = async () => { |
||||
if (!tempTitle.value) return |
||||
|
||||
try { |
||||
await updateProject(project.value.id!, { |
||||
title: tempTitle.value, |
||||
}) |
||||
editMode.value = false |
||||
tempTitle.value = '' |
||||
|
||||
$e('a:project:rename') |
||||
|
||||
useTitle(`${project.value?.title}`) |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
|
||||
const { copy } = useCopy(true) |
||||
|
||||
const copyProjectInfo = async () => { |
||||
try { |
||||
if ( |
||||
await copy( |
||||
Object.entries(await getProjectMetaInfo(project.value.id!)!) |
||||
.map(([k, v]) => `${k}: **${v}**`) |
||||
.join('\n'), |
||||
) |
||||
) { |
||||
// Copied to clipboard |
||||
message.info(t('msg.info.copiedToClipboard')) |
||||
} |
||||
} catch (e: any) { |
||||
console.error(e) |
||||
message.error(e.message) |
||||
} |
||||
} |
||||
|
||||
defineExpose({ |
||||
enableEditMode, |
||||
}) |
||||
|
||||
const setIcon = async (icon: string, project: ProjectType) => { |
||||
try { |
||||
const meta = { |
||||
...((project.meta as object) || {}), |
||||
icon, |
||||
} |
||||
|
||||
projectsStore.updateProject(project.id!, { meta: JSON.stringify(meta) }) |
||||
|
||||
$e('a:project:icon:navdraw', { icon }) |
||||
} catch (e: any) { |
||||
message.error(await extractSdkResponseErrorMsg(e)) |
||||
} |
||||
} |
||||
|
||||
function openTableCreateDialog(baseIndex?: number | undefined) { |
||||
$e('c:table:create:navdraw') |
||||
|
||||
const isOpen = ref(true) |
||||
let baseId = project.value!.bases?.[0].id |
||||
if (typeof baseIndex === 'number') { |
||||
baseId = project.value!.bases?.[baseIndex].id |
||||
} |
||||
|
||||
if (!baseId || !project.value?.id) return |
||||
|
||||
const { close } = useDialog(resolveComponent('DlgTableCreate'), { |
||||
'modelValue': isOpen, |
||||
baseId, // || bases.value[0].id, |
||||
'projectId': project.value!.id, |
||||
'onCreate': closeDialog, |
||||
'onUpdate:modelValue': () => closeDialog(), |
||||
}) |
||||
|
||||
function closeDialog(table?: TableType) { |
||||
isOpen.value = false |
||||
|
||||
if (!table) return |
||||
|
||||
if (!activeKey.value || !activeKey.value.includes(`collapse-${baseId}`)) { |
||||
activeKey.value.push(`collapse-${baseId}`) |
||||
} |
||||
|
||||
// TODO: Better way to know when the table node dom is available |
||||
setTimeout(() => { |
||||
const newTableDom = document.querySelector(`[data-table-id="${table.id}"]`) |
||||
if (!newTableDom) return |
||||
|
||||
// Verify that table node is not in the viewport |
||||
if (isElementInvisible(newTableDom)) { |
||||
// Scroll to the table node |
||||
newTableDom?.scrollIntoView({ behavior: 'smooth' }) |
||||
} |
||||
}, 1000) |
||||
|
||||
close(1000) |
||||
} |
||||
} |
||||
|
||||
const isAddNewProjectChildEntityLoading = ref(false) |
||||
const addNewProjectChildEntity = async () => { |
||||
if (isAddNewProjectChildEntityLoading.value) return |
||||
|
||||
isAddNewProjectChildEntityLoading.value = true |
||||
try { |
||||
openTableCreateDialog() |
||||
|
||||
if (!project.value.isExpanded) { |
||||
project.value.isExpanded = true |
||||
} |
||||
} finally { |
||||
isAddNewProjectChildEntityLoading.value = false |
||||
} |
||||
} |
||||
|
||||
// todo: temp |
||||
const isSharedBase = ref(false) |
||||
|
||||
const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => { |
||||
if (!project) { |
||||
return |
||||
} |
||||
|
||||
if (toggleIsExpanded) { |
||||
project.isExpanded = !project.isExpanded |
||||
} else { |
||||
project.isExpanded = true |
||||
} |
||||
|
||||
const isProjectPopulated = projectsStore.isProjectPopulated(project.id!) |
||||
|
||||
let isSharedBase = false |
||||
// if shared base ignore navigation |
||||
if (route.value.params.typeOrId === 'base') { |
||||
isSharedBase = true |
||||
} |
||||
|
||||
if (!isProjectPopulated) project.isLoading = true |
||||
|
||||
if (!ignoreNavigation) { |
||||
await navigateTo( |
||||
projectUrl({ |
||||
id: project.id!, |
||||
type: 'database', |
||||
isSharedBase, |
||||
}), |
||||
) |
||||
} |
||||
|
||||
if (!isProjectPopulated) { |
||||
await loadProject(project.id!) |
||||
await loadProjectTables(project.id!) |
||||
} |
||||
|
||||
if (!isProjectPopulated) { |
||||
const updatedProject = projects.value.get(project.id!)! |
||||
updatedProject.isLoading = false |
||||
} |
||||
} |
||||
|
||||
function openErdView(base: BaseType) { |
||||
navigateTo(`/nc/${base.project_id}/erd/${base.id}`) |
||||
} |
||||
|
||||
async function openProjectErdView(_project: ProjectType) { |
||||
if (!_project.id) return |
||||
|
||||
if (!projectsStore.isProjectPopulated(_project.id)) { |
||||
await loadProject(_project.id) |
||||
} |
||||
|
||||
const project = projects.value.get(_project.id) |
||||
|
||||
const base = project?.bases?.[0] |
||||
if (!base) return |
||||
navigateTo(`/nc/${base.project_id}/erd/${base.id}`) |
||||
} |
||||
|
||||
const reloadTables = async () => { |
||||
$e('a:table:refresh:navdraw') |
||||
|
||||
// await loadTables() |
||||
} |
||||
|
||||
const contextMenuBase = computed(() => { |
||||
if (contextMenuTarget.type === 'base') { |
||||
return contextMenuTarget.value |
||||
} else if (contextMenuTarget.type === 'table') { |
||||
const base = project.value?.bases?.find((b) => b.id === contextMenuTarget.value.base_id) |
||||
if (base) return base |
||||
} |
||||
return null |
||||
}) |
||||
|
||||
watch( |
||||
() => activeTable.value?.id, |
||||
async () => { |
||||
if (!activeTable.value) return |
||||
|
||||
const baseId = activeTable.value.base_id |
||||
if (!baseId) return |
||||
|
||||
if (!activeKey.value.includes(`collapse-${baseId}`)) { |
||||
activeKey.value.push(`collapse-${baseId}`) |
||||
} |
||||
}, |
||||
{ |
||||
immediate: true, |
||||
}, |
||||
) |
||||
|
||||
onKeyStroke('Escape', () => { |
||||
if (isOptionsOpen.value) { |
||||
isOptionsOpen.value = false |
||||
} |
||||
|
||||
for (const key of Object.keys(isBasesOptionsOpen.value)) { |
||||
isBasesOptionsOpen.value[key] = false |
||||
} |
||||
}) |
||||
|
||||
const isDuplicateDlgOpen = ref(false) |
||||
const selectedProjectToDuplicate = ref() |
||||
|
||||
const duplicateProject = (project: ProjectType) => { |
||||
selectedProjectToDuplicate.value = project |
||||
isDuplicateDlgOpen.value = true |
||||
} |
||||
const { $jobs } = useNuxtApp() |
||||
|
||||
const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string }) => { |
||||
await loadProjects('workspace') |
||||
|
||||
$jobs.subscribe({ id: jobData.id }, undefined, async (status: string) => { |
||||
if (status === JobStatus.COMPLETED) { |
||||
await loadProjects('workspace') |
||||
|
||||
const project = projects.value.get(jobData.project_id) |
||||
|
||||
// open project after duplication |
||||
if (project) { |
||||
await navigateToProject({ |
||||
projectId: project.id, |
||||
type: project.type, |
||||
}) |
||||
} |
||||
} else if (status === JobStatus.FAILED) { |
||||
message.error('Failed to duplicate project') |
||||
await loadProjects('workspace') |
||||
} |
||||
}) |
||||
|
||||
$e('a:project:duplicate') |
||||
} |
||||
</script> |
||||
|
||||
<template> |
||||
<a-dropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu"> |
||||
<div |
||||
class="mx-1 nc-project-sub-menu rounded-md" |
||||
:class="{ active: project.isExpanded }" |
||||
:data-testid="`nc-sidebar-project-${project.title}`" |
||||
:data-project-id="project.id" |
||||
> |
||||
<div class="flex items-center gap-0.75 py-0.25 cursor-pointer" @contextmenu="setMenuContext('project', project)"> |
||||
<div |
||||
ref="projectNodeRefs" |
||||
:class="{ |
||||
'bg-primary-selected active': activeProjectId === project.id && projectViewOpen, |
||||
'hover:bg-gray-200': !(activeProjectId === project.id && projectViewOpen), |
||||
}" |
||||
:data-testid="`nc-sidebar-project-title-${project.title}`" |
||||
class="project-title-node h-7.25 flex-grow rounded-md group flex items-center w-full" |
||||
> |
||||
<div |
||||
class="nc-sidebar-expand ml-0.75 min-h-5.75 min-w-5.75 px-1.5 text-gray-500 hover:(hover:bg-gray-500 hover:bg-opacity-15 !text-black) rounded-md relative" |
||||
@click="onProjectClick(project, true, true)" |
||||
> |
||||
<PhTriangleFill |
||||
class="absolute top-2.25 left-2 invisible group-hover:visible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.75 rotate-90" |
||||
:class="{ '!rotate-180': project.isExpanded, '!visible': isOptionsOpen }" |
||||
/> |
||||
</div> |
||||
|
||||
<div class="flex items-center mr-1" @click="onProjectClick(project)"> |
||||
<div class="flex items-center select-none w-6 h-full"> |
||||
<a-spin |
||||
v-if="project.isLoading" |
||||
class="nc-sidebar-icon !flex !flex-row !items-center !my-0.5 !mx-1.5 w-8" |
||||
:indicator="indicator" |
||||
/> |
||||
|
||||
<LazyGeneralEmojiPicker |
||||
:key="project.meta?.icon" |
||||
:emoji="project.meta?.icon" |
||||
:readonly="true" |
||||
size="small" |
||||
@emoji-selected="setIcon($event, project)" |
||||
> |
||||
<template #default> |
||||
<GeneralProjectIcon :type="project.type" /> |
||||
</template> |
||||
</LazyGeneralEmojiPicker> |
||||
</div> |
||||
</div> |
||||
|
||||
<input |
||||
v-if="editMode" |
||||
ref="input" |
||||
v-model="tempTitle" |
||||
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 }" |
||||
@click.stop |
||||
@keyup.enter="updateProjectTitle" |
||||
@keyup.esc="updateProjectTitle" |
||||
@blur="updateProjectTitle" |
||||
/> |
||||
<span |
||||
v-else |
||||
class="capitalize text-ellipsis overflow-hidden select-none" |
||||
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }" |
||||
:class="{ 'text-black font-semibold': activeProjectId === project.id && projectViewOpen }" |
||||
@click="onProjectClick(project)" |
||||
> |
||||
{{ project.title }} |
||||
</span> |
||||
<div :class="{ 'flex flex-grow h-full': !editMode }" @click="onProjectClick(project)"></div> |
||||
|
||||
<a-dropdown v-if="isUIAllowed('tableCreate', false, projectRole)" v-model:visible="isOptionsOpen" trigger="click"> |
||||
<MdiDotsHorizontal |
||||
class="min-w-5.75 min-h-5.75 px-0.5 py-0.5 mr-0.25 !ring-0 focus:!ring-0 !focus:border-0 !focus:outline-0 opacity-0 group-hover:(opacity-100) hover:text-black text-gray-600 rounded-md hover:(bg-gray-500 bg-opacity-15)" |
||||
:class="{ '!text-black !opacity-100': isOptionsOpen }" |
||||
data-testid="nc-sidebar-context-menu" |
||||
@click.stop |
||||
/> |
||||
<template #overlay> |
||||
<a-menu |
||||
class="nc-scrollbar-md" |
||||
:style="{ |
||||
maxHeight: '70vh', |
||||
overflow: 'overlay', |
||||
}" |
||||
@click="isOptionsOpen = false" |
||||
> |
||||
<template v-if="!isSharedBase"> |
||||
<a-menu-item @click="enableEditMode"> |
||||
<div class="nc-project-menu-item group"> |
||||
<GeneralIcon icon="edit" class="group-hover:text-black" /> |
||||
{{ $t('general.edit') }} |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<!-- Copy Project Info --> |
||||
<a-menu-item v-if="!isEeUI" key="copy"> |
||||
<div v-e="['c:navbar:user:copy-proj-info']" class="nc-project-menu-item group" @click.stop="copyProjectInfo"> |
||||
<GeneralIcon icon="copy" class="group-hover:text-black" /> |
||||
{{ $t('activity.account.projInfo') }} |
||||
</div> |
||||
</a-menu-item> |
||||
<a-menu-item |
||||
v-if="isUIAllowed('duplicateProject', true, projectRole)" |
||||
@click="duplicateProject(project)" |
||||
> |
||||
<div class="nc-menu-item-wrapper"> |
||||
<GeneralIcon icon="duplicate" class="text-gray-700" /> |
||||
{{ $t('general.duplicate') }} {{ $t('objects.project') }} |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-divider v-if="false" /> |
||||
|
||||
<!-- ERD View --> |
||||
<a-menu-item key="erd" @click="openProjectErdView(project)"> |
||||
<div class="nc-project-menu-item group"> |
||||
<GeneralIcon icon="erd" /> |
||||
Relations |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<!-- Swagger: Rest APIs --> |
||||
<a-menu-item key="api"> |
||||
<div |
||||
v-if="isUIAllowed('apiDocs')" |
||||
v-e="['e:api-docs']" |
||||
class="nc-project-menu-item group" |
||||
@click.stop="openLink(`/api/v1/db/meta/projects/${project.id}/swagger`, appInfo.ncSiteUrl)" |
||||
> |
||||
<GeneralIcon icon="snippet" class="group-hover:text-black" /> |
||||
{{ $t('activity.account.swagger') }} |
||||
</div> |
||||
</a-menu-item> |
||||
</template> |
||||
<!-- Team & Settings --> |
||||
<a-menu-item key="teamAndSettings"> |
||||
<div |
||||
v-if="isUIAllowed('settings')" |
||||
v-e="['c:navdraw:project-settings']" |
||||
class="nc-project-menu-item group" |
||||
@click="toggleDialog(true, 'teamAndAuth', undefined, project.id)" |
||||
> |
||||
<GeneralIcon icon="settings" class="group-hover:text-black" /> |
||||
{{ $t('activity.settings') }} |
||||
</div> |
||||
</a-menu-item> |
||||
<template v-if="project.bases && project.bases[0]"> |
||||
<DashboardTreeViewNewBaseOptions v-model:project="project" :base="project.bases[0]" /> |
||||
|
||||
<a-menu-divider /> |
||||
</template> |
||||
|
||||
<a-menu-divider v-if="false" /> |
||||
|
||||
<a-menu-item v-if="isUIAllowed('projectDelete', false, projectRole)" @click="isProjectDeleteDialogVisible = true"> |
||||
<div class="nc-project-menu-item group text-red-500"> |
||||
<GeneralIcon icon="delete" /> |
||||
{{ $t('general.delete') }} |
||||
</div> |
||||
</a-menu-item> |
||||
</a-menu> |
||||
</template> |
||||
</a-dropdown> |
||||
|
||||
<div |
||||
v-if="isUIAllowed('tableCreate', false, projectRole)" |
||||
class="min-h-5.75 min-w-5.75 mr-1 flex flex-row items-center justify-center gap-x-2 cursor-pointer hover:(text-black) text-gray-600 text-sm invisible !group-hover:visible rounded-md hover:(bg-gray-500 bg-opacity-15)" |
||||
data-testid="nc-sidebar-add-project-entity" |
||||
:class="{ '!text-black !visible': isAddNewProjectChildEntityLoading, '!visible': isOptionsOpen }" |
||||
@click.stop="addNewProjectChildEntity" |
||||
> |
||||
<div v-if="isAddNewProjectChildEntityLoading" class="flex flex-row items-center"> |
||||
<a-spin class="!flex !flex-row !items-center !my-0.5" :indicator="indicator" /> |
||||
</div> |
||||
<MdiPlus v-else class="min-w-5 min-h-5 py-0.25" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div |
||||
v-if="project.id && !project.isLoading" |
||||
key="g1" |
||||
class="overflow-x-hidden transition-max-height" |
||||
:class="{ 'max-h-0': !project.isExpanded }" |
||||
> |
||||
<template v-if="project && project?.bases"> |
||||
<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 class="transition-height duration-200"> |
||||
<DashboardTreeViewNewTableList :project="project" :base-index="0" /> |
||||
</div> |
||||
</div> |
||||
|
||||
<div v-if="project?.bases?.slice(1).filter((el) => el.enabled)?.length" class="transition-height duration-200"> |
||||
<div class="border-none sortable-list"> |
||||
<div v-for="(base, baseIndex) of project.bases" :key="`base-${base.id}`"> |
||||
<template v-if="baseIndex === 0"></template> |
||||
<a-collapse |
||||
v-else-if="base && base.enabled" |
||||
v-model:activeKey="activeKey" |
||||
class="!mx-0 !px-0 nc-sidebar-base-node" |
||||
:class="[{ hidden: searchActive && !!filterQuery }]" |
||||
expand-icon-position="left" |
||||
:bordered="false" |
||||
ghost |
||||
> |
||||
<template #expandIcon="{ isActive }"> |
||||
<div class="flex flex-row items-center -mt-2"> |
||||
<PhTriangleFill |
||||
class="nc-sidebar-base-node-btns -mt-0.75 invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 text-gray-500 rotate-90" |
||||
:class="{ '!rotate-180': isActive }" |
||||
/> |
||||
</div> |
||||
</template> |
||||
<a-collapse-panel :key="`collapse-${base.id}`"> |
||||
<template #header> |
||||
<div class="min-w-20 w-full flex flex-row"> |
||||
<div |
||||
v-if="baseIndex === 0" |
||||
class="base-context flex items-center gap-2 text-gray-800" |
||||
@contextmenu="setMenuContext('base', base)" |
||||
> |
||||
<GeneralBaseLogo :base-type="base.type" /> |
||||
Default |
||||
</div> |
||||
<div |
||||
v-else |
||||
class="base-context flex flex-grow items-center gap-1.75 text-gray-800 min-w-1/20 max-w-full" |
||||
@contextmenu="setMenuContext('base', base)" |
||||
> |
||||
<GeneralBaseLogo :base-type="base.type" class="min-w-4" /> |
||||
<div |
||||
:data-testid="`nc-sidebar-project-${base.alias}`" |
||||
class="flex capitalize text-ellipsis overflow-hidden select-none" |
||||
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }" |
||||
> |
||||
{{ base.alias || '' }} |
||||
</div> |
||||
<a-tooltip> |
||||
<template #title>External DB</template> |
||||
<div> |
||||
<GeneralIcon icon="info" class="text-gray-400 -mt-0.5 hover:text-gray-700 mr-1" /> |
||||
</div> |
||||
</a-tooltip> |
||||
</div> |
||||
<div |
||||
v-if="isUIAllowed('tableCreate', false, projectRole)" |
||||
class="flex flex-row items-center gap-x-0.25 w-12.25" |
||||
> |
||||
<a-dropdown |
||||
:visible="isBasesOptionsOpen[base!.id!]" |
||||
trigger="click" |
||||
@update:visible="isBasesOptionsOpen[base!.id!] = $event" |
||||
> |
||||
<MdiDotsHorizontal |
||||
class="min-w-6 min-h-6 mt-0.15 invisible nc-sidebar-base-node-btns !ring-0 focus:!ring-0 !focus:border-0 !focus:outline-0 hover:text-black py-0.25 px-0.5 rounded-md text-gray-600 hover:(bg-gray-400 bg-opacity-20)" |
||||
:class="{ '!text-black !opacity-100': isBasesOptionsOpen[base!.id!] }" |
||||
@click.stop="isBasesOptionsOpen[base!.id!] = !isBasesOptionsOpen[base!.id!]" |
||||
/> |
||||
<template #overlay> |
||||
<a-menu |
||||
class="nc-scrollbar-md" |
||||
:style="{ |
||||
maxHeight: '70vh', |
||||
overflow: 'overlay', |
||||
}" |
||||
@click="isBasesOptionsOpen[base!.id!] = false" |
||||
> |
||||
<!-- ERD View --> |
||||
<a-menu-item key="erd" @click="openErdView(base)"> |
||||
<div class="nc-project-menu-item group"> |
||||
<GeneralIcon icon="erd" /> |
||||
Relations |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<DashboardTreeViewNewBaseOptions v-model:project="project" :base="base" /> |
||||
</a-menu> |
||||
</template> |
||||
</a-dropdown> |
||||
|
||||
<div |
||||
v-if="isUIAllowed('tableCreate', false, projectRole)" |
||||
class="flex invisible nc-sidebar-base-node-btns !focus:outline-0 text-gray-600 hover:text-black px-0.35 rounded-md hover:(bg-gray-500 bg-opacity-15) min-h-6 mt-0.15 min-w-6" |
||||
@click.stop="openTableCreateDialog(baseIndex)" |
||||
> |
||||
<component :is="iconMap.plus" class="text-inherit mt-0.25 h-5.5 w-5.5 py-0.5 !focus:outline-0" /> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<!-- <AddNewTableNode |
||||
:project="project" |
||||
:base-index="baseIndex" |
||||
@open-table-create-dialog="openTableCreateDialog()" |
||||
/> --> |
||||
<div |
||||
ref="menuRefs" |
||||
:key="`sortable-${base.id}-${base.id && base.id in keys ? keys[base.id] : '0'}`" |
||||
:nc-base="base.id" |
||||
> |
||||
<DashboardTreeViewNewTableList :project="project" :base-index="baseIndex" /> |
||||
</div> |
||||
</a-collapse-panel> |
||||
</a-collapse> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</div> |
||||
<template v-if="!isSharedBase" #overlay> |
||||
<a-menu class="!py-0 rounded text-sm"> |
||||
<template v-if="contextMenuTarget.type === 'project' && project.type === 'database'"></template> |
||||
|
||||
<template v-else-if="contextMenuTarget.type === 'base'"></template> |
||||
|
||||
<template v-else-if="contextMenuTarget.type === 'table'"> |
||||
<a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(contextMenuTarget.value, true)"> |
||||
<div class="nc-project-menu-item"> |
||||
<GeneralIcon icon="edit" class="text-gray-700" /> |
||||
{{ $t('general.rename') }} |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item |
||||
v-if="isUIAllowed('table-duplicate') && (contextMenuBase?.is_meta || contextMenuBase?.is_local)" |
||||
@click="duplicateTable(contextMenuTarget.value)" |
||||
> |
||||
<div class="nc-project-menu-item"> |
||||
<GeneralIcon icon="duplicate" class="text-gray-700" /> |
||||
{{ $t('general.duplicate') }} |
||||
</div> |
||||
</a-menu-item> |
||||
|
||||
<a-menu-item v-if="isUIAllowed('table-delete')" @click="isTableDeleteDialogVisible = true"> |
||||
<div class="nc-project-menu-item text-red-600"> |
||||
<GeneralIcon icon="delete" /> |
||||
{{ $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> |
||||
<DlgTableDelete |
||||
v-if="contextMenuTarget.value?.id && project?.id" |
||||
v-model:visible="isTableDeleteDialogVisible" |
||||
:table-id="contextMenuTarget.value?.id" |
||||
:project-id="project?.id" |
||||
/> |
||||
<DlgProjectDelete v-model:visible="isProjectDeleteDialogVisible" :project-id="project?.id" /> |
||||
<DlgProjectDuplicate |
||||
v-if="selectedProjectToDuplicate" |
||||
v-model="isDuplicateDlgOpen" |
||||
:project="selectedProjectToDuplicate" |
||||
:on-ok="DlgProjectDuplicateOnOk" |
||||
/> |
||||
</template> |
||||
|
||||
<style lang="scss" scoped> |
||||
.nc-sidebar-icon { |
||||
@apply ml-0.5 mr-1; |
||||
} |
||||
|
||||
:deep(.ant-collapse-header) { |
||||
@apply !mx-0 !pl-8.75 !pr-1 !py-0.75 hover:bg-gray-100 !rounded-md; |
||||
} |
||||
|
||||
:deep(.ant-collapse-header:hover .nc-sidebar-base-node-btns) { |
||||
@apply visible; |
||||
} |
||||
|
||||
:deep(.ant-dropdown-menu-submenu-title) { |
||||
@apply !py-0; |
||||
} |
||||
</style> |
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue