@rebasepro/core 0.0.1-canary.0

package/src/core/EntityEditViewFormActions.tsx

@@ -0,0 +1,343 @@
+import React, { useMemo } from "react";
+import {
+    Entity,
+    EntityAction,
+    EntityActionClickProps,
+    EntityCollection,
+    EntityFormActionsProps,
+    RebaseContext,
+    FormContext,
+    SideEntityController
+} from "@rebasepro/types";
+
+import { copyEntityAction, deleteEntityAction } from "../components";
+import { mergeEntityActions, resolveEntityAction } from "@rebasepro/common";
+import {
+    Button,
+    CircularProgress,
+    cls,
+    defaultBorderMixin,
+    DialogActions,
+    ErrorIcon,
+    IconButton,
+    LoadingButton,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
+import {
+    useCustomizationController,
+    useRebaseContext,
+    useSideEntityController,
+    useSnackbarController
+} from "../hooks";
+import { SideDialogController, useSideDialogContext } from "./SideDialogs";
+import { FormexController } from "@rebasepro/formex";
+import { ErrorTooltip } from "../components/ErrorTooltip";
+import { usePermissions } from "../hooks/usePermissions";
+
+export function EntityEditViewFormActions({
+    collection,
+    path,
+    entity,
+    layout,
+    savingError,
+    formex,
+    disabled,
+    status,
+    pluginActions,
+    openEntityMode,
+    showDefaultActions = true,
+    navigateBack,
+    formContext
+}: EntityFormActionsProps) {
+
+    const { canCreate, canDelete } = usePermissions();
+    const context = useRebaseContext();
+    const sideEntityController = useSideEntityController();
+    const sideDialogContext = useSideDialogContext();
+    const customizationController = useCustomizationController();
+
+    const entityActions = useMemo((): EntityAction[] => {
+        const customEntityActions = (collection.entityActions ?? [])
+            .map(action => resolveEntityAction(action, customizationController.entityActions))
+            .filter(Boolean) as EntityAction[];
+        const createEnabled = canCreate(collection, path);
+        const deleteEnabled = entity ? canDelete(collection, path, entity) : false;
+        const actions: EntityAction[] = [];
+        if (createEnabled)
+            actions.push(copyEntityAction);
+        if (deleteEnabled)
+            actions.push(deleteEntityAction);
+        if (customEntityActions)
+            return mergeEntityActions(actions, customEntityActions);
+        return actions;
+    }, [canCreate, canDelete, collection, path, customizationController.entityActions?.length, entity]);
+
+    const formActions = showDefaultActions ? entityActions.filter(a => a.includeInForm === undefined || a.includeInForm) : [];
+
+    return layout === "bottom"
+        ? buildBottomActions({
+            savingError,
+            entity,
+            formActions,
+            collection,
+            context,
+            sideEntityController,
+            disabled,
+            status,
+            sideDialogContext,
+            pluginActions,
+            openEntityMode,
+            navigateBack,
+            formContext,
+            formex
+        })
+        : buildSideActions({
+            savingError,
+            entity,
+            formActions,
+            collection,
+            context,
+            sideEntityController,
+            sideDialogContext,
+            disabled,
+            status,
+            pluginActions,
+            openEntityMode,
+            navigateBack,
+            formContext,
+            formex
+        });
+}
+
+type ActionsViewProps<M extends object> = {
+    savingError: Error | undefined,
+    entity: Entity<M> | undefined,
+    formActions: EntityAction[],
+    collection: EntityCollection,
+    context: RebaseContext,
+    sideEntityController: SideEntityController,
+    disabled: boolean,
+    status: "new" | "existing" | "copy",
+    sideDialogContext: SideDialogController,
+    pluginActions?: any[],
+    openEntityMode: "side_panel" | "full_screen";
+    navigateBack: () => void;
+    formContext: FormContext,
+    formex: FormexController<any>;
+};
+
+function buildBottomActions<M extends object>({
+    savingError,
+    entity,
+    formActions,
+    collection,
+    context,
+    sideEntityController,
+    disabled,
+    status,
+    sideDialogContext,
+    pluginActions,
+    openEntityMode,
+    navigateBack,
+    formContext,
+    formex
+}: ActionsViewProps<M>) {
+
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+    const canClose = openEntityMode === "side_panel";
+    return <DialogActions
+        position={"absolute"}>
+        {savingError &&
+            <div className="text-right">
+                <Typography color={"error"}>{savingError.message}</Typography>
+            </div>
+        }
+
+        {formActions.length > 0 && <div className="grow flex overflow-auto no-scrollbar">
+            {formActions.map(action => {
+
+                const props = {
+                    view: "form",
+                    entity,
+                    path: collection.slug,
+                    collection: collection,
+                    context,
+                    sideEntityController,
+                    openEntityMode,
+                    navigateBack,
+                    formContext
+                } satisfies EntityActionClickProps<any>;
+
+                const isEnabled = !action.isEnabled || action.isEnabled(props);
+                return (
+                    <EntityActionButton
+                        key={action.key}
+                        action={action}
+                        enabled={isEnabled}
+                        props={props}
+                    />
+                );
+            })}
+        </div>}
+
+        {pluginActions}
+
+        {hasErrors ?
+            <ErrorTooltip title={"This form has errors"}>
+                <ErrorIcon className="ml-4" color="error" size={"smallest"} />
+            </ErrorTooltip> : null}
+        <Button variant="text"
+            color="primary"
+            disabled={disabled || formex.isSubmitting}
+            type="reset">
+            {status === "existing" ? "Discard" : "Clear"}
+        </Button>
+        <Button variant={canClose ? "text" : "filled"}
+            color="primary"
+            type="submit"
+            disabled={disabled || formex.isSubmitting}
+            onClick={() => {
+                sideDialogContext.setPendingClose(false);
+            }}>
+            {status === "existing" && "Save"}
+            {status === "copy" && "Create copy"}
+            {status === "new" && "Create"}
+        </Button>
+        {canClose && <LoadingButton variant="filled"
+            color="primary"
+            type="submit"
+            loading={formex.isSubmitting}
+            disabled={disabled}
+            onClick={() => {
+                sideDialogContext.setPendingClose?.(true);
+            }}>
+            {status === "existing" && "Save and close"}
+            {status === "copy" && "Create copy and close"}
+            {status === "new" && "Create and close"}
+        </LoadingButton>}
+    </DialogActions>;
+}
+
+function buildSideActions<M extends object>({
+    savingError,
+    entity,
+    formActions,
+    collection,
+    context,
+    sideEntityController,
+    disabled,
+    status,
+    sideDialogContext,
+    pluginActions,
+    openEntityMode,
+    navigateBack,
+    formContext,
+    formex
+}: ActionsViewProps<M>) {
+
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+    return <div
+        className={cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin)}>
+        <LoadingButton fullWidth={true}
+            variant="filled"
+            color="primary"
+            type="submit"
+            startIcon={hasErrors ? <ErrorIcon /> : undefined}
+            disabled={disabled || formex.isSubmitting}
+            onClick={() => {
+                sideDialogContext.setPendingClose?.(false);
+            }}>
+            {status === "existing" && "Save"}
+            {status === "copy" && "Create copy"}
+            {status === "new" && "Create"}
+        </LoadingButton>
+
+        <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
+            {status === "existing" ? "Discard" : "Clear"}
+        </Button>
+
+        {pluginActions}
+
+        {formActions.length > 0 && <div className="flex flex-row flex-wrap mt-2">
+            {formActions.map(action => {
+                const props = {
+                    view: "form",
+                    entity,
+                    path: collection.slug,
+                    collection: collection,
+                    context,
+                    sideEntityController,
+                    openEntityMode,
+                    navigateBack,
+                    formContext
+                } satisfies EntityActionClickProps<any>;
+                const isEnabled = !action.isEnabled || action.isEnabled(props);
+                return (
+                    <EntityActionButton key={action.key} action={action} enabled={isEnabled} props={props} />
+                );
+            })}
+        </div>}
+
+        {savingError &&
+            <div className="text-right">
+                <Typography color={"error"}>{savingError.message}</Typography>
+            </div>
+        }
+    </div>;
+}
+
+function EntityActionButton({
+    action,
+    enabled,
+    props
+}: {
+    action: EntityAction,
+    enabled: boolean,
+    props: EntityActionClickProps<any, any>
+}) {
+    const snackbarController = useSnackbarController();
+    const [loading, setLoading] = React.useState(false);
+    return <Tooltip
+        title={action.name}>
+        <IconButton
+            color="primary"
+            disabled={!enabled}
+            onClick={(event) => {
+                console.debug("Executing action", action.key, props);
+                try {
+                    event.stopPropagation();
+                    if (props.entity) {
+                        const onClick = action.onClick(props);
+                        // If the action returns a promise, we can handle it
+                        if (onClick instanceof Promise) {
+                            setLoading(true);
+                            onClick
+                                .catch((error) => {
+                                    console.error("Error executing action", action.key, error);
+                                    snackbarController.open({
+                                        message: `Error executing action: ${error.message}`,
+                                        type: "error"
+                                    })
+                                })
+                                .finally(() => setLoading(false));
+                        } else {
+                            snackbarController.open({
+                                message: `Action ${action.name} executed successfully`,
+                                type: "success"
+                            });
+                        }
+
+                    }
+                } catch (e: unknown) {
+                    console.error("Error executing action", action.key, e);
+                    snackbarController.open({
+                        message: `Error executing action: ${e instanceof Error ? e.message : String(e)}`,
+                        type: "error"
+                    });
+                }
+            }}>
+            {loading ? <CircularProgress size={"smallest"} /> : action.icon}
+        </IconButton>
+    </Tooltip>;
+}

