Add search and sorting to ObjectListView, update API filters

Enhanced the ObjectListView component with search and sorting capabilities, including debounced search input and multi-column sorting. Updated the API request to support filter and sort query parameters. Modified the Knex driver to handle 'contains' operator and nested filter groups correctly. Added 'concurrently' as a dev dependency and updated npm scripts for improved development workflow.

Author: hotlong

package-lock.json

@@ -6,9 +6,10 @@
     "examples/*"
   ],
   "scripts": {
+    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\" --kill-others --names \"SERVER,CLIENT\" -c \"magenta,blue\"",
     "start": "npm run start --workspace=@objectql/server",
-    "server": "npm run dev --workspace=@objectql/server",
-    "client": "npm run dev --workspace=@objectql/client",
+    "dev:server": "npm run dev --workspace=@objectql/server",
+    "dev:client": "npm run dev --workspace=@objectql/client",
     "build": "tsc -b && npm run build --workspaces",
     "test": "npm run test --workspaces",
     "changeset": "changeset",
@@ -24,6 +25,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^20.10.0",
     "@types/supertest": "^6.0.3",
+    "concurrently": "^9.2.1",
     "jest": "^30.2.0",
     "js-yaml": "^4.1.1",
     "supertest": "^7.2.2",

package.json

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Button, Badge, Modal, Spinner, GridView } from '@objectql/ui';
+import { Button, Badge, Modal, Spinner, GridView, Input } from '@objectql/ui';
 import { ObjectForm } from './ObjectForm';
 import { cn } from '../../lib/utils';
 // import { useRouter } from ... passed as prop
@@ -12,13 +12,27 @@ interface ObjectListViewProps {
     objectSchema: any;
 }
 
