@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/components/ReferenceTable/EntitySelectionTable.tsx

@@ -0,0 +1,363 @@
+import type { EntityCollection } from "@rebasepro/types";
+import React, { MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CollectionSize, Entity, FilterValues } from "@rebasepro/types";
+
+import {
+    EntityCollectionRowActions,
+    EntityCollectionTable
+} from "../EntityCollectionTable";
+import {
+    useAuthController,
+    useCustomizationController,
+    useData,
+    useDataTableController,
+    useLargeLayout,
+    usePermissions
+} from "@rebasepro/core";
+import { ErrorView } from "@rebasepro/core";
+import { Button, DialogActions, Typography } from "@rebasepro/ui";
+import { PlusIcon } from "lucide-react";
+import { IconForView } from "@rebasepro/core";
+import { useSelectionController } from "../EntityCollectionView/useSelectionController";
+
+import { useColumnIds } from "@rebasepro/core";
+import { useSideDialogContext } from "../SideDialogs";
+import { useAnalyticsController } from "@rebasepro/core";
+import { useUrlController, useSideEntityController } from "../../index";
+
+/**
+ * @group Components
+ */
+export interface EntitySelectionProps<M extends Record<string, unknown>> {
+
+    /**
+     * Allow multiple selection of values
+     */
+    multiselect?: boolean;
+
+    /**
+     * Entity collection config
+     */
+    collection?: EntityCollection<M>;
+
+    /**
+     * Absolute path of the collection.
+     * May be not set if this hook is being used in a component and the path is
+     * dynamic. If not set, the dialog won't open.
+     */
+    path: string;
+
+    /**
+     * If you are opening the dialog for the first time, you can select some
+     * entity ids to be displayed first.
+     */
+    selectedEntityIds?: (string | number)[];
+
+    /**
+     * If `multiselect` is set to `false`, you will get the selected entity
+     * in this callback.
+     * @param entity
+     * @callback
+     */
+    onSingleEntitySelected?(entity: Entity<any> | null): void;
+
+    /**
+     * If `multiselect` is set to `true`, you will get the selected entities
+     * in this callback.
+     * @param entities
+     * @callback
+     */
+    onMultipleEntitiesSelected?(entities: Entity<any>[]): void;
+
+    /**
+     * Allow selection of entities that pass the given filter only.
+     */
+    forceFilter?: FilterValues<string>;
+
+    /**
+     * Use this description to indicate the user what to do in this dialog.
+     */
+    description?: React.ReactNode;
+
+    /**
+     * Maximum number of entities that can be selected.
+     */
+    maxSelection?: number;
+
+}
+
+/**
+ * This component allows to select entities from a given collection.
+ * You probably want to open this dialog as a side view using {@link useEntitySelectionTable}
+ * @group Components
+ */
+export function EntitySelectionTable<M extends Record<string, unknown>>(
+    {
+        onSingleEntitySelected,
+        onMultipleEntitiesSelected,
+        multiselect,
+        collection,
+        path: pathInput,
+        selectedEntityIds: selectedEntityIdsProp,
+        description,
+        forceFilter,
+        maxSelection
+    }: EntitySelectionProps<M>) {
+
+    const sideDialogContext = useSideDialogContext();
+    const sideEntityController = useSideEntityController();
+    const urlController = useUrlController();
+    const analyticsController = useAnalyticsController();
+
+    const path = urlController.resolveDatabasePathsFrom(pathInput);
+
+    const dataClient = useData();
+
+    const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = useState<Entity<any>[]>([]);
+
+    const selectionController = useSelectionController();
+
+    // Track whether the selection has been initialized to avoid
+    // firing onMultipleEntitiesSelected during the initial mount/fetch.
+    const selectionInitializedRef = useRef(false);
+
+    // Propagate selection changes to the parent callback.
+    // This runs after the selectionController state updates, ensuring
+    // we always send the correct, non-stale selection to the parent.
+    useEffect(() => {
+        if (!selectionInitializedRef.current) return;
+        if (onMultipleEntitiesSelected) {
+            onMultipleEntitiesSelected(selectionController.selectedEntities);
+        }
+    }, [selectionController.selectedEntities]);
+
+    /**
+     * Fetch initially selected ids
+     */
+    useEffect(() => {
+        let unmounted = false;
+        const selectedEntityIds = selectedEntityIdsProp?.map(id => id?.toString()).filter(Boolean);
+        if (selectedEntityIds && selectedEntityIds.length > 0 && collection) {
+            Promise.all(
+                selectedEntityIds.map((entityId) =>
+                    dataClient.collection(path).findById(entityId))
+                )
+                .then((entities) => {
+                    if (!unmounted) {
+                        const result = entities.filter((e): e is Entity<any> => !!e);
+                        selectionController.setSelectedEntities(result);
+                        setEntitiesDisplayedFirst(result);
+                        // Mark initialized after the initial fetch completes
+                        selectionInitializedRef.current = true;
+                    }
+                });
+        } else {
+            selectionController.setSelectedEntities([]);
+            setEntitiesDisplayedFirst([]);
+            selectionInitializedRef.current = true;
+        }
+        return () => {
+            unmounted = true;
+        };
+    }, [dataClient, path, selectedEntityIdsProp, collection, selectionController.setSelectedEntities]);
+
+    const onClear = () => {
+        analyticsController.onAnalyticsEvent?.("reference_selection_clear", {
+            path
+        });
+        selectionController.setSelectedEntities([]);
+        if (!multiselect && onSingleEntitySelected) {
+            onSingleEntitySelected(null);
+        }
+    };
+
+    const onEntityClick = useCallback((entity: Entity<any>) => {
+        if (!multiselect && onSingleEntitySelected) {
+            analyticsController.onAnalyticsEvent?.("reference_selected_single", {
+                path,
+                entityId: entity.id
+            });
+            onSingleEntitySelected(entity);
+            sideDialogContext.close(false);
+        } else {
+            // For multiselect, delegate to the selection controller's toggle.
+            // The useEffect above will propagate the change to onMultipleEntitiesSelected.
+            analyticsController.onAnalyticsEvent?.("reference_selection_toggle", {
+                path,
+                entityId: entity.id
+            });
+            const selectedEntities = selectionController.selectedEntities;
+            if (selectedEntities.map((e) => e.id).indexOf(entity.id) > -1) {
+                selectionController.setSelectedEntities(
+                    selectedEntities.filter((item: Entity<any>) => item.id !== entity.id)
+                );
+            } else {
+                if (maxSelection && selectedEntities.length >= maxSelection) return;
+                selectionController.setSelectedEntities([...selectedEntities, entity]);
+            }
+        }
+    }, [multiselect, onSingleEntitySelected, analyticsController, path, sideDialogContext, selectionController, maxSelection]);
+
+    // create a new entity from within the reference dialog
+    const onNewClick = () => {
+        analyticsController.onAnalyticsEvent?.("reference_selection_new_entity", {
+            path
+        });
+        sideEntityController.open({
+            path: path,
+            collection,
+            updateUrl: true,
+            onUpdate: ({ entity }) => {
+                setEntitiesDisplayedFirst([entity, ...entitiesDisplayedFirst]);
+                onEntityClick(entity);
+            },
+            closeOnSave: true
+        });
+    };
+
+    const tableRowActionsBuilder = ({
+        entity,
+        size,
+        width,
+        frozen
+    }: {
+        entity: Entity<any>,
+        size: CollectionSize,
+        width: number,
+        frozen?: boolean
+    }) => {
+        const selectedEntities = selectionController.selectedEntities;
+        const isSelected = selectedEntities && selectedEntities.map(e => e.id).indexOf(entity.id) > -1;
+        return <EntityCollectionRowActions
+            width={width}
+            frozen={frozen}
+            entity={entity}
+            size={size}
+            isSelected={isSelected}
+            selectionEnabled={multiselect}
+            hideId={collection?.hideIdFromCollection}
+            path={path}
+            selectionController={selectionController}
+            openEntityMode={"side_panel"}
+        />;
+
+    };
+
+    const onDone = useCallback((event: React.SyntheticEvent) => {
+        event.stopPropagation();
+        sideDialogContext.close(false);
+    }, [sideDialogContext]);
+
+    if (!collection) {
+        return <ErrorView
+            error={"Could not find collection with id " + collection}/>
+    }
+
+    const displayedColumnIds = useColumnIds(collection, false);
+
+    const tableController = useDataTableController<M>({
+        path,
+        collection,
+        entitiesDisplayedFirst,
+        forceFilter,
+        updateUrl: false
+    });
+
+    return (
+
+        <div className="flex flex-col h-full">
+
+            <div className="grow">
+                {entitiesDisplayedFirst &&
+                    <EntityCollectionTable
+                        additionalFields={collection.additionalFields}
+                        displayedColumnIds={displayedColumnIds}
+                        onEntityClick={onEntityClick}
+                        tableController={tableController}
+                        enablePopupIcon={false}
+                        tableRowActionsBuilder={tableRowActionsBuilder}
+                        openEntityMode={"side_panel"}
+                        title={<Typography variant={"subtitle2"} className={"flex flex-row gap-2"}>
+                            <IconForView
+                                size={"small"}
+                                collectionOrView={collection}
+                                className={"text-surface-300 dark:text-surface-600"}/>
+                            {collection.singularName
+                                ? `Select ${collection.singularName}`
+                                : `Select from ${collection.name}`}
+                        </Typography>}
+                        defaultSize={collection.defaultSize}
+                        properties={collection.properties}
+                        forceFilter={forceFilter}
+                        inlineEditing={false}
+                        selectionController={selectionController}
+                        actions={<EntitySelectionDialogActions
+                            collection={collection}
+                            path={path}
+                            onNewClick={onNewClick}
+                            onClear={onClear}/>
+                        }
+                    />}
+            </div>
+            <DialogActions translucent={false}>
+                {description &&
+                    <Typography variant={"body2"}
+                        className="grow text-left">
+                        {description}
+                    </Typography>}
+                <Button
+                    onClick={onDone}
+                    variant="filled">
+                    Done
+                </Button>
+            </DialogActions>
+        </div>
+
+    );
+
+}
+
+function EntitySelectionDialogActions({
+    collection,
+    path,
+    onClear,
+    onNewClick
+}: {
+    collection: EntityCollection<any>,
+    path: string,
+    onClear: () => void,
+    onNewClick: () => void
+}) {
+
+    const { canCreate } = usePermissions();
+
+    const largeLayout = useLargeLayout();
+
+    const onClick: MouseEventHandler<HTMLButtonElement> | undefined = onNewClick
+        ? (e) => {
+            e.preventDefault();
+            onNewClick();
+        }
+        : undefined;
+    const addButton = canCreate(collection, path) &&
+        onClick && (largeLayout
+            ? <Button
+                onClick={onClick}
+                startIcon={<PlusIcon/>}>
+                Add {collection.singularName ?? collection.name}
+            </Button>
+            : <Button
+                onClick={onClick}>
+                <PlusIcon/>
+            </Button>);
+
+    return (
+        <>
+            <Button onClick={onClear}
+                variant={"text"}>
+                Clear
+            </Button>
+            {addButton}
+        </>
+    );
+}

