|
|
|
@ -1,12 +1,11 @@ |
|
|
|
<script lang="ts" setup> |
|
|
|
<script lang="ts" setup> |
|
|
|
import type { ViewType, ViewTypes } from 'nocodb-sdk' |
|
|
|
import type { ViewType } from 'nocodb-sdk' |
|
|
|
|
|
|
|
import { ViewTypes } from 'nocodb-sdk' |
|
|
|
import type { SortableEvent } from 'sortablejs' |
|
|
|
import type { SortableEvent } from 'sortablejs' |
|
|
|
import type { Menu as AntMenu } from 'ant-design-vue' |
|
|
|
|
|
|
|
import type { Ref } from 'vue' |
|
|
|
|
|
|
|
import Sortable from 'sortablejs' |
|
|
|
import Sortable from 'sortablejs' |
|
|
|
|
|
|
|
import type { Menu as AntMenu } from 'ant-design-vue' |
|
|
|
import { |
|
|
|
import { |
|
|
|
ActiveViewInj, |
|
|
|
ActiveViewInj, |
|
|
|
ViewListInj, |
|
|
|
|
|
|
|
extractSdkResponseErrorMsg, |
|
|
|
extractSdkResponseErrorMsg, |
|
|
|
inject, |
|
|
|
inject, |
|
|
|
message, |
|
|
|
message, |
|
|
|
@ -22,9 +21,9 @@ import { |
|
|
|
watch, |
|
|
|
watch, |
|
|
|
} from '#imports' |
|
|
|
} from '#imports' |
|
|
|
|
|
|
|
|
|
|
|
const emits = defineEmits<Emits>() |
|
|
|
interface Props { |
|
|
|
|
|
|
|
views: ViewType[] |
|
|
|
const { t } = useI18n() |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
interface Emits { |
|
|
|
interface Emits { |
|
|
|
(event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string; groupingFieldColumnId?: string }): void |
|
|
|
(event: 'openModal', data: { type: ViewTypes; title?: string; copyViewId?: string; groupingFieldColumnId?: string }): void |
|
|
|
@ -32,12 +31,16 @@ interface Emits { |
|
|
|
(event: 'deleted'): void |
|
|
|
(event: 'deleted'): void |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { views = [] } = defineProps<Props>() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const emits = defineEmits<Emits>() |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { t } = useI18n() |
|
|
|
|
|
|
|
|
|
|
|
const { $e } = useNuxtApp() |
|
|
|
const { $e } = useNuxtApp() |
|
|
|
|
|
|
|
|
|
|
|
const activeView = inject(ActiveViewInj, ref()) |
|
|
|
const activeView = inject(ActiveViewInj, ref()) |
|
|
|
|
|
|
|
|
|
|
|
const views = inject<Ref<ViewType[]>>(ViewListInj, ref([])) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const { api } = useApi() |
|
|
|
const { api } = useApi() |
|
|
|
|
|
|
|
|
|
|
|
const router = useRouter() |
|
|
|
const router = useRouter() |
|
|
|
@ -54,10 +57,8 @@ let isMarked = $ref<string | false>(false) |
|
|
|
|
|
|
|
|
|
|
|
/** Watch currently active view, so we can mark it in the menu */ |
|
|
|
/** Watch currently active view, so we can mark it in the menu */ |
|
|
|
watch(activeView, (nextActiveView) => { |
|
|
|
watch(activeView, (nextActiveView) => { |
|
|
|
const _nextActiveView = nextActiveView as ViewType |
|
|
|
if (nextActiveView && nextActiveView.id) { |
|
|
|
|
|
|
|
selected.value = [nextActiveView.id] |
|
|
|
if (_nextActiveView && _nextActiveView.id) { |
|
|
|
|
|
|
|
selected.value = [_nextActiveView.id] |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
@ -75,7 +76,7 @@ function validate(view: ViewType) { |
|
|
|
return 'View name is required' |
|
|
|
return 'View name is required' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
if (views.value.some((v) => v.title === view.title && v.id !== view.id)) { |
|
|
|
if (views.some((v) => v.title === view.title && v.id !== view.id)) { |
|
|
|
return 'View name should be unique' |
|
|
|
return 'View name should be unique' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@ -93,7 +94,7 @@ async function onSortEnd(evt: SortableEvent) { |
|
|
|
evt.preventDefault() |
|
|
|
evt.preventDefault() |
|
|
|
dragging = false |
|
|
|
dragging = false |
|
|
|
|
|
|
|
|
|
|
|
if (views.value.length < 2) return |
|
|
|
if (views.length < 2) return |
|
|
|
|
|
|
|
|
|
|
|
const { newIndex = 0, oldIndex = 0 } = evt |
|
|
|
const { newIndex = 0, oldIndex = 0 } = evt |
|
|
|
|
|
|
|
|
|
|
|
@ -104,17 +105,17 @@ async function onSortEnd(evt: SortableEvent) { |
|
|
|
const previousEl = children[newIndex - 1] |
|
|
|
const previousEl = children[newIndex - 1] |
|
|
|
const nextEl = children[newIndex + 1] |
|
|
|
const nextEl = children[newIndex + 1] |
|
|
|
|
|
|
|
|
|
|
|
const currentItem = views.value.find((v) => v.id === evt.item.id) |
|
|
|
const currentItem = views.find((v) => v.id === evt.item.id) |
|
|
|
|
|
|
|
|
|
|
|
if (!currentItem || !currentItem.id) return |
|
|
|
if (!currentItem || !currentItem.id) return |
|
|
|
|
|
|
|
|
|
|
|
const previousItem = (previousEl ? views.value.find((v) => v.id === previousEl.id) : {}) as ViewType |
|
|
|
const previousItem = (previousEl ? views.find((v) => v.id === previousEl.id) : {}) as ViewType |
|
|
|
const nextItem = (nextEl ? views.value.find((v) => v.id === nextEl.id) : {}) as ViewType |
|
|
|
const nextItem = (nextEl ? views.find((v) => v.id === nextEl.id) : {}) as ViewType |
|
|
|
|
|
|
|
|
|
|
|
let nextOrder: number |
|
|
|
let nextOrder: number |
|
|
|
|
|
|
|
|
|
|
|
// set new order value based on the new order of the items |
|
|
|
// set new order value based on the new order of the items |
|
|
|
if (views.value.length - 1 === newIndex) { |
|
|
|
if (views.length - 1 === newIndex) { |
|
|
|
nextOrder = parseFloat(String(previousItem.order)) + 1 |
|
|
|
nextOrder = parseFloat(String(previousItem.order)) + 1 |
|
|
|
} else if (newIndex === 0) { |
|
|
|
} else if (newIndex === 0) { |
|
|
|
nextOrder = parseFloat(String(nextItem.order)) / 2 |
|
|
|
nextOrder = parseFloat(String(nextItem.order)) / 2 |
|
|
|
@ -149,9 +150,10 @@ const initSortable = (el: HTMLElement) => { |
|
|
|
onMounted(() => menuRef && initSortable(menuRef.$el)) |
|
|
|
onMounted(() => menuRef && initSortable(menuRef.$el)) |
|
|
|
|
|
|
|
|
|
|
|
/** Navigate to view by changing url param */ |
|
|
|
/** Navigate to view by changing url param */ |
|
|
|
function changeView(view: { id: string; alias?: string; title?: string; type: ViewTypes }) { |
|
|
|
function changeView(view: ViewType) { |
|
|
|
router.push({ params: { viewTitle: view.title || '' } }) |
|
|
|
router.push({ params: { viewTitle: view.title || '' } }) |
|
|
|
if (view.type === 1 && selected.value[0] === view.id) { |
|
|
|
|
|
|
|
|
|
|
|
if (view.type === ViewTypes.FORM && selected.value[0] === view.id) { |
|
|
|
// reload the page if the same form view is clicked |
|
|
|
// reload the page if the same form view is clicked |
|
|
|
// router.go(0) |
|
|
|
// router.go(0) |
|
|
|
// fix me: router.go(0) reloads entire page. need to reload only the form view |
|
|
|
// fix me: router.go(0) reloads entire page. need to reload only the form view |
|
|
|
@ -183,7 +185,7 @@ async function onRename(view: ViewType) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** Open delete modal */ |
|
|
|
/** Open delete modal */ |
|
|
|
function openDeleteDialog(view: Record<string, any>) { |
|
|
|
function openDeleteDialog(view: ViewType) { |
|
|
|
const isOpen = ref(true) |
|
|
|
const isOpen = ref(true) |
|
|
|
|
|
|
|
|
|
|
|
const { close } = useDialog(resolveComponent('DlgViewDelete'), { |
|
|
|
const { close } = useDialog(resolveComponent('DlgViewDelete'), { |
|
|
|
@ -198,7 +200,7 @@ function openDeleteDialog(view: Record<string, any>) { |
|
|
|
// return to the default view |
|
|
|
// return to the default view |
|
|
|
router.replace({ |
|
|
|
router.replace({ |
|
|
|
params: { |
|
|
|
params: { |
|
|
|
viewTitle: views.value[0].title, |
|
|
|
viewTitle: views[0].title, |
|
|
|
}, |
|
|
|
}, |
|
|
|
}) |
|
|
|
}) |
|
|
|
} |
|
|
|
} |
|
|
|
@ -211,17 +213,12 @@ function openDeleteDialog(view: Record<string, any>) { |
|
|
|
close(1000) |
|
|
|
close(1000) |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
watch(views, (nextViews) => { |
|
|
|
|
|
|
|
if (nextViews?.length && (!activeView.value || !nextViews.includes(activeView.value))) { |
|
|
|
|
|
|
|
activeView.value = nextViews[0] |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
</script> |
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
<template> |
|
|
|
<template> |
|
|
|
<a-menu ref="menuRef" :class="{ dragging }" class="nc-views-menu flex-1" :selected-keys="selected"> |
|
|
|
<a-menu ref="menuRef" :class="{ dragging }" class="nc-views-menu flex-1" :selected-keys="selected"> |
|
|
|
<LazySmartsheetSidebarRenameableMenuItem |
|
|
|
<!-- Lazy load breaks menu item active styles, i.e. styles never change even when active item changes --> |
|
|
|
|
|
|
|
<SmartsheetSidebarRenameableMenuItem |
|
|
|
v-for="view of views" |
|
|
|
v-for="view of views" |
|
|
|
:id="view.id" |
|
|
|
:id="view.id" |
|
|
|
:key="view.id" |
|
|
|
:key="view.id" |
|
|
|
@ -235,7 +232,7 @@ watch(views, (nextViews) => { |
|
|
|
}" |
|
|
|
}" |
|
|
|
@change-view="changeView" |
|
|
|
@change-view="changeView" |
|
|
|
@open-modal="$emit('openModal', $event)" |
|
|
|
@open-modal="$emit('openModal', $event)" |
|
|
|
@delete="openDeleteDialog(view)" |
|
|
|
@delete="openDeleteDialog" |
|
|
|
@rename="onRename" |
|
|
|
@rename="onRename" |
|
|
|
/> |
|
|
|
/> |
|
|
|
</a-menu> |
|
|
|
</a-menu> |
|
|
|
|
Braks
2 years ago
committed by
GitHub