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.
130 lines
3.0 KiB
130 lines
3.0 KiB
<script setup lang="ts"> |
|
import type { ViewType, ViewTypes } from 'nocodb-sdk' |
|
import MenuTop from './MenuTop.vue' |
|
import MenuBottom from './MenuBottom.vue' |
|
import Toolbar from './toolbar/index.vue' |
|
import { |
|
ActiveViewInj, |
|
MetaInj, |
|
ViewListInj, |
|
computed, |
|
inject, |
|
provide, |
|
ref, |
|
useRoute, |
|
useRouter, |
|
useViews, |
|
watch, |
|
} from '#imports' |
|
|
|
const meta = inject(MetaInj, ref()) |
|
|
|
const activeView = inject(ActiveViewInj, ref()) |
|
|
|
const { views, loadViews } = useViews(meta) |
|
|
|
const { isUIAllowed } = useUIPermission() |
|
|
|
const router = useRouter() |
|
|
|
const route = useRoute() |
|
|
|
provide(ViewListInj, views) |
|
|
|
/** Sidebar visible */ |
|
const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' }) |
|
|
|
const sidebarCollapsed = computed(() => !isOpen.value) |
|
|
|
/** Sidebar ref */ |
|
const sidebar = ref() |
|
|
|
/** View type to create from modal */ |
|
let viewCreateType = $ref<ViewTypes>() |
|
|
|
/** View title to create from modal (when duplicating) */ |
|
let viewCreateTitle = $ref('') |
|
|
|
/** selected view id for copying view meta */ |
|
let selectedViewId = $ref('') |
|
|
|
/** is view creation modal open */ |
|
let modalOpen = $ref(false) |
|
|
|
/** Watch route param and change active view based on `viewTitle` */ |
|
watch( |
|
[views, () => route.params.viewTitle], |
|
([nextViews, viewTitle]) => { |
|
if (viewTitle) { |
|
const view = nextViews.find((v) => v.title === viewTitle) |
|
if (view) { |
|
activeView.value = view |
|
} |
|
} |
|
/** if active view is not found, set it to first view */ |
|
if (!activeView.value && nextViews.length) { |
|
activeView.value = nextViews[0] |
|
} |
|
}, |
|
{ immediate: true }, |
|
) |
|
|
|
/** Open view creation modal */ |
|
function openModal({ type, title = '', copyViewId }: { type: ViewTypes; title: string; copyViewId: string }) { |
|
modalOpen = true |
|
viewCreateType = type |
|
viewCreateTitle = title |
|
selectedViewId = copyViewId |
|
} |
|
|
|
/** Handle view creation */ |
|
function onCreate(view: ViewType) { |
|
views.value.push(view) |
|
activeView.value = view |
|
router.push({ params: { viewTitle: view.title || '' } }) |
|
modalOpen = false |
|
} |
|
</script> |
|
|
|
<template> |
|
<a-layout-sider |
|
ref="sidebar" |
|
:collapsed="sidebarCollapsed" |
|
collapsiple |
|
collapsed-width="50" |
|
width="250" |
|
class="relative shadow-md h-full" |
|
theme="light" |
|
> |
|
<Toolbar |
|
v-if="isOpen" |
|
class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1" |
|
/> |
|
<div v-if="isOpen" class="flex-1 flex flex-col min-h-0"> |
|
<MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" /> |
|
|
|
<div v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="!my-3 w-full border-b-1" /> |
|
|
|
<MenuBottom @open-modal="openModal" /> |
|
</div> |
|
|
|
<dlg-view-create |
|
v-if="views" |
|
v-model="modalOpen" |
|
:title="viewCreateTitle" |
|
:type="viewCreateType" |
|
:selected-view-id="selectedViewId" |
|
@created="onCreate" |
|
/> |
|
</a-layout-sider> |
|
</template> |
|
|
|
<style scoped> |
|
:deep(.ant-menu-title-content) { |
|
@apply w-full; |
|
} |
|
|
|
:deep(.ant-layout-sider-children) { |
|
@apply flex flex-col; |
|
} |
|
</style>
|
|
|