From 4ad15cd7c81b8d022538e803fa8971c2a1a31584 Mon Sep 17 00:00:00 2001
From: Chavy <chavyleung@gmail.com>
Date: Fri, 14 Jun 2024 18:53:01 +0800
Subject: [PATCH] fix: field sorting will send two requests in weak network
 (#8614)

* fix: field sorting will send two requests in weak network

* chore: optimize code

* chore: wrap handleReorderColumn with try...catch

* chore: optimize code
---
 .../smartsheet/grid/useColumnDrag.ts           | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts b/packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts
index 4613338ae8..fc68a268af 100644
--- a/packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts
+++ b/packages/nc-gui/components/smartsheet/grid/useColumnDrag.ts
@@ -18,6 +18,7 @@ export const useColumnDrag = ({
   const { leftSidebarWidth } = storeToRefs(useSidebarStore())
   const { width } = useWindowSize()
 
+  const isProcessing = ref<boolean>(false)
   const draggedCol = ref<ColumnType | null>(null)
   const dragColPlaceholderDomRef = ref<HTMLElement | null>(null)
   const toBeDroppedColId = ref<string | null>(null)
@@ -106,9 +107,16 @@ export const useColumnDrag = ({
   }
 
   const handleReorderColumn = async () => {
-    dragColPlaceholderDomRef.value!.style.left = '0px'
-    dragColPlaceholderDomRef.value!.style.height = '0px'
-    await reorderColumn(draggedCol.value!.id!, toBeDroppedColId.value!)
+    isProcessing.value = true
+    try {
+      dragColPlaceholderDomRef.value!.style.left = '0px'
+      dragColPlaceholderDomRef.value!.style.height = '0px'
+      await reorderColumn(draggedCol.value!.id!, toBeDroppedColId.value!)
+    } catch (error) {
+      console.error('Failed to reorder column: ', error)
+    } finally {
+      isProcessing.value = false
+    }
     draggedCol.value = null
     toBeDroppedColId.value = null
   }
@@ -180,9 +188,11 @@ export const useColumnDrag = ({
   }
 
   // fallback for safari browser
-  const onDragEnd = (e: DragEvent) => {
+  const onDragEnd = async (e: DragEvent) => {
     e.preventDefault()
 
+    await until(() => !isProcessing.value).toBeTruthy()
+
     if (!e.dataTransfer || !draggedCol.value || !toBeDroppedColId.value) return
 
     handleReorderColumn()