@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/components/EntityEditView.tsx

@@ -0,0 +1,576 @@
+import type { EntityCollection } from "@rebasepro/types";
+import type { FormContext } from "../types/fields";
+import type { PluginFormActionProps } from "@rebasepro/types";
+import React, { useEffect, useMemo, useState } from "react";
+import { Entity, EntityRelation, EntityStatus, EntityValues, Relation, User } from "@rebasepro/types";
+import { PluginProviderStack } from "@rebasepro/core";
+
+import { EntityCollectionView, EntityView } from "../components";
+import { CircularProgressCenter } from "@rebasepro/ui";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { ErrorView } from "@rebasepro/core";
+import {
+    getSubcollections,
+    removeInitialAndTrailingSlashes,
+    resolveDefaultSelectedView,
+} from "@rebasepro/common";
+import { resolvedSelectedEntityView } from "../util/resolutions";
+import { CenteredView, CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@rebasepro/ui";
+import {
+    useCustomizationController,
+    useEntityFetch,
+    useRebaseContext,
+    useLargeLayout,
+    useSlot
+} from "@rebasepro/core";
+import { getEntityFromMemoryCache } from "@rebasepro/core";
+import { EntityForm } from "../form";
+import type { EntityFormProps, OnUpdateParams } from "../types/components/EntityFormProps";
+import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
+import { EntityJsonPreview } from "../components/EntityJsonPreview";
+import { createFormexStub, getEntityFromCache } from "@rebasepro/core";
+import { usePermissions } from "@rebasepro/core";
+
+export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
+export const JSON_TAB_VALUE = "__json";
+
+export type BarActionsParams = {
+    values: object,
+    status: EntityStatus,
+    path: string,
+    entityId?: string | number;
+};
+
+export type OnTabChangeParams<M extends Record<string, unknown>> = {
+    path: string;
+    entityId?: string | number;
+    selectedTab?: string;
+    collection: EntityCollection<M>;
+
+};
+
+export interface EntityEditViewProps<M extends Record<string, unknown> = Record<string, unknown>> {
+    /**
+     * The CMS path of the entity, e.g. "users" or "products".
+     */
+    path: string;
+    collection: EntityCollection<M>;
+    entityId?: string | number;
+    databaseId?: string;
+    copy?: boolean;
+    selectedTab?: string;
+    parentCollectionIds: string[];
+    onValuesModified?: (modified: boolean, values: M) => void;
+    onSaved?: (params: OnUpdateParams) => void;
+    onTabChange?: (props: OnTabChangeParams<M>) => void;
+    layout?: "side_panel" | "full_screen";
+    barActions?: (params: BarActionsParams) => any;
+    formProps?: Partial<EntityFormProps<M>>,
+}
+
+/**
+ * This is the default view that is used as the content of a side panel when
+ * an entity is opened.
+ */
+export function EntityEditView<M extends Record<string, unknown>>({
+    entityId,
+    ...props
+}: EntityEditViewProps<M>) {
+
+    const {
+        entity,
+        dataLoading,
+        // eslint-disable-next-line no-unused-vars
+        dataLoadingError
+    } = useEntityFetch<M>({
+        path: props.path,
+        entityId: entityId,
+        collection: props.collection,
+        databaseId: props.databaseId,
+        useCache: false
+    });
+
+    const initialDirtyValues = entityId
+        ? getEntityFromMemoryCache(props.path + "/" + entityId)
+        : getEntityFromMemoryCache(props.path + "#new");
+
+    const { canEdit: canEditHook } = usePermissions();
+
+    const initialStatus = props.copy ? "copy" : (entityId ? "existing" : "new");
+    const [status, setStatus] = useState<EntityStatus>(initialStatus);
+
+    const canEdit = useMemo(() => {
+        if (status === "new" || status === "copy") {
+            return true;
+        } else {
+            return entity ? canEditHook(props.collection, props.path, entity ?? null) : undefined;
+        }
+    }, [canEditHook, entity, status, props.collection, props.path]);
+
+    if (!dataLoading && dataLoadingError) {
+        return <CenteredView>
+            <ErrorView error={dataLoadingError} />
+        </CenteredView>
+    }
+
+    if ((dataLoading && !initialDirtyValues) || (!entity || canEdit === undefined) && (status === "existing" || status === "copy")) {
+        return <CircularProgressCenter />;
+    }
+
+    if (entityId && !entity && !initialDirtyValues) {
+        console.error(`Entity with id ${entityId} not found in collection ${props.path}`);
+    }
+
+    return <EntityEditViewInner<M> {...props}
+        entityId={entityId}
+        entity={entity}
+        initialDirtyValues={initialDirtyValues as Partial<M>}
+        dataLoading={dataLoading}
+        status={status}
+        setStatus={setStatus}
+        canEdit={canEdit}
+    />;
+}
+
+export function EntityEditViewInner<M extends Record<string, unknown>>({
+    path,
+    entityId,
+    selectedTab: selectedTabProp,
+    collection,
+    parentCollectionIds,
+    onValuesModified,
+    onSaved,
+    onTabChange,
+    entity,
+    initialDirtyValues,
+    dataLoading,
+    layout = "side_panel",
+    barActions,
+    status,
+    setStatus,
+    formProps,
+    canEdit
+}: EntityEditViewProps<M> & {
+    entity?: Entity<M>,
+    initialDirtyValues?: Partial<M>, // dirty cached entity in memory
+    dataLoading: boolean,
+    status: EntityStatus,
+    setStatus: (status: EntityStatus) => void,
+    canEdit?: boolean,
+}) {
+
+    const context = useRebaseContext();
+
+    const [usedEntity, setUsedEntity] = useState<Entity<M> | undefined>(entity);
+
+    useEffect(() => {
+        if (entity)
+            setUsedEntity(entity);
+    }, [entity]);
+
+    const [formContext, setFormContext] = useState<FormContext<M> | undefined>(undefined);
+
+    const largeLayout = useLargeLayout();
+
+    const customizationController = useCustomizationController();
+    const plugins = customizationController.plugins;
+
+    const formActionTopProps: PluginFormActionProps = {
+        entityId,
+        parentCollectionIds,
+        path: path,
+        status,
+        collection: collection!,
+        context,
+        formContext,
+        openEntityMode: layout,
+        disabled: false
+    };
+    const pluginActionsTop = useSlot("form.actions.top", formActionTopProps);
+
+    const defaultSelectedView = useMemo(() => resolveDefaultSelectedView(
+        collection ? collection.defaultSelectedView : undefined,
+        {
+            status,
+            entityId
+        }
+    ), []);
+
+    const [selectedTab, setSelectedTab] = useState<string>(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
+    useEffect(() => {
+        if ((selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE) !== selectedTab) {
+            setSelectedTab(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
+        }
+    }, [selectedTabProp]);
+
+    const subcollections = getSubcollections(collection).filter(c => !c.hideFromNavigation);
+    const subcollectionsCount = subcollections?.length ?? 0;
+    const customViews = collection.entityViews ?? [];
+    const customViewsCount = customViews?.length ?? 0;
+    const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
+    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
+
+    const {
+        resolvedEntityViews,
+        selectedEntityView,
+        selectedSecondaryForm
+    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab, canEdit);
+
+    const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
+
+    const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
+
+    const customViewsView: any[] | undefined = customViews && resolvedEntityViews
+        .filter(e => !e.includeActions)
+        .map((customView) => {
+
+            if (!customView)
+                return null;
+            const Builder = customView.Builder;
+            if (!Builder) {
+                console.error("INTERNAL: customView.Builder is not defined");
+                return null;
+            }
+
+            if (!entityId) {
+                return null;
+            }
+
+            const formexStub = createFormexStub<M>(usedEntity?.values ?? {} as M);
+            const usedFormContext: FormContext<M> = formContext ?? {
+                entityId,
+                disabled: false,
+                openEntityMode: layout,
+                status: status,
+                values: usedEntity?.values ?? ({} as M),
+                setFieldValue: (key: string, value: any) => {
+                    throw new Error("You can't update values in read only mode");
+                },
+                save: () => {
+                    throw new Error("You can't save in read only mode");
+                },
+                collection,
+                path: path,
+                entity: usedEntity,
+                savingError: undefined,
+                formex: formexStub
+            };
+
+            return <div
+                className={cls(defaultBorderMixin,
+                    "relative flex-1 w-full h-full overflow-auto",
+                    { "hidden": selectedTab !== customView.key }
+                )}
+                key={`custom_view_${customView.key}`}
+                role="tabpanel">
+                <ErrorBoundary>
+                    {usedFormContext && <Builder
+                        collection={collection}
+                        parentCollectionIds={parentCollectionIds}
+                        entity={usedEntity}
+                        modifiedValues={usedFormContext?.formex?.values ?? usedEntity?.values}
+                        formContext={usedFormContext}
+                    />}
+                </ErrorBoundary>
+            </div>;
+        }).filter(Boolean);
+
+    const globalLoading = dataLoading && !usedEntity;
+
+    const jsonView = <div
+        className={cls("relative flex-1 h-full overflow-auto w-full",
+            { "hidden": selectedTab !== JSON_TAB_VALUE })}
+        key={"json_view"}
+        role="tabpanel">
+        <ErrorBoundary>
+            <EntityJsonPreview
+                values={formContext?.values ?? entity?.values ?? {}} />
+        </ErrorBoundary>
+    </div>;
+
+    const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
+        const subcollectionId = subcollection.slug;
+        const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollection.slug)}` : undefined;
+
+        if (selectedTab !== subcollectionId) return null;
+        return (
+            <div
+                className={"relative flex-1 h-full overflow-auto w-full"}
+                key={`subcol_${subcollectionId}`}
+                role="tabpanel">
+
+                {globalLoading && <CircularProgressCenter />}
+
+                {!globalLoading &&
+                    (usedEntity && newFullPath
+                        ? <EntityCollectionView
+                            path={newFullPath}
+                            parentCollectionIds={[...parentCollectionIds, collection.slug]}
+                            updateUrl={false}
+                            {...subcollection}
+                            openEntityMode={layout} />
+                        : <div className="flex items-center justify-center w-full h-full p-3">
+                            <Typography variant={"label"}>
+                                You need to save your entity before
+                                adding additional collections
+                            </Typography>
+                        </div>)
+                }
+
+            </div>
+        );
+    }).filter(Boolean);
+
+    const onSideTabClick = (value: string) => {
+        setSelectedTab(value);
+        if (status === "existing") {
+            onTabChange?.({
+                path: path,
+                entityId,
+                selectedTab: value === MAIN_TAB_VALUE ? undefined : value,
+                collection
+            });
+        }
+    };
+
+    const entityReadOnlyView = !canEdit && entity ? <div
+        className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}>
+        <div
+            className={cls("relative flex flex-col max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
+            <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
+                {collection.singularName ?? collection.name}
+            </Typography>
+            <EntityView
+                className={"px-8 h-full overflow-auto"}
+                entity={entity}
+                path={path}
+                collection={collection} />
+            <div className="h-16" />
+        </div>
+    </div> : null;
+
+    const entityView = <EntityForm<M>
+        collection={collection}
+        path={path}
+        entityId={entityId ?? usedEntity?.id}
+        onValuesModified={onValuesModified}
+        entity={entity}
+        initialDirtyValues={initialDirtyValues}
+        openEntityMode={layout}
+        forceActionsAtTheBottom={actionsAtTheBottom}
+        initialStatus={status}
+        className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
+        EntityFormActionsComponent={EntityEditViewFormActions}
+        disabled={!canEdit}
+        {...formProps}
+        onEntityChange={(entity) => {
+            setUsedEntity(entity);
+            formProps?.onEntityChange?.(entity);
+        }}
+        onStatusChange={(status) => {
+            setStatus(status);
+            formProps?.onStatusChange?.(status);
+        }}
+        onFormContextReady={(formContext) => {
+            setFormContext(formContext);
+            formProps?.onFormContextReady?.(formContext);
+        }}
+        onSaved={(params) => {
+            const res = {
+                ...params,
+                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
+            };
+            onSaved?.(res);
+            formProps?.onSaved?.(res);
+        }}
+        Builder={selectedSecondaryForm?.Builder}
+    />;
+
+    const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
+        <Tab
+            className="text-sm min-w-[90px]"
+            value={subcollection.slug}
+            key={`entity_detail_collection_tab_${subcollection.name}`}>
+            {subcollection.name}
+        </Tab>
+    );
+
+    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
+        .map((view) =>
+            <Tab
+                className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
+                value={view.key}
+                key={`entity_detail_collection_tab_${view.name}`}>
+                {view.tabComponent ?? view.name}
+            </Tab>
+        );
+    const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
+        .map((view) =>
+            <Tab
+                className={!view.tabComponent ? "text-sm min-w-[90px]" : undefined}
+                value={view.key}
+                key={`entity_detail_collection_tab_${view.name}`}>
+                {view.tabComponent ?? view.name}
+            </Tab>
+        );
+
+    const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
+
+    let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
+
+        {shouldShowTopBar && <div
+            className={cls("h-14 items-center flex overflow-hidden w-full h-14 border-b pl-2 pr-2 pt-1 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
+
+            {barActions?.({
+                path,
+                entityId,
+                values: formContext?.values ?? usedEntity?.values ?? {},
+                status
+            })}
+
+            {pluginActionsTop}
+
+            {globalLoading && <div className="self-center">
+                <CircularProgress size={"small"} />
+            </div>}
+
+            {hasAdditionalViews && <div className={"flex-1 flex justify-end min-w-0"}>
+                <Tabs
+                    className={"!w-fit max-w-full"}
+                    value={selectedTab}
+                    onValueChange={(value) => {
+                        onSideTabClick(value);
+                    }}>
+
+                    {includeJsonView && <Tab
+                        disabled={!hasAdditionalViews}
+                        value={JSON_TAB_VALUE}
+                        className={"text-sm"}>
+                        <CodeIcon size={"small"} />
+                    </Tab>}
+
+                    {customViewTabsStart}
+
+                    <Tab
+                        disabled={!hasAdditionalViews}
+                        value={MAIN_TAB_VALUE}
+                        className={"text-sm min-w-[90px]"}>
+                        {collection.singularName ?? collection.name}
+                    </Tab>
+
+                    {customViewTabsEnd}
+
+                    {subcollectionTabs}
+                </Tabs>
+            </div>}
+        </div>}
+
+        {globalLoading
+            ? <div className="w-full pt-12 pb-16 px-4 sm:px-8 md:px-10">
+                <CircularProgressCenter />
+            </div>
+            : <>
+                {entityReadOnlyView}
+                {entityView}
+            </>}
+
+        {jsonView}
+
+        {customViewsView}
+
+        {subCollectionsViews}
+
+    </div>;
+
+    if (plugins && plugins.length > 0) {
+        result = (
+            <PluginProviderStack
+                plugins={plugins}
+                scope="form"
+                scopeProps={{
+                    status,
+                    path,
+                    collection,
+                    entity: usedEntity,
+                    context,
+                    formContext
+                }}>
+                {result}
+            </PluginProviderStack>
+        );
+    }
+
+    return result;
+}
+
+function OneToOneRelationForm({
+    relation,
+    value,
+    databaseId,
+    layout,
+    status,
+    actionsAtTheBottom
+}: {
+    relation: Relation,
+    value: EntityRelation,
+    databaseId: string,
+    layout: "side_panel" | "full_screen",
+    status: EntityStatus,
+    actionsAtTheBottom: boolean,
+}) {
+    if (!relation)
+        return null;
+
+    const collection = relation.target();
+    const path = collection.slug;
+
+    const entityId = value.id;
+
+    const {
+        entity,
+        dataLoading,
+        dataLoadingError
+    } = useEntityFetch({
+        path: path,
+        entityId: entityId,
+        collection: collection,
+        databaseId: databaseId,
+        useCache: false
+    });
+
+    return <EntityForm
+        collection={collection}
+        path={path}
+        entityId={entityId}
+        // onValuesModified={onValuesModified}
+        entity={entity}
+        // initialDirtyValues={cachedDirtyValues}
+        openEntityMode={layout}
+        forceActionsAtTheBottom={actionsAtTheBottom}
+        initialStatus={status}
+        // className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
+        EntityFormActionsComponent={EntityEditViewFormActions}
+    // disabled={!canEdit}
+    // onEntityChange={(entity) => {
+    //     setUsedEntity(entity);
+    //     formProps?.onEntityChange?.(entity);
+    // }}
+    // onStatusChange={(status) => {
+    //     setStatus(status);
+    //     formProps?.onStatusChange?.(status);
+    // }}
+    // onFormContextReady={(formContext) => {
+    //     setFormContext(formContext);
+    //     formProps?.onFormContextReady?.(formContext);
+    // }}
+    // onSaved={(params) => {
+    //     const res = {
+    //         ...params,
+    //         selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
+    //     };
+    //     onSaved?.(res);
+    //     formProps?.onSaved?.(res);
+    // }}
+    // Builder={selectedSecondaryForm?.Builder}
+    />
+}