@rebasepro/core 0.0.1-canary.0

package/src/components/RebaseLogo.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+
+export function RebaseLogo({
+    width,
+    height,
+    className,
+    style
+}: {
+    width?: string,
+    height?: string,
+    className?: string,
+    style?: React.CSSProperties
+}) {
+    return (
+        <svg
+            width={width ?? "100%"} height={height ?? "100%"}
+            version="1.1"
+            style={style}
+            className={className}
+            viewBox="0 0 583 583" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="291.5" cy="291.5" r="291.5" fill="#0070F4" />
+            <ellipse cx="292" cy="291.5" rx="173" ry="173.5" fill="#FF3773" />
+            <path
+                d="M465 291.5C465 268.847 460.525 246.416 451.831 225.487C443.137 204.558 430.394 185.542 414.329 169.524C398.265 153.506 379.194 140.8 358.204 132.131C337.215 123.462 314.719 119 292 119C269.281 119 246.785 123.462 225.796 132.131C204.806 140.8 185.735 153.506 169.671 169.524C153.606 185.542 140.863 204.558 132.169 225.487C123.475 246.416 119 268.847 119 291.5L292 291.5H465Z"
+                fill="#FFA400" />
+        </svg>
+    );
+
+}

package/src/components/ReferenceTable/EntitySelectionTable.tsx

