@object-ui/plugin-detail 3.0.3 → 3.1.1

package/src/RelatedList.tsx

@@ -7,9 +7,30 @@
  */
 
 import * as React from 'react';
-import { Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  Badge,
+  Button,
+  Input,
+} from '@object-ui/components';
 import { SchemaRenderer } from '@object-ui/react';
-import type { DataSource } from '@object-ui/types';
+import {
+  Plus,
+  ExternalLink,
+  Edit,
+  Trash2,
+  ChevronLeft,
+  ChevronRight,
+  ArrowUpDown,
+  ChevronDown,
+} from 'lucide-react';
+import type { DataSource, FieldMetadata } from '@object-ui/types';
+import { getCellRenderer } from '@object-ui/fields';
+import { useDetailTranslation } from './useDetailTranslation';
+import { useSafeFieldLabel } from '@object-ui/react';
 
 export interface RelatedListProps {
   title: string;
@@ -20,6 +41,26 @@ export interface RelatedListProps {
   columns?: any[];
   className?: string;
   dataSource?: DataSource;
+  /** Object name for i18n field label resolution */
+  objectName?: string;
+  /** Callback when "New" button is clicked */
+  onNew?: () => void;
+  /** Callback when "View All" button is clicked */
+  onViewAll?: () => void;
+  /** Callback when a row Edit action is clicked */
+  onRowEdit?: (row: any) => void;
+  /** Callback when a row Delete action is clicked */
+  onRowDelete?: (row: any) => void;
+  /** Page size for pagination (enables pagination when set) */
+  pageSize?: number;
+  /** Enable column sorting */
+  sortable?: boolean;
+  /** Enable text filtering */
+  filterable?: boolean;
+  /** Whether the card is collapsible */
+  collapsible?: boolean;
+  /** Whether the card starts collapsed (requires collapsible=true) */
+  defaultCollapsed?: boolean;
 }
 
 export const RelatedList: React.FC<RelatedListProps> = ({
@@ -31,14 +72,46 @@ export const RelatedList: React.FC<RelatedListProps> = ({
   columns,
   className,
   dataSource,
+  objectName,
+  onNew,
+  onViewAll,
+  onRowEdit,
+  onRowDelete,
+  pageSize,
+  sortable = false,
+  filterable = false,
+  collapsible = false,
+  defaultCollapsed = false,
 }) => {
   const [relatedData, setRelatedData] = React.useState(data);
   const [loading, setLoading] = React.useState(false);
+  const [currentPage, setCurrentPage] = React.useState(0);
+  const [sortField, setSortField] = React.useState<string | null>(null);
+  const [sortDirection, setSortDirection] = React.useState<'asc' | 'desc'>('asc');
+  const [filterText, setFilterText] = React.useState('');
+  const [objectSchema, setObjectSchema] = React.useState<any>(null);
+  const [collapsed, setCollapsed] = React.useState(defaultCollapsed);
+  const { t } = useDetailTranslation();
+  const { fieldLabel: resolveFieldLabel } = useSafeFieldLabel();
+
+  // Sync internal state when data prop changes (e.g., parent fetches async data)
+  React.useEffect(() => {
+    setRelatedData(data);
+  }, [data]);
+
+  // Auto-fetch object schema when api/dataSource available but columns missing
+  React.useEffect(() => {
+    if (api && dataSource?.getObjectSchema && !columns?.length) {
+      dataSource.getObjectSchema(api).then(setObjectSchema).catch((err: unknown) => {
+        console.warn(`[RelatedList] Failed to fetch schema for ${api}:`, err);
+      });
+    }
+  }, [api, dataSource, columns]);
 
   React.useEffect(() => {
     if (api && !data.length) {
       setLoading(true);
-      if (dataSource) {
+      if (dataSource && typeof dataSource.find === 'function') {
         dataSource.find(api).then((result) => {
           const items = Array.isArray(result)
             ? result
@@ -66,6 +139,97 @@ export const RelatedList: React.FC<RelatedListProps> = ({
     }
   }, [api, data, dataSource]);
 
+  // Filter data
+  const filteredData = React.useMemo(() => {
+    if (!filterText) return relatedData;
+    const lower = filterText.toLowerCase();
+    return relatedData.filter((row) =>
+      Object.values(row).some((val) =>
+        val !== null && val !== undefined && String(val).toLowerCase().includes(lower)
+      )
+    );
+  }, [relatedData, filterText]);
+
+  // Sort data
+  const sortedData = React.useMemo(() => {
+    if (!sortField) return filteredData;
+    return [...filteredData].sort((a, b) => {
+      const aVal = a[sortField];
+      const bVal = b[sortField];
+      if (aVal == null && bVal == null) return 0;
+      if (aVal == null) return 1;
+      if (bVal == null) return -1;
+      const cmp = String(aVal).localeCompare(String(bVal), undefined, { numeric: true });
+      return sortDirection === 'asc' ? cmp : -cmp;
+    });
+  }, [filteredData, sortField, sortDirection]);
+
+  // Paginate data
+  const effectivePageSize = pageSize && pageSize > 0 ? pageSize : 0;
+  const totalPages = effectivePageSize ? Math.max(1, Math.ceil(sortedData.length / effectivePageSize)) : 1;
+  const paginatedData = effectivePageSize
+    ? sortedData.slice(currentPage * effectivePageSize, (currentPage + 1) * effectivePageSize)
+    : sortedData;
+
+  // Reset to first page when filter/sort changes
+  React.useEffect(() => {
+    setCurrentPage(0);
+  }, [filterText, sortField, sortDirection]);
+
+  const handleSort = React.useCallback((field: string) => {
+    if (sortField === field) {
+      setSortDirection((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortField(field);
+      setSortDirection('asc');
+    }
+  }, [sortField]);
+
+  const handleDeleteRow = React.useCallback((row: any) => {
+    if (window.confirm(t('detail.deleteRowConfirmation'))) {
+      onRowDelete?.(row);
+    }
+  }, [onRowDelete, t]);
+
+  // Generate effective columns from explicit prop or object schema fields
+  const effectiveColumns = React.useMemo(() => {
+    if (columns && columns.length > 0) return columns;
+    if (!objectSchema?.fields) return [];
+    const resolvedObjectName = objectName || api || '';
+    return Object.entries(objectSchema.fields)
+      .filter(([key]) => !key.startsWith('_'))
+      .map(([key, def]: [string, any]) => {
+        const col: any = {
+          accessorKey: key,
+          header: resolveFieldLabel(resolvedObjectName, key, def.label || key),
+        };
+        // Add type-aware cell renderer for typed fields
+        if (def.type) {
+          const CellRenderer = getCellRenderer(def.type);
+          if (CellRenderer) {
+            const fieldMeta: FieldMetadata = {
+              name: key,
+              label: def.label || key,
+              type: def.type,
+              ...(def.options && { options: def.options }),
+              ...(def.currency && { currency: def.currency }),
+              ...(def.precision !== undefined && { precision: def.precision }),
+              ...(def.format && { format: def.format }),
+              ...((def.reference_to || def.reference) && { reference_to: def.reference_to || def.reference }),
+              ...(def.reference_field && { reference_field: def.reference_field }),
+            };
+            col.cell = (value: any) => {
+              if (value === null || value === undefined) {
+                return React.createElement('span', { className: 'text-muted-foreground/50 text-xs italic' }, '—');
+              }
+              return React.createElement(CellRenderer, { value, field: fieldMeta });
+            };
+          }
+        }
+        return col;
+      });
+  }, [columns, objectSchema, objectName, api, resolveFieldLabel]);
+
   const viewSchema = React.useMemo(() => {
     if (schema) return schema;
 
@@ -75,44 +239,175 @@ export const RelatedList: React.FC<RelatedListProps> = ({
       case 'table':
         return {
           type: 'data-table',
-          data: relatedData,
-          columns: columns || [],
-          pagination: relatedData.length > 10,
-          pageSize: 10,
+          data: paginatedData,
+          columns: effectiveColumns,
+          pagination: false, // We handle pagination ourselves
+          pageSize: effectivePageSize || 10,
         };
       case 'list':
         return {
           type: 'data-list',
-          data: relatedData,
+          data: paginatedData,
         };
       default:
         return { type: 'div', children: 'No view configured' };
     }
-  }, [type, relatedData, columns, schema]);
+  }, [type, paginatedData, effectiveColumns, schema, effectivePageSize]);
+
+  const hasRowActions = !!onRowEdit || !!onRowDelete;
+
+  const headerClassName = collapsible ? 'cursor-pointer select-none' : undefined;
+  const handleHeaderClick = collapsible ? () => setCollapsed((c) => !c) : undefined;
 
   return (
     <Card className={className}>
-      <CardHeader>
+      <CardHeader className={headerClassName} onClick={handleHeaderClick}>
         <CardTitle className="flex items-center justify-between">
-          <span>{title}</span>
-          <span className="text-sm font-normal text-muted-foreground">
-            {relatedData.length} record{relatedData.length !== 1 ? 's' : ''}
-          </span>
+          <div className="flex items-center gap-2">
+            {collapsible && (
+              collapsed
+                ? (<ChevronRight className="h-4 w-4 text-muted-foreground" />)
+                : (<ChevronDown className="h-4 w-4 text-muted-foreground" />)
+            )}
+            <span>{title}</span>
+            <Badge variant="secondary" className="text-xs font-normal" aria-label={`${relatedData.length} records`}>
+              {relatedData.length}
+            </Badge>
+          </div>
+          <div className="flex items-center gap-1">
+            {onNew && (
+              <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onNew(); }} className="gap-1 h-7 text-xs">
+                <Plus className="h-3.5 w-3.5" />
+                {t('detail.new')}
+              </Button>
+            )}
+            {onViewAll && (
+              <Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); onViewAll(); }} className="gap-1 h-7 text-xs">
+                {t('detail.viewAll')}
+                <ExternalLink className="h-3 w-3" />
+              </Button>
+            )}
+          </div>
         </CardTitle>
       </CardHeader>
-      <CardContent>
+      {!collapsed && <CardContent>
+        {/* Filter bar */}
+        {filterable && relatedData.length > 0 && (
+          <div className="mb-3">
+            <Input
+              placeholder={t('detail.filterPlaceholder')}
+              value={filterText}
+              onChange={(e) => setFilterText(e.target.value)}
+              className="h-8 text-sm"
+            />
+          </div>
+        )}
+
+        {/* Sortable column headers */}
+        {sortable && effectiveColumns && effectiveColumns.length > 0 && relatedData.length > 0 && (
+          <div className="flex flex-wrap gap-1 mb-3">
+            {effectiveColumns.map((col: any) => {
+              const field = col.accessorKey || col.field || col.name;
+              if (!field) return null;
+              const label = col.header || col.label || field;
+              const isActive = sortField === field;
+              return (
+                <Button
+                  key={field}
+                  variant={isActive ? 'secondary' : 'ghost'}
+                  size="sm"
+                  className="gap-1 h-7 text-xs"
+                  onClick={() => handleSort(field)}
+                >
+                  <ArrowUpDown className="h-3 w-3" />
+                  {label}
+                  {isActive && (sortDirection === 'asc' ? ' ↑' : ' ↓')}
+                </Button>
+              );
+            })}
+          </div>
+        )}
+
         {loading ? (
           <div className="flex items-center justify-center py-8 text-muted-foreground">
-            Loading...
+            {t('detail.loading')}
           </div>
         ) : relatedData.length === 0 ? (
           <div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
-            No related records found
+            {t('detail.noRelatedRecords')}
           </div>
         ) : (
-          <SchemaRenderer schema={viewSchema} />
+          <>
+            <SchemaRenderer schema={viewSchema} />
+
+            {/* Row-level actions (rendered as a simple action list below data) */}
+            {hasRowActions && paginatedData.length > 0 && (
+              <div className="mt-2 space-y-1" data-testid="row-actions">
+                {paginatedData.map((row, idx) => (
+                  <div key={row.id || idx} className="flex items-center justify-between px-2 py-1 text-xs border-b last:border-b-0">
+                    <span className="truncate text-muted-foreground">
+                      {row.name || row.title || row.id || `Row ${idx + 1}`}
+                    </span>
+                    <div className="flex items-center gap-1">
+                      {onRowEdit && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 text-xs gap-1 px-2"
+                          onClick={() => onRowEdit(row)}
+                        >
+                          <Edit className="h-3 w-3" />
+                          {t('detail.editRow')}
+                        </Button>
+                      )}
+                      {onRowDelete && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-6 text-xs gap-1 px-2 text-destructive hover:text-destructive"
+                          onClick={() => handleDeleteRow(row)}
+                        >
+                          <Trash2 className="h-3 w-3" />
+                          {t('detail.deleteRow')}
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
+        )}
+
+        {/* Pagination controls */}
+        {effectivePageSize > 0 && sortedData.length > effectivePageSize && (
+          <div className="flex items-center justify-between mt-3 pt-3 border-t">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 text-xs gap-1"
+              disabled={currentPage === 0}
+              onClick={() => setCurrentPage((p) => Math.max(0, p - 1))}
+            >
+              <ChevronLeft className="h-3 w-3" />
+              {t('detail.previousPage')}
+            </Button>
+            <span className="text-xs text-muted-foreground">
+              {t('detail.pageOf', { current: currentPage + 1, total: totalPages })}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-7 text-xs gap-1"
+              disabled={currentPage >= totalPages - 1}
+              onClick={() => setCurrentPage((p) => Math.min(totalPages - 1, p + 1))}
+            >
+              {t('detail.nextPage')}
+              <ChevronRight className="h-3 w-3" />
+            </Button>
+          </div>
         )}
-      </CardContent>
+      </CardContent>}
     </Card>
   );
 };

package/src/RelationshipGraph.tsx

@@ -0,0 +1,286 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import * as React from 'react';
+import { cn, Card, CardHeader, CardTitle, CardContent } from '@object-ui/components';
+import { Network } from 'lucide-react';
+
+export interface GraphNode {
+  id: string;
+  label: string;
+  type?: string;
+  relatedRecords?: GraphNode[];
+}
+
+export interface RelationshipGraphProps {
+  record: GraphNode;
+  relatedRecords: GraphNode[];
+  levels?: number;
+  onNodeClick?: (nodeId: string) => void;
+  className?: string;
+}
+
+interface LayoutNode {
+  id: string;
+  label: string;
+  type?: string;
+  x: number;
+  y: number;
+  level: number;
+}
+
+interface LayoutEdge {
+  fromId: string;
+  toId: string;
+  fromX: number;
+  fromY: number;
+  toX: number;
+  toY: number;
+}
+
+const NODE_RADIUS = 28;
+const LEVEL_COLORS = [
+  'fill-primary stroke-primary',
+  'fill-blue-500 stroke-blue-500',
+  'fill-emerald-500 stroke-emerald-500',
+  'fill-amber-500 stroke-amber-500',
+];
+const LEVEL_TEXT_COLORS = [
+  'fill-primary-foreground',
+  'fill-white',
+  'fill-white',
+  'fill-white',
+];
+
+/** Compute layout positions for nodes in concentric rings. */
+function computeLayout(
+  center: GraphNode,
+  relatedRecords: GraphNode[],
+  levels: number,
+  width: number,
+  height: number,
+): { nodes: LayoutNode[]; edges: LayoutEdge[] } {
+  const nodes: LayoutNode[] = [];
+  const edges: LayoutEdge[] = [];
+  const seen = new Set<string>();
+
+  const cx = width / 2;
+  const cy = height / 2;
+
+  // Center node
+  nodes.push({ id: center.id, label: center.label, type: center.type, x: cx, y: cy, level: 0 });
+  seen.add(center.id);
+
+  // Level 1: direct relations
+  const ringRadius1 = Math.min(width, height) * 0.32;
+  const level1Nodes = relatedRecords.filter((r) => !seen.has(r.id));
+
+  level1Nodes.forEach((node, i) => {
+    const angle = (2 * Math.PI * i) / level1Nodes.length - Math.PI / 2;
+    const x = cx + ringRadius1 * Math.cos(angle);
+    const y = cy + ringRadius1 * Math.sin(angle);
+    nodes.push({ id: node.id, label: node.label, type: node.type, x, y, level: 1 });
+    edges.push({ fromId: center.id, toId: node.id, fromX: cx, fromY: cy, toX: x, toY: y });
+    seen.add(node.id);
+  });
+
+  // Level 2+: related records of related records
+  if (levels >= 2) {
+    const ringRadius2 = Math.min(width, height) * 0.46;
+    const level2Nodes: { node: GraphNode; parentX: number; parentY: number; parentId: string }[] = [];
+
+    level1Nodes.forEach((parentNode) => {
+      const parentLayoutNode = nodes.find((n) => n.id === parentNode.id);
+      if (!parentLayoutNode) return;
+      const children = (parentNode.relatedRecords || []).filter((r) => !seen.has(r.id));
+      children.forEach((child) => {
+        level2Nodes.push({
+          node: child,
+          parentX: parentLayoutNode.x,
+          parentY: parentLayoutNode.y,
+          parentId: parentNode.id,
+        });
+        seen.add(child.id);
+      });
+    });
+
+    level2Nodes.forEach((item, i) => {
+      const angle = (2 * Math.PI * i) / Math.max(level2Nodes.length, 1) - Math.PI / 2;
+      const x = cx + ringRadius2 * Math.cos(angle);
+      const y = cy + ringRadius2 * Math.sin(angle);
+      nodes.push({
+        id: item.node.id,
+        label: item.node.label,
+        type: item.node.type,
+        x,
+        y,
+        level: 2,
+      });
+      edges.push({
+        fromId: item.parentId,
+        toId: item.node.id,
+        fromX: item.parentX,
+        fromY: item.parentY,
+        toX: x,
+        toY: y,
+      });
+    });
+  }
+
+  return { nodes, edges };
+}
+
+/** Truncate label to fit inside a node circle. */
+function truncateLabel(label: string, maxLen: number = 6): string {
+  if (label.length <= maxLen) return label;
+  return label.slice(0, maxLen - 1) + '…';
+}
+
+export const RelationshipGraph: React.FC<RelationshipGraphProps> = ({
+  record,
+  relatedRecords,
+  levels = 1,
+  onNodeClick,
+  className,
+}) => {
+  const svgRef = React.useRef<SVGSVGElement>(null);
+  const [dimensions, setDimensions] = React.useState({ width: 500, height: 400 });
+  const [hoveredNode, setHoveredNode] = React.useState<string | null>(null);
+
+  // Observe container size
+  React.useEffect(() => {
+    const svg = svgRef.current;
+    if (!svg) return;
+    const parent = svg.parentElement;
+    if (!parent) return;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width } = entry.contentRect;
+        if (width > 0) {
+          setDimensions({ width, height: Math.max(300, width * 0.7) });
+        }
+      }
+    });
+    observer.observe(parent);
+    return () => observer.disconnect();
+  }, []);
+
+  const { nodes, edges } = React.useMemo(
+    () => computeLayout(record, relatedRecords, levels, dimensions.width, dimensions.height),
+    [record, relatedRecords, levels, dimensions],
+  );
+
+  return (
+    <Card className={cn('overflow-hidden', className)}>
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Network className="h-4 w-4" />
+          Relationships
+          <span className="text-sm font-normal text-muted-foreground">
+            ({relatedRecords.length} related)
+          </span>
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <svg
+          ref={svgRef}
+          width="100%"
+          height={dimensions.height}
+          viewBox={`0 0 ${dimensions.width} ${dimensions.height}`}
+          className="select-none"
+        >
+          {/* Edges */}
+          {edges.map((edge, i) => (
+            <line
+              key={`edge-${i}`}
+              x1={edge.fromX}
+              y1={edge.fromY}
+              x2={edge.toX}
+              y2={edge.toY}
+              className="stroke-border"
+              strokeWidth={1.5}
+              strokeOpacity={0.5}
+            />
+          ))}
+
+          {/* Nodes */}
+          {nodes.map((node) => {
+            const isHovered = hoveredNode === node.id;
+            const levelColor = LEVEL_COLORS[Math.min(node.level, LEVEL_COLORS.length - 1)];
+            const textColor = LEVEL_TEXT_COLORS[Math.min(node.level, LEVEL_TEXT_COLORS.length - 1)];
+            const radius = node.level === 0 ? NODE_RADIUS + 6 : NODE_RADIUS;
+
+            return (
+              <g
+                key={node.id}
+                className={cn('cursor-pointer transition-transform', onNodeClick && 'hover:opacity-80')}
+                onClick={() => onNodeClick?.(node.id)}
+                onMouseEnter={() => setHoveredNode(node.id)}
+                onMouseLeave={() => setHoveredNode(null)}
+              >
+                <circle
+                  cx={node.x}
+                  cy={node.y}
+                  r={isHovered ? radius + 3 : radius}
+                  className={levelColor}
+                  fillOpacity={node.level === 0 ? 1 : 0.85}
+                  strokeWidth={2}
+                  strokeOpacity={0.3}
+                />
+                <text
+                  x={node.x}
+                  y={node.y}
+                  textAnchor="middle"
+                  dominantBaseline="central"
+                  className={cn('text-[10px] font-medium pointer-events-none', textColor)}
+                >
+                  {truncateLabel(node.label)}
+                </text>
+                {/* Type label below */}
+                {node.type && (
+                  <text
+                    x={node.x}
+                    y={node.y + radius + 12}
+                    textAnchor="middle"
+                    className="fill-muted-foreground text-[9px] pointer-events-none"
+                  >
+                    {node.type}
+                  </text>
+                )}
+                {/* Tooltip on hover */}
+                {isHovered && (
+                  <>
+                    <rect
+                      x={node.x - 50}
+                      y={node.y - radius - 28}
+                      width={100}
+                      height={20}
+                      rx={4}
+                      className="fill-popover stroke-border"
+                      strokeWidth={1}
+                    />
+                    <text
+                      x={node.x}
+                      y={node.y - radius - 16}
+                      textAnchor="middle"
+                      dominantBaseline="central"
+                      className="fill-popover-foreground text-[10px] pointer-events-none"
+                    >
+                      {node.label}
+                    </text>
+                  </>
+                )}
+              </g>
+            );
+          })}
+        </svg>
+      </CardContent>
+    </Card>
+  );
+};