@object-ui/plugin-detail 3.0.3 → 3.1.0

package/src/DetailView.tsx

@@ -9,6 +9,7 @@
 import * as React from 'react';
 import { 
   cn, 
+  Badge,
   Button, 
   Skeleton,
   DropdownMenu,
@@ -32,12 +33,19 @@ import {
   History, 
   Star,
   StarOff,
+  Check,
+  ChevronLeft,
+  ChevronRight,
 } from 'lucide-react';
 import { DetailSection } from './DetailSection';
 import { DetailTabs } from './DetailTabs';
 import { RelatedList } from './RelatedList';
+import { RecordComments } from './RecordComments';
+import { ActivityTimeline } from './ActivityTimeline';
 import { SchemaRenderer } from '@object-ui/react';
+import { buildExpandFields } from '@object-ui/core';
 import type { DetailViewSchema, DataSource } from '@object-ui/types';
+import { useDetailTranslation } from './useDetailTranslation';
 
 export interface DetailViewProps {
   schema: DetailViewSchema;
@@ -46,6 +54,10 @@ export interface DetailViewProps {
   onEdit?: () => void;
   onDelete?: () => void;
   onBack?: () => void;
+  /** Enable inline editing toggle for detail fields */
+  inlineEdit?: boolean;
+  /** Callback when a field value is saved inline */
+  onFieldSave?: (field: string, value: any, record: any) => void | Promise<void>;
 }
 
 export const DetailView: React.FC<DetailViewProps> = ({
@@ -55,13 +67,21 @@ export const DetailView: React.FC<DetailViewProps> = ({
   onEdit,
   onDelete,
   onBack,
+  inlineEdit = false,
+  onFieldSave,
 }) => {
   const [data, setData] = React.useState<any>(schema.data);
   const [loading, setLoading] = React.useState(!schema.data && !!((schema.api && schema.resourceId) || (dataSource && schema.objectName && schema.resourceId)));
   const [isFavorite, setIsFavorite] = React.useState(false);
+  const [isInlineEditing, setIsInlineEditing] = React.useState(false);
+  const [editedValues, setEditedValues] = React.useState<Record<string, any>>({});
+  const [objectSchema, setObjectSchema] = React.useState<any>(null);
+  const { t } = useDetailTranslation();
 
-  // Fetch data if API or DataSource provided
+  // Fetch objectSchema + data with $expand when DataSource is provided
   React.useEffect(() => {
+    let isMounted = true;
+
     // If inline data provided, use it
      if (schema.data) {
         setData(schema.data);
@@ -71,26 +91,86 @@ export const DetailView: React.FC<DetailViewProps> = ({
 
     if (dataSource && schema.objectName && schema.resourceId) {
       setLoading(true);
-      dataSource.findOne(schema.objectName, schema.resourceId).then((result) => {
-         setData(result);
-         setLoading(false);
+      // Clear stale state when navigating between objects/records
+      setObjectSchema(null);
+      setData(null);
+      const objectName = schema.objectName;
+      const resourceId = schema.resourceId;
+      const prefix = `${objectName}-`;
+
+      // Collect all visible fields from sections and top-level fields
+      const allFields = [
+        ...(schema.sections?.flatMap(s => s.fields) || []),
+        ...(schema.fields || []),
+      ];
+
+      // Load objectSchema first, then fetch data with $expand
+      const schemaPromise = dataSource.getObjectSchema
+        ? dataSource.getObjectSchema(objectName).catch(() => null)
+        : Promise.resolve(null);
+
+      schemaPromise.then((resolvedSchema) => {
+        if (!isMounted) return;
+        setObjectSchema(resolvedSchema);
+
+        // Compute $expand from objectSchema
+        const expandFields = buildExpandFields(resolvedSchema?.fields, allFields);
+        const params = expandFields.length > 0 ? { $expand: expandFields } : undefined;
+
+        const findOnePromise = params
+          ? dataSource.findOne(objectName, resourceId, params)
+          : dataSource.findOne(objectName, resourceId);
+
+        return findOnePromise.then((result) => {
+          if (!isMounted) return;
+          if (result) {
+            setData(result);
+            setLoading(false);
+            return;
+          }
+          // Fallback: try alternate ID format for backward compatibility
+          const resIdStr = String(resourceId);
+          const altId = resIdStr.startsWith(prefix)
+            ? resIdStr.slice(prefix.length)   // strip prefix
+            : `${prefix}${resIdStr}`;          // prepend prefix
+          return (params
+            ? dataSource.findOne(objectName, altId, params)
+            : dataSource.findOne(objectName, altId)
+          ).then((fallbackResult) => {
+            if (isMounted) {
+              setData(fallbackResult);
+              setLoading(false);
+            }
+          }).catch(() => {
+            if (isMounted) {
+              setData(null);
+              setLoading(false);
+            }
+          });
+        });
       }).catch((err) => {
-         console.error('Failed to fetch detail data:', err);
-         setLoading(false);
+         if (isMounted) {
+           console.error('Failed to fetch detail data:', err);
+           setLoading(false);
+         }
       });
     } else if (schema.api && schema.resourceId) {
       setLoading(true);
       fetch(`${schema.api}/${schema.resourceId}`)
         .then(res => res.json())
         .then(result => {
-          setData(result?.data || result);
+          if (isMounted) {
+            setData(result?.data || result);
+          }
         })
         .catch(err => {
           console.error('Failed to fetch detail data:', err);
         })
-        .finally(() => setLoading(false));
+        .finally(() => { if (isMounted) setLoading(false); });
     }
-  }, [schema.api, schema.resourceId]);
+
+    return () => { isMounted = false; };
+  }, [schema.api, schema.resourceId, schema.objectName, dataSource, schema.sections, schema.fields]);
 
   const handleBack = React.useCallback(() => {
     if (onBack) {
@@ -121,7 +201,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
   }, [onEdit, schema]);
 
   const handleDelete = React.useCallback(() => {
-    const confirmMessage = schema.deleteConfirmation || 'Are you sure you want to delete this record?';
+    const confirmMessage = schema.deleteConfirmation || t('detail.deleteConfirmation');
     // Use window.confirm as fallback — the ActionProvider's onConfirm handler
     // will intercept this if wired up via the action system.
     if (window.confirm(confirmMessage)) {
@@ -137,7 +217,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
     // Share functionality - could trigger share dialog or copy link
     if (navigator.share && schema.objectName && schema.resourceId) {
       navigator.share({
-        title: schema.title || 'Record Details',
+        title: schema.title || t('detail.details'),
         text: `${schema.objectName} #${schema.resourceId}`,
         url: window.location.href,
       }).catch((err) => console.log('Share failed:', err));
@@ -168,6 +248,46 @@ export const DetailView: React.FC<DetailViewProps> = ({
     setIsFavorite(!isFavorite);
   }, [isFavorite]);
 
+  const handleInlineEditToggle = React.useCallback(() => {
+    if (isInlineEditing) {
+      // Save changes
+      const changes = Object.entries(editedValues);
+      if (changes.length > 0) {
+        const updatedData = { ...data, ...editedValues };
+        setData(updatedData);
+        changes.forEach(([field, value]) => {
+          onFieldSave?.(field, value, updatedData);
+        });
+      }
+      setEditedValues({});
+    }
+    setIsInlineEditing(!isInlineEditing);
+  }, [isInlineEditing, editedValues, data, onFieldSave]);
+
+  const handleInlineFieldChange = React.useCallback((field: string, value: any) => {
+    setEditedValues(prev => ({ ...prev, [field]: value }));
+  }, []);
+
+  // Keyboard shortcuts for prev/next record navigation (← / →)
+  React.useEffect(() => {
+    if (!schema.recordNavigation) return;
+    const nav = schema.recordNavigation;
+    const handler = (e: KeyboardEvent) => {
+      // Skip when focus is inside an input, textarea, or contenteditable
+      const tag = (e.target as HTMLElement)?.tagName;
+      if (tag === 'INPUT' || tag === 'TEXTAREA' || (e.target as HTMLElement)?.isContentEditable) return;
+      if (e.key === 'ArrowLeft' && nav.currentIndex > 0) {
+        e.preventDefault();
+        nav.onNavigate(nav.recordIds[nav.currentIndex - 1]);
+      } else if (e.key === 'ArrowRight' && nav.currentIndex < nav.recordIds.length - 1) {
+        e.preventDefault();
+        nav.onNavigate(nav.recordIds[nav.currentIndex + 1]);
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [schema.recordNavigation]);
+
   if (loading || schema.loading) {
     return (
       <div className={cn('space-y-4', className)}>
@@ -178,6 +298,23 @@ export const DetailView: React.FC<DetailViewProps> = ({
     );
   }
 
+  if (!data && !schema.data) {
+    return (
+      <div className={cn('flex flex-col items-center justify-center py-16 text-center', className)}>
+        <p className="text-lg font-semibold">{t('detail.recordNotFound')}</p>
+        <p className="text-sm text-muted-foreground mt-1">
+          {t('detail.recordNotFoundDescription')}
+        </p>
+        {(schema.showBack ?? true) && (
+          <Button variant="outline" size="sm" onClick={handleBack} className="mt-4 gap-2">
+            <ArrowLeft className="h-4 w-4" />
+            {t('detail.goBack')}
+          </Button>
+        )}
+      </div>
+    );
+  }
+
   return (
     <TooltipProvider>
       <div className={cn('space-y-6', className)}>
@@ -191,12 +328,23 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     <ArrowLeft className="h-4 w-4" />
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>Back</TooltipContent>
+                <TooltipContent>{t('detail.back')}</TooltipContent>
               </Tooltip>
             )}
             <div className="flex-1 min-w-0">
-              <div className="flex items-center gap-2">
-                <h1 className="text-xl sm:text-2xl font-bold truncate">{schema.title || 'Details'}</h1>
+              <div className="flex items-center gap-2 flex-wrap">
+                <h1 className="text-xl sm:text-2xl font-bold truncate">
+                  {(schema.primaryField && data?.[schema.primaryField]) || schema.title || t('detail.details')}
+                </h1>
+                {schema.summaryFields?.map((fieldName) => {
+                  const val = data?.[fieldName];
+                  if (val === null || val === undefined || val === '') return null;
+                  return (
+                    <Badge key={fieldName} variant="secondary" className="text-xs" aria-label={`${fieldName}: ${val}`}>
+                      {String(val)}
+                    </Badge>
+                  );
+                })}
                 <Tooltip>
                   <TooltipTrigger asChild>
                     <Button 
@@ -213,7 +361,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     </Button>
                   </TooltipTrigger>
                   <TooltipContent>
-                    {isFavorite ? 'Remove from favorites' : 'Add to favorites'}
+                    {isFavorite ? t('detail.removeFromFavorites') : t('detail.addToFavorites')}
                   </TooltipContent>
                 </Tooltip>
               </div>
@@ -228,10 +376,86 @@ export const DetailView: React.FC<DetailViewProps> = ({
           </div>
 
           <div className="flex flex-wrap items-center gap-1.5 shrink-0 w-full sm:w-auto">
+            {/* Prev/Next Record Navigation */}
+            {schema.recordNavigation && (
+              <div className="flex items-center gap-1 mr-2">
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="h-8 w-8"
+                      disabled={schema.recordNavigation.currentIndex <= 0}
+                      onClick={() => {
+                        const nav = schema.recordNavigation!;
+                        if (nav.currentIndex > 0) {
+                          nav.onNavigate(nav.recordIds[nav.currentIndex - 1]);
+                        }
+                      }}
+                    >
+                      <ChevronLeft className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>{t('detail.previousRecord')}</TooltipContent>
+                </Tooltip>
+                <span className="text-xs text-muted-foreground whitespace-nowrap px-1">
+                  {t('detail.recordOf', { current: schema.recordNavigation.currentIndex + 1, total: schema.recordNavigation.recordIds.length })}
+                </span>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="h-8 w-8"
+                      disabled={schema.recordNavigation.currentIndex >= schema.recordNavigation.recordIds.length - 1}
+                      onClick={() => {
+                        const nav = schema.recordNavigation!;
+                        if (nav.currentIndex < nav.recordIds.length - 1) {
+                          nav.onNavigate(nav.recordIds[nav.currentIndex + 1]);
+                        }
+                      }}
+                    >
+                      <ChevronRight className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>{t('detail.nextRecord')}</TooltipContent>
+                </Tooltip>
+              </div>
+            )}
+
             {schema.actions?.map((action, index) => (
               <SchemaRenderer key={index} schema={action} data={data} />
             ))}
 
+            {/* Inline Edit Toggle */}
+            {inlineEdit && (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button 
+                    variant={isInlineEditing ? 'default' : 'outline'} 
+                    size="sm"
+                    onClick={handleInlineEditToggle}
+                    className="gap-2"
+                  >
+                    {isInlineEditing ? (
+                      <>
+                        <Check className="h-4 w-4" />
+                        <span className="hidden sm:inline">{t('detail.save')}</span>
+                      </>
+                    ) : (
+                      <>
+                        <Edit className="h-4 w-4" />
+                        <span className="hidden sm:inline">{t('detail.editInline')}</span>
+                      </>
+                    )}
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent>
+                  {isInlineEditing ? t('detail.saveChanges') : t('detail.editFieldsInline')}
+                </TooltipContent>
+              </Tooltip>
+            )}
+
             {/* Share Button */}
             <Tooltip>
               <TooltipTrigger asChild>
@@ -239,7 +463,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                   <Share2 className="h-4 w-4" />
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>Share</TooltipContent>
+              <TooltipContent>{t('detail.share')}</TooltipContent>
             </Tooltip>
 
             {/* Edit Button */}
@@ -248,10 +472,10 @@ export const DetailView: React.FC<DetailViewProps> = ({
                 <TooltipTrigger asChild>
                   <Button variant="default" onClick={handleEdit} className="gap-2">
                     <Edit className="h-4 w-4" />
-                    <span className="hidden sm:inline">Edit</span>
+                    <span className="hidden sm:inline">{t('detail.edit')}</span>
                   </Button>
                 </TooltipTrigger>
-                <TooltipContent>Edit record</TooltipContent>
+                <TooltipContent>{t('detail.editRecord')}</TooltipContent>
               </Tooltip>
             )}
 
@@ -265,20 +489,20 @@ export const DetailView: React.FC<DetailViewProps> = ({
                     </Button>
                   </DropdownMenuTrigger>
                 </TooltipTrigger>
-                <TooltipContent>More actions</TooltipContent>
+                <TooltipContent>{t('detail.moreActions')}</TooltipContent>
               </Tooltip>
               <DropdownMenuContent align="end" className="w-[calc(100vw-2rem)] sm:w-48 max-h-[60vh] overflow-y-auto">
                 <DropdownMenuItem onClick={handleDuplicate}>
                   <Copy className="h-4 w-4 mr-2" />
-                  Duplicate
+                  {t('detail.duplicate')}
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={handleExport}>
                   <Download className="h-4 w-4 mr-2" />
-                  Export
+                  {t('detail.export')}
                 </DropdownMenuItem>
                 <DropdownMenuItem onClick={handleViewHistory}>
                   <History className="h-4 w-4 mr-2" />
-                  View history
+                  {t('detail.viewHistory')}
                 </DropdownMenuItem>
                 {schema.showDelete && (
                   <>
@@ -288,7 +512,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
                       className="text-destructive focus:text-destructive"
                     >
                       <Trash2 className="h-4 w-4 mr-2" />
-                      Delete
+                      {t('detail.delete')}
                     </DropdownMenuItem>
                   </>
                 )}
@@ -311,7 +535,10 @@ export const DetailView: React.FC<DetailViewProps> = ({
             <DetailSection
               key={index}
               section={section}
-              data={data}
+              data={{ ...data, ...editedValues }}
+              objectSchema={objectSchema}
+              isEditing={isInlineEditing}
+              onFieldChange={handleInlineFieldChange}
             />
           ))}
         </div>
@@ -322,9 +549,12 @@ export const DetailView: React.FC<DetailViewProps> = ({
         <DetailSection
           section={{
             fields: schema.fields,
-            columns: schema.columns || 2,
+            columns: schema.columns,
           }}
-          data={data}
+          data={{ ...data, ...editedValues }}
+          objectSchema={objectSchema}
+          isEditing={isInlineEditing}
+          onFieldChange={handleInlineFieldChange}
         />
       )}
 
@@ -336,7 +566,7 @@ export const DetailView: React.FC<DetailViewProps> = ({
       {/* Related Lists */}
       {schema.related && schema.related.length > 0 && (
         <div className="space-y-4">
-          <h2 className="text-xl font-semibold">Related</h2>
+          <h2 className="text-xl font-semibold">{t('detail.related')}</h2>
           {schema.related.map((related, index) => (
             <RelatedList
               key={index}
@@ -351,6 +581,19 @@ export const DetailView: React.FC<DetailViewProps> = ({
         </div>
       )}
 
+      {/* Comments */}
+      {schema.comments && (
+        <RecordComments
+          comments={schema.comments}
+          onAddComment={schema.onAddComment}
+        />
+      )}
+
+      {/* Activity Timeline */}
+      {schema.activities && schema.activities.length > 0 && (
+        <ActivityTimeline activities={schema.activities} />
+      )}
+
       {/* Custom Footer */}
       {schema.footer && (
         <div>