@firecms/core 3.0.0 → 3.1.0-canary.02232f4

package/src/components/EntityCollectionView/EntityCollectionCardView.tsx

@@ -0,0 +1,236 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import { CollectionSize, Entity, EntityCollection, EntityTableController, SelectionController } from "../../types";
+import { EntityCard } from "./EntityCard";
+import { CircularProgress, cls, Typography } from "@firecms/ui";
+import { useAuthController, useCustomizationController, useTranslation } from "../../hooks";
+
+export type EntityCollectionCardViewProps<M extends Record<string, any> = any> = {
+    collection: EntityCollection<M>;
+    tableController: EntityTableController<M>;
+    onEntityClick?: (entity: Entity<M>) => void;
+    selectionController?: SelectionController<M>;
+    selectionEnabled?: boolean;
+    highlightedEntities?: Entity<M>[];
+    emptyComponent?: React.ReactNode;
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward";
+        scrollOffset: number;
+        scrollUpdateWasRequested: boolean;
+    }) => void;
+    initialScroll?: number;
+    /**
+     * Size of the cards in the grid view.
+     * - "xs": Extra small cards, most cards per row
+     * - "s": Small cards
+     * - "m": Medium cards (default)
+     * - "l": Large cards
+     * - "xl": Extra large cards, fewest cards per row
+     */
+    size?: CollectionSize;
+};
+
+/**
+ * Get grid column classes based on the size.
+ * Smaller size = more columns (smaller cards)
+ * Larger size = fewer columns (larger cards)
+ */
+function getGridColumnsClass(size: CollectionSize): string {
+    switch (size) {
+        case "xs":
+            // Compact: many small cards
+            return "grid-cols-4 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10";
+        case "s":
+            // Small: more cards per row
+            return "grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-8";
+        case "m":
+            // Medium: balanced (default)
+            return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
+        case "l":
+            // Large: fewer, bigger cards
+            return "grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4";
+        case "xl":
+            // Extra large: fewest, biggest cards
+            return "grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3";
+        default:
+            return "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6";
+    }
+}
+
+/**
+ * Card grid view for displaying entities with infinite scroll.
+ * Alternative to the EntityCollectionTable for visual browsing.
+ */
+export function EntityCollectionCardView<M extends Record<string, any> = any>({
+    collection,
+    tableController,
+    onEntityClick,
+    selectionController,
+    selectionEnabled = true,
+    highlightedEntities,
+    emptyComponent,
+    onScroll,
+    initialScroll,
+    size = "m"
+}: EntityCollectionCardViewProps<M>) {
+    const { t } = useTranslation();
+    const authController = useAuthController();
+    const customizationController = useCustomizationController();
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const loadMoreRef = useRef<HTMLDivElement>(null);
+    const hasRestoredScroll = useRef(false);
+
+    const {
+        data,
+        dataLoading,
+        noMoreToLoad,
+        dataLoadingError,
+        itemCount,
+        setItemCount,
+        pageSize = 50,
+        paginationEnabled
+    } = tableController;
+
+    // Track if we're currently loading to prevent multiple simultaneous load requests
+    const isLoadingMore = useRef(false);
+
+    // Infinite scroll with Intersection Observer
+    useEffect(() => {
+        if (!paginationEnabled || noMoreToLoad || dataLoading) {
+            return;
+        }
+
+        // Reset loading flag when dataLoading becomes false
+        if (!dataLoading) {
+            isLoadingMore.current = false;
+        }
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries[0].isIntersecting && !dataLoading && !noMoreToLoad && !isLoadingMore.current) {
+                    // Prevent multiple load requests
+                    isLoadingMore.current = true;
+                    // Load more items
+                    setItemCount?.((itemCount ?? pageSize) + pageSize);
+                }
+            },
+            {
+                root: containerRef.current, // Use the scroll container, not viewport
+                rootMargin: "400px",
+                threshold: 0
+            }
+        );
+
+        if (loadMoreRef.current) {
+            observer.observe(loadMoreRef.current);
+        }
+
+        return () => observer.disconnect();
+    }, [paginationEnabled, noMoreToLoad, dataLoading, itemCount, pageSize, setItemCount]);
+
+    // Scroll restoration: restore initial scroll position
+    useEffect(() => {
+        if (containerRef.current && initialScroll && !hasRestoredScroll.current && data.length > 0) {
+            containerRef.current.scrollTop = initialScroll;
+            hasRestoredScroll.current = true;
+        }
+    }, [initialScroll, data.length]);
+
+    // Scroll tracking: call onScroll when user scrolls
+    const lastScrollOffset = useRef(0);
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container || !onScroll) return;
+
+        const handleScroll = () => {
+            const currentOffset = container.scrollTop;
+            const direction = currentOffset > lastScrollOffset.current ? "forward" : "backward";
+            lastScrollOffset.current = currentOffset;
+            onScroll({
+                scrollDirection: direction,
+                scrollOffset: currentOffset,
+                scrollUpdateWasRequested: false
+            });
+        };
+
+        container.addEventListener("scroll", handleScroll, { passive: true });
+        return () => container.removeEventListener("scroll", handleScroll);
+    }, [onScroll]);
+
+    const handleEntityClick = useCallback((entity: Entity<M>) => {
+        onEntityClick?.(entity);
+    }, [onEntityClick]);
+
+    const handleSelectionChange = useCallback((entity: Entity<M>, selected: boolean) => {
+        selectionController?.toggleEntitySelection(entity, selected);
+    }, [selectionController]);
+
+    const isEntitySelected = useCallback((entity: Entity<M>) => {
+        return selectionController?.isEntitySelected(entity) ?? false;
+    }, [selectionController]);
+
+    const isEntityHighlighted = useCallback((entity: Entity<M>) => {
+        return highlightedEntities?.some(e => e.id === entity.id && e.path === entity.path) ?? false;
+    }, [highlightedEntities]);
+
+    // Show empty state
+    if (!dataLoading && data.length === 0 && !dataLoadingError) {
+        return (
+            <div className="flex-1 flex items-center justify-center p-8">
+                {emptyComponent ?? (
+                    <Typography variant="label" color="secondary">
+                        {t("no_entries_found")}
+                    </Typography>
+                )}
+            </div>
+        );
+    }
+
+
+
+    const gridColumnsClass = getGridColumnsClass(size);
+
+    return (
+        <div
+            ref={containerRef}
+            className="flex-1 overflow-auto p-4"
+        >
+            {/* Card Grid with max-width container */}
+            <div className="max-w-7xl mx-auto">
+                <div className={cls(
+                    "grid gap-4",
+                    gridColumnsClass
+                )}>
+                    {data.map((entity) => (
+                        <EntityCard
+                            key={`${entity.path}_${entity.id}`}
+                            entity={entity}
+                            collection={collection}
+                            onClick={handleEntityClick}
+                            selected={isEntitySelected(entity)}
+                            highlighted={isEntityHighlighted(entity)}
+                            onSelectionChange={handleSelectionChange}
+                            selectionEnabled={selectionEnabled}
+                            size={size}
+                        />
+                    ))}
+                </div>
+
+                {/* Load more trigger / Loading indicator */}
+                <div
+                    ref={loadMoreRef}
+                    className="flex items-center justify-center py-8"
+                >
+                    {dataLoading && (
+                        <CircularProgress size="small" />
+                    )}
+                    {!dataLoading && noMoreToLoad && data.length > 0 && (
+                        <Typography variant="caption" color="secondary">
+                            {t("all_entries_loaded", { count: data.length.toString() })}
+                        </Typography>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}