package/src/components/ReferenceWidget.tsx

@@ -0,0 +1,155 @@
+import { useEntitySelectionDialog } from "../hooks/useEntitySelectionDialog";
+import type { EntityCollection } from "@rebasepro/types";
+import React, { useCallback, useMemo } from "react";
+
+import { Entity, EntityReference, FilterValues } from "@rebasepro/types";
+import type { PreviewSize } from "../types/components/PropertyPreviewProps";
+import { getReferenceFrom } from "@rebasepro/common";
+import { ReferencePreview } from "../preview";
+import { Button, cls } from "@rebasepro/ui";
+import { useCollectionRegistryController } from "../index";
+
+export type ReferenceWidgetProps<M extends Record<string, unknown>> = {
+    name?: string,
+    multiselect?: boolean,
+    value: EntityReference | EntityReference[] | null,
+    onReferenceSelected?: (params: {
+        reference: EntityReference | null,
+        entity: Entity<M> | null
+    }) => void,
+    onMultipleReferenceSelected?: (params: {
+        references: EntityReference[] | null,
+        entities: Entity<M>[] | null
+    }) => void,
+    path: string,
+    disabled?: boolean,
+    previewProperties?: string[];
+    /**
+     * Allow selection of entities that pass the given filter only.
+     */
+    forceFilter?: FilterValues<string>;
+    size: PreviewSize;
+    className?: string;
+    includeId?: boolean;
+    includeEntityLink?: boolean;
+};
+
+/**
+ * This field allows selecting reference/s.
+ */
+export function ReferenceWidget<M extends Record<string, unknown>>({
+    name,
+    multiselect = false,
+    path,
+    disabled,
+    value,
+    onReferenceSelected,
+    onMultipleReferenceSelected,
+    previewProperties,
+    forceFilter,
+    size,
+    className,
+    includeId,
+    includeEntityLink
+}: ReferenceWidgetProps<M>) {
+
+    const collectionRegistryController = useCollectionRegistryController();
+
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return collectionRegistryController.getCollection(path);
+    }, [path, collectionRegistryController.getCollection]);
+
+    const onSingleEntitySelected = useCallback((entity: Entity<M> | null) => {
+        if (disabled)
+            return;
+        if (onReferenceSelected) {
+            const reference = entity ? getReferenceFrom(entity) : null;
+            onReferenceSelected?.({
+                reference,
+                entity
+            });
+        }
+    }, [disabled, onReferenceSelected]);
+
+    const onMultipleEntitiesSelected = useCallback((entities: Entity<M>[]) => {
+        if (disabled)
+            return;
+        if (onMultipleReferenceSelected) {
+            const references = entities ? entities.map(e => getReferenceFrom(e)) : null;
+            onMultipleReferenceSelected({
+                references,
+                entities
+            });
+        }
+    }, [disabled, onReferenceSelected]);
+
+    const referenceDialogController = useEntitySelectionDialog({
+        multiselect,
+        path,
+        collection,
+        onSingleEntitySelected,
+        onMultipleEntitiesSelected,
+        forceFilter
+    }
+    );
+
+    const clearValue = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (multiselect) {
+            onMultipleEntitiesSelected([]);
+        } else {
+            onSingleEntitySelected(null);
+        }
+    }, [onReferenceSelected]);
+
+    let child: React.ReactNode;
+
+    const onEntryClick = () => {
+        if (disabled)
+            return;
+        referenceDialogController.open();
+    };
+
+    if (Array.isArray(value)) {
+        child = <div className={"flex flex-col gap-4"}>
+            {value.map((ref, index) => {
+                return <ReferencePreview
+                    key={`reference_preview_${index}`}
+                    onClick={onEntryClick}
+                    reference={ref}
+                    disabled={disabled}
+                    previewProperties={previewProperties}
+                    size={size}
+                    includeId={includeId}
+                    includeEntityLink={includeEntityLink}/>
+            })}
+        </div>
+    } else if (value?.isEntityReference && value?.isEntityReference()) {
+        child = <ReferencePreview
+            reference={value}
+            onClick={onEntryClick}
+            disabled={disabled}
+            previewProperties={previewProperties}
+            size={size}
+            includeId={includeId}
+            includeEntityLink={includeEntityLink}/>
+
+    }
+    return <div className={cls("text-sm font-medium",
+        "min-w-80 flex flex-col gap-4",
+        "relative transition-colors duration-200 ease-in rounded-xs font-medium",
+        disabled ? "bg-opacity-50" : "hover:bg-opacity-75",
+        "dark:text-white/50 text-text-primary/50 dark:text-text-primary-dark/50 dark:text-white/50",
+        className
+    )}>
+
+        {child}
+        {!value && <div className="justify-center text-left">
+            <Button disabled={disabled}
+                onClick={onEntryClick}>
+                Edit {name}
+            </Button>
+        </div>}
+
+    </div>;
+}