package/src/core/EntitySidePanel.tsx

@@ -0,0 +1,173 @@
+import React, { useCallback, useEffect, useMemo } from "react";
+
+import { EntityCollection, EntitySidePanelProps, OnUpdateParams } from "@rebasepro/types";
+import { useCollectionRegistryController, useSideEntityController } from "../hooks";
+import { useCMSUrlController } from "../hooks/navigation/contexts";
+
+import { ErrorBoundary } from "../components";
+import { EntityEditView } from "./EntityEditView";
+import { useSideDialogContext } from "./SideDialogs";
+import { CloseIcon, IconButton, OpenInFullIcon } from "@rebasepro/ui";
+import { useLocation, useNavigate } from "react-router-dom";
+import { saveEntityToMemoryCache } from "../util/entity_cache";
+
+/**
+ * This is the component in charge of rendering the side dialog used
+ * for editing entities. Use the {@link useSideEntityController} to open
+ * and control the dialogs.
+ * This component needs a parent {@link Rebase}
+ * {@link useSideEntityController}
+ * @group Components
+ */
+export function EntitySidePanel(props: EntitySidePanelProps) {
+
+    const {
+        allowFullScreen = true,
+        path,
+        entityId,
+        formProps,
+    } = props;
+
+    const {
+        blocked,
+        setBlocked,
+        setBlockedNavigationMessage,
+        close,
+    } = useSideDialogContext();
+
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const sideEntityController = useSideEntityController();
+    const navigationController = useCollectionRegistryController();
+    const sideDialogsController = useSideDialogContext();
+    const cmsUrlController = useCMSUrlController();
+
+    const onClose = () => {
+        if (props.onClose) {
+            props.onClose();
+        }
+
+        setBlocked(false);
+        close(true);
+    }
+
+    const onUpdate = (params: OnUpdateParams) => {
+        if (props.onUpdate) {
+            props.onUpdate(params);
+        }
+        if (params.status !== "existing") {
+            sideEntityController.replace({
+                path: params.path,
+                entityId: params.entityId,
+                selectedTab: params.selectedTab,
+                updateUrl: true,
+                collection: params.collection,
+            });
+        }
+
+        if (sideDialogsController.pendingClose) {
+            sideDialogsController.setPendingClose(false);
+            onClose();
+        }
+
+    }
+
+    const parentCollectionIds = useMemo(() => {
+        return navigationController.getParentCollectionIds(path);
+    }, [navigationController, path]);
+
+    const collection = navigationController.getCollection(path) ?? props.collection;
+
+    useEffect(() => {
+        function beforeunload(e: any) {
+            if (blocked && collection) {
+                e.preventDefault();
+                e.returnValue = `You have unsaved changes in this ${collection.name}. Are you sure you want to leave this page?`;
+            }
+        }
+
+        if (typeof window !== "undefined")
+            window.addEventListener("beforeunload", beforeunload);
+
+        return () => {
+            if (typeof window !== "undefined")
+                window.removeEventListener("beforeunload", beforeunload);
+        };
+
+    }, [blocked, collection]);
+
+    const onValuesModified = useCallback((modified: boolean) => {
+        setBlockedNavigationMessage(modified
+            ? <> You have unsaved changes in this <b>{collection?.singularName ?? collection?.name}</b>.</>
+            : undefined)
+        setBlocked(modified);
+    }, [collection?.name, setBlocked, setBlockedNavigationMessage]);
+
+    if (!props || !collection) {
+        return <div className={"w-full"} />;
+    }
+
+    return (
+        <>
+            <ErrorBoundary>
+                <EntityEditView
+                    {...props}
+                    layout={"side_panel"}
+                    collection={collection as EntityCollection}
+                    parentCollectionIds={parentCollectionIds}
+                    onValuesModified={onValuesModified}
+                    onSaved={onUpdate}
+                    barActions={({
+                        status,
+                        values
+                    }) => <>
+                            <IconButton
+                                className="self-center"
+                                size={"smallest"}
+                                onClick={onClose}>
+                                <CloseIcon size={"smallest"} />
+                            </IconButton>
+                            {allowFullScreen && <IconButton
+                                className="self-center"
+                                size={"smallest"}
+                                onClick={() => {
+                                    const key = (status === "new" || status === "copy") ? path + "#new" : path + "/" + entityId;
+                                    saveEntityToMemoryCache(key, values);
+                                    // Clear blocked so no unsaved-changes dialog fires
+                                    setBlocked(false);
+                                    setBlockedNavigationMessage(undefined);
+                                    // IMPORTANT: useLocation() returns the frozen base_location from RebaseRoutes
+                                    // (the collection URL), not the actual browser URL.
+                                    // Build the full-screen URL directly from props using cmsUrlController.
+                                    if (entityId) {
+                                        const fullScreenUrl = cmsUrlController.buildUrlCollectionPath(`${path}/${entityId}`);
+                                        navigate(fullScreenUrl, { state: null });
+                                    } else {
+                                        const fullScreenUrl = cmsUrlController.buildUrlCollectionPath(path);
+                                        navigate(fullScreenUrl + "#new", { state: null });
+                                    }
+                                }}>
+                                <OpenInFullIcon size={"smallest"} />
+                            </IconButton>}
+                        </>}
+                    onTabChange={({
+                        entityId,
+                        selectedTab,
+                        collection,
+                    }) => {
+                        sideEntityController.replace({
+                            path: path,
+                            entityId,
+                            selectedTab,
+                            updateUrl: true,
+                            collection,
+                        });
+                    }}
+                    formProps={formProps}
+                />
+            </ErrorBoundary>
+
+        </>
+    );
+}