vasuzex 2.3.11 → 2.3.13

package/framework/Database/Model.js

@@ -859,14 +859,22 @@ export class Model extends GuruORMModel {
     if (this.timestamps && this.updatedAt) {
       if (!Object.prototype.hasOwnProperty.call(this, '_cachedUpdateFn')) {
         const modelClass = this;
-        // query.update is EloquentBuilder.prototype.update — a stable reference
-        // captured once and reused for the lifetime of this model class.
-        const protoUpdate = query.update;
+        // IMPORTANT: Do NOT capture `query.update` here. `query` is a Proxy, and
+        // accessing `.update` on a Proxy returns a new wrapper closure that hardcodes
+        // the specific builder instance (`target`) from that call. Caching that wrapper
+        // means all subsequent `.update()` calls would execute against the ORIGINAL
+        // builder's QueryBuilder (from the first call), ignoring the current query's
+        // WHERE clauses (e.g. the per-record `WHERE id = ?` clause would be lost).
+        //
+        // Instead, use `this.query.update(data)` directly. When _cachedUpdateFn is
+        // invoked, `this` is the current EloquentBuilder instance (set by the Proxy's
+        // get trap via `value.apply(target, args)`), so `this.query` is the correct
+        // underlying QueryBuilder with all accumulated WHERE clauses.
         this._cachedUpdateFn = async function timestampedUpdate(data) {
           if (data[modelClass.updatedAt] === undefined) {
             data[modelClass.updatedAt] = new Date();
           }
-          return protoUpdate.call(this, data);
+          return this.query.update(data);
         };
       }
       query.update = this._cachedUpdateFn;

package/frontend/react-ui/components/DataTable/DataTable.jsx

@@ -169,7 +169,13 @@ export function DataTable(props) {
   const [statusFilter, setStatusFilter] = React.useState(urlState.statusFilter);
   const [limit, setLimit] = React.useState(urlState.limit);
   const [columnSearch, setColumnSearch] = React.useState(urlState.columnSearch);
-  
+  // Debounced version of columnSearch — API is only called once the user pauses typing
+  const [debouncedColumnSearch, setDebouncedColumnSearch] = React.useState(urlState.columnSearch);
+  const columnSearchDebounceRef = React.useRef(null);
+
+  // Abort controller for in-flight requests — cancelled whenever new fetch params arrive
+  const abortControllerRef = React.useRef(null);
+
   const [data, setData] = React.useState([]);
   const [loading, setLoading] = React.useState(false);
   const [totalPages, setTotalPages] = React.useState(1);
@@ -283,6 +289,22 @@ export function DataTable(props) {
     }
   }, [location?.search, hasReactRouter, loadStateFromURL]);
 
+  // Debounce columnSearch — user sees immediate input response, but API call waits 400ms
+  // Also syncs back if columnSearch is set programmatically (URL restore / browser back)
+  React.useEffect(() => {
+    if (columnSearchDebounceRef.current) {
+      clearTimeout(columnSearchDebounceRef.current);
+    }
+    columnSearchDebounceRef.current = setTimeout(() => {
+      setDebouncedColumnSearch(columnSearch);
+    }, 400);
+    return () => {
+      if (columnSearchDebounceRef.current) {
+        clearTimeout(columnSearchDebounceRef.current);
+      }
+    };
+  }, [columnSearch]);
+
   const handleStatusToggle = async (row) => {
     if (!toggleLink) return;
     try {
@@ -298,12 +320,19 @@ export function DataTable(props) {
     }
   };
   
-  // Reset page to 1 when columnSearch changes
+  // Reset page to 1 when debouncedColumnSearch changes
   React.useEffect(() => {
     setPage(1);
-  }, [columnSearch]);
+  }, [debouncedColumnSearch]);
 
   const fetchData = React.useCallback(async () => {
+    // Cancel any in-flight request before starting a new one
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+    const signal = abortControllerRef.current.signal;
+
     setLoading(true);
     try {
       const params = new URLSearchParams({
@@ -314,14 +343,14 @@ export function DataTable(props) {
       });
       if (statusFilter !== "all") params.append("isActive", statusFilter);
       if (search) params.append("search", search);
-      // Add column search params
-      Object.entries(columnSearch).forEach(([field, value]) => {
+      // Add debounced column search params
+      Object.entries(debouncedColumnSearch).forEach(([field, value]) => {
         if (value) params.append(`columnSearch[${field}]`, value);
       });
 
       // Properly append params to apiUrl (check if apiUrl already has query params)
       const separator = apiUrl.includes('?') ? '&' : '?';
-      const result = await api.get(`${apiUrl}${separator}${params}`);
+      const result = await api.get(`${apiUrl}${separator}${params}`, { signal });
 
       // Handle nested data structure: result.data.data OR result.data.items
       const items = Array.isArray(result.data)
@@ -333,13 +362,16 @@ export function DataTable(props) {
       setTotalPages(pagination?.totalPages || 1);
       setTotalItems(pagination?.total || 0);
     } catch (err) {
+      // Ignore abort errors — they are expected when a newer request supersedes this one
+      if (err && err.name === 'AbortError') return;
+      if (err && err.code === 'ERR_CANCELED') return;
       setData([]);
       setTotalPages(1);
       setTotalItems(0);
     } finally {
       setLoading(false);
     }
-  }, [api, apiUrl, page, sortBy, sortOrder, statusFilter, limit, search, columnSearch]);
+  }, [api, apiUrl, page, sortBy, sortOrder, statusFilter, limit, search, debouncedColumnSearch]);
 
   // Trigger fetchData for main params
   React.useEffect(() => {
@@ -360,6 +392,15 @@ export function DataTable(props) {
     }
   }, [refreshKey, fetchData]);
 
+  // Abort any in-flight request when the component unmounts
+  React.useEffect(() => {
+    return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
+    };
+  }, []);
+
   const handleSort = (field) => {
     if (sortBy === field) {
       setSortOrder((prev) => (prev === "asc" ? "desc" : "asc"));

package/jsconfig.json

@@ -14,6 +14,7 @@
     },
     "module": "esnext",
     "moduleResolution": "node",
+    "ignoreDeprecations": "6.0",
     "target": "es2020",
     "lib": ["es2020"],
     "allowSyntheticDefaultImports": true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vasuzex",
-  "version": "2.3.11",
+  "version": "2.3.13",
   "description": "Laravel-inspired framework for Node.js monorepos - V2 with optimized dependencies",
   "type": "module",
   "main": "./framework/index.js",
@@ -108,7 +108,7 @@
     "express-rate-limit": "^8.2.1",
     "firebase-admin": "^13.6.0",
     "fs-extra": "^11.3.2",
-    "guruorm": "^2.1.23",
+    "guruorm": "^2.1.24",
     "helmet": "^8.1.0",
     "inquirer": "^9.3.8",
     "ip2location-nodejs": "^9.7.0",