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

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 */
+const menuRef = ref<typeof AntMenu>()
-watch(
-  views,
-  (nextViews) => {
-    if (nextViews.length) {
-      activeView.value = nextViews[0]
-    }
-  },
-  { immediate: true },
-)
 
 /** 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
+      const currentItem: Record<string, any> = views.value[oldIndex]
-      console.log(itemEl)
+
+      // 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()
+    emits('deleted')
-
-    console.log(views.value)
   } 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="nc-headline pt-3 px-3 text-xs font-semibold">{{ $t('objects.views') }}</h3>
-    <h3 class="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"

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>