|
|
|
@ -3,13 +3,28 @@ import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'noc
|
|
|
|
|
import MenuTop from './MenuTop.vue' |
|
|
|
|
import MenuBottom from './MenuBottom.vue' |
|
|
|
|
import Toolbar from './toolbar/index.vue' |
|
|
|
|
import { computed, inject, provide, ref, useElementHover, useRoute, useRouter, useViews, watch } from '#imports' |
|
|
|
|
import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context' |
|
|
|
|
import { |
|
|
|
|
ActiveViewInj, |
|
|
|
|
IsFormInj, |
|
|
|
|
MetaInj, |
|
|
|
|
ViewListInj, |
|
|
|
|
computed, |
|
|
|
|
inject, |
|
|
|
|
provide, |
|
|
|
|
ref, |
|
|
|
|
useElementHover, |
|
|
|
|
useRoute, |
|
|
|
|
useRouter, |
|
|
|
|
useViews, |
|
|
|
|
watch, |
|
|
|
|
} from '#imports' |
|
|
|
|
|
|
|
|
|
const meta = inject(MetaInj, ref()) |
|
|
|
|
|
|
|
|
|
const activeView = inject(ActiveViewInj, ref()) |
|
|
|
|
|
|
|
|
|
const isForm = inject(IsFormInj) |
|
|
|
|
|
|
|
|
|
const { views, loadViews } = useViews(meta) |
|
|
|
|
|
|
|
|
|
const { isUIAllowed } = useUIPermission() |
|
|
|
@ -21,9 +36,9 @@ const route = useRoute()
|
|
|
|
|
provide(ViewListInj, views) |
|
|
|
|
|
|
|
|
|
/** Sidebar visible */ |
|
|
|
|
const sidebarOpen = inject(RightSidebarInj, ref(true)) |
|
|
|
|
const { isOpen } = useSidebar({ storageKey: 'nc-right-sidebar' }) |
|
|
|
|
|
|
|
|
|
const sidebarCollapsed = computed(() => !sidebarOpen.value) |
|
|
|
|
const sidebarCollapsed = computed(() => !isOpen.value) |
|
|
|
|
|
|
|
|
|
/** Sidebar ref */ |
|
|
|
|
const sidebar = ref() |
|
|
|
@ -96,21 +111,21 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
|
|
|
|
|
class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full" |
|
|
|
|
> |
|
|
|
|
<MaterialSymbolsChevronRightRounded |
|
|
|
|
v-if="sidebarOpen" |
|
|
|
|
v-if="isOpen" |
|
|
|
|
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle" |
|
|
|
|
@click="sidebarOpen = false" |
|
|
|
|
@click="isOpen = false" |
|
|
|
|
/> |
|
|
|
|
|
|
|
|
|
<MaterialSymbolsChevronLeftRounded |
|
|
|
|
v-else |
|
|
|
|
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle" |
|
|
|
|
@click="sidebarOpen = true" |
|
|
|
|
@click="isOpen = true" |
|
|
|
|
/> |
|
|
|
|
</div> |
|
|
|
|
</Transition> |
|
|
|
|
</a-tooltip> |
|
|
|
|
|
|
|
|
|
<Toolbar v-if="sidebarOpen" class="flex items-center py-3 px-3 justify-between border-b-1" /> |
|
|
|
|
<Toolbar v-if="isOpen" :class="{ 'flex items-center py-3 px-3 justify-between border-b-1': !isForm }" /> |
|
|
|
|
|
|
|
|
|
<Toolbar v-else class="py-3 px-2 max-w-[50px] flex !flex-col-reverse gap-4 items-center mt-[-1px]"> |
|
|
|
|
<template #start> |
|
|
|
@ -132,11 +147,11 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
|
|
|
|
|
</div> |
|
|
|
|
</a-tooltip> |
|
|
|
|
|
|
|
|
|
<div class="dot" /> |
|
|
|
|
<div v-if="!isForm" class="dot" /> |
|
|
|
|
</template> |
|
|
|
|
</Toolbar> |
|
|
|
|
|
|
|
|
|
<div v-if="sidebarOpen" class="flex-1 flex flex-col"> |
|
|
|
|
<div v-if="isOpen" class="flex-1 flex flex-col"> |
|
|
|
|
<MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" /> |
|
|
|
|
|
|
|
|
|
<a-divider v-if="isUIAllowed('virtualViewsCreateOrEdit')" class="my-2" /> |
|
|
|
|