mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.7 KiB
97 lines
2.7 KiB
<script lang="ts" setup> |
|
import { useTitle } from '@vueuse/core' |
|
import type { WorkspaceType } from 'nocodb-sdk' |
|
|
|
const router = useRouter() |
|
const route = router.currentRoute |
|
|
|
const { isWorkspaceOwnerOrCreator, isWorkspaceOwner, activeWorkspace } = storeToRefs(useWorkspace()) |
|
|
|
const { appInfo } = useGlobal() |
|
|
|
const tab = computed({ |
|
get() { |
|
return route.value.query?.tab ?? 'collaborators' |
|
}, |
|
set(tab: string) { |
|
router.push({ query: { ...route.value.query, tab } }) |
|
}, |
|
}) |
|
|
|
const getWorkspaceColor = (workspace: WorkspaceType) => workspace.meta?.color || stringToColour(workspace.id!) |
|
|
|
watch( |
|
() => activeWorkspace.value?.title, |
|
(title: string) => { |
|
if (!title) return |
|
|
|
const capitalizedTitle = title.charAt(0).toUpperCase() + title.slice(1) |
|
|
|
useTitle(capitalizedTitle) |
|
}, |
|
{ |
|
immediate: true, |
|
}, |
|
) |
|
</script> |
|
|
|
<template> |
|
<div v-if="activeWorkspace" class="flex flex-col nc-workspace-container"> |
|
<div class="flex gap-2 items-center min-w-0 p-6"> |
|
<span class="nc-workspace-avatar !w-8 !h-8" :style="{ backgroundColor: getWorkspaceColor(activeWorkspace) }"> |
|
{{ activeWorkspace?.title?.slice(0, 2) }} |
|
</span> |
|
<h1 class="text-3xl font-weight-bold tracking-[0.5px] mb-0 nc-workspace-title truncate min-w-10"> |
|
{{ activeWorkspace?.title }} |
|
</h1> |
|
</div> |
|
|
|
<NcTabs v-model:activeKey="tab"> |
|
<template v-if="isWorkspaceOwnerOrCreator"> |
|
<a-tab-pane key="collaborators" class="w-full"> |
|
<template #tab> |
|
<div class="flex flex-row items-center px-2 pb-1 gap-x-1.5"> |
|
<PhUsersBold /> |
|
Collaborators |
|
</div> |
|
</template> |
|
<WorkspaceCollaboratorsList /> |
|
</a-tab-pane> |
|
</template> |
|
|
|
<template v-if="isWorkspaceOwner && appInfo.ee"> |
|
<a-tab-pane key="billing" class="w-full"> |
|
<template #tab> |
|
<div class="flex flex-row items-center px-2 pb-1 gap-x-1.5"> |
|
<MaterialSymbolsCreditCardOutline /> |
|
Billing |
|
</div> |
|
</template> |
|
<WorkspaceBilling /> |
|
</a-tab-pane> |
|
</template> |
|
<template v-if="isWorkspaceOwner && appInfo.ee"> |
|
<a-tab-pane key="settings" class="w-full"> |
|
<template #tab> |
|
<div class="flex flex-row items-center px-2 pb-1 gap-x-1.5"> |
|
<GeneralIcon icon="settings" /> |
|
Settings |
|
</div> |
|
</template> |
|
<WorkspaceDelete /> |
|
</a-tab-pane> |
|
</template> |
|
</NcTabs> |
|
</div> |
|
</template> |
|
|
|
<style lang="scss" scoped> |
|
.nc-workspace-avatar { |
|
@apply min-w-6 h-6 rounded-[6px] flex items-center justify-center text-white font-weight-bold uppercase; |
|
font-size: 0.7rem; |
|
} |
|
|
|
:deep(.ant-tabs-nav-list) { |
|
@apply !ml-3; |
|
} |
|
</style>
|
|
|