@object-ui/plugin-list 3.0.2 → 3.1.0

package/src/ObjectGallery.tsx

@@ -6,11 +6,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useEffect } from 'react';
-import { useDataScope, useSchemaContext } from '@object-ui/react';
-import { ComponentRegistry } from '@object-ui/core';
-import { cn, Card, CardContent } from '@object-ui/components';
-import type { GalleryConfig } from '@object-ui/types';
+import React, { useState, useEffect, useCallback, useMemo, useContext } from 'react';
+import { useDataScope, SchemaRendererContext, useNavigationOverlay } from '@object-ui/react';
+import { ComponentRegistry, buildExpandFields } from '@object-ui/core';
+import { cn, Card, CardContent, NavigationOverlay } from '@object-ui/components';
+import type { GalleryConfig, ViewNavigationConfig, GroupingConfig } from '@object-ui/types';
+import { ChevronRight, ChevronDown } from 'lucide-react';
 
 export interface ObjectGalleryProps {
     schema: {
@@ -20,6 +21,10 @@ export interface ObjectGalleryProps {
         data?: Record<string, unknown>[];
         className?: string;
         gallery?: GalleryConfig;
+        /** Navigation config for item click behavior */
+        navigation?: ViewNavigationConfig;
+        /** Grouping configuration for sectioned display */
+        grouping?: GroupingConfig;
         /** @deprecated Use gallery.coverField instead */
         imageField?: string;
         /** @deprecated Use gallery.titleField instead */
@@ -29,6 +34,8 @@ export interface ObjectGalleryProps {
     data?: Record<string, unknown>[];
     dataSource?: { find: (name: string, query: unknown) => Promise<unknown> };
     onCardClick?: (record: Record<string, unknown>) => void;
+    /** Callback when a row/item is clicked (overrides NavigationConfig) */
+    onRowClick?: (record: Record<string, unknown>) => void;
 }
 
 const GRID_CLASSES: Record<NonNullable<GalleryConfig['cardSize']>, string> = {
@@ -45,12 +52,20 @@ const ASPECT_CLASSES: Record<NonNullable<GalleryConfig['cardSize']>, string> = {
 
 export const ObjectGallery: React.FC<ObjectGalleryProps> = (props) => {
     const { schema } = props;
-    const context = useSchemaContext();
-    const dataSource = props.dataSource || context.dataSource;
+    const context = useContext(SchemaRendererContext);
+    const dataSource = props.dataSource || context?.dataSource;
     const boundData = useDataScope(schema.bind);
 
     const [fetchedData, setFetchedData] = useState<Record<string, unknown>[]>([]);
     const [loading, setLoading] = useState(false);
+    const [objectDef, setObjectDef] = useState<any>(null);
+
+    // --- NavigationConfig support ---
+    const navigation = useNavigationOverlay({
+        navigation: schema.navigation,
+        objectName: schema.objectName,
+        onRowClick: props.onRowClick ?? props.onCardClick,
+    });
 
     // Resolve GalleryConfig with backwards-compatible fallbacks
     const gallery = schema.gallery;
@@ -60,6 +75,22 @@ export const ObjectGallery: React.FC<ObjectGalleryProps> = (props) => {
     const titleField = gallery?.titleField ?? schema.titleField ?? 'name';
     const visibleFields = gallery?.visibleFields;
 
+    // Fetch object definition for metadata
+    useEffect(() => {
+        let isMounted = true;
+        const fetchMeta = async () => {
+            if (!dataSource || typeof dataSource.getObjectSchema !== 'function' || !schema.objectName) return;
+            try {
+                const def = await dataSource.getObjectSchema(schema.objectName);
+                if (isMounted) setObjectDef(def);
+            } catch (e) {
+                console.warn('Failed to fetch object def for ObjectGallery', e);
+            }
+        };
+        fetchMeta();
+        return () => { isMounted = false; };
+    }, [schema.objectName, dataSource]);
+
     useEffect(() => {
         let isMounted = true;
 
@@ -69,11 +100,14 @@ export const ObjectGallery: React.FC<ObjectGalleryProps> = (props) => {
         }
 
         const fetchData = async () => {
-            if (!dataSource || !schema.objectName) return;
+            if (!dataSource || typeof dataSource.find !== 'function' || !schema.objectName) return;
             if (isMounted) setLoading(true);
             try {
+                // Auto-inject $expand for lookup/master_detail fields
+                const expand = buildExpandFields(objectDef?.fields);
                 const results = await dataSource.find(schema.objectName, {
                     $filter: schema.filter,
+                    ...(expand.length > 0 ? { $expand: expand } : {}),
                 });
 
                 let data: Record<string, unknown>[] = [];
@@ -102,74 +136,168 @@ export const ObjectGallery: React.FC<ObjectGalleryProps> = (props) => {
             fetchData();
         }
         return () => { isMounted = false; };
-    }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, props.data]);
+    }, [schema.objectName, dataSource, boundData, schema.data, schema.filter, props.data, objectDef]);
 
     const items: Record<string, unknown>[] = props.data || boundData || schema.data || fetchedData || [];
 
+    // --- Grouping support ---
+    const groupingFields = schema.grouping?.fields;
+    const isGrouped = !!(groupingFields && groupingFields.length > 0);
+
+    const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>({});
+
+    // Initialize collapsed state from grouping config
+    const defaultCollapsed = useMemo(() => {
+        if (!groupingFields) return false;
+        return groupingFields.some((f) => f.collapsed);
+    }, [groupingFields]);
+
+    const toggleGroup = useCallback((key: string) => {
+        setCollapsedGroups((prev) => ({
+            ...prev,
+            [key]: prev[key] !== undefined ? !prev[key] : !defaultCollapsed,
+        }));
+    }, [defaultCollapsed]);
+
+    const groupedItems = useMemo(() => {
+        if (!isGrouped || !groupingFields) return [];
+        const map = new Map<string, { label: string; items: Record<string, unknown>[] }>();
+        const keyOrder: string[] = [];
+        for (const item of items) {
+            const key = groupingFields.map((f) => String(item[f.field] ?? '')).join(' / ');
+            if (!map.has(key)) {
+                const label = groupingFields
+                    .map((f) => {
+                        const val = item[f.field];
+                        return val !== undefined && val !== null && val !== '' ? String(val) : '(empty)';
+                    })
+                    .join(' / ');
+                map.set(key, { label, items: [] });
+                keyOrder.push(key);
+            }
+            map.get(key)!.items.push(item);
+        }
+        const primaryOrder = groupingFields[0]?.order ?? 'asc';
+        keyOrder.sort((a, b) => {
+            const cmp = a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+            return primaryOrder === 'desc' ? -cmp : cmp;
+        });
+        return keyOrder.map((key) => {
+            const entry = map.get(key)!;
+            const collapsed = key in collapsedGroups ? collapsedGroups[key] : defaultCollapsed;
+            return { key, label: entry.label, items: entry.items, collapsed };
+        });
+    }, [items, groupingFields, isGrouped, collapsedGroups, defaultCollapsed]);
+
     if (loading && !items.length) return <div className="p-4 text-sm text-muted-foreground">Loading Gallery...</div>;
     if (!items.length) return <div className="p-4 text-sm text-muted-foreground">No items to display</div>;
 
-    return (
+    const renderCard = (item: Record<string, unknown>, i: number) => {
+        const id = (item._id ?? item.id ?? i) as string | number;
+        const title = String(item[titleField] ?? 'Untitled');
+        const imageUrl = item[coverField] as string | undefined;
+
+        return (
+            <Card
+                key={id}
+                role="listitem"
+                className={cn(
+                    'group overflow-hidden transition-all hover:shadow-md',
+                    (props.onCardClick || props.onRowClick || schema.navigation) && 'cursor-pointer',
+                )}
+                onClick={() => navigation.handleClick(item)}
+            >
+                <div className={cn('w-full overflow-hidden bg-muted relative', ASPECT_CLASSES[cardSize])}>
+                    {imageUrl ? (
+                        <img
+                            src={imageUrl}
+                            alt={title}
+                            className={cn(
+                                'h-full w-full transition-transform group-hover:scale-105',
+                                coverFit === 'cover' && 'object-cover',
+                                coverFit === 'contain' && 'object-contain',
+                            )}
+                        />
+                    ) : (
+                        <div className="flex h-full w-full items-center justify-center bg-secondary/50 text-muted-foreground">
+                            <span className="text-4xl font-light opacity-20">
+                                {title[0]?.toUpperCase()}
+                            </span>
+                        </div>
+                    )}
+                </div>
+                <CardContent className="p-3 border-t">
+                    <h3 className="font-medium truncate text-sm" title={title}>
+                        {title}
+                    </h3>
+                    {visibleFields && visibleFields.length > 0 && (
+                        <div className="mt-1 space-y-0.5">
+                            {visibleFields.map((field) => {
+                                const value = item[field];
+                                if (value == null) return null;
+                                return (
+                                    <p key={field} className="text-xs text-muted-foreground truncate">
+                                        {String(value)}
+                                    </p>
+                                );
+                            })}
+                        </div>
+                    )}
+                </CardContent>
+            </Card>
+        );
+    };
+
+    const renderGrid = (gridItems: Record<string, unknown>[]) => (
         <div
             className={cn('grid gap-4 p-4', GRID_CLASSES[cardSize], schema.className)}
             role="list"
         >
-            {items.map((item, i) => {
-                const id = (item._id ?? item.id ?? i) as string | number;
-                const title = String(item[titleField] ?? 'Untitled');
-                const imageUrl = item[coverField] as string | undefined;
-
-                return (
-                    <Card
-                        key={id}
-                        role="listitem"
-                        className={cn(
-                            'group overflow-hidden transition-all hover:shadow-md',
-                            props.onCardClick && 'cursor-pointer',
-                        )}
-                        onClick={props.onCardClick ? () => props.onCardClick!(item) : undefined}
-                    >
-                        <div className={cn('w-full overflow-hidden bg-muted relative', ASPECT_CLASSES[cardSize])}>
-                            {imageUrl ? (
-                                <img
-                                    src={imageUrl}
-                                    alt={title}
-                                    className={cn(
-                                        'h-full w-full transition-transform group-hover:scale-105',
-                                        coverFit === 'cover' && 'object-cover',
-                                        coverFit === 'contain' && 'object-contain',
-                                    )}
-                                />
-                            ) : (
-                                <div className="flex h-full w-full items-center justify-center bg-secondary/50 text-muted-foreground">
-                                    <span className="text-4xl font-light opacity-20">
-                                        {title[0]?.toUpperCase()}
+            {gridItems.map((item, i) => renderCard(item, i))}
+        </div>
+    );
+
+    return (
+        <>
+            {isGrouped ? (
+                <div className="space-y-2">
+                    {groupedItems.map((group) => (
+                        <div key={group.key} className="border rounded-md">
+                            <button
+                                type="button"
+                                className="flex w-full items-center gap-2 px-3 py-2 text-sm font-medium text-left bg-muted/50 hover:bg-muted transition-colors"
+                                onClick={() => toggleGroup(group.key)}
+                            >
+                                {group.collapsed
+                                    ? <ChevronRight className="h-4 w-4 shrink-0" />
+                                    : <ChevronDown className="h-4 w-4 shrink-0" />}
+                                <span>{group.label}</span>
+                                <span className="ml-auto text-xs text-muted-foreground">{group.items.length}</span>
+                            </button>
+                            {!group.collapsed && renderGrid(group.items)}
+                        </div>
+                    ))}
+                </div>
+            ) : (
+                renderGrid(items)
+            )}
+            {navigation.isOverlay && (
+                <NavigationOverlay {...navigation} title="Gallery Item">
+                    {(record) => (
+                        <div className="space-y-3">
+                            {Object.entries(record).map(([key, value]) => (
+                                <div key={key} className="flex flex-col">
+                                    <span className="text-xs font-medium text-muted-foreground uppercase tracking-wide">
+                                        {key.replace(/_/g, ' ')}
                                     </span>
+                                    <span className="text-sm">{String(value ?? '—')}</span>
                                 </div>
-                            )}
+                            ))}
                         </div>
-                        <CardContent className="p-3 border-t">
-                            <h3 className="font-medium truncate text-sm" title={title}>
-                                {title}
-                            </h3>
-                            {visibleFields && visibleFields.length > 0 && (
-                                <div className="mt-1 space-y-0.5">
-                                    {visibleFields.map((field) => {
-                                        const value = item[field];
-                                        if (value == null) return null;
-                                        return (
-                                            <p key={field} className="text-xs text-muted-foreground truncate">
-                                                {String(value)}
-                                            </p>
-                                        );
-                                    })}
-                                </div>
-                            )}
-                        </CardContent>
-                    </Card>
-                );
-            })}
-        </div>
+                    )}
+                </NavigationOverlay>
+            )}
+        </>
     );
 };