+interface SortConfig {
+    columnId: string;
+    direction: 'asc' | 'desc';
+}
+
 export function ObjectListView({ objectName, user, isCreating, navigate, objectSchema }: ObjectListViewProps) {
     const [data, setData] = useState<any[]>([]);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [viewMode, setViewMode] = useState<'table' | 'grid'>('table');
+    const [sortConfig, setSortConfig] = useState<SortConfig[]>([]);
+    const [searchTerm, setSearchTerm] = useState('');
 
     const label = objectSchema?.label || objectSchema?.title || objectName;
+
+    // Debounce search term
+    const [debouncedSearch, setDebouncedSearch] = useState(searchTerm);
+    useEffect(() => {
+        const timer = setTimeout(() => setDebouncedSearch(searchTerm), 500);
+        return () => clearTimeout(timer);
+    }, [searchTerm]);
 
     const getFieldLabel = (key: string) => {
         if (!objectSchema || !objectSchema.fields) return key;
@@ -49,7 +63,35 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
         setLoading(true);
         setError(null);
 
-        fetch(`/api/object/${objectName}`, { headers: getHeaders() })
+        const params = new URLSearchParams();
+        if (sortConfig.length > 0) {
+            // API expects sort=field:order or multiple
+             const sortParam = sortConfig.map(s => `${s.columnId}:${s.direction}`).join(',');
+             params.append('sort', sortParam);
+        }
+        
+        if (debouncedSearch) {
+            // Simple search implementation: try to search in name or title or description fields
+            // Or search in all text fields
+            const textFields = objectSchema?.fields ? 
+                Object.entries(objectSchema.fields)
+                    .filter(([_, field]: [string, any]) => !field.type || field.type === 'string')
+                    .map(([key]) => key) 
+                : ['name', 'title', 'description', 'email'];
+                
+            if (textFields.length > 0) {
+                 // Construct array-based filters: [['field', 'contains', 'val'], 'or', ['field2', ...]]
+                 const searchFilters: any[] = [];
+                 textFields.forEach((field, index) => {
+                     if (index > 0) searchFilters.push('or');
+                     searchFilters.push([field, 'contains', debouncedSearch]);
+                 });
+                 // If sending strict JSON array for unified query
+                 params.append('filters', JSON.stringify(searchFilters));
+            }
+        }
+        
+        fetch(`/api/object/${objectName}?${params.toString()}`, { headers: getHeaders() })
             .then(async res => {
                 if (!res.ok) {
                     const contentType = res.headers.get("content-type");
@@ -75,7 +117,7 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
 
     useEffect(() => {
         if (user && objectName) fetchData();
-    }, [objectName, user]);
+    }, [objectName, user, sortConfig, debouncedSearch]);
 
     const handleCreate = (formData: any) => {
         fetch(`/api/object/${objectName}`, {
@@ -171,6 +213,14 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
                          </h3>
                      </div>
                      <div className="flex items-center gap-2">
+                         <div className="w-64">
+                             <Input 
+                                 placeholder="Search..." 
+                                 value={searchTerm}
+                                 onChange={(e) => setSearchTerm(e.target.value)}
+                                 className="h-9"
+                             />
+                         </div>
                          <div className="inline-flex rounded-lg border border-stone-200 bg-stone-50 p-1">
                              <button
                                  onClick={() => setViewMode('table')}
@@ -246,6 +296,8 @@ export function ObjectListView({ objectName, user, isCreating, navigate, objectS
                         onCellEdit={handleCellEdit}
                         onDelete={handleDelete}
                         emptyMessage={`No ${label.toLowerCase()} found`}
+                        enableSorting={true}
+                        onSortChange={setSortConfig}
                     />
                 ) : (
                     <div className="bg-white rounded-xl border border-stone-200 shadow-sm overflow-hidden">

packages/client/src/components/dashboard/ObjectListView.tsx

@@ -22,8 +22,6 @@ export class KnexDriver implements Driver {
     private applyFilters(builder: Knex.QueryBuilder, filters: any) {
         if (!filters || filters.length === 0) return;
 
-        // Simple linear parser handling [cond, 'or', cond, 'and', cond]
-        // Default join is AND.
         let nextJoin = 'and';
 
         for (const item of filters) {
@@ -34,36 +32,40 @@ export class KnexDriver implements Driver {
              }
 
              if (Array.isArray(item)) {
+                 // Heuristic to detect if it is a criterion [field, op, value] or a nested group
                  const [field, op, value] = item;
-                 
-                 // Handle specific operators that map to different knex methods
-                 const apply = (b: any) => {
-                     // b is the builder to apply on (could be root or a where clause)
-                     // But here we call directly on builder using 'where' or 'orWhere'
-                     
-                     // Method selection
-                     let method = nextJoin === 'or' ? 'orWhere' : 'where';
-                     let methodIn = nextJoin === 'or' ? 'orWhereIn' : 'whereIn';
-                     let methodNotIn = nextJoin === 'or' ? 'orWhereNotIn' : 'whereNotIn';
-
-                     switch (op) {
-                         case '=': b[method](field, value); break;
-                         case '!=': b[method](field, '<>', value); break;
-                         case 'in': b[methodIn](field, value); break;
-                         case 'nin': b[methodNotIn](field, value); break;
-                         case 'contains': b[method](field, 'like', `%${value}%`); break; // Simple LIKE
-                         default: b[method](field, op, value);
-                     }
-                 };
+                 const isCriterion = typeof field === 'string' && typeof op === 'string';
+
+                 if (isCriterion) {
+                     // Handle specific operators that map to different knex methods
+                     const apply = (b: any) => {
+                         let method = nextJoin === 'or' ? 'orWhere' : 'where';
+                         let methodIn = nextJoin === 'or' ? 'orWhereIn' : 'whereIn';
+                         let methodNotIn = nextJoin === 'or' ? 'orWhereNotIn' : 'whereNotIn';
+                         
+                         // Fix for 'contains' mapping
+                         if (op === 'contains') {
+                             b[method](field, 'like', `%${value}%`);
+                             return;
+                         }
 
-                 apply(builder);
+                         switch (op) {
+                             case '=': b[method](field, value); break;
+                             case '!=': b[method](field, '<>', value); break;
+                             case 'in': b[methodIn](field, value); break;
+                             case 'nin': b[methodNotIn](field, value); break;
+                             default: b[method](field, op, value);
+                         }
+                     };
+                     apply(builder);
+                 } else {
+                     // Recursive Group
+                     const method = nextJoin === 'or' ? 'orWhere' : 'where';
+                     builder[method]((qb) => {
+                         this.applyFilters(qb, item);
+                     });
+                 }
 
-                 // Reset join to 'and' for subsequent terms unless strictly specified?
-                 // In SQL `A or B and C` means `A or (B and C)`.
-                 // If we chain `.where(A).orWhere(B).where(C)` in Knex:
-                 // It produces `... WHERE A OR B AND C`.
-                 // So linear application matches SQL precedence usually if implicit validation is ok.
-                 // But explicit AND after OR is necessary in our array format.
                  nextJoin = 'and'; 
              }
         }