@object-ui/plugin-detail 0.5.0 → 2.0.0

package/src/DetailView.tsx

@@ -55,43 +55,58 @@ export const DetailView: React.FC<DetailViewProps> = ({
       });
     } else if (schema.api && schema.resourceId) {
       setLoading(true);
-      // TODO: Fetch from API
-      // This would integrate with the data provider
-      setTimeout(() => {
-        setLoading(false);
-      }, 500);
+      fetch(`${schema.api}/${schema.resourceId}`)
+        .then(res => res.json())
+        .then(result => {
+          setData(result?.data || result);
+        })
+        .catch(err => {
+          console.error('Failed to fetch detail data:', err);
+        })
+        .finally(() => setLoading(false));
     }
   }, [schema.api, schema.resourceId]);
 
   const handleBack = React.useCallback(() => {
     if (onBack) {
       onBack();
+    } else if (schema.onNavigate) {
+      // SPA-aware navigation
+      const backUrl = schema.backUrl || (schema.objectName ? `/${schema.objectName}` : '/');
+      schema.onNavigate(backUrl, { replace: true });
     } else if (schema.backUrl) {
       window.location.href = schema.backUrl;
     } else {
       window.history.back();
     }
-  }, [onBack, schema.backUrl]);
+  }, [onBack, schema]);
 
   const handleEdit = React.useCallback(() => {
     if (onEdit) {
       onEdit();
+    } else if (schema.onNavigate && schema.editUrl) {
+      // SPA-aware navigation
+      schema.onNavigate(schema.editUrl);
+    } else if (schema.onNavigate && schema.objectName && schema.resourceId) {
+      // Build edit URL from object + resource
+      schema.onNavigate(`/${schema.objectName}/${schema.resourceId}/edit`);
     } else if (schema.editUrl) {
       window.location.href = schema.editUrl;
     }
-    // TODO: Implement inline edit mode
-    // else {
-    //   setEditMode(true);
-    // }
-  }, [onEdit, schema.editUrl]);
+  }, [onEdit, schema]);
 
   const handleDelete = React.useCallback(() => {
-    // TODO: Replace with proper confirmation dialog component
     const confirmMessage = schema.deleteConfirmation || 'Are you sure you want to delete this record?';
+    // Use window.confirm as fallback — the ActionProvider's onConfirm handler
+    // will intercept this if wired up via the action system.
     if (window.confirm(confirmMessage)) {
       onDelete?.();
+      // Navigate back after deletion if onNavigate available
+      if (schema.onNavigate && schema.objectName) {
+        schema.onNavigate(`/${schema.objectName}`, { replace: true });
+      }
     }
-  }, [onDelete, schema.deleteConfirmation]);
+  }, [onDelete, schema]);
 
   if (loading || schema.loading) {
     return (
@@ -196,6 +211,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
               api={related.api}
               data={related.data}
               columns={related.columns as any}
+              dataSource={dataSource}
             />
           ))}
         </div>

package/src/RelatedList.tsx

@@ -9,6 +9,7 @@
 import * as React from 'react';
 import { Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
 import { SchemaRenderer } from '@object-ui/react';
+import type { DataSource } from '@object-ui/types';
 
 export interface RelatedListProps {
   title: string;
@@ -18,6 +19,7 @@ export interface RelatedListProps {
   schema?: any;
   columns?: any[];
   className?: string;
+  dataSource?: DataSource;
 }
 
 export const RelatedList: React.FC<RelatedListProps> = ({
@@ -28,18 +30,41 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   schema,
   columns,
   className,
+  dataSource,
 }) => {
-  const [relatedData] = React.useState(data);
+  const [relatedData, setRelatedData] = React.useState(data);
   const [loading, setLoading] = React.useState(false);
 
   React.useEffect(() => {
     if (api && !data.length) {
       setLoading(true);
-      // TODO: Fetch data from API
-      // This would integrate with the data provider
-      setLoading(false);
+      if (dataSource) {
+        dataSource.find(api).then((result) => {
+          const items = Array.isArray(result)
+            ? result
+            : Array.isArray((result as any)?.data)
+              ? (result as any).data
+              : [];
+          setRelatedData(items);
+          setLoading(false);
+        }).catch((err) => {
+          console.error('Failed to fetch related data:', err);
+          setLoading(false);
+        });
+      } else {
+        fetch(api)
+          .then(res => res.json())
+          .then(result => {
+            const items = Array.isArray(result) ? result : (result?.data || []);
+            setRelatedData(items);
+          })
+          .catch(err => {
+            console.error('Failed to fetch related data:', err);
+          })
+          .finally(() => setLoading(false));
+      }
     }
-  }, [api, data]);
+  }, [api, data, dataSource]);
 
   const viewSchema = React.useMemo(() => {
     if (schema) return schema;

package/src/index.tsx

@@ -84,3 +84,16 @@ ComponentRegistry.register('related-list', RelatedList, {
     { name: 'columns', type: 'array', label: 'Columns' },
   ],
 });
+
+// Alias for generic view
+ComponentRegistry.register('detail', DetailView, {
+  namespace: 'view',
+  category: 'view',
+  label: 'Detail',
+  icon: 'FileText',
+  inputs: [
+    { name: 'objectName', type: 'string', label: 'Object Name', required: true },
+    { name: 'recordId', type: 'string', label: 'Record ID' },
+    { name: 'fields', type: 'array', label: 'Fields' },
+  ]
+});