@@ -0,0 +1,371 @@
+import React, { MouseEventHandler, useCallback, useEffect, useMemo, useState } from "react";
+import { CollectionSize, Entity, EntityCollection, FilterValues } from "@rebasepro/types";
+
+import {
+    EntityCollectionRowActions,
+    EntityCollectionTable,
+    useDataSourceTableController
+} from "../EntityCollectionTable";
+import {
+    useAuthController,
+    useCustomizationController,
+    useDataSource,
+    useLargeLayout,
+    useCMSUrlController,
+    useSideEntityController,
+    usePermissions
+} from "../../hooks";
+import { ErrorView } from "../ErrorView";
+import { AddIcon, Button, DialogActions, Typography } from "@rebasepro/ui";
+import { IconForView } from "../../util";
+import { useSelectionController } from "../EntityCollectionView/useSelectionController";
+import { useColumnIds, useTableSearchHelper } from "../common";
+import { useSideDialogContext } from "../../core";
+import { useAnalyticsController } from "../../hooks/useAnalyticsController";
+
+/**
+ * @group Components
+ */
+export interface EntitySelectionProps<M extends Record<string, any>> {
+
+    /**
+     * 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, any>>(
+    {
+        onSingleEntitySelected,
+        onMultipleEntitiesSelected,
+        multiselect,
+        collection,
+        path: pathInput,
+        selectedEntityIds: selectedEntityIdsProp,
+        description,
+        forceFilter,
+        maxSelection,
+    }: EntitySelectionProps<M>) {
+
+    const sideDialogContext = useSideDialogContext();
+    const sideEntityController = useSideEntityController();
+    const cmsUrlController = useCMSUrlController();
+    const analyticsController = useAnalyticsController();
+
+    const path = cmsUrlController.resolveDatabasePathsFrom(pathInput);
+
+    const dataSource = useDataSource(collection);
+
+    const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = useState<Entity<any>[]>([]);
+
+    const toggleEntitySelection = (entity: Entity<any>) => {
+        let newValue;
+        const selectedEntities = selectionController.selectedEntities;
+
+        analyticsController.onAnalyticsEvent?.("reference_selection_toggle", {
+            path,
+            entityId: entity.id
+        });
+        if (selectedEntities) {
+
+            if (selectedEntities.map((e) => e.id).indexOf(entity.id) > -1) {
+                newValue = selectedEntities.filter((item: Entity<any>) => item.id !== entity.id);
+            } else {
+                if (maxSelection && selectedEntities.length >= maxSelection)
+                    return;
+                newValue = [...selectedEntities, entity];
+            }
+            selectionController.setSelectedEntities(newValue);
+
+            if (onMultipleEntitiesSelected)
+                onMultipleEntitiesSelected(newValue);
+        }
+    };
+
+    const selectionController = useSelectionController(toggleEntitySelection);
+
+    /**
+     * Fetch initially selected ids
+     */
+    useEffect(() => {
+        let unmounted = false;
+        const selectedEntityIds = selectedEntityIdsProp?.map(id => id?.toString()).filter(Boolean);
+        if (selectedEntityIds && collection) {
+            Promise.all(
+                selectedEntityIds.map((entityId) =>
+                    dataSource.fetchEntity({
+                        path,
+                        entityId,
+                        collection
+                    })))
+                .then((entities) => {
+                    if (!unmounted) {
+                        const result = entities.filter(e => e !== undefined) as Entity<any>[];
+                        selectionController.setSelectedEntities(result);
+                        setEntitiesDisplayedFirst(result);
+                    }
+                });
+        } else {
+            selectionController.setSelectedEntities([]);
+            setEntitiesDisplayedFirst([]);
+        }
+        return () => {
+            unmounted = true;
+        };
+    }, [dataSource, path, selectedEntityIdsProp, collection, selectionController.setSelectedEntities]);
+
+    const onClear = () => {
+        analyticsController.onAnalyticsEvent?.("reference_selection_clear", {
+            path
+        });
+        selectionController.setSelectedEntities([]);
+        if (!multiselect && onSingleEntitySelected) {
+            onSingleEntitySelected(null);
+        } else if (onMultipleEntitiesSelected) {
+            onMultipleEntitiesSelected([]);
+        }
+    };
+
+    const onEntityClick = (entity: Entity<any>) => {
+        if (!multiselect && onSingleEntitySelected) {
+            analyticsController.onAnalyticsEvent?.("reference_selected_single", {
+                path,
+                entityId: entity.id
+            });
+            onSingleEntitySelected(entity);
+            sideDialogContext.close(false);
+        } else {
+            toggleEntitySelection(entity);
+        }
+    };
+
+    // 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 = useDataSourceTableController<M>({
+        path,
+        collection,
+        entitiesDisplayedFirst,
+        forceFilter,
+        updateUrl: false,
+    });
+
+    const {
+        textSearchLoading,
+        textSearchInitialised,
+        onTextSearchClick
+    } =
+        useTableSearchHelper({
+            collection,
+            path,
+        });
+
+    return (
+
+        <div className="flex flex-col h-full">
+
+            <div className="grow">
+                {entitiesDisplayedFirst &&
+                    <EntityCollectionTable
+                        textSearchLoading={textSearchLoading}
+                        onTextSearchClick={!textSearchInitialised ? onTextSearchClick : undefined}
+                        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={<AddIcon />}>
+                Add {collection.singularName ?? collection.name}
+            </Button>
+            : <Button
+                onClick={onClick}>
+                <AddIcon />
+            </Button>);
+
+    return (
+        <>
+            <Button onClick={onClear}
+                variant={"text"}>
+                Clear
+            </Button>
+            {addButton}
+        </>
+    );
+}

package/src/components/ReferenceWidget.tsx

@@ -0,0 +1,152 @@
+import React, { useCallback, useMemo } from "react";
+
+import { Entity, EntityCollection, EntityReference, FilterValues, PreviewSize } from "@rebasepro/types";
+import { getReferenceFrom } from "@rebasepro/common";
+import { ReferencePreview } from "../preview";
+import { useCollectionRegistryController, useEntitySelectionDialog } from "../hooks";
+import { Button, cls } from "@rebasepro/ui";
+
+export type ReferenceWidgetProps<M extends Record<string, any>> = {
+    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, any>>({
+    name,
+    multiselect = false,
+    path,
+    disabled,
+    value,
+    onReferenceSelected,
+    onMultipleReferenceSelected,
+    previewProperties,
+    forceFilter,
+    size,
+    className,
+    includeId,
+    includeEntityLink
+}: ReferenceWidgetProps<M>) {
+
+    const navigationController = useCollectionRegistryController();
+
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return navigationController.getCollection(path);
+    }, [path, navigationController.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>;
+}