@firecms/core 3.0.0-3.0.0-beta.4.pre.1.0

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -0,0 +1,170 @@
+import React, { MouseEvent, useCallback } from "react";
+
+import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
+import { Checkbox, cn, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { useFireCMSContext, useLargeLayout } from "../../hooks";
+
+/**
+ *
+ * @param entity
+ * @param width
+ * @param frozen
+ * @param isSelected
+ * @param selectionEnabled
+ * @param size
+ * @param toggleEntitySelection
+ * @param hideId
+ * @constructor
+ *
+ * @group Collection components
+ */
+export const EntityCollectionRowActions = function EntityCollectionRowActions({
+                                                                                  entity,
+                                                                                  collection,
+                                                                                  fullPath,
+                                                                                  width,
+                                                                                  frozen,
+                                                                                  isSelected,
+                                                                                  selectionEnabled,
+                                                                                  size,
+                                                                                  highlightEntity,
+                                                                                  onCollectionChange,
+                                                                                  unhighlightEntity,
+                                                                                  actions = [],
+                                                                                  hideId,
+                                                                                  selectionController,
+                                                                              }:
+                                                                                  {
+                                                                                      entity: Entity<any>,
+                                                                                      collection?: EntityCollection<any>,
+                                                                                      fullPath?: string,
+                                                                                      width: number,
+                                                                                      frozen?: boolean,
+                                                                                      size: CollectionSize,
+                                                                                      isSelected?: boolean,
+                                                                                      selectionEnabled?: boolean,
+                                                                                      actions?: EntityAction[],
+                                                                                      hideId?: boolean,
+                                                                                      onCollectionChange?: () => void,
+                                                                                      selectionController?: SelectionController;
+                                                                                      highlightEntity?: (entity: Entity<any>) => void;
+                                                                                      unhighlightEntity?: (entity: Entity<any>) => void;
+                                                                                  }) {
+
+    const largeLayout = useLargeLayout();
+
+    const context = useFireCMSContext();
+
+    const onCheckedChange = useCallback((checked: boolean) => {
+        selectionController?.toggleEntitySelection(entity);
+    }, [entity, selectionController?.toggleEntitySelection]);
+
+    const onClick = useCallback((event: MouseEvent) => {
+        event.stopPropagation();
+        selectionController?.toggleEntitySelection(entity);
+    }, [entity, selectionController?.toggleEntitySelection]);
+
+    const hasActions = actions.length > 0;
+    const hasCollapsedActions = actions.some(a => a.collapsed || a.collapsed === undefined);
+
+    const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
+    const uncollapsedActions = actions.filter(a => a.collapsed === false);
+    return (
+        <div
+            onClick={onClick}
+            className={cn(
+                "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+                frozen ? "sticky left-0" : ""
+            )}
+            style={{
+                width,
+                position: frozen ? "sticky" : "initial",
+                left: frozen ? 0 : "initial",
+                contain: "strict"
+            }}>
+
+            {(hasActions || selectionEnabled) &&
+                <div className="w-34 flex justify-center">
+
+                    {uncollapsedActions.map((action, index) => (
+                        <Tooltip key={index} title={action.name}>
+                            <IconButton
+                                onClick={(event: MouseEvent) => {
+                                    event.stopPropagation();
+                                    action.onClick({
+                                        entity,
+                                        fullPath,
+                                        collection,
+                                        context,
+                                        selectionController,
+                                        highlightEntity,
+                                        unhighlightEntity,
+                                        onCollectionChange,
+                                    });
+                                }}
+                                size={largeLayout ? "medium" : "small"}>
+                                {action.icon}
+                            </IconButton>
+                        </Tooltip>
+                    ))}
+
+                    {hasCollapsedActions &&
+                        <Menu
+                            trigger={<IconButton
+                                size={largeLayout ? "medium" : "small"}>
+                                <MoreVertIcon/>
+                            </IconButton>}>
+                            {collapsedActions.map((action, index) => (
+                                <MenuItem
+                                    key={index}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        action.onClick({
+                                            entity,
+                                            fullPath,
+                                            collection,
+                                            context,
+                                            selectionController,
+                                            highlightEntity,
+                                            unhighlightEntity,
+                                            onCollectionChange,
+                                        });
+                                    }}>
+                                    {action.icon}
+                                    {action.name}
+                                </MenuItem>
+                            ))}
+                        </Menu>
+                    }
+
+                    {selectionEnabled &&
+                        <Tooltip title={`Select ${entity.id}`}>
+                            <Checkbox
+                                size={largeLayout ? "medium" : "small"}
+                                checked={Boolean(isSelected)}
+                                onCheckedChange={onCheckedChange}
+                            />
+                        </Tooltip>}
+
+                </div>}
+
+            {!hideId && size !== "xs" && (
+                <div className="w-[138px] text-center overflow-hidden truncate">
+
+                    {entity
+                        ? <Typography
+                            onClick={(event) => {
+                                event.stopPropagation();
+                            }}
+                            className={"font-mono select-all"}
+                            variant={"caption"}
+                            color={"secondary"}> {entity.id} </Typography>
+                        : <Skeleton/>
+                    }
+                </div>
+            )}
+
+        </div>
+    );
+
+};

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -0,0 +1,325 @@
+import React, { useCallback, useMemo, useRef } from "react";
+import { AdditionalFieldDelegate, CollectionSize, Entity, FireCMSContext, User } from "../../types";
+import { PropertyTableCell } from "./PropertyTableCell";
+import { ErrorBoundary } from "../ErrorBoundary";
+import { useFireCMSContext, useLargeLayout } from "../../hooks";
+import { CellRendererParams, VirtualTableColumn } from "../VirtualTable";
+import { getValueInPath } from "../../util";
+import { getRowHeight } from "../VirtualTable/common";
+import { EntityCollectionRowActions } from "./EntityCollectionRowActions";
+import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
+import { EntityCollectionTableProps } from "./EntityCollectionTableProps";
+import { EntityTableCell } from "./internal/EntityTableCell";
+import { CustomFieldValidator } from "../../form/validation";
+import { renderSkeletonText } from "../../preview";
+import { propertiesToColumns } from "./column_utils";
+import { ErrorView } from "../ErrorView";
+import { SelectableTable } from "../SelectableTable/SelectableTable";
+
+
+/**
+ * This component is in charge of rendering a collection table with a high
+ * degree of customization.
+ *
+ * This component is used internally by {@link EntityCollectionView} and
+ * {@link useReferenceDialog}
+ *
+ * Please note that you only need to use this component if you are building
+ * a custom view. If you just need to create a default view you can do it
+ * exclusively with config options.
+ *
+ * If you want to bind a {@link EntityCollection} to a table with the default
+ * options you see in collections in the top level navigation, you can
+ * check {@link EntityCollectionView}.
+ *
+ * The data displayed in the table is managed by a {@link EntityTableController}.
+ * You can build the default, bound to a path in the datasource, by using the hook
+ * {@link useDataSourceEntityCollectionTableController}
+ *
+ * @see EntityCollectionTableProps
+ * @see EntityCollectionView
+ * @see VirtualTable
+ * @group Components
+ */
+export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any>, UserType extends User>
+({
+     forceFilter,
+     actionsStart,
+     actions,
+     title,
+     tableRowActionsBuilder,
+     uniqueFieldValidator,
+     getPropertyFor,
+     onValueChange,
+     selectionController,
+     highlightedEntities,
+     onEntityClick,
+     onColumnResize,
+     onSizeChanged,
+     textSearchEnabled = false,
+     hoverRow = true,
+     inlineEditing = false,
+     additionalFields,
+     displayedColumnIds,
+     defaultSize,
+     properties,
+     tableController,
+     filterable = true,
+     sortable = true,
+     endAdornment,
+     AddColumnComponent,
+     AdditionalHeaderWidget,
+     additionalIDHeaderWidget,
+     emptyComponent,
+     getIdColumnWidth,
+     onTextSearchClick,
+     textSearchLoading
+ }: EntityCollectionTableProps<M>) {
+
+    const ref = useRef<HTMLDivElement>(null);
+
+    const largeLayout = useLargeLayout();
+    const disabledFilterChange = Boolean(forceFilter);
+    const selectedEntities = (selectionController?.selectedEntities?.length > 0 ? selectionController?.selectedEntities : highlightedEntities)?.filter(Boolean);
+
+    const context: FireCMSContext<UserType> = useFireCMSContext();
+
+    const [size, setSize] = React.useState<CollectionSize>(defaultSize ?? "m");
+
+    const selectedEntityIds = selectedEntities?.map(e => e.id);
+
+    const filterIsSet = !!tableController.filterValues && Object.keys(tableController.filterValues).length > 0;
+
+    const updateSize = useCallback((size: CollectionSize) => {
+        if (onSizeChanged)
+            onSizeChanged(size);
+        setSize(size);
+    }, []);
+
+    const onTextSearch = useCallback((newSearchString?: string) => tableController.setSearchString?.(newSearchString), []);
+
+    const additionalFieldsMap: Record<string, AdditionalFieldDelegate<M, UserType>> = useMemo(() => {
+        return (additionalFields
+            ? additionalFields
+                .map((aC) => ({ [aC.key]: aC as AdditionalFieldDelegate<M, any> }))
+                .reduce((a, b) => ({ ...a, ...b }), {})
+            : {}) as Record<string, AdditionalFieldDelegate<M, UserType>>;
+    }, [additionalFields]);
+
+    const customFieldValidator: CustomFieldValidator | undefined = uniqueFieldValidator;
+
+    const propertyCellRenderer = ({
+                                      column,
+                                      columnIndex,
+                                      rowData,
+                                      rowIndex
+                                  }: CellRendererParams<any>) => {
+
+        const entity: Entity<M> = rowData;
+
+        const propertyKey = column.key;
+
+        let disabled = column.custom?.disabled;
+        const propertyValue = entity.values ? getValueInPath(entity.values, propertyKey) : undefined;
+        const property = getPropertyFor?.({
+            propertyKey,
+            propertyValue,
+            entity
+        }) ?? column.custom.resolvedProperty;
+        if (!property?.disabled) {
+            disabled = false;
+        }
+
+        if (!property) {
+            return null;
+        }
+
+        return (
+            <ErrorBoundary>
+                {entity
+                    ? <PropertyTableCell
+                        key={`property_table_cell_${entity.id}_${propertyKey}`}
+                        readonly={!inlineEditing}
+                        align={column.align ?? "left"}
+                        propertyKey={propertyKey as string}
+                        property={property}
+                        value={entity?.values ? getValueInPath(entity.values, propertyKey) : undefined}
+                        customFieldValidator={customFieldValidator}
+                        columnIndex={columnIndex}
+                        width={column.width}
+                        height={getRowHeight(size)}
+                        entity={entity}
+                        disabled={disabled}
+                        path={entity.path}/>
+                    : renderSkeletonText()
+                }
+            </ErrorBoundary>);
+
+    };
+
+    const additionalCellRenderer = useCallback(({
+                                                    column,
+                                                    rowData,
+                                                    width
+                                                }: CellRendererParams<any>) => {
+
+        const entity: Entity<M> = rowData;
+
+        const additionalField = additionalFieldsMap[column.key as string];
+        const value = additionalField.dependencies
+            ? Object.entries(entity.values)
+                .filter(([key, value]) => additionalField.dependencies!.includes(key as Extract<keyof M, string>))
+                .reduce((a, b) => ({ ...a, ...b }), {})
+            : entity;
+
+        const Builder = additionalField.Builder;
+        if (!Builder && !additionalField.value) {
+            throw new Error("When using additional fields you need to provide a Builder or a value");
+        }
+
+        const child = Builder
+            ? <Builder entity={entity} context={context}/>
+            : <>{additionalField.value?.({ entity, context })}</>;
+
+        return (
+            <EntityTableCell
+                key={`additional_table_cell_${entity.id}_${column.key}`}
+                width={width}
+                size={size}
+                value={value}
+                selected={false}
+                disabled={true}
+                align={"left"}
+                allowScroll={false}
+                showExpandIcon={false}
+                disabledTooltip={"This column can't be edited directly"}
+            >
+                <ErrorBoundary>
+                    {child}
+                </ErrorBoundary>
+            </EntityTableCell>
+        );
+
+    }, [size, selectedEntityIds]);
+
+    const collectionColumns: VirtualTableColumn[] = (() => {
+        const columnsResult: VirtualTableColumn[] = propertiesToColumns({
+            properties,
+            sortable,
+            forceFilter,
+            disabledFilter: disabledFilterChange,
+            AdditionalHeaderWidget
+        });
+
+        const additionalTableColumns: VirtualTableColumn[] = additionalFields
+            ? additionalFields.map((additionalField) =>
+                ({
+                    key: additionalField.key,
+                    align: "left",
+                    sortable: false,
+                    title: additionalField.name,
+                    width: additionalField.width ?? 200
+                }))
+            : [];
+        return [...columnsResult, ...additionalTableColumns];
+    })();
+
+    const idColumn: VirtualTableColumn = {
+        key: "id_ewcfedcswdf3",
+        width: getIdColumnWidth?.() ?? (largeLayout ? 160 : 130),
+        title: "ID",
+        resizable: false,
+        frozen: largeLayout,
+        headerAlign: "center",
+        align: "center",
+        AdditionalHeaderWidget: () => additionalIDHeaderWidget
+    }
+
+    const columns: VirtualTableColumn[] = [
+        idColumn,
+        ...displayedColumnIds
+            .map((p) => {
+                return collectionColumns.find(c => c.key === p.key);
+            }).filter(Boolean) as VirtualTableColumn[]
+    ];
+
+    const cellRenderer = (props: CellRendererParams<any>) => {
+        const column = props.column;
+        const columns = props.columns;
+        const columnKey = column.key;
+
+        try {
+            if (props.columnIndex === 0) {
+                if (tableRowActionsBuilder)
+                    return tableRowActionsBuilder({
+                        entity: props.rowData,
+                        size,
+                        width: column.width,
+                        frozen: column.frozen
+                    });
+                else
+                    return <EntityCollectionRowActions entity={props.rowData}
+                                                       width={column.width}
+                                                       frozen={column.frozen}
+                                                       isSelected={false}
+                                                       size={size}/>;
+            } else if (additionalFieldsMap[columnKey]) {
+                return additionalCellRenderer(props);
+            } else if (props.columnIndex < columns.length + 1) {
+                return propertyCellRenderer(props);
+            } else {
+                throw Error("Internal: columns not mapped properly");
+            }
+        } catch (e: any) {
+            console.error("Error rendering cell", e);
+            return <EntityTableCell
+                size={size}
+                width={column.width}
+                saved={false}
+                value={null}
+                align={"left"}
+                fullHeight={false}
+                disabled={true}>
+                <ErrorView error={e}/>
+            </EntityTableCell>;
+        }
+    }
+
+    return (
+
+        <div ref={ref}
+             className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
+
+            <CollectionTableToolbar
+                forceFilter={disabledFilterChange}
+                filterIsSet={filterIsSet}
+                onTextSearch={textSearchEnabled ? onTextSearch : undefined}
+                textSearchLoading={textSearchLoading}
+                onTextSearchClick={textSearchEnabled ? onTextSearchClick : undefined}
+                clearFilter={tableController.clearFilter}
+                size={size}
+                onSizeChanged={updateSize}
+                title={title}
+                actionsStart={actionsStart}
+                actions={actions}
+                loading={tableController.dataLoading}/>
+
+            <SelectableTable columns={columns}
+                             size={size}
+                             inlineEditing={inlineEditing}
+                             cellRenderer={cellRenderer}
+                             onEntityClick={onEntityClick}
+                             highlightedRow={useCallback((entity: Entity<M>) => selectedEntityIds?.includes(entity.id) ?? false, [selectedEntityIds])}
+                             tableController={tableController}
+                             onValueChange={onValueChange}
+                             onColumnResize={onColumnResize}
+                             hoverRow={hoverRow}
+                             filterable={filterable}
+                             emptyComponent={emptyComponent}
+                             endAdornment={endAdornment}
+                             AddColumnComponent={AddColumnComponent}/>
+
+        </div>
+    );
+
+};

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+import {
+    AdditionalFieldDelegate,
+    CollectionSize,
+    Entity, EntityCollection,
+    EntityTableController,
+    FilterValues,
+    ResolvedProperties,
+    ResolvedProperty,
+    SelectionController,
+    User
+} from "../../types";
+import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from "../common/types";
+
+
+/**
+ * @group Collection components
+ */
+export type EntityCollectionTableProps<M extends Record<string, any>,
+    UserType extends User = User> = {
+
+    /**
+     * Display these entities as selected
+     */
+    selectionController: SelectionController<M>;
+
+    /**
+     * List of entities that will be displayed as selected;
+     */
+    highlightedEntities?: Entity<M>[];
+
+    /**
+     * Override the title in the toolbar
+     */
+    title?: React.ReactNode;
+
+    /**
+     * Additional component that renders actions such as buttons in the
+     * collection toolbar, displayed on the left side
+     */
+    actionsStart?: React.ReactNode;
+
+    /**
+     * Callback when a cell value changes.
+     */
+    onValueChange?: OnCellValueChange<any, M>;
+
+    uniqueFieldValidator?: UniqueFieldValidator;
+
+    /**
+     * Builder for creating the buttons in each row
+     * @param entity
+     * @param size
+     */
+    tableRowActionsBuilder?: (params: {
+        entity: Entity<M>,
+        size: CollectionSize,
+        width: number,
+        frozen?: boolean
+    }) => React.ReactNode;
+
+    /**
+     * Callback when anywhere on the table is clicked
+     */
+    onEntityClick?(entity: Entity<M>): void;
+
+    /**
+     * Callback when a column is resized
+     */
+    onColumnResize?(params: OnColumnResizeParams): void;
+
+    /**
+     * Callback when the selected size of the table is changed
+     */
+    onSizeChanged?(size: CollectionSize): void;
+
+    /**
+     * Should apply a different style to a row when hovering
+     */
+    hoverRow?: boolean;
+
+    /**
+     * Additional component that renders actions such as buttons in the
+     * collection toolbar, displayed on the right side
+     */
+    actions?: React.ReactNode;
+
+    /**
+     * Controller holding the logic for the table
+     * {@link useDataSourceEntityCollectionTableController}
+     * {@link EntityTableController}
+     */
+    tableController: EntityTableController<M>;
+
+    displayedColumnIds: PropertyColumnConfig[];
+
+    forceFilter?: FilterValues<Extract<keyof M, string>>;
+
+    textSearchEnabled?: boolean;
+
+    inlineEditing?: boolean;
+
+    additionalFields?: AdditionalFieldDelegate<M, UserType>[];
+
+    defaultSize?: CollectionSize;
+
+    properties: ResolvedProperties<M>;
+
+    getPropertyFor?: (props: GetPropertyForProps<M>) => ResolvedProperties<M>[string];
+
+    filterable?: boolean;
+
+    sortable?: boolean;
+
+    endAdornment?: React.ReactNode;
+
+    AdditionalHeaderWidget?: React.ComponentType<{
+        property: ResolvedProperty,
+        propertyKey: string,
+        onHover: boolean,
+    }>;
+
+    AddColumnComponent?: React.ComponentType;
+
+    additionalIDHeaderWidget?: React.ReactNode;
+
+    emptyComponent?: React.ReactNode;
+
+    getIdColumnWidth?: () => number;
+
+    onTextSearchClick?: () => void;
+
+    textSearchLoading?: boolean;
+}
+
+export type GetPropertyForProps<M extends Record<string, any>> = {
+    propertyKey: string,
+    propertyValue: any,
+    entity: Entity<M>
+};
+
+export type PropertyColumnConfig = {
+    key: string,
+    disabled: boolean,
+};