|
|
|
@ -1,5 +1,5 @@
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
import { provideSidebar, ref, useProject, useRoute, useSidebar, useTabs, useUIPermission } from '#imports' |
|
|
|
|
import { navigateTo, provideSidebar, ref, useProject, useRoute, useSidebar, useTabs, useUIPermission } from '#imports' |
|
|
|
|
import { TabType } from '~/composables' |
|
|
|
|
|
|
|
|
|
const route = useRoute() |
|
|
|
@ -48,108 +48,138 @@ await loadTables()
|
|
|
|
|
collapsible |
|
|
|
|
theme="light" |
|
|
|
|
> |
|
|
|
|
<a-dropdown :trigger="['click']"> |
|
|
|
|
<div style="height: var(--header-height)" class="border-b-1 group cursor-pointer w-full flex gap-4 items-center px-3"> |
|
|
|
|
<template v-if="isOpen"> |
|
|
|
|
<div class="text-xl font-semibold truncate">{{ project.title }}</div> |
|
|
|
|
<div style="height: var(--header-height)" class="flex items-center !bg-primary text-white px-1 gap-2"> |
|
|
|
|
<div |
|
|
|
|
v-if="isOpen" |
|
|
|
|
class="w-[50px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105" |
|
|
|
|
@click="navigateTo('/')" |
|
|
|
|
> |
|
|
|
|
<img alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" /> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" /> |
|
|
|
|
</template> |
|
|
|
|
<a-dropdown :trigger="['click']"> |
|
|
|
|
<div :class="[isOpen ? '' : 'justify-center']" class="group cursor-pointer w-full flex-1 flex gap-4 items-center"> |
|
|
|
|
<template v-if="isOpen"> |
|
|
|
|
<div class="text-xl font-semibold truncate">{{ project.title }}</div> |
|
|
|
|
|
|
|
|
|
<template v-else> |
|
|
|
|
<MdiFolder class="text-pink-500 cursor-pointer transform hover:scale-105 text-2xl" /> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
<MdiChevronDown class="min-w-[28.5px] group-hover:text-pink-500 text-2xl" /> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
|
<a-menu class="ml-2 !p-0 min-w-32 leading-8 !rounded"> |
|
|
|
|
<a-menu-item-group title="Project Settings"> |
|
|
|
|
<a-menu-item key="copy"> |
|
|
|
|
<div class="nc-project-menu-item group"> |
|
|
|
|
<MdiContentCopy class="group-hover:text-pink-500" /> |
|
|
|
|
Copy Project Info |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
|
|
<a-menu-item key="api"> |
|
|
|
|
<a |
|
|
|
|
v-if="isUIAllowed('apiDocs')" |
|
|
|
|
v-t="['e:api-docs']" |
|
|
|
|
:href="`/api/v1/db/meta/projects/${route.params.projectId}/swagger`" |
|
|
|
|
target="_blank" |
|
|
|
|
class="nc-project-menu-item group" |
|
|
|
|
> |
|
|
|
|
<MdiApi class="group-hover:text-pink-500" /> |
|
|
|
|
Swagger: Rest APIs |
|
|
|
|
</a> |
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
|
|
<a-menu-divider /> |
|
|
|
|
|
|
|
|
|
<a-menu-item key="teamAndAuth"> |
|
|
|
|
<div |
|
|
|
|
v-if="isUIAllowed('settings')" |
|
|
|
|
v-t="['c:navdraw:project-settings']" |
|
|
|
|
class="nc-project-menu-item group" |
|
|
|
|
@click="toggleDialog(true, 'teamAndAuth')" |
|
|
|
|
> |
|
|
|
|
<MdiAccountGroup class="group-hover:text-pink-500" /> |
|
|
|
|
Team & Auth |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
|
|
<a-menu-item key="appStore"> |
|
|
|
|
<div |
|
|
|
|
v-if="isUIAllowed('settings')" |
|
|
|
|
v-t="['c:navdraw:project-settings']" |
|
|
|
|
class="nc-project-menu-item group" |
|
|
|
|
@click="toggleDialog(true, 'appStore')" |
|
|
|
|
> |
|
|
|
|
<MdiStore class="group-hover:text-pink-500" /> |
|
|
|
|
App Store |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
|
|
<a-menu-item key="metaData"> |
|
|
|
|
<div |
|
|
|
|
v-if="isUIAllowed('settings')" |
|
|
|
|
v-t="['c:navdraw:project-settings']" |
|
|
|
|
class="nc-project-menu-item group" |
|
|
|
|
@click="toggleDialog(true, 'metaData')" |
|
|
|
|
> |
|
|
|
|
<MdiTableBorder class="group-hover:text-pink-500" /> |
|
|
|
|
Project Metadata |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
|
|
<a-menu-item key="audit"> |
|
|
|
|
<div |
|
|
|
|
v-if="isUIAllowed('settings')" |
|
|
|
|
v-t="['c:navdraw:project-settings']" |
|
|
|
|
class="nc-project-menu-item group" |
|
|
|
|
@click="toggleDialog(true, 'audit')" |
|
|
|
|
> |
|
|
|
|
<MdiNotebookCheckOutline class="group-hover:text-pink-500" /> |
|
|
|
|
Audit |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
|
|
<a-menu-divider /> |
|
|
|
|
|
|
|
|
|
<a-sub-menu key="preview-as"> |
|
|
|
|
<template v-else> |
|
|
|
|
<MdiFolder class="text-primary cursor-pointer transform hover:scale-105 text-2xl" /> |
|
|
|
|
</template> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<template #overlay> |
|
|
|
|
<a-menu class="ml-6 !w-[300px] !p-0 !rounded"> |
|
|
|
|
<a-menu-item-group> |
|
|
|
|
<template #title> |
|
|
|
|
<div class="group select-none flex items-center gap-4 py-1"> |
|
|
|
|
<MdiFolder class="group-hover:text-pink-500 text-xl" /> |
|
|
|
|
|
|
|
|
|
<div class="flex flex-col"> |
|
|
|
|
<div class="text-lg group-hover:(!text-primary) font-semibold truncate">{{ project.title }}</div> |
|
|
|
|
|
|
|
|
|
<div class="text-xs group-hover:text-pink-500 truncate font-italic">{{ project.id }}</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<a-menu-item key="copy"> |
|
|
|
|
<div class="nc-project-menu-item group"> |
|
|
|
|
<MdiContentCopy class="group-hover:text-pink-500" /> |
|
|
|
|
Preview Project As |
|
|
|
|
Copy Project Info |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
|
|
<a-menu-item key="api"> |
|
|
|
|
<a |
|
|
|
|
v-if="isUIAllowed('apiDocs')" |
|
|
|
|
v-t="['e:api-docs']" |
|
|
|
|
:href="`/api/v1/db/meta/projects/${route.params.projectId}/swagger`" |
|
|
|
|
target="_blank" |
|
|
|
|
class="nc-project-menu-item group" |
|
|
|
|
> |
|
|
|
|
<MdiApi class="group-hover:text-pink-500" /> |
|
|
|
|
Swagger: Rest APIs |
|
|
|
|
</a> |
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
|
|
<a-menu-divider /> |
|
|
|
|
|
|
|
|
|
<a-menu-item key="teamAndAuth"> |
|
|
|
|
<div |
|
|
|
|
v-if="isUIAllowed('settings')" |
|
|
|
|
v-t="['c:navdraw:project-settings']" |
|
|
|
|
class="nc-project-menu-item group" |
|
|
|
|
@click="toggleDialog(true, 'teamAndAuth')" |
|
|
|
|
> |
|
|
|
|
<MdiAccountGroup class="group-hover:text-pink-500" /> |
|
|
|
|
Team & Auth |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
|
|
<a-menu-item key="appStore"> |
|
|
|
|
<div |
|
|
|
|
v-if="isUIAllowed('settings')" |
|
|
|
|
v-t="['c:navdraw:project-settings']" |
|
|
|
|
class="nc-project-menu-item group" |
|
|
|
|
@click="toggleDialog(true, 'appStore')" |
|
|
|
|
> |
|
|
|
|
<MdiStore class="group-hover:text-pink-500" /> |
|
|
|
|
App Store |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
|
|
<a-menu-item key="metaData"> |
|
|
|
|
<div |
|
|
|
|
v-if="isUIAllowed('settings')" |
|
|
|
|
v-t="['c:navdraw:project-settings']" |
|
|
|
|
class="nc-project-menu-item group" |
|
|
|
|
@click="toggleDialog(true, 'metaData')" |
|
|
|
|
> |
|
|
|
|
<MdiTableBorder class="group-hover:text-pink-500" /> |
|
|
|
|
Project Metadata |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
|
|
<a-menu-item key="audit"> |
|
|
|
|
<div |
|
|
|
|
v-if="isUIAllowed('settings')" |
|
|
|
|
v-t="['c:navdraw:project-settings']" |
|
|
|
|
class="nc-project-menu-item group" |
|
|
|
|
@click="toggleDialog(true, 'audit')" |
|
|
|
|
> |
|
|
|
|
<MdiNotebookCheckOutline class="group-hover:text-pink-500" /> |
|
|
|
|
Audit |
|
|
|
|
</div> |
|
|
|
|
</a-menu-item> |
|
|
|
|
|
|
|
|
|
<a-menu-divider /> |
|
|
|
|
|
|
|
|
|
<a-menu-item> Foo </a-menu-item> |
|
|
|
|
</a-sub-menu> |
|
|
|
|
</a-menu-item-group> |
|
|
|
|
</a-menu> |
|
|
|
|
</template> |
|
|
|
|
</a-dropdown> |
|
|
|
|
<a-sub-menu key="preview-as"> |
|
|
|
|
<template #title> |
|
|
|
|
<div class="nc-project-menu-item group"> |
|
|
|
|
<MdiContentCopy class="group-hover:text-pink-500" /> |
|
|
|
|
Preview Project As |
|
|
|
|
|
|
|
|
|
<div class="flex-1" /> |
|
|
|
|
|
|
|
|
|
<MaterialSymbolsChevronRightRounded |
|
|
|
|
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<template #expandIcon></template> |
|
|
|
|
|
|
|
|
|
<a-menu-item> Foo </a-menu-item> |
|
|
|
|
</a-sub-menu> |
|
|
|
|
</a-menu-item-group> |
|
|
|
|
</a-menu> |
|
|
|
|
</template> |
|
|
|
|
</a-dropdown> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<a-tooltip placement="right"> |
|
|
|
|
<template #title> Toggle table list </template> |
|
|
|
@ -183,7 +213,7 @@ await loadTables()
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.nc-project-menu-item { |
|
|
|
|
@apply cursor-pointer flex items-center gap-2 py-3 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5)); |
|
|
|
|
@apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5)); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
:deep(.ant-dropdown-menu-item-group-title) { |
|
|
|
|