Browse Source

feat(gui-v2): add sortable to views list

pull/2837/head
braks 2 years ago
parent
commit
30557f5280
  1. 63
      packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
  2. 19
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

63
packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue

@ -1,30 +1,31 @@
<script lang="ts" setup>
import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk'
import Sortable from 'sortablejs'
import type { Menu as AntMenu } from 'ant-design-vue'
import { notification } from 'ant-design-vue'
import RenameableMenuItem from './RenameableMenuItem.vue'
import { inject, onBeforeUnmount, ref, unref, useApi, useNuxtApp, useTabs, useViews, watch } from '#imports'
import { computed, inject, onBeforeUnmount, onMounted, ref, unref, useApi, useNuxtApp, useTabs, watch } from '#imports'
import { extractSdkResponseErrorMsg } from '~/utils'
import type { TabItem } from '~/composables/useTabs'
import { TabType } from '~/composables/useTabs'
import { ActiveViewInj, MetaInj } from '~/context'
import { ActiveViewInj, ViewListInj } from '~/context'
interface Emits {
(event: 'openModal', data: { type: ViewTypes; title?: string }): void
(event: 'deleted'): void
(event: 'sorted'): void
}
const emits = defineEmits<Emits>()
const meta = inject(MetaInj, ref())
const activeView = inject(ActiveViewInj, ref())
const views = inject(ViewListInj, ref([]))
const { $e } = useNuxtApp()
const { addTab } = useTabs()
const { views, loadViews } = useViews(meta)
const { api } = useApi()
/** sortable instance */
@ -33,16 +34,7 @@ let sortable: Sortable
/** Selected view(s) for menu */
const selected = ref<string[]>([])
/** Watch current views and on change set the next active view */
watch(
views,
(nextViews) => {
if (nextViews.length) {
activeView.value = nextViews[0]
}
},
{ immediate: true },
)
const menuRef = ref<typeof AntMenu>()
/** Watch currently active view, so we can mark it in the menu */
watch(activeView, (nextActiveView) => {
@ -75,16 +67,39 @@ function initializeSortable(el: HTMLElement) {
sortable = Sortable.create(el, {
handle: '.nc-drag-icon',
filter: '.nc-headline',
onEnd: async (evt) => {
if (views.value.length < 2) return
const { newIndex = 0, oldIndex = 0 } = evt
const itemEl = evt.item as HTMLLIElement
console.log(itemEl)
const currentItem: Record<string, any> = views.value[oldIndex]
// get items meta of before and after the moved item
const itemBefore: Record<string, any> = views.value[newIndex]
const itemAfter: Record<string, any> = views.value[newIndex + 1]
let nextOrder: number
// set new order value based on the new order of the items
if (views.value.length - 1 === newIndex) {
nextOrder = itemBefore.order + 1
} else if (newIndex === 0) {
nextOrder = itemAfter.order / 2
} else {
nextOrder = (itemBefore.order + itemAfter.order) / 2
}
await api.dbView.update(currentItem.id, { order: nextOrder.toString() })
},
animation: 150,
})
}
onMounted(() => {
initializeSortable(menuRef.value?.$el)
})
// todo: fix view type, alias is missing for some reason?
/** Navigate to view and add new tab if necessary */
function changeView(view: { id: string; alias?: string; title?: string; type: ViewTypes }) {
@ -139,9 +154,7 @@ async function onDelete(view: Record<string, any>) {
duration: 3,
})
await loadViews()
console.log(views.value)
emits('deleted')
} catch (e: any) {
notification.error({
message: await extractSdkResponseErrorMsg(e),
@ -152,14 +165,16 @@ async function onDelete(view: Record<string, any>) {
// telemetry event
$e('a:view:delete', { view: view.type })
}
const sortedViews = computed(() => (views.value as any[]).sort((a, b) => a.order - b.order))
</script>
<template>
<a-menu class="flex-1 max-h-50vh overflow-y-scroll scrollbar-thin-primary" :selected-keys="selected">
<h3 class="pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>
<h3 class="nc-headline pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>
<a-menu ref="menuRef" class="flex-1 max-h-50vh overflow-y-scroll scrollbar-thin-primary" :selected-keys="selected">
<RenameableMenuItem
v-for="view of views"
v-for="view of sortedViews"
:key="view.id"
:view="view"
@change-view="changeView"

19
packages/nc-gui-v2/components/smartsheet/sidebar/index.vue

@ -2,14 +2,14 @@
import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk'
import MenuTop from './MenuTop.vue'
import MenuBottom from './MenuBottom.vue'
import { inject, provide, ref, useApi, useViews } from '#imports'
import { inject, provide, ref, useApi, useViews, watch } from '#imports'
import { ActiveViewInj, MetaInj, ViewListInj } from '~/context'
const meta = inject(MetaInj, ref())
const activeView = inject(ActiveViewInj, ref())
const { views } = useViews(meta)
const { views, loadViews } = useViews(meta)
const { api } = useApi()
@ -27,6 +27,17 @@ let viewCreateTitle = $ref('')
/** is view creation modal open */
let modalOpen = $ref(false)
/** Watch current views and on change set the next active view */
watch(
views,
(nextViews) => {
if (nextViews.length) {
activeView.value = nextViews[0]
}
},
{ immediate: true },
)
/** Open view creation modal */
function openModal({ type, title = '' }: { type: ViewTypes; title: string }) {
modalOpen = true
@ -36,7 +47,7 @@ function openModal({ type, title = '' }: { type: ViewTypes; title: string }) {
/** Handle view creation */
function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
views.value?.push(view)
views.value.push(view)
activeView.value = view
modalOpen = false
}
@ -45,7 +56,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
<template>
<a-layout-sider theme="light" class="shadow" :width="drawerOpen ? 0 : 250">
<div class="flex flex-col h-full">
<MenuTop @open-modal="openModal" />
<MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" />
<MenuBottom @open-modal="openModal" />
</div>

Loading…
Cancel
Save