mirror of https://github.com/nocodb/nocodb
Muhammed Mustafa
1 year ago
committed by
GitHub
46 changed files with 883 additions and 1127 deletions
@ -0,0 +1,131 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import type { ViewType } from 'nocodb-sdk' |
||||||
|
import { ViewTypes } from 'nocodb-sdk' |
||||||
|
|
||||||
|
const { $e } = useNuxtApp() |
||||||
|
|
||||||
|
const router = useRouter() |
||||||
|
|
||||||
|
const { refreshCommandPalette } = useCommandPalette() |
||||||
|
const viewsStore = useViewsStore() |
||||||
|
const { views } = storeToRefs(viewsStore) |
||||||
|
const { loadViews, navigateToView } = viewsStore |
||||||
|
|
||||||
|
const table = inject(SidebarTableInj)! |
||||||
|
const project = inject(ProjectInj)! |
||||||
|
|
||||||
|
const isOpen = ref(false) |
||||||
|
|
||||||
|
function onOpenModal({ |
||||||
|
title = '', |
||||||
|
type, |
||||||
|
copyViewId, |
||||||
|
groupingFieldColumnId, |
||||||
|
}: { |
||||||
|
title?: string |
||||||
|
type: ViewTypes |
||||||
|
copyViewId?: string |
||||||
|
groupingFieldColumnId?: string |
||||||
|
}) { |
||||||
|
isOpen.value = false |
||||||
|
|
||||||
|
const isDlgOpen = ref(true) |
||||||
|
|
||||||
|
const { close } = useDialog(resolveComponent('DlgViewCreate'), { |
||||||
|
'modelValue': isDlgOpen, |
||||||
|
title, |
||||||
|
type, |
||||||
|
'tableId': table.value.id, |
||||||
|
'selectedViewId': copyViewId, |
||||||
|
groupingFieldColumnId, |
||||||
|
'views': views, |
||||||
|
'onUpdate:modelValue': closeDialog, |
||||||
|
'onCreated': async (view: ViewType) => { |
||||||
|
closeDialog() |
||||||
|
|
||||||
|
refreshCommandPalette() |
||||||
|
|
||||||
|
await loadViews() |
||||||
|
|
||||||
|
navigateToView({ |
||||||
|
view, |
||||||
|
tableId: table.value.id!, |
||||||
|
projectId: project.value.id!, |
||||||
|
}) |
||||||
|
|
||||||
|
$e('a:view:create', { view: view.type }) |
||||||
|
}, |
||||||
|
}) |
||||||
|
|
||||||
|
function closeDialog() { |
||||||
|
isOpen.value = false |
||||||
|
|
||||||
|
close(1000) |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<NcDropdown v-model:isOpen="isOpen" destroy-popup-on-hide @click.stop="isOpen = !isOpen"> |
||||||
|
<slot /> |
||||||
|
<template #overlay> |
||||||
|
<NcMenu class="max-w-48"> |
||||||
|
<NcMenuItem @click="onOpenModal({ type: ViewTypes.GRID })"> |
||||||
|
<div class="item" data-testid="sidebar-view-create-grid"> |
||||||
|
<div class="item-inner"> |
||||||
|
<GeneralViewIcon :meta="{ type: ViewTypes.GRID }" /> |
||||||
|
<div>Grid</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<GeneralIcon class="plus" icon="plus" /> |
||||||
|
</div> |
||||||
|
</NcMenuItem> |
||||||
|
|
||||||
|
<NcMenuItem @click="onOpenModal({ type: ViewTypes.FORM })"> |
||||||
|
<div class="item" data-testid="sidebar-view-create-form"> |
||||||
|
<div class="item-inner"> |
||||||
|
<GeneralViewIcon :meta="{ type: ViewTypes.FORM }" /> |
||||||
|
<div>Form</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<GeneralIcon class="plus" icon="plus" /> |
||||||
|
</div> |
||||||
|
</NcMenuItem> |
||||||
|
<NcMenuItem @click="onOpenModal({ type: ViewTypes.GALLERY })"> |
||||||
|
<div class="item" data-testid="sidebar-view-create-gallery"> |
||||||
|
<div class="item-inner"> |
||||||
|
<GeneralViewIcon :meta="{ type: ViewTypes.GALLERY }" /> |
||||||
|
<div>Gallery</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<GeneralIcon class="plus" icon="plus" /> |
||||||
|
</div> |
||||||
|
</NcMenuItem> |
||||||
|
<NcMenuItem data-testid="sidebar-view-create-kanban" @click="onOpenModal({ type: ViewTypes.KANBAN })"> |
||||||
|
<div class="item"> |
||||||
|
<div class="item-inner"> |
||||||
|
<GeneralViewIcon :meta="{ type: ViewTypes.KANBAN }" /> |
||||||
|
<div>Kanban</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<GeneralIcon class="plus" icon="plus" /> |
||||||
|
</div> |
||||||
|
</NcMenuItem> |
||||||
|
</NcMenu> |
||||||
|
</template> |
||||||
|
</NcDropdown> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.item { |
||||||
|
@apply flex flex-row items-center w-36 justify-between; |
||||||
|
} |
||||||
|
|
||||||
|
.item-inner { |
||||||
|
@apply flex flex-row items-center gap-x-1.75; |
||||||
|
} |
||||||
|
|
||||||
|
.plus { |
||||||
|
@apply text-brand-400; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -1,151 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { ViewTypes } from 'nocodb-sdk' |
|
||||||
import { iconMap, useNuxtApp, useSmartsheetStoreOrThrow, viewIcons } from '#imports' |
|
||||||
|
|
||||||
const emits = defineEmits<Emits>() |
|
||||||
|
|
||||||
interface Emits { |
|
||||||
(event: 'openModal', data: { type: ViewTypes; title?: string }): void |
|
||||||
} |
|
||||||
|
|
||||||
const { $e } = useNuxtApp() |
|
||||||
|
|
||||||
const { isSqlView } = useSmartsheetStoreOrThrow() |
|
||||||
|
|
||||||
const { betaFeatureToggleState } = useBetaFeatureToggle() |
|
||||||
|
|
||||||
function onOpenModal(type: ViewTypes, title = '') { |
|
||||||
$e('c:view:create', { view: type }) |
|
||||||
emits('openModal', { type, title }) |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<a-menu :selected-keys="[]" class="flex flex-col !text-gray-600 !bg-inherit"> |
|
||||||
<div class="px-6 text-xs flex items-center gap-4 my-2 !text-gray-700"> |
|
||||||
{{ $t('activity.createView') }} |
|
||||||
</div> |
|
||||||
|
|
||||||
<a-menu-item |
|
||||||
key="grid" |
|
||||||
class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-grid-view" |
|
||||||
@click="onOpenModal(ViewTypes.GRID)" |
|
||||||
> |
|
||||||
<a-tooltip :mouse-enter-delay="1" placement="left"> |
|
||||||
<template #title> |
|
||||||
{{ $t('msg.info.addView.grid') }} |
|
||||||
</template> |
|
||||||
|
|
||||||
<div class="!py-0 text-xs flex items-center h-full w-full gap-2"> |
|
||||||
<GeneralViewIcon :meta="{ type: ViewTypes.GRID }" class="min-w-5 flex" /> |
|
||||||
|
|
||||||
<div>{{ $t('objects.viewType.grid') }}</div> |
|
||||||
|
|
||||||
<div class="flex-1" /> |
|
||||||
|
|
||||||
<component :is="iconMap.plus" /> |
|
||||||
</div> |
|
||||||
</a-tooltip> |
|
||||||
</a-menu-item> |
|
||||||
|
|
||||||
<a-menu-item |
|
||||||
key="gallery" |
|
||||||
class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-gallery-view" |
|
||||||
@click="onOpenModal(ViewTypes.GALLERY)" |
|
||||||
> |
|
||||||
<a-tooltip :mouse-enter-delay="1" placement="left"> |
|
||||||
<template #title> |
|
||||||
{{ $t('msg.info.addView.gallery') }} |
|
||||||
</template> |
|
||||||
|
|
||||||
<div class="!py-0 text-xs flex items-center h-full w-full gap-2"> |
|
||||||
<GeneralViewIcon :meta="{ type: ViewTypes.GALLERY }" class="min-w-5 flex" /> |
|
||||||
|
|
||||||
<div>{{ $t('objects.viewType.gallery') }}</div> |
|
||||||
|
|
||||||
<div class="flex-1" /> |
|
||||||
|
|
||||||
<component :is="iconMap.plus" /> |
|
||||||
</div> |
|
||||||
</a-tooltip> |
|
||||||
</a-menu-item> |
|
||||||
|
|
||||||
<a-menu-item |
|
||||||
v-if="!isSqlView" |
|
||||||
key="form" |
|
||||||
class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-form-view" |
|
||||||
@click="onOpenModal(ViewTypes.FORM)" |
|
||||||
> |
|
||||||
<a-tooltip :mouse-enter-delay="1" placement="left"> |
|
||||||
<template #title> |
|
||||||
{{ $t('msg.info.addView.form') }} |
|
||||||
</template> |
|
||||||
|
|
||||||
<div class="!py-0 text-xs flex items-center h-full w-full gap-2"> |
|
||||||
<GeneralViewIcon :meta="{ type: ViewTypes.FORM }" class="min-w-5 flex" /> |
|
||||||
|
|
||||||
<div>{{ $t('objects.viewType.form') }}</div> |
|
||||||
|
|
||||||
<div class="flex-1" /> |
|
||||||
|
|
||||||
<component :is="iconMap.plus" /> |
|
||||||
</div> |
|
||||||
</a-tooltip> |
|
||||||
</a-menu-item> |
|
||||||
|
|
||||||
<a-menu-item |
|
||||||
key="kanban" |
|
||||||
class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-kanban-view" |
|
||||||
@click="onOpenModal(ViewTypes.KANBAN)" |
|
||||||
> |
|
||||||
<a-tooltip :mouse-enter-delay="1" placement="left"> |
|
||||||
<template #title> |
|
||||||
{{ $t('msg.info.addView.kanban') }} |
|
||||||
</template> |
|
||||||
|
|
||||||
<div class="!py-0 text-xs flex items-center h-full w-full gap-2"> |
|
||||||
<GeneralViewIcon :meta="{ type: ViewTypes.KANBAN }" class="min-w-5 flex" /> |
|
||||||
|
|
||||||
<div>{{ $t('objects.viewType.kanban') }}</div> |
|
||||||
|
|
||||||
<div class="flex-1" /> |
|
||||||
|
|
||||||
<component :is="iconMap.plus" /> |
|
||||||
</div> |
|
||||||
</a-tooltip> |
|
||||||
</a-menu-item> |
|
||||||
<a-menu-item |
|
||||||
v-if="betaFeatureToggleState.show" |
|
||||||
key="map" |
|
||||||
class="nc-create-view group !flex !items-center !my-0 !h-2.5rem nc-create-map-view" |
|
||||||
@click="onOpenModal(ViewTypes.MAP)" |
|
||||||
> |
|
||||||
<a-tooltip :mouse-enter-delay="1" placement="left"> |
|
||||||
<template #title> |
|
||||||
{{ $t('msg.info.addView.map') }} |
|
||||||
</template> |
|
||||||
|
|
||||||
<div class="!py-0 text-xs flex items-center h-full w-full gap-2"> |
|
||||||
<component :is="viewIcons[ViewTypes.MAP].icon" :style="{ color: viewIcons[ViewTypes.MAP]?.color }" /> |
|
||||||
|
|
||||||
<div>{{ $t('objects.viewType.map') }}</div> |
|
||||||
|
|
||||||
<div class="flex-1" /> |
|
||||||
|
|
||||||
<component :is="iconMap.plus" /> |
|
||||||
</div> |
|
||||||
</a-tooltip> |
|
||||||
</a-menu-item> |
|
||||||
|
|
||||||
<div class="w-full h-3" /> |
|
||||||
</a-menu> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style lang="scss" scoped> |
|
||||||
:deep(.nc-create-view) { |
|
||||||
@apply !py-0 !h-8 mx-3.75 rounded-md hover:(text-gray-800 bg-gray-100); |
|
||||||
} |
|
||||||
:deep(.nc-create-view.ant-menu-item) { |
|
||||||
@apply px-2.25; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,281 +0,0 @@ |
|||||||
<script setup lang="ts"> |
|
||||||
import type { ViewType, ViewTypes } from 'nocodb-sdk' |
|
||||||
import { |
|
||||||
ActiveViewInj, |
|
||||||
MetaInj, |
|
||||||
inject, |
|
||||||
ref, |
|
||||||
resolveComponent, |
|
||||||
storeToRefs, |
|
||||||
useCommandPalette, |
|
||||||
useDialog, |
|
||||||
useNuxtApp, |
|
||||||
useRoles, |
|
||||||
useRoute, |
|
||||||
useRouter, |
|
||||||
useViewsStore, |
|
||||||
watch, |
|
||||||
} from '#imports' |
|
||||||
|
|
||||||
const { refreshCommandPalette } = useCommandPalette() |
|
||||||
|
|
||||||
const meta = inject(MetaInj, ref()) |
|
||||||
|
|
||||||
const activeView = inject(ActiveViewInj, ref()) |
|
||||||
|
|
||||||
const { activeTab } = storeToRefs(useTabs()) |
|
||||||
|
|
||||||
const viewsStore = useViewsStore() |
|
||||||
const { loadViews } = viewsStore |
|
||||||
const { isViewsLoading, views } = storeToRefs(viewsStore) |
|
||||||
|
|
||||||
const { lastOpenedViewMap } = storeToRefs(useProject()) |
|
||||||
|
|
||||||
const { activeTable } = storeToRefs(useTablesStore()) |
|
||||||
|
|
||||||
const setLastOpenedViewId = (viewId?: string) => { |
|
||||||
if (viewId && activeTab.value?.id) { |
|
||||||
lastOpenedViewMap.value[activeTab.value?.id] = viewId |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
const { isUIAllowed } = useRoles() |
|
||||||
|
|
||||||
const router = useRouter() |
|
||||||
|
|
||||||
const route = useRoute() |
|
||||||
|
|
||||||
const { $e } = useNuxtApp() |
|
||||||
|
|
||||||
const { isRightSidebarOpen } = storeToRefs(useSidebarStore()) |
|
||||||
|
|
||||||
const tabBtnsContainerRef = ref<HTMLElement | null>(null) |
|
||||||
|
|
||||||
/** 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.id, |
|
||||||
}, |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
} else if (lastOpenedView) { |
|
||||||
/** if active view is not found, set it to last opened view */ |
|
||||||
router.replace({ |
|
||||||
params: { |
|
||||||
viewTitle: lastOpenedView.id, |
|
||||||
}, |
|
||||||
}) |
|
||||||
} 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() |
|
||||||
|
|
||||||
refreshCommandPalette() |
|
||||||
|
|
||||||
await loadViews() |
|
||||||
|
|
||||||
router.push({ params: { viewTitle: view.id || '' } }) |
|
||||||
|
|
||||||
$e('a:view:create', { view: view.type }) |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
function closeDialog() { |
|
||||||
isOpen.value = false |
|
||||||
|
|
||||||
close(1000) |
|
||||||
} |
|
||||||
} |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<div class="relative nc-view-sidebar flex flex-col border-l-1 border-gray-200 relative h-full w-full bg-white"> |
|
||||||
<template v-if="isViewsLoading"> |
|
||||||
<a-skeleton-input :active="true" class="!h-8 !rounded overflow-hidden ml-3 mr-3 mt-3.75 mb-3.75" /> |
|
||||||
</template> |
|
||||||
<div |
|
||||||
v-else |
|
||||||
ref="tabBtnsContainerRef" |
|
||||||
class="flex flex-row group py-1 mx-3.25 mt-1.25 mb-2.75 rounded-md gap-x-2 nc-view-sidebar-tab items-center justify-between" |
|
||||||
> |
|
||||||
<div class="flex text-gray-600 ml-1.75">Views</div> |
|
||||||
<NcTooltip |
|
||||||
placement="bottomLeft" |
|
||||||
hide-on-click |
|
||||||
class="flex opacity-0 group-hover:(opacity-100) transition-all duration-50" |
|
||||||
:class="{ |
|
||||||
'!w-8 !opacity-100': !isRightSidebarOpen, |
|
||||||
}" |
|
||||||
> |
|
||||||
<template #title> |
|
||||||
{{ |
|
||||||
isRightSidebarOpen |
|
||||||
? `${$t('general.hide')} ${$t('objects.sidebar').toLowerCase()}` |
|
||||||
: `${$t('general.show')} ${$t('objects.sidebar').toLowerCase()}` |
|
||||||
}} |
|
||||||
</template> |
|
||||||
<NcButton |
|
||||||
type="text" |
|
||||||
size="small" |
|
||||||
class="nc-sidebar-left-toggle-icon !text-gray-600 !hover:text-gray-800" |
|
||||||
@click="isRightSidebarOpen = !isRightSidebarOpen" |
|
||||||
> |
|
||||||
<div class="flex items-center text-inherit"> |
|
||||||
<GeneralIcon |
|
||||||
icon="doubleRightArrow" |
|
||||||
class="duration-150 transition-all" |
|
||||||
:class="{ |
|
||||||
'transform rotate-180': !isRightSidebarOpen, |
|
||||||
}" |
|
||||||
/> |
|
||||||
</div> |
|
||||||
</NcButton> |
|
||||||
</NcTooltip> |
|
||||||
</div> |
|
||||||
|
|
||||||
<div class="flex-1 flex flex-col min-h-0"> |
|
||||||
<div class="flex flex-col h-full justify-between w-full"> |
|
||||||
<div class="flex flex-grow nc-scrollbar-md pr-1.75 mr-0.5"> |
|
||||||
<div v-if="isViewsLoading" class="flex flex-col w-full"> |
|
||||||
<div class="flex flex-row items-center w-full mt-1.5 ml-5 gap-x-3"> |
|
||||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
|
||||||
<a-skeleton-input :active="true" class="!w-1/2 !h-4 !rounded overflow-hidden" /> |
|
||||||
</div> |
|
||||||
<div class="flex flex-row items-center w-full mt-4 ml-5 gap-x-3"> |
|
||||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
|
||||||
<a-skeleton-input :active="true" class="!w-1/2 !h-4 !rounded overflow-hidden" /> |
|
||||||
</div> |
|
||||||
<div class="flex flex-row items-center w-full mt-4 ml-5 gap-x-3"> |
|
||||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
|
||||||
<a-skeleton-input :active="true" class="!w-1/2 !h-4 !rounded overflow-hidden" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<LazySmartsheetSidebarMenuTop v-else :views="views" @open-modal="onOpenModal" @deleted="loadViews" /> |
|
||||||
</div> |
|
||||||
<div v-if="isUIAllowed('viewCreateOrEdit')" class="flex flex-col"> |
|
||||||
<div class="!mb-3 w-full border-b-1 border-gray-200" /> |
|
||||||
|
|
||||||
<div v-if="!activeTable" class="flex flex-col pt-2 pb-5 px-6"> |
|
||||||
<a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" /> |
|
||||||
<div class="flex flex-row justify-between items-center w-full mt-4.75"> |
|
||||||
<div class="flex flex-row items-center flex-grow gap-x-3"> |
|
||||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
|
||||||
<a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" /> |
|
||||||
</div> |
|
||||||
<div class="flex"> |
|
||||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="flex flex-row justify-between items-center w-full mt-3.75"> |
|
||||||
<div class="flex flex-row items-center flex-grow gap-x-3"> |
|
||||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
|
||||||
<a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" /> |
|
||||||
</div> |
|
||||||
<div class="flex"> |
|
||||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="flex flex-row justify-between items-center w-full mt-3.75"> |
|
||||||
<div class="flex flex-row items-center flex-grow gap-x-3"> |
|
||||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
|
||||||
<a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" /> |
|
||||||
</div> |
|
||||||
<div class="flex"> |
|
||||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div class="flex flex-row justify-between items-center w-full mt-3.75"> |
|
||||||
<div class="flex flex-row items-center flex-grow gap-x-3"> |
|
||||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
|
||||||
<a-skeleton-input :active="true" class="!w-3/5 !h-4 !rounded overflow-hidden" /> |
|
||||||
</div> |
|
||||||
<div class="flex"> |
|
||||||
<a-skeleton-input :active="true" class="!w-4 !h-4 !rounded overflow-hidden" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<LazySmartsheetSidebarMenuBottom v-else @open-modal="onOpenModal" /> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style scoped> |
|
||||||
:deep(.ant-menu-title-content) { |
|
||||||
@apply w-full; |
|
||||||
} |
|
||||||
|
|
||||||
:deep(.ant-layout-sider-children) { |
|
||||||
@apply flex flex-col; |
|
||||||
} |
|
||||||
|
|
||||||
.tab { |
|
||||||
@apply flex flex-row items-center h-7.5 justify-center w-1/2 py-1 bg-gray-100 rounded-md gap-x-1.5 text-gray-500 hover:text-black cursor-pointer transition-all duration-300 select-none; |
|
||||||
} |
|
||||||
|
|
||||||
.tab-icon { |
|
||||||
@apply transition-all duration-300; |
|
||||||
} |
|
||||||
.tab .tab-title { |
|
||||||
@apply min-w-0; |
|
||||||
word-break: 'keep-all'; |
|
||||||
white-space: 'nowrap'; |
|
||||||
display: 'inline'; |
|
||||||
} |
|
||||||
|
|
||||||
.active { |
|
||||||
@apply bg-white shadow text-gray-700; |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -1,209 +0,0 @@ |
|||||||
<script lang="ts" setup> |
|
||||||
import { Pane, Splitpanes } from 'splitpanes' |
|
||||||
import 'splitpanes/dist/splitpanes.css' |
|
||||||
|
|
||||||
const { |
|
||||||
isRightSidebarOpen, |
|
||||||
isLeftSidebarOpen, |
|
||||||
leftSidebarWidthPercent, |
|
||||||
rightSidebarSize: sideBarSize, |
|
||||||
} = storeToRefs(useSidebarStore()) |
|
||||||
const wrapperRef = ref<HTMLDivElement>() |
|
||||||
const splitpaneWrapperRef = ref() |
|
||||||
|
|
||||||
const { rightSidebarState: sidebarState } = storeToRefs(useSidebarStore()) |
|
||||||
|
|
||||||
const contentSize = computed(() => 100 - sideBarSize.value.current) |
|
||||||
const animationDuration = 250 |
|
||||||
const contentDomWidth = ref(window.innerWidth) |
|
||||||
|
|
||||||
const sidebarWidth = computed(() => (sideBarSize.value.old * contentDomWidth.value) / 100) |
|
||||||
const currentSidebarSize = computed({ |
|
||||||
get: () => sideBarSize.value.current, |
|
||||||
set: (val) => { |
|
||||||
sideBarSize.value.current = val |
|
||||||
sideBarSize.value.old = val |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
watch(isRightSidebarOpen, () => { |
|
||||||
sideBarSize.value.current = sideBarSize.value.old |
|
||||||
|
|
||||||
if (isRightSidebarOpen.value) { |
|
||||||
setTimeout(() => (sidebarState.value = 'openStart'), 0) |
|
||||||
|
|
||||||
setTimeout(() => (sidebarState.value = 'openEnd'), animationDuration) |
|
||||||
} else { |
|
||||||
sideBarSize.value.old = sideBarSize.value.current |
|
||||||
|
|
||||||
sidebarState.value = 'hiddenStart' |
|
||||||
|
|
||||||
setTimeout(() => { |
|
||||||
sideBarSize.value.current = 0 |
|
||||||
|
|
||||||
sidebarState.value = 'hiddenEnd' |
|
||||||
}, animationDuration) |
|
||||||
} |
|
||||||
}) |
|
||||||
|
|
||||||
function handleMouseMove(e: MouseEvent) { |
|
||||||
if (!wrapperRef.value) return |
|
||||||
if (sidebarState.value === 'openEnd') return |
|
||||||
|
|
||||||
const viewportWidth = window.innerWidth |
|
||||||
|
|
||||||
if (e.clientX > viewportWidth - 14 && ['hiddenEnd', 'peekCloseEnd'].includes(sidebarState.value)) { |
|
||||||
sidebarState.value = 'peekOpenStart' |
|
||||||
|
|
||||||
setTimeout(() => { |
|
||||||
sidebarState.value = 'peekOpenEnd' |
|
||||||
}, animationDuration) |
|
||||||
} else if (e.clientX < viewportWidth - (sidebarWidth.value + 10) && sidebarState.value === 'peekOpenEnd') { |
|
||||||
sidebarState.value = 'peekCloseOpen' |
|
||||||
|
|
||||||
setTimeout(() => { |
|
||||||
sidebarState.value = 'peekCloseEnd' |
|
||||||
}, animationDuration) |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
function onWindowResize() { |
|
||||||
contentDomWidth.value = ((100 - leftSidebarWidthPercent.value) / 100) * window.innerWidth |
|
||||||
} |
|
||||||
|
|
||||||
onMounted(() => { |
|
||||||
document.addEventListener('mousemove', handleMouseMove) |
|
||||||
|
|
||||||
window.addEventListener('resize', onWindowResize) |
|
||||||
}) |
|
||||||
|
|
||||||
onBeforeUnmount(() => { |
|
||||||
document.removeEventListener('mousemove', handleMouseMove) |
|
||||||
window.removeEventListener('resize', onWindowResize) |
|
||||||
}) |
|
||||||
|
|
||||||
watch( |
|
||||||
[isLeftSidebarOpen, leftSidebarWidthPercent], |
|
||||||
() => { |
|
||||||
if (isLeftSidebarOpen.value) { |
|
||||||
contentDomWidth.value = ((100 - leftSidebarWidthPercent.value) / 100) * window.innerWidth |
|
||||||
} else { |
|
||||||
contentDomWidth.value = window.innerWidth |
|
||||||
} |
|
||||||
}, |
|
||||||
{ |
|
||||||
immediate: true, |
|
||||||
}, |
|
||||||
) |
|
||||||
</script> |
|
||||||
|
|
||||||
<template> |
|
||||||
<Splitpanes |
|
||||||
ref="splitpaneWrapperRef" |
|
||||||
class="nc-view-sidebar-content-resizable-wrapper w-full h-full" |
|
||||||
:class="{ |
|
||||||
'hide-resize-bar': !isRightSidebarOpen || sidebarState === 'openStart', |
|
||||||
}" |
|
||||||
@resize="currentSidebarSize = $event[1].size" |
|
||||||
> |
|
||||||
<Pane :size="contentSize"> |
|
||||||
<slot name="content" /> |
|
||||||
</Pane> |
|
||||||
<Pane min-size="15%" :size="currentSidebarSize" max-size="40%" class="nc-view-sidebar-splitpane relative !overflow-visible"> |
|
||||||
<div |
|
||||||
ref="wrapperRef" |
|
||||||
class="nc-view-sidebar-wrapper relative flex flex-col h-full justify-center !min-w-32 absolute overflow-visible" |
|
||||||
:class="{ |
|
||||||
'minimized-height': !isRightSidebarOpen, |
|
||||||
'peek-sidebar': ['peekOpenEnd', 'peekCloseOpen'].includes(sidebarState), |
|
||||||
'hide-sidebar': ['hiddenStart', 'hiddenEnd', 'peekCloseEnd'].includes(sidebarState), |
|
||||||
}" |
|
||||||
:style="{ |
|
||||||
width: sidebarState === 'hiddenEnd' ? '0px' : `${sidebarWidth}px`, |
|
||||||
}" |
|
||||||
> |
|
||||||
<slot name="sidebar" /> |
|
||||||
</div> |
|
||||||
</Pane> |
|
||||||
</Splitpanes> |
|
||||||
</template> |
|
||||||
|
|
||||||
<style lang="scss"> |
|
||||||
.nc-view-sidebar-wrapper.minimized-height > * { |
|
||||||
@apply pb-1 !(rounded-l-lg border-1 border-gray-200 shadow-lg); |
|
||||||
height: 89.5%; |
|
||||||
} |
|
||||||
|
|
||||||
.nc-view-sidebar-wrapper > * { |
|
||||||
transition: all 0.15s ease-in-out; |
|
||||||
@apply z-10 absolute; |
|
||||||
} |
|
||||||
|
|
||||||
.nc-view-sidebar-wrapper.peek-sidebar { |
|
||||||
> * { |
|
||||||
@apply !opacity-100; |
|
||||||
transform: translateX(-100%); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.nc-view-sidebar-wrapper.hide-sidebar { |
|
||||||
@apply !min-w-0; |
|
||||||
|
|
||||||
> * { |
|
||||||
@apply opacity-0; |
|
||||||
transform: translateX(100%); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
/** Split pane CSS */ |
|
||||||
|
|
||||||
.nc-view-sidebar-content-resizable-wrapper > { |
|
||||||
.splitpanes__splitter { |
|
||||||
width: 0 !important; |
|
||||||
position: relative; |
|
||||||
overflow: visible; |
|
||||||
} |
|
||||||
.splitpanes__splitter:before { |
|
||||||
@apply bg-transparent; |
|
||||||
width: 1px; |
|
||||||
content: ''; |
|
||||||
position: absolute; |
|
||||||
left: -2px; |
|
||||||
top: 0; |
|
||||||
height: 100%; |
|
||||||
z-index: 40; |
|
||||||
} |
|
||||||
|
|
||||||
.splitpanes__splitter:hover:before { |
|
||||||
@apply bg-scrollbar; |
|
||||||
z-index: 40; |
|
||||||
width: 4px !important; |
|
||||||
left: -2px; |
|
||||||
} |
|
||||||
|
|
||||||
.splitpanes--dragging .splitpanes__splitter:before { |
|
||||||
@apply bg-scrollbar; |
|
||||||
z-index: 40; |
|
||||||
width: 10px !important; |
|
||||||
left: -2px; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
.splitpanes--dragging > .splitpanes__splitter::before { |
|
||||||
@apply w-1 mr-0 bg-scrollbar; |
|
||||||
z-index: 40; |
|
||||||
width: 4px !important; |
|
||||||
left: -2px; |
|
||||||
} |
|
||||||
|
|
||||||
.splitpanes--dragging { |
|
||||||
cursor: col-resize; |
|
||||||
} |
|
||||||
|
|
||||||
.nc-view-sidebar-content-resizable-wrapper.hide-resize-bar > { |
|
||||||
.splitpanes__splitter { |
|
||||||
display: none !important; |
|
||||||
background-color: transparent !important; |
|
||||||
} |
|
||||||
} |
|
||||||
</style> |
|
||||||
@ -0,0 +1,5 @@ |
|||||||
|
import type { BaseType } from 'nocodb-sdk' |
||||||
|
|
||||||
|
const isDefaultBase = (base: BaseType) => base.is_meta |
||||||
|
|
||||||
|
export { isDefaultBase } |
||||||
Loading…
Reference in new issue