@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/components/EntityCollectionTable/table_bindings.tsx

@@ -0,0 +1,345 @@
+import React from "react";
+import { ArrayProperty, Entity, EntityReference, EntityRelation, NumberProperty, Property, StringProperty } from "@rebasepro/types";
+
+import { VirtualTableInput } from "./fields/VirtualTableInput";
+import { VirtualTableSelect } from "./fields/VirtualTableSelect";
+import { VirtualTableNumberInput } from "./fields/VirtualTableNumberInput";
+import { VirtualTableSwitch } from "./fields/VirtualTableSwitch";
+import { VirtualTableDateField } from "./fields/VirtualTableDateField";
+import { VirtualTableUserSelect } from "./fields/VirtualTableUserSelect";
+import { TableStorageUpload } from "./fields/TableStorageUpload";
+import { TableReferenceField } from "./fields/TableReferenceField";
+import { TableRelationField } from "./fields/TableRelationField";
+import { TableRelationSelectorField } from "./fields/TableRelationSelectorField";
+
+import { getPreviewSizeFrom } from "../../preview/util";
+
+export interface TableFieldBindingProps<T = any> {
+    propertyKey: string;
+    property: Property;
+    internalValue: T;
+    updateValue: (newValue: T | null) => void;
+    error?: Error;
+    validationError?: Error;
+    disabled: boolean;
+    selected: boolean;
+    size: any;
+    align: "left" | "center" | "right";
+    entity: Entity<any>;
+    path: string;
+    openPopup?: (cellRect: DOMRect | undefined) => void;
+}
+
+export interface TableFieldConfig {
+    Component: React.ComponentType<TableFieldBindingProps>;
+    fullHeight?: boolean;
+    allowScroll?: boolean;
+    removePadding?: boolean;
+    showExpandIcon?: boolean;
+    hideOverflow?: boolean;
+    includeActions?: boolean;
+}
+
+export function isStorageProperty(property: Property) {
+    if (property.type === "string" && property.markdown)
+        return false;
+    if (property.type === "string" && (property as StringProperty).storage)
+        return true;
+    if (property.type === "array") {
+        if (Array.isArray(property.of)) {
+            return false;
+        } else {
+            return ((property as ArrayProperty).of as Property)?.type === "string" &&
+                ((property as ArrayProperty).of as StringProperty)?.storage
+        }
+    }
+    return false;
+}
+
+export function getTableBindingForProperty(
+    property: Property,
+    selected: boolean
+): TableFieldConfig | undefined {
+    const isAStorageProperty = isStorageProperty(property);
+
+    if (property.type === "string" && (property as StringProperty).reference?.path) {
+        return {
+            Component: ({ propertyKey, property, internalValue, updateValue, disabled, size, path }) => {
+                const referenceProperty = (property as StringProperty).reference as any;
+                const referenceValue = internalValue ? new EntityReference({ id: internalValue as string, path: referenceProperty.path as string }) : undefined;
+                return (
+                    <TableReferenceField 
+                        name={propertyKey}
+                        internalValue={referenceValue}
+                        updateValue={(v) => updateValue(v ? (v as EntityReference).id : null)}
+                        disabled={disabled}
+                        size={size}
+                        path={referenceProperty.path as string}
+                        multiselect={false}
+                        previewProperties={referenceProperty.previewProperties}
+                        includeId={referenceProperty.includeId}
+                        includeEntityLink={referenceProperty.includeEntityLink}
+                        title={property.name}
+                        forceFilter={referenceProperty.forceFilter}
+                    />
+                );
+            },
+            allowScroll: false
+        };
+    } else if (isAStorageProperty) {
+        return {
+            Component: ({ validationError, error, disabled, selected, openPopup, property, entity, path, internalValue, size, updateValue, propertyKey }: any) => (
+                <TableStorageUpload 
+                    error={validationError ?? error}
+                    disabled={disabled}
+                    focused={selected}
+                    selected={selected}
+                    openPopup={openPopup}
+                    property={property as any}
+                    entity={entity}
+                    path={path}
+                    value={internalValue}
+                    previewSize={getPreviewSizeFrom(size)}
+                    updateValue={updateValue}
+                    propertyKey={propertyKey}
+                />
+            ),
+            includeActions: false,
+            showExpandIcon: true,
+            fullHeight: true,
+            removePadding: true
+        };
+    } else if (selected && property.type === "number") {
+        const numberProperty = property as NumberProperty;
+        if (numberProperty.enum) {
+            return {
+                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: any) => (
+                    <VirtualTableSelect 
+                        name={propertyKey}
+                        multiple={false}
+                        disabled={disabled}
+                        focused={selected}
+                        valueType={"number"}
+                        small={getPreviewSizeFrom(size) !== "medium"}
+                        enumValues={numberProperty.enum!}
+                        error={validationError ?? error}
+                        internalValue={internalValue as string | number}
+                        updateValue={updateValue}
+                    />
+                ),
+                fullHeight: true
+            };
+        } else {
+            return {
+                Component: ({ align, error, validationError, selected, disabled, internalValue, updateValue }: any) => (
+                    <VirtualTableNumberInput
+                        align={align}
+                        error={validationError ?? error}
+                        focused={selected}
+                        disabled={disabled}
+                        value={internalValue as number}
+                        updateValue={updateValue}
+                    />
+                ),
+                allowScroll: true
+            };
+        }
+    } else if (selected && property.type === "string") {
+        const stringProperty = property as StringProperty;
+        if (stringProperty.enum) {
+            return {
+                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: any) => (
+                    <VirtualTableSelect 
+                        name={propertyKey}
+                        multiple={false}
+                        focused={selected}
+                        disabled={disabled}
+                        valueType={"string"}
+                        small={getPreviewSizeFrom(size) !== "medium"}
+                        enumValues={stringProperty.enum!}
+                        error={validationError ?? error}
+                        internalValue={internalValue as string | number}
+                        updateValue={updateValue}
+                    />
+                ),
+                fullHeight: true
+            };
+        } else if (stringProperty.userSelect) {
+            return {
+                Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: any) => (
+                    <VirtualTableUserSelect 
+                        name={propertyKey}
+                        multiple={false}
+                        focused={selected}
+                        disabled={disabled}
+                        small={getPreviewSizeFrom(size) !== "medium"}
+                        error={validationError ?? error}
+                        internalValue={internalValue as string}
+                        updateValue={updateValue}
+                    />
+                ),
+                fullHeight: true
+            };
+        } else if (stringProperty.markdown || !stringProperty.storage || !stringProperty.reference) {
+            const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
+            return {
+                Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: any) => (
+                    <VirtualTableInput 
+                        error={validationError ?? error}
+                        disabled={disabled}
+                        multiline={multiline}
+                        focused={selected}
+                        value={internalValue as string}
+                        updateValue={updateValue}
+                    />
+                ),
+                allowScroll: true
+            };
+        }
+    } else if (property.type === "boolean") {
+        return {
+            Component: ({ error, validationError, disabled, selected, internalValue, updateValue }: any) => (
+                <VirtualTableSwitch 
+                    error={validationError ?? error}
+                    disabled={disabled}
+                    focused={selected}
+                    internalValue={internalValue as boolean}
+                    updateValue={updateValue}
+                />
+            )
+        };
+    } else if (property.type === "date") {
+        return {
+            Component: ({ propertyKey, error, validationError, disabled, selected, property, internalValue, updateValue }: any) => (
+                <VirtualTableDateField 
+                    name={propertyKey}
+                    error={validationError ?? error}
+                    disabled={disabled}
+                    mode={property.mode}
+                    focused={selected}
+                    internalValue={internalValue as Date}
+                    updateValue={updateValue}
+                />
+            ),
+            fullHeight: true,
+            hideOverflow: false,
+            allowScroll: false
+        };
+    } else if (property.type === "reference") {
+        if (typeof property.path === "string") {
+            return {
+                Component: ({ propertyKey, internalValue, updateValue, disabled, size, property }: any) => (
+                    <TableReferenceField 
+                        name={propertyKey}
+                        internalValue={internalValue as EntityReference}
+                        updateValue={updateValue}
+                        disabled={disabled}
+                        size={size}
+                        path={property.path}
+                        multiselect={false}
+                        previewProperties={property.previewProperties}
+                        includeId={property.includeId}
+                        includeEntityLink={property.includeEntityLink}
+                        title={property.name ?? propertyKey}
+                        forceFilter={property.forceFilter}
+                    />
+                ),
+                allowScroll: false
+            };
+        }
+    } else if (property.type === "relation") {
+        if (property.relation) {
+            if (property.widget === "dialog") {
+                return {
+                    Component: ({ propertyKey, internalValue, updateValue, disabled, size, property }: any) => (
+                        <TableRelationField 
+                            name={propertyKey}
+                            internalValue={internalValue as EntityRelation}
+                            updateValue={updateValue}
+                            disabled={disabled}
+                            size={size}
+                            multiselect={false}
+                            relation={property.relation}
+                            previewProperties={property.previewProperties}
+                            includeId={property.includeId}
+                            includeEntityLink={property.includeEntityLink}
+                            title={property.name ?? propertyKey}
+                            forceFilter={property.forceFilter}
+                        />
+                    ),
+                    allowScroll: false
+                };
+            } else {
+                return {
+                    Component: ({ propertyKey, internalValue, updateValue, disabled, property }: any) => (
+                        <TableRelationSelectorField 
+                            name={propertyKey}
+                            internalValue={internalValue as EntityRelation}
+                            updateValue={updateValue}
+                            disabled={disabled}
+                            size={"small"}
+                            relation={property.relation!}
+                            forceFilter={property.forceFilter} 
+                        />
+                    ),
+                    allowScroll: false
+                };
+            }
+        }
+    } else if (property.type === "array") {
+        const arrayProperty = (property as ArrayProperty);
+
+        if (!arrayProperty.of && !arrayProperty.oneOf) {
+            throw Error(`You need to specify an 'of' or 'oneOf' prop (or specify a custom field) in your array property`);
+        } else if (arrayProperty.of && !Array.isArray(arrayProperty.of)) {
+            const ofProp = arrayProperty.of as any;
+            if (ofProp.type === "string" || ofProp.type === "number") {
+                if (selected && ofProp.enum) {
+                    return {
+                        Component: ({ propertyKey, disabled, selected, size, error, validationError, internalValue, updateValue }: any) => (
+                            <VirtualTableSelect 
+                                name={propertyKey}
+                                multiple={true}
+                                disabled={disabled}
+                                focused={selected}
+                                small={getPreviewSizeFrom(size) !== "medium"}
+                                valueType={ofProp.type}
+                                enumValues={ofProp.enum}
+                                error={validationError ?? error}
+                                internalValue={internalValue as string | number}
+                                updateValue={updateValue}
+                            />
+                        ),
+                        allowScroll: true,
+                        fullHeight: true,
+                        hideOverflow: false
+                    };
+                }
+            } else if (ofProp.type === "reference") {
+                if (typeof ofProp.path === "string") {
+                    return {
+                        Component: ({ propertyKey, disabled, internalValue, updateValue, size }: any) => (
+                            <TableReferenceField
+                                name={propertyKey}
+                                disabled={disabled}
+                                internalValue={internalValue as EntityReference[]}
+                                updateValue={updateValue}
+                                size={size}
+                                multiselect={true}
+                                path={ofProp.path}
+                                previewProperties={ofProp.previewProperties}
+                                title={arrayProperty.name}
+                                forceFilter={ofProp.forceFilter}
+                                includeId={ofProp.includeId}
+                                includeEntityLink={ofProp.includeEntityLink}
+                            />
+                        ),
+                        allowScroll: false
+                    };
+                }
+            }
+        }
+    }
+
+    return undefined;
+}

