mirror of https://github.com/nocodb/nocodb
Daniel Spaude
2 years ago
2 changed files with 185 additions and 1 deletions
@ -0,0 +1,183 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import type { ViewType, ViewTypes } from 'nocodb-sdk' |
||||||
|
import { |
||||||
|
ActiveViewInj, |
||||||
|
MetaInj, |
||||||
|
computed, |
||||||
|
inject, |
||||||
|
ref, |
||||||
|
resolveComponent, |
||||||
|
useDialog, |
||||||
|
useNuxtApp, |
||||||
|
useRoute, |
||||||
|
useRouter, |
||||||
|
useSidebar, |
||||||
|
useUIPermission, |
||||||
|
useViews, |
||||||
|
watch, |
||||||
|
} from '#imports' |
||||||
|
|
||||||
|
const meta = inject(MetaInj, ref()) |
||||||
|
|
||||||
|
const activeView = inject(ActiveViewInj, ref()) |
||||||
|
|
||||||
|
const { activeTab } = useTabs() |
||||||
|
|
||||||
|
const { views, loadViews, isLoading } = useViews(meta) |
||||||
|
|
||||||
|
const { lastOpenedViewMap } = useProject() |
||||||
|
|
||||||
|
const setLastOpenedViewId = (viewId?: string) => { |
||||||
|
if (viewId && activeTab.value?.id) { |
||||||
|
lastOpenedViewMap.value[activeTab.value?.id] = viewId |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const { isUIAllowed } = useUIPermission() |
||||||
|
|
||||||
|
const { isMobileMode } = useGlobal() |
||||||
|
|
||||||
|
const router = useRouter() |
||||||
|
|
||||||
|
const route = useRoute() |
||||||
|
|
||||||
|
const { $e } = useNuxtApp() |
||||||
|
|
||||||
|
/** Sidebar visible */ |
||||||
|
const { isOpen } = useSidebar('nc-right-sidebar') |
||||||
|
|
||||||
|
const sidebarCollapsed = computed(() => !isOpen.value || isMobileMode.value) |
||||||
|
|
||||||
|
/** Sidebar ref */ |
||||||
|
const sidebar = ref() |
||||||
|
|
||||||
|
/** Watch route param and change active view based on `viewTitle` */ |
||||||
|
watch( |
||||||
|
[views, () => route.params.viewTitle], |
||||||
|
([nextViews, viewTitle]) => { |
||||||
|
const lastOpenedViewId = activeTab.value?.id && lastOpenedViewMap.value[activeTab.value?.id] |
||||||
|
const lastOpenedView = nextViews.find((v) => v.id === lastOpenedViewId) |
||||||
|
|
||||||
|
if (viewTitle) { |
||||||
|
let view = nextViews.find((v) => v.title === viewTitle) |
||||||
|
if (view) { |
||||||
|
activeView.value = view |
||||||
|
setLastOpenedViewId(activeView.value?.id) |
||||||
|
} else { |
||||||
|
/** search with view id and if found replace with title */ |
||||||
|
view = nextViews.find((v) => v.id === viewTitle) |
||||||
|
if (view) { |
||||||
|
router.replace({ |
||||||
|
params: { |
||||||
|
viewTitle: view.title, |
||||||
|
}, |
||||||
|
}) |
||||||
|
} |
||||||
|
} |
||||||
|
} else if (lastOpenedView) { |
||||||
|
/** if active view is not found, set it to last opened view */ |
||||||
|
router.replace({ |
||||||
|
params: { |
||||||
|
viewTitle: lastOpenedView.title, |
||||||
|
}, |
||||||
|
}) |
||||||
|
} else { |
||||||
|
if (nextViews?.length && activeView.value !== nextViews[0]) { |
||||||
|
activeView.value = nextViews[0] |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/** if active view is not found, set it to first view */ |
||||||
|
if (nextViews?.length && (!activeView.value || !nextViews.includes(activeView.value))) { |
||||||
|
activeView.value = nextViews[0] |
||||||
|
} |
||||||
|
}, |
||||||
|
{ immediate: true }, |
||||||
|
) |
||||||
|
|
||||||
|
/** Open delete modal */ |
||||||
|
function onOpenModal({ |
||||||
|
title = '', |
||||||
|
type, |
||||||
|
copyViewId, |
||||||
|
groupingFieldColumnId, |
||||||
|
}: { |
||||||
|
title?: string |
||||||
|
type: ViewTypes |
||||||
|
copyViewId?: string |
||||||
|
groupingFieldColumnId?: string |
||||||
|
}) { |
||||||
|
const isOpen = ref(true) |
||||||
|
|
||||||
|
const { close } = useDialog(resolveComponent('DlgViewCreate'), { |
||||||
|
'modelValue': isOpen, |
||||||
|
title, |
||||||
|
type, |
||||||
|
meta, |
||||||
|
'selectedViewId': copyViewId, |
||||||
|
groupingFieldColumnId, |
||||||
|
'views': views, |
||||||
|
'onUpdate:modelValue': closeDialog, |
||||||
|
'onCreated': async (view: ViewType) => { |
||||||
|
closeDialog() |
||||||
|
|
||||||
|
await loadViews() |
||||||
|
|
||||||
|
router.push({ params: { viewTitle: view.title || '' } }) |
||||||
|
|
||||||
|
$e('a:view:create', { view: view.type }) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
function closeDialog() { |
||||||
|
isOpen.value = false |
||||||
|
|
||||||
|
close(1000) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div> |
||||||
|
FOO MOBILE |
||||||
|
<a-layout-sider |
||||||
|
ref="sidebar" |
||||||
|
:collapsed="sidebarCollapsed" |
||||||
|
collapsiple |
||||||
|
collapsed-width="0" |
||||||
|
width="0" |
||||||
|
class="nc-view-sidebar relative shadow h-full w-full !flex-1 !min-w-0 !max-w-[150px] !w-[150px] lg:(!max-w-[250px] !w-[250px])" |
||||||
|
theme="light" |
||||||
|
> |
||||||
|
<LazySmartsheetSidebarToolbar |
||||||
|
class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1" |
||||||
|
/> |
||||||
|
|
||||||
|
<div class="flex-1 flex flex-col min-h-0"> |
||||||
|
<GeneralOverlay v-if="!views.length" :model-value="isLoading" inline class="bg-gray-300/50"> |
||||||
|
<div class="w-full h-full flex items-center justify-center"> |
||||||
|
<a-spin /> |
||||||
|
</div> |
||||||
|
</GeneralOverlay> |
||||||
|
|
||||||
|
<LazySmartsheetSidebarMenuTop :views="views" @open-modal="onOpenModal" @deleted="loadViews" /> |
||||||
|
|
||||||
|
<template v-if="isUIAllowed('virtualViewsCreateOrEdit')"> |
||||||
|
<div class="!my-3 w-full border-b-1" /> |
||||||
|
|
||||||
|
<LazySmartsheetSidebarMenuBottom @open-modal="onOpenModal" /> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</a-layout-sider> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
:deep(.ant-menu-title-content) { |
||||||
|
@apply w-full; |
||||||
|
} |
||||||
|
|
||||||
|
:deep(.ant-layout-sider-children) { |
||||||
|
@apply flex flex-col; |
||||||
|
} |
||||||
|
</style> |
Loading…
Reference in new issue