@fy-/fws-vue 2.2.94 → 2.2.96

package/components/fws/DataTable.vue

@@ -76,20 +76,29 @@ const hasData = computed(() => data.value && data.value.length > 0)
 const hasExportableColumns = computed(() => props.exportableColumns.length > 0)
 const hasPaging = computed(() => paging.value && paging.value.page_max > 1 && paging.value.page_no)
 
-// Request controller for cancellation
-let currentRequest: AbortController | null = null
+// Request cancellation management
+const currentRequest = ref<AbortController | null>(null)
+// Keep track of the latest request to prevent race conditions
+const requestCounter = ref<number>(0)
 
 async function getData(page: number = 1) {
+  // Increment request counter to track the latest request
+  const thisRequestNumber = requestCounter.value + 1
+  requestCounter.value = thisRequestNumber
+
   // Cancel any ongoing request
-  if (currentRequest) {
-    currentRequest.abort()
+  if (currentRequest.value) {
+    currentRequest.value.abort()
+    currentRequest.value = null
   }
 
   // Create new abort controller for this request
-  currentRequest = new AbortController()
+  currentRequest.value = new AbortController()
+  const signal = currentRequest.value.signal
 
   isLoading.value = true
   eventBus.emit('main-loading', true)
+
   if (route.query.page) page = Number.parseInt(route.query.page.toString())
   const sort: any = {}
   sort[currentSort.value.field] = currentSort.value.direction
@@ -99,32 +108,47 @@ async function getData(page: number = 1) {
     results_per_page: perPage.value,
     page_no: page,
   }
+
   try {
+    // Store controller in local variable for closure safety
+    const localAbortController = currentRequest.value
+
     const r = await restFunction(props.apiPath, 'GET', requestParams, {
       getBody: true,
-      signal: currentRequest.signal,
+      signal,
     })
-    currentPage.value = page
-    data.value = []
-    paging.value = undefined
-    if (r && r.result === 'success') {
-      data.value = r.data
-      paging.value = r.paging
-      eventBus.emit(`${props.id}NewData`, data.value)
+
+    // Only process this response if it's from the most recent request
+    // This prevents race conditions where a slow request returns after a newer one
+    if (thisRequestNumber === requestCounter.value && localAbortController === currentRequest.value) {
+      currentPage.value = page
+      data.value = []
+      paging.value = undefined
+
+      if (r && r.result === 'success') {
+        data.value = r.data
+        paging.value = r.paging
+        eventBus.emit(`${props.id}NewData`, data.value)
+      }
     }
   }
   catch (error) {
-    // Only log error if it's not an abort error
-    if (!(error instanceof DOMException && error.name === 'AbortError')) {
+    // Only log error if it's not an abort error and it's from the current request
+    if (!(error instanceof DOMException && error.name === 'AbortError')
+      && thisRequestNumber === requestCounter.value) {
       console.error('Error fetching data:', error)
     }
   }
   finally {
-    if (currentRequest) {
-      currentRequest = null
+    // Only reset loading state if this is the most recent request
+    if (thisRequestNumber === requestCounter.value) {
+      // Clear the controller reference only if it's still the same one
+      if (currentRequest.value && currentRequest.value.signal === signal) {
+        currentRequest.value = null
+      }
+      isLoading.value = false
+      eventBus.emit('main-loading', false)
     }
-    isLoading.value = false
-    eventBus.emit('main-loading', false)
   }
 }
 

package/components/ui/DefaultModal.vue

@@ -267,7 +267,7 @@ function handleBackdropClick(event: MouseEvent) {
           <!-- Modal panel -->
           <div
             ref="modalRef"
-            :class="`relative ${mSize} max-w-6xl max-h-full ${ofy} bg-white rounded-lg shadow dark:bg-fv-neutral-900`"
+            :class="`relative ${mSize} max-w-6xl max-h-full bg-white rounded-lg shadow dark:bg-fv-neutral-900`"
             :style="{ zIndex }"
             tabindex="-1"
             @click.stop
@@ -293,7 +293,7 @@ function handleBackdropClick(event: MouseEvent) {
               </button>
             </div>
             <!-- Content area -->
-            <div class="p-3 space-y-3">
+            <div class="p-3 space-y-3" :class="ofy">
               <slot />
             </div>
           </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fy-/fws-vue",
-  "version": "2.2.94",
+  "version": "2.2.96",
   "author": "Florian 'Fy' Gasquez <m@fy.to>",
   "license": "MIT",
   "homepage": "https://github.com/fy-to/FWJS#readme",