|
|
|
@ -5,6 +5,7 @@ import type { SortableEvent } from 'sortablejs'
|
|
|
|
|
import Sortable from 'sortablejs' |
|
|
|
|
import type { Menu as AntMenu } from 'ant-design-vue' |
|
|
|
|
import { |
|
|
|
|
isDefaultBase as _isDefaultBase, |
|
|
|
|
extractSdkResponseErrorMsg, |
|
|
|
|
message, |
|
|
|
|
onMounted, |
|
|
|
@ -32,6 +33,10 @@ const table = inject(SidebarTableInj)!
|
|
|
|
|
|
|
|
|
|
const { isLeftSidebarOpen } = storeToRefs(useSidebarStore()) |
|
|
|
|
|
|
|
|
|
const { activeTableId } = storeToRefs(useTablesStore()) |
|
|
|
|
|
|
|
|
|
const { isUIAllowed } = useRoles() |
|
|
|
|
|
|
|
|
|
const { isMobileMode } = useGlobal() |
|
|
|
|
|
|
|
|
|
const { $e } = useNuxtApp() |
|
|
|
@ -77,6 +82,13 @@ function markItem(id: string) {
|
|
|
|
|
}, 300) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const isDefaultSource = computed(() => { |
|
|
|
|
const source = base.value?.sources?.find((b) => b.id === table.value.source_id) |
|
|
|
|
if (!source) return false |
|
|
|
|
|
|
|
|
|
return _isDefaultBase(source) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
/** validate view title */ |
|
|
|
|
function validate(view: ViewType) { |
|
|
|
|
if (!view.title || view.title.trim().length < 0) { |
|
|
|
@ -367,31 +379,54 @@ function onOpenModal({
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
|
<a-menu |
|
|
|
|
v-if="views.length" |
|
|
|
|
ref="menuRef" |
|
|
|
|
:class="{ dragging }" |
|
|
|
|
class="nc-views-menu flex flex-col w-full !border-r-0 !bg-inherit" |
|
|
|
|
:selected-keys="selected" |
|
|
|
|
> |
|
|
|
|
<DashboardTreeViewViewsNode |
|
|
|
|
v-for="view of views" |
|
|
|
|
:id="view.id" |
|
|
|
|
:key="view.id" |
|
|
|
|
:view="view" |
|
|
|
|
:on-validate="validate" |
|
|
|
|
class="nc-view-item !rounded-md !px-0.75 !py-0.5 w-full transition-all ease-in duration-100" |
|
|
|
|
<DashboardTreeViewCreateViewBtn |
|
|
|
|
v-if="isUIAllowed('viewCreateOrEdit')" |
|
|
|
|
:class="{ |
|
|
|
|
'bg-gray-200': isMarked === view.id, |
|
|
|
|
'active': activeView?.id === view.id, |
|
|
|
|
[`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true, |
|
|
|
|
'hidden': activeTableId !== table.id && views.length, |
|
|
|
|
'!ml-18 !xs:(ml-19.75)': isDefaultSource, |
|
|
|
|
'!ml-23.5 !xs:(ml-27)': !isDefaultSource, |
|
|
|
|
}" |
|
|
|
|
:data-view-id="view.id" |
|
|
|
|
@change-view="changeView" |
|
|
|
|
@open-modal="onOpenModal" |
|
|
|
|
@delete="openDeleteDialog" |
|
|
|
|
@rename="onRename" |
|
|
|
|
@select-icon="setIcon($event, view)" |
|
|
|
|
/> |
|
|
|
|
> |
|
|
|
|
<div class="flex flex-row items-center hover:text-brand-500 text-gray-500 cursor-pointer rounded-md"> |
|
|
|
|
<div class="flex flex-row items-center pl-1.25 !py-1.5 text-inherit"> |
|
|
|
|
<GeneralIcon icon="plus" /> |
|
|
|
|
<div class="pl-1.75"> |
|
|
|
|
{{ |
|
|
|
|
$t('general.createEntity', { |
|
|
|
|
entity: $t('objects.view'), |
|
|
|
|
}) |
|
|
|
|
}} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</DashboardTreeViewCreateViewBtn> |
|
|
|
|
|
|
|
|
|
<template v-if="views.length"> |
|
|
|
|
<DashboardTreeViewViewsNode |
|
|
|
|
v-for="view of views" |
|
|
|
|
:id="view.id" |
|
|
|
|
:key="view.id" |
|
|
|
|
:view="view" |
|
|
|
|
:on-validate="validate" |
|
|
|
|
class="nc-view-item !rounded-md !px-0.75 !py-0.5 w-full transition-all ease-in duration-100" |
|
|
|
|
:class="{ |
|
|
|
|
'bg-gray-200': isMarked === view.id, |
|
|
|
|
'active': activeView?.id === view.id, |
|
|
|
|
[`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true, |
|
|
|
|
}" |
|
|
|
|
:data-view-id="view.id" |
|
|
|
|
@change-view="changeView" |
|
|
|
|
@open-modal="onOpenModal" |
|
|
|
|
@delete="openDeleteDialog" |
|
|
|
|
@rename="onRename" |
|
|
|
|
@select-icon="setIcon($event, view)" |
|
|
|
|
/> |
|
|
|
|
</template> |
|
|
|
|
</a-menu> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|