Enhance data handling across components to prioritize data from ListView; update ObjectView, ObjectCalendar, ObjectGantt, ObjectGrid, ObjectKanban, ObjectGallery, ObjectMap, and ObjectTimeline for improved data flow and loading states.

hotlong · hotlong · commit bbca1625f8b5 · 2026-02-04T19:04:11.000+08:00
diff --git a/apps/console/src/components/ObjectView.tsx b/apps/console/src/components/ObjectView.tsx
@@ -145,11 +145,6 @@ export function ObjectView({ dataSource, objects, onEdit }: any) {
                     aggregation: activeView.aggregation,
                     series: activeView.series,
                     config: activeView.config,
-                },
-                gallery: {
-                    imageField: activeView.imageField,
-                    titleField: activeView.titleField || 'name',
-                    subtitleField: activeView.subtitleField
                 }
             }
         };
diff --git a/packages/plugin-calendar/src/ObjectCalendar.tsx b/packages/plugin-calendar/src/ObjectCalendar.tsx
@@ -139,6 +139,7 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
   onDateClick,
   onNavigate,
   onViewChange,
+  ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
@@ -178,6 +179,16 @@ export const ObjectCalendar: React.FC<ObjectCalendarProps> = ({
           return;
         }
 
+        // Prioritize data passed from parent (ListView)
+        if ((schema as any).data || (rest as any).data) {
+            const passedData = (schema as any).data || (rest as any).data;
+            if (Array.isArray(passedData)) {
+                setData(passedData);
+                setLoading(false);
+                return;
+            }
+        }
+
         if (!dataSource) {
           throw new Error('DataSource required for object/api providers');
         }
diff --git a/packages/plugin-gantt/src/ObjectGantt.tsx b/packages/plugin-gantt/src/ObjectGantt.tsx
@@ -128,6 +128,7 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
   dataSource,
   className,
   onTaskClick,
+  ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
@@ -148,6 +149,13 @@ export const ObjectGantt: React.FC<ObjectGanttProps> = ({
     const fetchData = async () => {
       try {
         setLoading(true);
+        // 1. Check for data prop (Unified ListView)
+        if ((rest as any).data && Array.isArray((rest as any).data)) {
+            setData((rest as any).data);
+            setLoading(false);
+            return;
+        }
+
         
         if (hasInlineData && dataConfig?.provider === 'value') {
           setData(dataConfig.items as any[]);
diff --git a/packages/plugin-grid/src/ObjectGrid.tsx b/packages/plugin-grid/src/ObjectGrid.tsx
@@ -108,19 +108,31 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
   onEdit,
   onDelete,
   onRowSelect,
+  ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
   const [objectSchema, setObjectSchema] = useState<any>(null);
 
+  // Check if data is passed directly (from ListView)
+  const passedData = (rest as any).data;
+
   // Resolve bound data if 'bind' property exists
   const boundData = useDataScope(schema.bind);
 
   // Get data configuration (supports both new and legacy formats)
   const rawDataConfig = getDataConfig(schema);
   // Memoize dataConfig using deep comparison to prevent infinite loops
   const dataConfig = React.useMemo(() => {
+    // If we have passed data (highest priority), treat it as value provider
+    if (passedData && Array.isArray(passedData)) {
+        return {
+            provider: 'value',
+            items: passedData
+        };
+    }
+
     // If we have bound data, it takes precedence as inline value
     if (boundData && Array.isArray(boundData)) {
         return {
@@ -129,7 +141,7 @@ export const ObjectGrid: React.FC<ObjectGridProps> = ({
         };
     }
     return rawDataConfig;
-  }, [JSON.stringify(rawDataConfig), boundData]);
+  }, [JSON.stringify(rawDataConfig), boundData, passedData]);
   
   const hasInlineData = dataConfig?.provider === 'value';
 
diff --git a/packages/plugin-kanban/src/ObjectKanban.tsx b/packages/plugin-kanban/src/ObjectKanban.tsx
@@ -22,6 +22,7 @@ export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
   schema,
   dataSource,
   className,
+  ...props
 }) => {
   const [fetchedData, setFetchedData] = useState<any[]>([]);
   const [objectDef, setObjectDef] = useState<any>(null);
@@ -85,14 +86,15 @@ export const ObjectKanban: React.FC<ObjectKanbanProps> = ({
     };
 
     // Trigger fetch if we have an objectName AND verify no inline/bound data overrides it
-    if (schema.objectName && !boundData && !schema.data) {
+    // And NO props.data passed from ListView
+    if (schema.objectName && !boundData && !schema.data && !(props as any).data) {
         fetchData();
     }
     return () => { isMounted = false; };
-  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter]);
+  }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, (props as any).data]);
 
-  // Determine which data to use: bound -> inline -> fetched
-  const rawData = boundData || schema.data || fetchedData;
+  // Determine which data to use: props.data -> bound -> inline -> fetched
+  const rawData = (props as any).data || boundData || schema.data || fetchedData;
 
   // Enhance data with title mapping and ensure IDs
   const effectiveData = useMemo(() => {
diff --git a/packages/plugin-list/src/ListView.tsx b/packages/plugin-list/src/ListView.tsx
@@ -39,13 +39,68 @@ export const ListView: React.FC<ListViewProps> = ({
   const [sortField] = React.useState(schema.sort?.[0]?.field || '');
   const [sortOrder, setSortOrder] = React.useState<'asc' | 'desc'>(schema.sort?.[0]?.order || 'asc');
   const [showFilters, setShowFilters] = React.useState(false);
+  
+  // Data State
+  const dataSource = props.dataSource;
+  const [data, setData] = React.useState<any[]>([]);
+  const [loading, setLoading] = React.useState(false);
 
   const storageKey = React.useMemo(() => {
     return schema.id 
       ? `listview-${schema.objectName}-${schema.id}-view`
       : `listview-${schema.objectName}-view`;
   }, [schema.objectName, schema.id]);
 
+  // Fetch data effect
+  React.useEffect(() => {
+    let isMounted = true;
+    
+    const fetchData = async () => {
+      if (!dataSource || !schema.objectName) return;
+      
+      setLoading(true);
+      try {
+        // Construct filter
+        let filter: any = schema.filters || [];
+        // TODO: Merge with searchTerm and user filters
+        // For now, we rely on the backend/driver to handle $filter
+        
+        // Convert sort to query format
+        // ObjectQL uses simple object: { field: 'asc' }
+        const sort: any = sortField ? { [sortField]: sortOrder } : undefined;
+
+        const results = await dataSource.find(schema.objectName, {
+           $filter: filter,
+           $orderby: sort,
+           $top: 100 // Default pagination limit
+        });
+        
+        let items: any[] = [];
+        if (Array.isArray(results)) {
+            items = results;
+        } else if (results && typeof results === 'object') {
+           if (Array.isArray((results as any).data)) {
+              items = (results as any).data; 
+           } else if (Array.isArray((results as any).value)) {
+              items = (results as any).value;
+           }
+        }
+        
+        if (isMounted) {
+          setData(items);
+        }
+      } catch (err) {
+        console.error("ListView data fetch error:", err);
+      } finally {
+        if (isMounted) setLoading(false);
+      }
+    };
+
+    fetchData();
+    
+    return () => { isMounted = false; };
+  }, [schema.objectName, dataSource, schema.filters, sortField, sortOrder]); // Re-fetch on filter/sort change
+
   // Load saved view preference
   React.useEffect(() => {
     try {
@@ -201,6 +256,11 @@ export const ListView: React.FC<ListViewProps> = ({
           <div className="relative flex-1 max-w-md">
             <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
             <Input
+           schema={viewComponentSchema} 
+           {...props} 
+           data={data} // Pass data to children to avoid double-fetch
+           loading={loading}
+       
               placeholder={`Search ${schema.objectName}...`}
               value={searchTerm}
               onChange={(e) => handleSearchChange(e.target.value)}
diff --git a/packages/plugin-list/src/ObjectGallery.tsx b/packages/plugin-list/src/ObjectGallery.tsx
@@ -19,6 +19,13 @@ export const ObjectGallery = (props: any) => {
 
     useEffect(() => {
         let isMounted = true;
+        
+        // Use data prop if available (from ListView)
+        if ((props.data && Array.isArray(props.data))) {
+            setFetchedData(props.data);
+            return;
+        }
+
         const fetchData = async () => {
             if (!dataSource || !schema.objectName) return;
             if (isMounted) setLoading(true);
@@ -49,13 +56,13 @@ export const ObjectGallery = (props: any) => {
             }
         };
     
-        if (schema.objectName && !boundData && !schema.data) {
+        if (schema.objectName && !boundData && !schema.data && !props.data) {
             fetchData();
         }
         return () => { isMounted = false; };
-      }, [schema.objectName, dataSource, boundData, schema.data, schema.filter]);
+      }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, props.data]);
 
-    const items = boundData || schema.data || fetchedData || [];
+    const items = props.data || boundData || schema.data || fetchedData || [];
     
     // Config
     const imageField = schema.imageField || 'image';
diff --git a/packages/plugin-map/src/ObjectMap.tsx b/packages/plugin-map/src/ObjectMap.tsx
@@ -216,6 +216,7 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
   dataSource,
   className,
   onMarkerClick,
+  ...rest
 }) => {
   const [data, setData] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
@@ -238,6 +239,16 @@ export const ObjectMap: React.FC<ObjectMapProps> = ({
       try {
         setLoading(true);
         
+        // Prioritize data passed via props (from ListView)
+        if ((schema as any).data || (rest as any).data) {
+             const passed = (schema as any).data || (rest as any).data;
+             if (Array.isArray(passed)) {
+                 setData(passed);
+                 setLoading(false);
+                 return;
+             }
+        }
+        
         if (hasInlineData && dataConfig?.provider === 'value') {
           setData(dataConfig.items as any[]);
           setLoading(false);
diff --git a/packages/plugin-timeline/src/ObjectTimeline.tsx b/packages/plugin-timeline/src/ObjectTimeline.tsx
@@ -49,6 +49,7 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
   schema,
   dataSource,
   className,
+  ...props
 }) => {
   const [fetchedData, setFetchedData] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
@@ -89,12 +90,12 @@ export const ObjectTimeline: React.FC<ObjectTimelineProps> = ({
         }
     };
 
-    if (schema.objectName && !boundData && !schema.items) {
+    if (schema.objectName && !boundData && !schema.items && !(props as any).data) {
         fetchData();
     }
-  }, [schema.objectName, dataSource, boundData, schema.items]);
+  }, [schema.objectName, dataSource, boundData, schema.items, (props as any).data]);
 
-  const rawData = boundData || fetchedData;
+  const rawData = (props as any).data || boundData || fetchedData;
 
   // Transform data to items if we have raw data and no explicit items
   let effectiveItems = schema.items;

Original file line number	Diff line number	Diff line change
`@@ -145,11 +145,6 @@ export function ObjectView({ dataSource, objects, onEdit }: any) {`
`145`	`145`	`aggregation: activeView.aggregation,`
`146`	`146`	`series: activeView.series,`
`147`	`147`	`config: activeView.config,`
`148`		`- },`
`149`		`- gallery: {`
`150`		`- imageField: activeView.imageField,`
`151`		`- titleField: activeView.titleField \|\| 'name',`
`152`		`- subtitleField: activeView.subtitleField`
`153`	`148`	`}`
`154`	`149`	`}`
`155`	`150`	`};`