@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -0,0 +1,66 @@
+import type { FieldProps } from "../../types/fields";
+import type { Property } from "@rebasepro/types";
+import React from "react";
+
+;
+
+import { PropertyPreview } from "../../preview";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { getIconForProperty } from "../../util/property_utils";
+import { cls, paperMixin } from "@rebasepro/ui";
+
+/**
+ *
+ * Simply render the non-editable preview of a field
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ReadOnlyFieldBinding({
+    propertyKey,
+    value,
+    error,
+    showError,
+    minimalistView,
+    property,
+    includeDescription,
+    context
+}: FieldProps<Property>) {
+
+    // if (!context.entityId)
+    //     throw new Error("ReadOnlyFieldBinding: Entity id is null");
+
+    return (
+
+        <>
+
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name ?? propertyKey}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            }
+
+            <div
+                className={cls(paperMixin, "w-full min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+
+                <ErrorBoundary>
+                    <PropertyPreview propertyKey={propertyKey}
+                        value={value}
+                        property={property}
+                        size={"medium"}/>
+                </ErrorBoundary>
+
+            </div>
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                property={property}/>
+
+        </>
+    );
+}

package/src/form/field_bindings/ReferenceAsStringFieldBinding.tsx

@@ -0,0 +1,141 @@
+import { useEntitySelectionDialog } from "../../hooks/useEntitySelectionDialog";
+import type { EntityCollection } from "@rebasepro/types";
+import type { FieldProps } from "../../types/fields";
+import type { Property, StringProperty } from "@rebasepro/types";
+import React, { useCallback, useMemo } from "react";
+import { Entity, EntityReference } from "@rebasepro/types";
+import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ErrorView } from "@rebasepro/core";
+import { ReferencePreview } from "../../preview";
+import { IconForView } from "@rebasepro/core";
+import { getIconForProperty } from "../../util/property_utils";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { cls } from "@rebasepro/ui";
+import { useCollectionRegistryController } from "../../index";
+
+/**
+ * Field that opens a reference selection dialog and stores the entity ID as a string.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ReferenceAsStringFieldBinding(props: FieldProps<StringProperty>) {
+    if (typeof props.property.reference?.path !== "string") {
+        return <ReadOnlyFieldBinding {...props as FieldProps<Property>}/>;
+    }
+
+    return <ReferenceAsStringFieldBindingInternal {...props}/>;
+}
+
+function ReferenceAsStringFieldBindingInternal({
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    isSubmitting,
+    disabled,
+    minimalistView,
+    property,
+    includeDescription,
+    size = "medium"
+}: FieldProps<StringProperty>) {
+    if (!property.reference?.path) {
+        throw new Error("Property path is required for ReferenceAsStringFieldBinding");
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const collectionRegistryController = useCollectionRegistryController();
+    const path = property.reference.path;
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return path ? collectionRegistryController.getCollection(path) : undefined;
+    }, [path]);
+
+    const referenceValue: EntityReference | undefined = useMemo(() => {
+        if (value && path) {
+            return new EntityReference({ id: value,
+path });
+        }
+        return undefined;
+    }, [value, path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    }
+
+    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+        setValue(e ? String(e.id) : null);
+    }, [setValue]);
+
+    const referenceDialogController = useEntitySelectionDialog({
+        multiselect: false,
+        path,
+        collection,
+        onSingleEntitySelected,
+        selectedEntityIds: value ? [value] : undefined,
+        forceFilter: property.reference.forceFilter
+    }
+    );
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    return (
+        <>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name ?? propertyKey}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+
+            {!collection && <ErrorView
+                error={"The specified collection does not exist. Check console"}/>}
+
+            {collection && <>
+
+                {referenceValue && <ReferencePreview
+                    disabled={!path}
+                    previewProperties={property.reference?.previewProperties}
+                    hover={!disabled}
+                    size={size}
+                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                    reference={referenceValue}
+                    includeEntityLink={property.reference?.includeEntityLink}
+                    includeId={property.reference?.includeId}
+                />}
+
+                {!value && <div className="justify-center text-left">
+                    <EntityPreviewContainer
+                        className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                            disabled || isSubmitting
+                                ? "text-surface-accent-500"
+                                : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                        onClick={onEntryClick}
+                        size={"medium"}>
+                        <IconForView collectionOrView={collection}
+                            className={"text-surface-300 dark:text-surface-600"}/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
+                </div>}
+            </>}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property}/>
+
+        </>
+    );
+}

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -0,0 +1,141 @@
+import { useEntitySelectionDialog } from "../../hooks/useEntitySelectionDialog";
+import type { EntityCollection } from "@rebasepro/types";
+import type { FieldProps } from "../../types/fields";
+import type { Property, ReferenceProperty } from "@rebasepro/types";
+import React, { useCallback, useMemo } from "react";
+
+import { Entity, EntityReference } from "@rebasepro/types";
+import { ErrorView } from "@rebasepro/core";
+import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { ReferencePreview } from "../../preview";
+import { IconForView } from "@rebasepro/core";
+import { getIconForProperty } from "../../util/property_utils";
+import { getReferenceFrom } from "@rebasepro/common";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { cls } from "@rebasepro/ui";
+import { useCollectionRegistryController } from "../../index";
+
+/**
+ * Field that opens a reference selection dialog.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ReferenceFieldBinding(props: FieldProps<ReferenceProperty>) {
+
+    if (typeof props.property.path !== "string") {
+        return <ReadOnlyFieldBinding {...props as FieldProps<Property>}/>
+    }
+
+    return <ReferenceFieldBindingInternal {...props}/>;
+
+}
+
+function ReferenceFieldBindingInternal({
+    propertyKey,
+    value,
+    setValue,
+    error,
+    showError,
+    isSubmitting,
+    disabled,
+    minimalistView,
+    touched,
+    autoFocus,
+    property,
+    includeDescription,
+    size = "medium"
+}: FieldProps<ReferenceProperty>) {
+    if (!property.path) {
+        throw new Error("Property path is required for ReferenceFieldBinding");
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const validValue = value && value.isEntityReference && value.isEntityReference();
+
+    const collectionRegistryController = useCollectionRegistryController();
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return property.path ? collectionRegistryController.getCollection(property.path) : undefined;
+    }, [property.path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${property.path}`);
+    }
+
+    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+        const ref = e ? getReferenceFrom(e) : null;
+        setValue(ref);
+    }, [setValue, propertyKey]);
+
+    const referenceDialogController = useEntitySelectionDialog({
+        multiselect: false,
+        path: property.path,
+        collection,
+        onSingleEntitySelected,
+        selectedEntityIds: validValue ? [value.id] : undefined,
+        forceFilter: property.forceFilter
+    }
+    );
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    return (
+        <>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name ?? propertyKey}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+
+            {!collection && <ErrorView
+                error={"The specified collection does not exist. Check console"}/>}
+
+            {collection && <>
+
+                {value && <ReferencePreview
+                    disabled={!property.path}
+                    previewProperties={property.previewProperties}
+                    hover={!disabled}
+                    size={size}
+                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                    reference={value}
+                    includeEntityLink={property.includeEntityLink}
+                    includeId={property.includeId}
+                />}
+
+                {!value && <div className="justify-center text-left">
+                    <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                        disabled || isSubmitting
+                            ? "text-surface-accent-500"
+                            : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                        onClick={onEntryClick}
+                        size={"medium"}>
+                        <IconForView collectionOrView={collection}
+                            className={"text-surface-300 dark:text-surface-600"}/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
+                </div>}
+            </>}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error}
+                disabled={disabled}
+                property={property}/>
+
+        </>
+    );
+
+}

package/src/form/field_bindings/RelationFieldBinding.tsx

@@ -0,0 +1,184 @@
+import { useEntitySelectionDialog } from "../../hooks/useEntitySelectionDialog";
+import type { FieldProps } from "../../types/fields";
+import type { RelationProperty } from "@rebasepro/types";
+import React, { useCallback } from "react";
+import { Entity, getDataSourceCapabilities } from "@rebasepro/types";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { IconForView } from "@rebasepro/core";
+import { getIconForProperty } from "../../util/property_utils";
+import { getRelationFrom, resolveRelationProperty, normalizeToEntityRelation } from "@rebasepro/common";
+
+import { ErrorView } from "@rebasepro/core";
+import { cls } from "@rebasepro/ui";
+import { RelationPreview } from "../../preview";
+import { RelationSelector } from "../../components/RelationSelector";
+import { MultipleRelationFieldBinding } from "./MultipleRelationFieldBinding";
+
+export function RelationFieldBinding({
+    propertyKey,
+    value,
+    size,
+    error,
+    showError,
+    disabled,
+    isSubmitting,
+    property,
+    includeDescription,
+    setValue,
+    setFieldValue,
+    context,
+    customProps
+}: FieldProps<RelationProperty>) {
+
+    if (property.type !== "relation") {
+        throw Error("RelationFieldBinding expected a property containing a relation");
+    }
+    const collection = context.collection;
+    const capabilities = collection ? getDataSourceCapabilities(collection.driver) : undefined;
+    if (!collection || !capabilities?.supportsRelations || !("relations" in collection) || !collection.relations) {
+        throw Error("RelationFieldBinding expected a collection with relations support");
+    }
+    const resolvedProperty = resolveRelationProperty(property, collection.relations, propertyKey)
+    const relation = resolvedProperty.relation;
+
+    const manyRelation = relation?.cardinality === "many";
+
+    // Inline selector mode
+    const widget = property.widget ?? "select";
+
+    if (widget === "select" && relation) {
+        const normalizedSingle = (!manyRelation && value && !Array.isArray(value)) ? normalizeToEntityRelation(value) : null;
+        const singleValue = normalizedSingle ?? null;
+        const multipleValue = (manyRelation && Array.isArray(value)) ? value : [];
+
+        const selectorSize: "small" | "medium" | undefined = size === "large" ? "medium" : size;
+
+        return (
+            <div className="">
+                <LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name ?? propertyKey}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+
+                <RelationSelector
+                    relation={relation}
+                    value={manyRelation ? multipleValue : singleValue}
+                    onValueChange={(newVal) => {
+                        if (manyRelation) {
+                            setValue(Array.isArray(newVal) ? newVal : []);
+                        } else {
+                            setValue(!Array.isArray(newVal) ? (newVal ?? null) : null);
+                        }
+                    }}
+                    disabled={disabled || isSubmitting}
+                    forceFilter={property.forceFilter}
+                    size={selectorSize}
+                />
+
+                <FieldHelperText includeDescription={includeDescription}
+                    showError={showError}
+                    error={error}
+                    disabled={disabled}
+                    property={property}/>
+            </div>
+        );
+    }
+
+    if (manyRelation) {
+        return <MultipleRelationFieldBinding
+            propertyKey={propertyKey}
+            value={Array.isArray(value) ? value : []}
+            error={error}
+            showError={showError}
+            disabled={disabled}
+            isSubmitting={isSubmitting}
+            property={property}
+            includeDescription={includeDescription}
+            setValue={setValue}
+            setFieldValue={setFieldValue}
+            context={context}
+            customProps={customProps}
+        />
+    } else {
+
+        const normalizedValue = value && !Array.isArray(value) ? normalizeToEntityRelation(value) : null;
+        const validValue = !!normalizedValue;
+
+        const collection = relation?.target();
+
+        if (!collection) {
+            throw Error(`Couldn't find the corresponding collection for the relation: ${propertyKey}`);
+        }
+
+        const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+            setValue(e ? getRelationFrom(e) : null);
+        }, [setValue]);
+
+        const referenceDialogController = useEntitySelectionDialog({
+            multiselect: false,
+            path: collection.slug,
+            collection,
+            onSingleEntitySelected,
+            selectedEntityIds: validValue && normalizedValue ? [normalizedValue.id] : undefined,
+            forceFilter: property.forceFilter
+        }
+        );
+
+        const onEntryClick = (e: React.SyntheticEvent) => {
+            e.preventDefault();
+            referenceDialogController.open();
+        };
+
+        const usedRelation = Array.isArray(value) ? undefined : normalizedValue ?? undefined;
+        return (
+            <>
+                <LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name ?? propertyKey}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+
+                {!collection && <ErrorView
+                    error={"The specified collection does not exist. Check console"}/>}
+
+                {collection && <>
+
+                    {usedRelation && <RelationPreview
+                        disabled={!usedRelation}
+                        previewProperties={property.previewProperties}
+                        hover={!disabled}
+                        size={size}
+                        onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                        relation={usedRelation}
+                        includeEntityLink={property.includeEntityLink}
+                        includeId={property.includeId}
+                    />}
+
+                    {!value && <div className="justify-center text-left">
+                        <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                            disabled || isSubmitting
+                                ? "text-surface-accent-500"
+                                : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                            onClick={onEntryClick}
+                            size={"medium"}>
+                            <IconForView collectionOrView={collection}
+                                className={"text-surface-300 dark:text-surface-600"}/>
+                            {`Edit ${property.name}`.toUpperCase()}
+                        </EntityPreviewContainer>
+                    </div>}
+                </>}
+
+                <FieldHelperText includeDescription={includeDescription}
+                    showError={showError}
+                    error={error}
+                    disabled={disabled}
+                    property={property}/>
+
+            </>
+        );
+    }
+}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -0,0 +1,139 @@
+import type { FieldProps, PropertyFieldBindingProps } from "../../types/fields";
+import type { ArrayProperty } from "@rebasepro/types";
+import React, { useState } from "react";
+;
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ArrayContainer, ArrayEntryParams } from "../../components/ArrayContainer";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { getArrayResolvedProperties, getDefaultValueFor } from "@rebasepro/common";
+import { getIconForProperty } from "../../util/property_utils";
+import { PropertyFieldBinding } from "../PropertyFieldBinding";
+import { ExpandablePanel, Typography } from "@rebasepro/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useAuthController, useTranslation } from "@rebasepro/core";
+import { mergeDeep } from "@rebasepro/utils";
+
+/**
+ * Generic array field that allows reordering and renders the child property
+ * as nodes.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function RepeatFieldBinding({
+    propertyKey,
+    value,
+    error,
+    showError,
+    isSubmitting,
+    setValue,
+    setFieldValue,
+    minimalistView: minimalistViewProp,
+    property,
+    includeDescription,
+    underlyingValueHasChanged,
+    context,
+    disabled
+}: FieldProps<ArrayProperty>) {
+
+    const authController = useAuthController();
+    const { t } = useTranslation();
+    if (property.type !== "array" || !property.of || Array.isArray(property.of)) {
+        throw Error("RepeatFieldBinding misconfiguration. Property `type` is not `array`");
+    }
+
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
+    if (!property.of)
+        throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
+
+    const resolvedProperties = getArrayResolvedProperties({
+        propertyValue: value,
+        propertyKey,
+        property,
+        ignoreMissingFields: false,
+        authController
+    })
+
+    const expanded = property.expanded === undefined ? true : property.expanded;
+    const ofProperty = property.of;
+
+    const [lastAddedId, setLastAddedId] = useState<number | undefined>();
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const buildEntry = ({
+        index,
+        internalId,
+        storedProps,
+        storeProps
+    }: ArrayEntryParams) => {
+        const childProperty = (resolvedProperties as Record<number, typeof ofProperty>)?.[index] ?? ofProperty;
+        const fieldProps: PropertyFieldBindingProps = {
+            propertyKey: `${propertyKey}.${index}`,
+            disabled,
+            property: storedProps ? mergeDeep(childProperty, storedProps) : childProperty,
+            onPropertyChange: storeProps,
+            includeDescription,
+            underlyingValueHasChanged,
+            context,
+            partOfArray: true,
+            minimalistView: false,
+            autoFocus: internalId === lastAddedId
+        };
+        return <ErrorBoundary>
+            <PropertyFieldBinding {...fieldProps} index={index}/>
+        </ErrorBoundary>;
+    };
+
+    const canAddElements = !property.disabled && !isSubmitting && !disabled && (property.canAddElements || property.canAddElements === undefined);
+    const sortable = property.sortable === undefined ? true : property.sortable;
+    const arrayContainer = <ArrayContainer droppableId={propertyKey}
+        addLabel={property.name ? t("add_to_field", { fieldName: property.name }) : t("add_entry")}
+        value={value ?? []}
+        buildEntry={buildEntry}
+        onInternalIdAdded={setLastAddedId}
+        disabled={isSubmitting || Boolean(property.disabled)}
+        canAddElements={canAddElements}
+        sortable={sortable}
+        newDefaultEntry={getDefaultValueFor(property.of)}
+        onValueChange={(value) => setFieldValue(propertyKey, value)}
+        className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+    />;
+
+    const title = (<>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name ?? propertyKey}
+            className={"h-8 flex grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
+
+    return (
+
+        <>
+
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                title={title}>
+                {arrayContainer}
+            </ExpandablePanel>}
+
+            {minimalistView && arrayContainer}
+
+            <FieldHelperText includeDescription={includeDescription}
+                showError={showError}
+                error={error as any}
+                disabled={disabled}
+                property={property}/>
+
+        </>
+    );
+}