fix: table reordering

Signed-off-by: mertmit <mertmit99@gmail.com>

packages/nc-gui/components/dashboard/TreeView.vue

@@ -45,11 +45,11 @@ const [searchActive, toggleSearchActive] = useToggle()
 
 const toggleDialog = inject(ToggleDialogInj, () => {})
 
-let key = $ref(0)
+const keys = $ref<Record<string, number>>({})
 
 const activeKey = ref([])
 
-const menuRef = $ref<HTMLLIElement>()
+const menuRefs = $ref<HTMLLIElement[]>()
 
 let filterQuery = $ref('')
 
@@ -69,14 +69,18 @@ const filteredTables = $computed(() =>
   ),
 )
 
-let sortable: Sortable
+const sortables: Record<string, Sortable> = {}
 
 // todo: replace with vuedraggable
 const initSortable = (el: Element) => {
-  if (sortable) sortable.destroy()
-  sortable = Sortable.create(el as HTMLLIElement, {
+  const base_id = el.getAttribute('nc-base')
+  if (!base_id) return
+  if (sortables[base_id]) sortables[base_id].destroy()
+  Sortable.create(el as HTMLLIElement, {
     handle: '.nc-drag-icon',
     onEnd: async (evt) => {
+      const offset = tables.value.findIndex((table) => table.base_id === base_id)
+
       const { newIndex = 0, oldIndex = 0 } = evt
 
       const itemEl = evt.item as HTMLLIElement
@@ -106,10 +110,14 @@ const initSortable = (el: Element) => {
       }
 
       // update the order of the moved item
-      tables.value?.splice(newIndex, 0, ...tables.value?.splice(oldIndex, 1))
+      tables.value?.splice(newIndex + offset, 0, ...tables.value?.splice(oldIndex + offset, 1))
 
       // force re-render the list
-      key++
+      if (keys[base_id]) {
+        keys[base_id] = keys[base_id] + 1
+      } else {
+        keys[base_id] = 1
+      }
 
       // update the item order
       await $api.dbTable.reorder(item.id as string, {
@@ -121,9 +129,11 @@ const initSortable = (el: Element) => {
 }
 
 watchEffect(() => {
-  if (menuRef) {
+  if (menuRefs) {
+    for (const menuRef of menuRefs) {
       initSortable(menuRef)
     }
+  }
 })
 
 const icon = (table: TableType) => {
@@ -353,21 +363,6 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
                   <a-menu-divider class="my-0" />
 
-                  <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
-                    <a
-                      v-e="['e:datasource:import-request']"
-                      href="https://github.com/nocodb/nocodb/issues/2052"
-                      target="_blank"
-                      class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
-                    >
-                      <MdiOpenInNew class="group-hover:text-accent" />
-                      <!-- Request a data source you need? -->
-                      {{ $t('labels.requestDataSource') }}
-                    </a>
-                  </a-menu-item>
-
-                  <a-menu-divider class="my-0" />
-
                   <a-menu-item-group title="Connect to new datasource" class="!px-0 !mx-0">
                     <a-menu-item key="connect-new-source" @click="toggleDialog(true, 'dataSources', ClientType.MYSQL)">
                       <div class="color-transition nc-project-menu-item group">
@@ -394,15 +389,35 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                       </div>
                     </a-menu-item>
                   </a-menu-item-group>
+
+                  <a-menu-divider class="my-0" />
+
+                  <a-menu-item v-if="isUIAllowed('importRequest')" key="add-new-table" class="py-1 rounded-b">
+                    <a
+                      v-e="['e:datasource:import-request']"
+                      href="https://github.com/nocodb/nocodb/issues/2052"
+                      target="_blank"
+                      class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
+                    >
+                      <MdiOpenInNew class="group-hover:text-accent" />
+                      <!-- Request a data source you need? -->
+                      {{ $t('labels.requestDataSource') }}
+                    </a>
+                  </a-menu-item>
                 </a-menu>
               </template>
             </a-dropdown>
           </div>
 
           <div class="transition-height duration-200 overflow-hidden">
-            <div :key="key" ref="menuRef" class="border-none sortable-list">
-              <div v-for="[index, base] of Object.entries(bases)" :key="`${base.id}-index`">
-                <div v-if="index === '0' && base.enabled">
+            <div class="border-none sortable-list">
+              <div v-for="[index, base] of Object.entries(bases)" :key="`base-${base.id}`">
+                <div
+                  v-if="index === '0' && base.enabled"
+                  ref="menuRefs"
+                  :key="`sortable-${base.id}-${keys[base.id || 0]}`"
+                  :nc-base="base.id"
+                >
                   <div
                     v-for="table of tables.filter((table) => table.base_id === base.id)"
                     :key="table.id"
@@ -479,7 +494,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                   accordion
                   ghost
                 >
-                  <a-collapse-panel :key="index">
+                  <a-collapse-panel :key="`collapse-${base.id}`">
                     <template #header>
                       <div v-if="index !== '0'" class="flex items-center gap-2 text-gray-500 font-weightd">
                         <GeneralBaseLogo :base-type="base.type" />
@@ -572,6 +587,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                         </template>
                       </a-dropdown>
                     </div>
+                    <div ref="menuRefs" :key="`sortable-${base.id}-${keys[base.id || 0]}`" :nc-base="base.id">
                       <div
                         v-for="table of tables.filter((table) => table.base_id === base.id)"
                         :key="table.id"
@@ -642,6 +658,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                           </div>
                         </GeneralTooltip>
                       </div>
+                    </div>
                   </a-collapse-panel>
                 </a-collapse>
               </div>