package/src/components/EntityCollectionView/Board.tsx

@@ -0,0 +1,324 @@
+import React, { useEffect, useState } from "react";
+import {
+    DndContext,
+    DragEndEvent,
+    DragOverEvent,
+    DragOverlay,
+    DragStartEvent,
+    PointerSensor,
+    pointerWithin,
+    useSensor,
+    useSensors
+} from "@dnd-kit/core";
+import { arrayMove, horizontalListSortingStrategy, SortableContext } from "@dnd-kit/sortable";
+import { BoardColumn } from "./BoardColumn";
+import { BoardItem, BoardItemMap, BoardItemViewProps, BoardProps } from "./board_types";
+import { cls } from "@rebasepro/ui";
+
+export function Board<M extends Record<string, unknown>, COLUMN extends string>({
+    data,
+    columns: columnsProp,
+    columnLabels,
+    columnColors,
+    className,
+    assignColumn,
+    allowColumnReorder = false,
+    onColumnReorder,
+    onItemsReorder,
+    ItemComponent,
+    columnLoadingState,
+    onLoadMoreColumn,
+    onAddItemToColumn,
+    AddColumnComponent,
+}: BoardProps<M, COLUMN>) {
+
+    const [activeItem, setActiveItem] = useState<BoardItem<M> | null>(null);
+    const [activeColumn, setActiveColumn] = useState<COLUMN | null>(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [dragOverColumnId, setDragOverColumnId] = useState<string | null>(null);
+    const [itemMapState, setItemMapState] = useState<BoardItemMap<M>>(() => {
+        const dataColumnMap: Record<string, COLUMN> = data.reduce((prev, item: BoardItem<M>) => ({
+            ...prev,
+            [item.id]: assignColumn(item)
+        }), {});
+        return columnsProp.reduce(
+            (previous: BoardItemMap<M>, column: COLUMN) => ({
+                ...previous,
+                [column]: data.filter((item: BoardItem<M>) => dataColumnMap[item.id] === column)
+            }),
+            {}
+        );
+    });
+
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 5,
+            },
+        })
+    );
+
+    useEffect(() => {
+        const dataColumnMap: Record<string, COLUMN> = data.reduce((prev, item) => ({
+            ...prev,
+            [item.id]: assignColumn(item)
+        }), {});
+
+        setItemMapState(() => columnsProp.reduce(
+            (previous: BoardItemMap<M>, column: COLUMN) => ({
+                ...previous,
+                [column]: data.filter((item: BoardItem<M>) => dataColumnMap[item.id] === column)
+            }),
+            {}
+        ));
+    }, [data, columnsProp, assignColumn]);
+
+    const findColumnByItemId = (id: string): string | undefined => {
+        return Object.keys(itemMapState).find(col => itemMapState[col]?.some(i => i.id === id));
+    };
+
+    const handleDragStart = (event: DragStartEvent) => {
+        setIsDragging(true);
+        setDragOverColumnId(null);
+        const { active } = event;
+
+        if (active.data.current?.type === "COLUMN") {
+            const columnId = active.id as string;
+            const column = columnsProp.find(col => String(col) === columnId);
+            if (column) {
+                setActiveColumn(column);
+            }
+        } else if (active.data.current?.type === "ITEM") {
+            const columnId = findColumnByItemId(active.id as string);
+            if (columnId) {
+                const item = itemMapState[columnId]?.find(i => i.id === active.id);
+                setActiveItem(item || null);
+            }
+        }
+    };
+
+    const handleDragOver = (event: DragOverEvent) => {
+        const {
+            active,
+            over
+        } = event;
+
+        if (!over) {
+            setDragOverColumnId(null);
+            return;
+        }
+
+        let currentHoveredColumnId: string | null = null;
+        const overId = over.id as string;
+        const overDataType = over.data.current?.type as string | undefined;
+
+        if (overDataType === "ITEM-LIST" || overDataType === "COLUMN") {
+            currentHoveredColumnId = overId;
+        } else if (overDataType === "ITEM") {
+            currentHoveredColumnId = findColumnByItemId(overId) || null;
+        } else if (columnsProp.includes(overId as COLUMN)) {
+            currentHoveredColumnId = overId;
+        }
+
+        setDragOverColumnId(currentHoveredColumnId);
+
+        // Skip item reordering if dragging a column
+        if (active.data.current?.type !== "ITEM") {
+            return;
+        }
+
+        const activeId = active.id as string;
+        const activeColumn = findColumnByItemId(activeId);
+        let overColumnForMove = findColumnByItemId(overId);
+
+        if (!overColumnForMove && overDataType === "ITEM-LIST") {
+            overColumnForMove = overId;
+        }
+        if (!overColumnForMove && columnsProp.includes(overId as COLUMN)) {
+            overColumnForMove = overId;
+        }
+
+        if (!activeColumn || !overColumnForMove) return;
+        if (activeColumn === overColumnForMove && activeId === overId && overDataType !== "ITEM-LIST") return;
+
+        // Prevent moving to a column if item with same ID already exists there
+        if (overColumnForMove !== activeColumn &&
+            itemMapState[overColumnForMove]?.some(i => i.id === activeId)) {
+            return;
+        }
+
+        setItemMapState(currentMap => {
+            const activeItems = [...(currentMap[activeColumn] || [])];
+            const overItems = [...(currentMap[overColumnForMove!] || [])];
+            const activeIndex = activeItems.findIndex(i => i.id === activeId);
+
+            if (activeIndex === -1) return currentMap;
+
+            let overIndex;
+            if (overDataType === "ITEM-LIST" || (columnsProp.includes(overId as COLUMN) && !findColumnByItemId(overId))) {
+                overIndex = overItems.length;
+            } else {
+                overIndex = overItems.findIndex(i => i.id === overId);
+                if (overIndex !== -1) {
+                    const { y } = event.delta;
+                    const overRect = over.rect;
+                    if (overRect) {
+                        const threshold = overRect.height / 2;
+                        if (y > threshold) {
+                            overIndex += 1;
+                        }
+                    }
+                } else {
+                    overIndex = overItems.length;
+                }
+            }
+
+            if (activeColumn === overColumnForMove && activeIndex === overIndex) return currentMap;
+
+            const newItemMap = { ...currentMap };
+            if (activeColumn === overColumnForMove) {
+                newItemMap[activeColumn] = arrayMove(activeItems, activeIndex, overIndex);
+            } else {
+                const [moved] = activeItems.splice(activeIndex, 1);
+                overItems.splice(overIndex, 0, moved);
+                newItemMap[activeColumn] = activeItems;
+                newItemMap[overColumnForMove] = overItems;
+            }
+            return newItemMap;
+        });
+    };
+
+    const handleDragEnd = (event: DragEndEvent) => {
+        const {
+            active,
+            over
+        } = event;
+
+        setIsDragging(false);
+        setActiveItem(null);
+        setActiveColumn(null);
+        setDragOverColumnId(null);
+
+        if (!over) return;
+
+        const activeId = active.id as string;
+        const overId = over.id as string;
+
+        if (active.data.current?.type === "COLUMN" &&
+            over.data.current?.type === "COLUMN" &&
+            activeId !== overId) {
+
+            const oldIndex = columnsProp.findIndex(col => String(col) === activeId);
+            const newIndex = columnsProp.findIndex(col => String(col) === overId);
+
+            if (oldIndex !== -1 && newIndex !== -1 && onColumnReorder && allowColumnReorder) {
+                const newOrder = arrayMove([...columnsProp], oldIndex, newIndex);
+                onColumnReorder(newOrder);
+            }
+        } else if (active.data.current?.type === "ITEM" && onItemsReorder) {
+            // Find the original column assignment from the input data
+            const originalColumn = data.find(item => item.id === activeId)
+                ? assignColumn(data.find(item => item.id === activeId)!)
+                : undefined;
+
+            // Find the current column assignment from our internal state
+            const currentColumn = findColumnByItemId(activeId) as COLUMN | undefined;
+
+            // When items have been reordered, convert itemMapState to a flat list
+            const allItems: BoardItem<M>[] = [];
+
+            // Collect all items from all columns in their current order
+            Object.entries(itemMapState).forEach(([, columnItems]) => {
+                if (columnItems && (columnItems as BoardItem<M>[]).length > 0) {
+                    allItems.push(...(columnItems as BoardItem<M>[]));
+                }
+            });
+
+            // Notify parent component of the change, including column movement information
+            if (originalColumn !== currentColumn && originalColumn && currentColumn) {
+                // Item has moved between columns - provide this context to parent
+                onItemsReorder(allItems, {
+                    itemId: activeId,
+                    sourceColumn: originalColumn,
+                    targetColumn: currentColumn
+                });
+            } else if (currentColumn) {
+                // Reordering within the same column - still need to provide moveInfo
+                onItemsReorder(allItems, {
+                    itemId: activeId,
+                    sourceColumn: currentColumn,
+                    targetColumn: currentColumn
+                });
+            }
+        }
+    };
+
+    return (
+        <DndContext
+            sensors={sensors}
+            collisionDetection={pointerWithin}
+            onDragStart={handleDragStart}
+            onDragOver={handleDragOver}
+            onDragEnd={handleDragEnd}
+        >
+            <DragOverlay dropAnimation={{
+                duration: 300,
+                easing: "cubic-bezier(0.18, 0.67, 0.6, 1.22)",
+            }}>
+                {activeItem ? (
+                    <ItemComponent
+                        item={activeItem}
+                        isDragging={true}
+                        index={-1}
+                        style={{
+                            boxShadow: "0 4px 16px rgba(0,0,0,0.15)",
+                            opacity: 0.9,
+                        }}
+                    />
+                ) : activeColumn ? (
+                    <BoardColumn
+                        key={String(activeColumn)}
+                        index={-1}
+                        id={String(activeColumn)}
+                        title={columnLabels?.[activeColumn] ?? String(activeColumn)}
+                        items={itemMapState[String(activeColumn)] || []}
+                        ItemComponent={ItemComponent}
+                        isDragging={true}
+                        isDragOverColumn={false}
+                    />
+                ) : null}
+            </DragOverlay>
+
+            <SortableContext
+                items={columnsProp.map(String)}
+                strategy={horizontalListSortingStrategy}
+            >
+                <div className={cls("p-2 md:p-3 lg:p-4 h-full min-w-full inline-flex", className)}>
+                    {columnsProp.map((key: COLUMN, index: number) => (
+                        <BoardColumn
+                            key={String(key)}
+                            index={index}
+                            id={String(key)}
+                            title={columnLabels?.[key] ?? String(key)}
+                            color={columnColors?.[key]}
+                            items={itemMapState[String(key)] || []}
+                            ItemComponent={ItemComponent}
+                            isDragging={isDragging}
+                            isDragOverColumn={String(key) === dragOverColumnId}
+                            allowReorder={allowColumnReorder}
+                            loading={columnLoadingState?.[String(key)]?.loading}
+                            hasMore={columnLoadingState?.[String(key)]?.hasMore}
+                            totalCount={columnLoadingState?.[String(key)]?.totalCount}
+                            onLoadMore={onLoadMoreColumn ? () => onLoadMoreColumn(key) : undefined}
+                            onAddItem={onAddItemToColumn ? () => onAddItemToColumn(key) : undefined}
+                            style={{
+                                opacity: activeColumn === key ? 0 : 1
+                            }}
+                        />
+                    ))}
+                    {AddColumnComponent}
+                </div>
+            </SortableContext>
+        </DndContext>
+    );
+}