@finema/core 3.17.2 → 3.19.0

package/dist/runtime/composables/loaderPage.js

@@ -1,5 +1,6 @@
 import { reactive } from "vue";
 import { ObjectHelper } from "../utils/ObjectHelper.js";
+import { createCancelableRequest } from "../helpers/apiCancelHelper.js";
 import {
   apiAddHelper,
   apiDeleteHelper,
@@ -49,7 +50,88 @@ export const usePageLoader = (loaderOptions) => {
     item: null,
     options: {}
   });
+  const requests = {
+    fetch: null,
+    find: null,
+    add: null,
+    update: null,
+    delete: null
+  };
+  const isActiveRequest = (key, currentRequest) => {
+    return requests[key] === currentRequest;
+  };
+  const canUpdateRequest = (key, currentRequest) => {
+    return isActiveRequest(key, currentRequest) || !currentRequest.signal.aborted;
+  };
+  const completeStatus = (status) => ObjectHelper.toCompleteStatus(status);
+  const cancelFetch = () => {
+    const currentRequest = requests.fetch;
+    if (!currentRequest) return;
+    currentRequest.controller.abort();
+    currentRequest.cleanup();
+    requests.fetch = null;
+    fetch.status = completeStatus(fetch.status);
+    fetch.statusNextPage = completeStatus(fetch.statusNextPage);
+  };
+  const cancelFind = () => {
+    const currentRequest = requests.find;
+    if (!currentRequest) return;
+    currentRequest.controller.abort();
+    currentRequest.cleanup();
+    requests.find = null;
+    find.status = completeStatus(find.status);
+  };
+  const cancelAdd = () => {
+    const currentRequest = requests.add;
+    if (!currentRequest) return;
+    currentRequest.controller.abort();
+    currentRequest.cleanup();
+    requests.add = null;
+    add.status = completeStatus(add.status);
+  };
+  const cancelUpdate = () => {
+    const currentRequest = requests.update;
+    if (!currentRequest) return;
+    currentRequest.controller.abort();
+    currentRequest.cleanup();
+    requests.update = null;
+    update.status = completeStatus(update.status);
+  };
+  const cancelDelete = () => {
+    const currentRequest = requests.delete;
+    if (!currentRequest) return;
+    currentRequest.controller.abort();
+    currentRequest.cleanup();
+    requests.delete = null;
+    del.status = completeStatus(del.status);
+  };
+  const cancelAll = () => {
+    cancelFetch();
+    cancelFind();
+    cancelAdd();
+    cancelUpdate();
+    cancelDelete();
+  };
+  const cancelRequestByKey = (key) => {
+    if (key === "fetch") cancelFetch();
+    if (key === "find") cancelFind();
+    if (key === "add") cancelAdd();
+    if (key === "update") cancelUpdate();
+    if (key === "delete") cancelDelete();
+  };
+  const startRequest = (key, externalSignal, autoCancel = true) => {
+    if (autoCancel) cancelRequestByKey(key);
+    const currentRequest = createCancelableRequest(externalSignal);
+    requests[key] = currentRequest;
+    return currentRequest;
+  };
+  const finishRequest = (key, currentRequest) => {
+    currentRequest.cleanup();
+    if (!isActiveRequest(key, currentRequest)) return;
+    requests[key] = null;
+  };
   const clearAll = () => {
+    cancelAll();
     find.status = ObjectHelper.createStatus();
     del.status = ObjectHelper.createStatus();
     add.status = ObjectHelper.createStatus();
@@ -78,138 +160,168 @@ export const usePageLoader = (loaderOptions) => {
     find.status = ObjectHelper.toLoadingStatus(find.status);
   };
   const fetchPage = async (page = 1, query = "", opts) => {
-    await apiFetchHelper(
-      () => ({
-        status: fetch.status,
-        items: fetch.items,
-        options: fetch.options
-      }),
-      (data) => {
-        fetch.status = data;
-      },
-      (data) => {
-        fetch.options = data;
-      },
-      (data) => {
-        fetch.items = data;
-      },
-      page,
-      query,
-      {
-        ...loaderOptions,
-        ...opts
-      }
-    );
+    const currentRequest = startRequest("fetch", opts?.signal);
+    try {
+      await apiFetchHelper(
+        () => ({
+          status: fetch.status,
+          items: fetch.items,
+          options: fetch.options
+        }),
+        (data) => {
+          if (canUpdateRequest("fetch", currentRequest)) fetch.status = data;
+        },
+        (data) => {
+          if (canUpdateRequest("fetch", currentRequest)) fetch.options = data;
+        },
+        (data) => {
+          if (canUpdateRequest("fetch", currentRequest)) fetch.items = data;
+        },
+        page,
+        query,
+        {
+          ...loaderOptions,
+          ...opts,
+          signal: currentRequest.signal
+        }
+      );
+    } finally {
+      finishRequest("fetch", currentRequest);
+    }
   };
   const fetchAll = async (query = "", opts = {}) => {
     opts.params = {
       ...opts.params,
       limit: 99999
     };
-    await apiFetchHelper(
-      () => ({
-        status: fetch.status,
-        items: fetch.items,
-        options: fetch.options
-      }),
-      (data) => {
-        fetch.status = data;
-      },
-      (data) => {
-        fetch.options = data;
-      },
-      (data) => {
-        fetch.items = data;
-      },
-      1,
-      query,
-      {
-        ...loaderOptions,
-        ...opts
-      }
-    );
+    const currentRequest = startRequest("fetch", opts.signal);
+    try {
+      await apiFetchHelper(
+        () => ({
+          status: fetch.status,
+          items: fetch.items,
+          options: fetch.options
+        }),
+        (data) => {
+          if (canUpdateRequest("fetch", currentRequest)) fetch.status = data;
+        },
+        (data) => {
+          if (canUpdateRequest("fetch", currentRequest)) fetch.options = data;
+        },
+        (data) => {
+          if (canUpdateRequest("fetch", currentRequest)) fetch.items = data;
+        },
+        1,
+        query,
+        {
+          ...loaderOptions,
+          ...opts,
+          signal: currentRequest.signal
+        }
+      );
+    } finally {
+      finishRequest("fetch", currentRequest);
+    }
   };
   const findRun = async (id, opts) => {
-    await apiFindHelper(
-      () => ({
-        status: find.status,
-        data: find.item,
-        options: find.options
-      }),
-      (data) => {
-        find.status = data;
-      },
-      (data) => {
-        find.options = data;
-      },
-      (data) => {
-        find.item = data;
-      },
-      id,
-      {
-        ...loaderOptions,
-        ...opts
-      }
-    );
+    const currentRequest = startRequest("find", opts?.signal);
+    try {
+      await apiFindHelper(
+        () => ({
+          status: find.status,
+          data: find.item,
+          options: find.options
+        }),
+        (data) => {
+          if (canUpdateRequest("find", currentRequest)) find.status = data;
+        },
+        (data) => {
+          if (canUpdateRequest("find", currentRequest)) find.options = data;
+        },
+        (data) => {
+          if (canUpdateRequest("find", currentRequest)) find.item = data;
+        },
+        id,
+        {
+          ...loaderOptions,
+          ...opts,
+          signal: currentRequest.signal
+        }
+      );
+    } finally {
+      finishRequest("find", currentRequest);
+    }
   };
   const addRun = async (payload) => {
-    await apiAddHelper(
-      () => ({
-        items: fetch.items,
-        status: add.status,
-        data: add.item,
-        options: add.options
-      }),
-      (data) => {
-        add.status = data;
-      },
-      (data) => {
-        add.options = data;
-      },
-      (data) => {
-        add.item = data;
-      },
-      (data) => {
-        fetch.items = data;
-      },
-      payload.data,
-      {
-        ...loaderOptions,
-        ...payload
-      }
-    );
+    const currentRequest = startRequest("add", payload.signal, false);
+    try {
+      await apiAddHelper(
+        () => ({
+          items: fetch.items,
+          status: add.status,
+          data: add.item,
+          options: add.options
+        }),
+        (data) => {
+          if (canUpdateRequest("add", currentRequest)) add.status = data;
+        },
+        (data) => {
+          if (canUpdateRequest("add", currentRequest)) add.options = data;
+        },
+        (data) => {
+          if (canUpdateRequest("add", currentRequest)) add.item = data;
+        },
+        (data) => {
+          if (canUpdateRequest("add", currentRequest)) fetch.items = data;
+        },
+        payload.data,
+        {
+          ...loaderOptions,
+          ...payload,
+          signal: currentRequest.signal
+        }
+      );
+    } finally {
+      finishRequest("add", currentRequest);
+    }
   };
   const updateRun = async (id, payload) => {
-    await updateHelper(
-      () => ({
-        items: fetch.items,
-        status: update.status,
-        data: update.item,
-        oldData: find.item,
-        options: update.options
-      }),
-      (data) => {
-        update.status = data;
-      },
-      (data) => {
-        update.options = data;
-      },
-      (data) => {
-        update.item = data;
-      },
-      (data) => {
-        fetch.items = data;
-      },
-      (data) => {
-        find.item = data;
-      },
-      id,
-      payload.data,
-      {
-        ...loaderOptions,
-        ...payload
-      }
-    );
+    const currentRequest = startRequest("update", payload.signal, false);
+    try {
+      await updateHelper(
+        () => ({
+          items: fetch.items,
+          status: update.status,
+          data: update.item,
+          oldData: find.item,
+          options: update.options
+        }),
+        (data) => {
+          if (canUpdateRequest("update", currentRequest)) update.status = data;
+        },
+        (data) => {
+          if (canUpdateRequest("update", currentRequest)) update.options = data;
+        },
+        (data) => {
+          if (canUpdateRequest("update", currentRequest)) update.item = data;
+        },
+        (data) => {
+          if (canUpdateRequest("update", currentRequest)) fetch.items = data;
+        },
+        (data) => {
+          if (canUpdateRequest("update", currentRequest)) find.item = data;
+        },
+        id,
+        payload.data,
+        {
+          ...loaderOptions,
+          ...payload,
+          signal: currentRequest.signal
+        }
+      );
+    } finally {
+      finishRequest("update", currentRequest);
+    }
   };
   const fetchSearch = async (query = "", opts) => {
     await fetchPage(1, query, opts);
@@ -219,29 +331,37 @@ export const usePageLoader = (loaderOptions) => {
       page: _page,
       ...params
     } = fetch.options?.request?.params || {};
-    await apiFetchHelper(
-      () => ({
-        status: fetch.status,
-        items: fetch.items,
-        options: fetch.options
-      }),
-      (data) => {
-        fetch.statusNextPage = data;
-      },
-      (data) => {
-        fetch.options = data;
-      },
-      (data) => {
-        fetch.items = [...fetch.items, ...data];
-      },
-      fetch.options.currentPage + 1,
-      fetch.options.search || "",
-      {
-        ...loaderOptions,
-        params,
-        ...opts
-      }
-    );
+    const currentRequest = startRequest("fetch", opts?.signal);
+    try {
+      await apiFetchHelper(
+        () => ({
+          status: fetch.status,
+          items: fetch.items,
+          options: fetch.options
+        }),
+        (data) => {
+          if (canUpdateRequest("fetch", currentRequest)) fetch.statusNextPage = data;
+        },
+        (data) => {
+          if (canUpdateRequest("fetch", currentRequest)) fetch.options = data;
+        },
+        (data) => {
+          if (canUpdateRequest("fetch", currentRequest)) {
+            fetch.items = [...fetch.items, ...data];
+          }
+        },
+        fetch.options.currentPage + 1,
+        fetch.options.search || "",
+        {
+          ...loaderOptions,
+          params,
+          ...opts,
+          signal: currentRequest.signal
+        }
+      );
+    } finally {
+      finishRequest("fetch", currentRequest);
+    }
   };
   const fetchPageChange = async (page, opts) => {
     const {
@@ -254,31 +374,37 @@ export const usePageLoader = (loaderOptions) => {
     });
   };
   const deleteRun = async (id, opts) => {
-    await apiDeleteHelper(
-      () => ({
-        status: del.status,
-        data: del.item,
-        items: fetch.items,
-        options: del.options
-      }),
-      (data) => {
-        del.status = data;
-      },
-      (data) => {
-        del.options = data;
-      },
-      (data) => {
-        del.item = data;
-      },
-      (data) => {
-        fetch.items = data;
-      },
-      id,
-      {
-        ...loaderOptions,
-        ...opts
-      }
-    );
+    const currentRequest = startRequest("delete", opts?.signal, false);
+    try {
+      await apiDeleteHelper(
+        () => ({
+          status: del.status,
+          data: del.item,
+          items: fetch.items,
+          options: del.options
+        }),
+        (data) => {
+          if (canUpdateRequest("delete", currentRequest)) del.status = data;
+        },
+        (data) => {
+          if (canUpdateRequest("delete", currentRequest)) del.options = data;
+        },
+        (data) => {
+          if (canUpdateRequest("delete", currentRequest)) del.item = data;
+        },
+        (data) => {
+          if (canUpdateRequest("delete", currentRequest)) fetch.items = data;
+        },
+        id,
+        {
+          ...loaderOptions,
+          ...opts,
+          signal: currentRequest.signal
+        }
+      );
+    } finally {
+      finishRequest("delete", currentRequest);
+    }
   };
   return {
     // State and methods
@@ -299,6 +425,12 @@ export const usePageLoader = (loaderOptions) => {
     addRun,
     updateRun,
     deleteRun,
+    cancelFetch,
+    cancelFind,
+    cancelAdd,
+    cancelUpdate,
+    cancelDelete,
+    cancelAll,
     clearAll
   };
 };

package/dist/runtime/helpers/apiBaseHelper.d.ts

@@ -1,9 +1,10 @@
-import type { AxiosRequestConfig } from 'axios';
+import { type AxiosRequestConfig } from 'axios';
 import type { IAPIOptions, IStatus } from '../types/lib.js';
 export interface IBaseLoaderOptions {
     isMock?: boolean;
     params?: Record<string, any>;
     expire?: number;
+    signal?: AbortSignal;
     [key: string]: any;
 }
 export interface IRequestContext {
@@ -14,7 +15,9 @@ export interface IRequestContext {
 }
 export declare const checkExpiration: (timestamp: number | undefined, expire?: number) => boolean;
 export declare const bindParamsToUrl: (urlTemplate: string, urlParams?: Record<string, any>) => string;
-export declare const prepareRequestOptions: (baseOptions?: AxiosRequestConfig, requestOptions?: AxiosRequestConfig, params?: Record<string, any>) => AxiosRequestConfig;
+export declare const prepareRequestOptions: (baseOptions?: AxiosRequestConfig, requestOptions?: AxiosRequestConfig, params?: Record<string, any>, signal?: AbortSignal) => AxiosRequestConfig;
+export declare const omitLoaderSignal: <T extends Record<string, any>>(opts: T) => Omit<T, "signal">;
+export declare const toSerializableRequestOptions: (options: AxiosRequestConfig) => Partial<AxiosRequestConfig>;
 export declare const handleApiRequest: <T>(requestContext: IRequestContext, mockData: T | T[] | null, callbacks: {
     onSuccess: (data: T, status?: number) => void;
     onError: (error: any) => void;

package/dist/runtime/helpers/apiBaseHelper.js

@@ -1,3 +1,4 @@
+import axios from "axios";
 import { ObjectHelper } from "../utils/ObjectHelper.js";
 import { NewRequester } from "../lib/Requester.js";
 import { _merge } from "#imports";
@@ -12,12 +13,60 @@ export const bindParamsToUrl = (urlTemplate, urlParams = {}) => {
   });
   return resultUrl;
 };
-export const prepareRequestOptions = (baseOptions, requestOptions, params) => {
+export const prepareRequestOptions = (baseOptions, requestOptions, params, signal) => {
   const options = _merge({}, baseOptions, requestOptions, {
-    params
+    params,
+    ...signal ? {
+      signal
+    } : {}
   });
   return options;
 };
+export const omitLoaderSignal = (opts) => {
+  const {
+    signal: _signal,
+    ...rest
+  } = opts;
+  return rest;
+};
+export const toSerializableRequestOptions = (options) => {
+  const {
+    adapter: _adapter,
+    cancelToken: _cancelToken,
+    paramsSerializer: _paramsSerializer,
+    signal: _signal,
+    transformRequest: _transformRequest,
+    transformResponse: _transformResponse,
+    validateStatus: _validateStatus,
+    ...serializableOptions
+  } = options;
+  return JSON.parse(JSON.stringify(serializableOptions));
+};
+const createAbortError = () => ({
+  code: "ERR_CANCELED",
+  name: "AbortError",
+  message: "Request canceled"
+});
+const isAbortError = (error) => {
+  return axios.isCancel(error) || error?.code === "ERR_CANCELED" || error?.name === "AbortError";
+};
+const wait = (ms, signal) => new Promise((resolve, reject) => {
+  if (signal?.aborted) {
+    reject(createAbortError());
+    return;
+  }
+  const timeout = setTimeout(() => {
+    signal?.removeEventListener?.("abort", abort);
+    resolve();
+  }, ms);
+  const abort = () => {
+    clearTimeout(timeout);
+    reject(createAbortError());
+  };
+  signal?.addEventListener?.("abort", abort, {
+    once: true
+  });
+});
 export const handleApiRequest = async (requestContext, mockData, callbacks) => {
   const {
     url,
@@ -27,13 +76,14 @@ export const handleApiRequest = async (requestContext, mockData, callbacks) => {
   } = requestContext;
   try {
     if (mockData) {
-      await new Promise((resolve) => setTimeout(resolve, 300));
+      await wait(300, options.signal);
       callbacks.onSuccess(mockData);
     } else {
       const response = await NewRequester.create(method, url, data, options);
       callbacks.onSuccess(response.data, response.status);
     }
   } catch (error) {
+    if (isAbortError(error)) return;
     callbacks.onError(error);
   } finally {
     callbacks.onComplete?.();

package/dist/runtime/helpers/apiCancelHelper.d.ts

@@ -0,0 +1,6 @@
+export interface ICancelableRequest {
+    controller: AbortController;
+    signal: AbortSignal;
+    cleanup: () => void;
+}
+export declare const createCancelableRequest: (externalSignal?: AbortSignal) => ICancelableRequest;

package/dist/runtime/helpers/apiCancelHelper.js

@@ -0,0 +1,22 @@
+export const createCancelableRequest = (externalSignal) => {
+  const controller = new AbortController();
+  const abort = () => {
+    controller.abort();
+  };
+  if (externalSignal) {
+    if (externalSignal.aborted) {
+      abort();
+    } else {
+      externalSignal.addEventListener("abort", abort, {
+        once: true
+      });
+    }
+  }
+  return {
+    controller,
+    signal: controller.signal,
+    cleanup: () => {
+      externalSignal?.removeEventListener("abort", abort);
+    }
+  };
+};