@firecms/core 3.0.0-beta.11 → 3.0.0-beta.12

package/src/routes/FireCMSRoute.tsx

@@ -0,0 +1,235 @@
+import { Blocker, useBlocker, useLocation } from "react-router";
+import { EntityEditView } from "../core/EntityEditView";
+import { useNavigationController } from "../hooks";
+import { useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+    getNavigationEntriesFromPath,
+    NavigationViewCollectionInternal,
+    NavigationViewEntityCustomInternal,
+    NavigationViewInternal
+} from "../util/navigation_from_path";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { toArray } from "../util/arrays";
+import { EntityCollectionView, NotFoundPage } from "../components";
+import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
+
+export function FireCMSRoute() {
+
+    const location = useLocation();
+    const navigation = useNavigationController();
+    const breadcrumbs = useBreadcrumbsController();
+
+    const hash = location.hash;
+    const isSidePanel = hash.includes("#side");
+    const isNew = hash.includes("#new") || hash.includes("#new_side");
+    const isCopy = hash.includes("#copy");
+
+    const pathname = location.pathname;
+    const navigationPath = navigation.urlPathToDataPath(pathname);
+
+    const navigationEntries = getNavigationEntriesFromPath({
+        path: navigationPath,
+        collections: navigation.collections ?? []
+    });
+
+    useEffect(() => {
+        breadcrumbs.set({
+            breadcrumbs: navigationEntries.map(entry => {
+                if (entry.type === "entity") {
+                    return ({
+                        title: entry.entityId,
+                        url: navigation.buildUrlCollectionPath(entry.fullPath)
+                    });
+                } else if (entry.type === "custom_view") {
+                    return ({
+                        title: entry.view.name,
+                        url: navigation.buildUrlCollectionPath(entry.fullPath)
+                    });
+                } else if (entry.type === "collection") {
+                    return ({
+                        title: entry.collection.name,
+                        url: navigation.buildUrlCollectionPath(entry.fullPath)
+                    });
+                } else {
+                    throw new Error("Unexpected navigation entry type");
+                }
+            })
+        });
+    }, [navigationEntries.map(entry => entry.path).join(",")]);
+
+    if (isNew) {
+        return <EntityFullScreenRoute
+            pathname={pathname}
+            navigationEntries={navigationEntries}
+            isNew={true}
+            isCopy={false}
+        />;
+    }
+
+    if (navigationEntries.length === 1 && navigationEntries[0].type === "collection") {
+        const collection = navigation.getCollection(navigationEntries[0].path);
+        if (!collection)
+            return null;
+        return <EntityCollectionView
+            key={`collection_view_${collection.id ?? collection.path}`}
+            isSubCollection={false}
+            parentCollectionIds={[]}
+            fullPath={collection.id}
+            updateUrl={true}
+            {...collection}
+            Actions={toArray(collection.Actions)}/>
+    }
+
+    if (isSidePanel) {
+        const lastCollectionEntry = navigationEntries.findLast((entry) => entry.type === "collection");
+        if (lastCollectionEntry) {
+            const collection = navigation.getCollection(lastCollectionEntry.path);
+            if (!collection)
+                return null;
+            return <EntityCollectionView
+                key={`collection_view_${collection.id ?? collection.path}`}
+                isSubCollection={false}
+                parentCollectionIds={[]}
+                fullPath={collection.id}
+                updateUrl={true}
+                {...collection}
+                Actions={toArray(collection.Actions)}/>;
+        }
+    }
+
+    return <EntityFullScreenRoute
+        pathname={pathname}
+        navigationEntries={navigationEntries}
+        isNew={isNew}
+        isCopy={isCopy}
+    />;
+
+}
+
+function getSelectedTabFromUrl(isNew: boolean, lastCustomView: NavigationViewCollectionInternal<any> | NavigationViewEntityCustomInternal<any> | undefined) {
+    if (isNew) {
+        return undefined;
+    } else if (lastCustomView) {
+        if (lastCustomView.type === "custom_view") {
+            return lastCustomView.view.key;
+        } else if (lastCustomView.type === "collection") {
+            return lastCustomView.id ?? lastCustomView.path;
+        }
+    }
+    return undefined;
+}
+
+function EntityFullScreenRoute({
+                                   pathname,
+                                   navigationEntries,
+                                   isNew,
+                                   isCopy
+                               }: {
+    pathname: string;
+    navigationEntries: NavigationViewInternal[],
+    isNew: boolean,
+    isCopy: boolean
+}) {
+
+    const navigation = useNavigationController();
+    const navigate = useNavigate();
+
+    const navigationPath = navigation.urlPathToDataPath(pathname);
+
+    // is navigating away blocked
+    const blocked = useRef(false);
+
+    const lastEntityEntry = navigationEntries.findLast((entry) => entry.type === "entity");
+    const navigationEntriesAfterEntity = lastEntityEntry ? navigationEntries.slice(navigationEntries.indexOf(lastEntityEntry) + 1) : [];
+
+    const lastCustomView = navigationEntriesAfterEntity.findLast(
+        (entry) => entry.type === "custom_view" || entry.type === "collection"
+    ) as NavigationViewCollectionInternal<any> | NavigationViewEntityCustomInternal<any> | undefined;
+
+    const entityId = lastEntityEntry?.entityId;
+
+    const urlTab = getSelectedTabFromUrl(isNew, lastCustomView);
+    const [selectedTab, setSelectedTab] = useState<string | undefined>(urlTab);
+
+    const parentCollectionIds = navigation.getParentCollectionIds(navigationPath);
+    useEffect(() => {
+        if (urlTab !== selectedTab) {
+            setSelectedTab(urlTab);
+        }
+    }, [urlTab]);
+
+    const basePath = !entityId || isNew
+        ? pathname
+        : pathname.substring(0, pathname.lastIndexOf(`/${entityId}`));
+
+    const entityPath = basePath + `/${entityId}`;
+
+    let blocker: Blocker | undefined = undefined;
+    try {
+        blocker = useBlocker(({
+                                  nextLocation
+                              }) => {
+            if (nextLocation.pathname.startsWith(entityPath))
+                return false;
+            return blocked.current;
+        });
+    } catch (e) {
+        console.warn("Blocker not available, navigation will not be blocked");
+    }
+
+    const lastCollectionEntry = navigationEntries.findLast((entry) => entry.type === "collection");
+
+    if (isNew && !lastCollectionEntry) {
+        throw new Error("INTERNAL: No collection found in the navigation");
+    }
+
+    if (!isNew && !lastEntityEntry) {
+        return <NotFoundPage/>;
+    }
+
+    const collection = isNew ? lastCollectionEntry!.collection : lastEntityEntry!.parentCollection;
+    const collectionPath = navigation.resolveIdsFrom(isNew ? lastCollectionEntry!.path : lastEntityEntry!.path);
+
+    return <>
+        <EntityEditView
+            key={collection.id + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
+            entityId={isNew ? undefined : entityId}
+            collection={collection}
+            layout={"full_screen"}
+            path={collectionPath}
+            copy={isCopy}
+            selectedTab={selectedTab ?? undefined}
+            onValuesModified={(modified) => blocked.current = modified}
+            onSaved={(params) => {
+                const newSelectedTab = params.selectedTab;
+                const newEntityId = params.entityId;
+                if (newSelectedTab) {
+                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}`, { replace: true });
+                } else {
+                    navigate(`${basePath}/${newEntityId}`, { replace: true });
+                }
+            }}
+            onTabChange={(params) => {
+                setSelectedTab(params.selectedTab);
+                if (isNew) {
+                    return;
+                }
+                const newSelectedTab = params.selectedTab;
+                if (newSelectedTab) {
+                    navigate(`${basePath}/${entityId}/${newSelectedTab}`, { replace: true });
+                } else {
+                    navigate(`${basePath}/${entityId}`, { replace: true });
+                }
+            }}
+            parentCollectionIds={parentCollectionIds}
+        />
+
+        <UnsavedChangesDialog
+            open={blocker?.state === "blocked"}
+            handleOk={() => blocker?.proceed?.()}
+            handleCancel={() => blocker?.reset?.()}
+            body={"You have unsaved changes in this entity."}/>
+
+    </>;
+}

package/src/routes/HomePageRoute.tsx

@@ -0,0 +1,17 @@
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
+import { useEffect } from "react";
+
+export function HomePageRoute({ children }: {
+    children: React.ReactNode;
+}) {
+
+    const breadcrumbs = useBreadcrumbsController();
+
+    useEffect(() => {
+        breadcrumbs.set({
+            breadcrumbs: []
+        });
+    }, []);
+
+    return children;
+}

package/src/types/collections.ts

@@ -84,6 +84,11 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      */
     properties: PropertiesOrBuilders<M>;
 
+    /**
+     * Default preview properties displayed when this collection is referenced to.
+     */
+    previewProperties?: string[];
+
     /**
      * Title property of the entity. This is the property that will be used
      * as the title in entity related views and references.
@@ -92,11 +97,10 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
     titleProperty?: keyof M;
 
     /**
-     * Can this collection be edited by the end user.
-     * Defaults to `true`.
-     * Keep in mind that you can also set this prop to individual properties.
+     * When editing an entity, you can choose to open the entity in a side dialog
+     * or in a full screen dialog. Defaults to `full_screen`.
      */
-    editable?: boolean;
+    openEntityMode?: "side_panel" | "full_screen";
 
     /**
      * Order in which the properties are displayed.
@@ -119,7 +123,7 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * `hidden` in the property definition,will be ignored.
      * `propertiesOrder` has precedence over `hidden`.
      */
-    propertiesOrder?: (Extract<keyof M, string> | `subcollection:${string}`)[];
+    propertiesOrder?: (Extract<keyof M, string> | string | `subcollection:${string}` | "collectionGroupParent")[];
 
     /**
      * If enabled, content is loaded in batches. If `false` all entities in the
@@ -313,9 +317,19 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
     sideDialogWidth?: number | string;
 
     /**
-     * Default preview properties displayed when this collection is referenced to.
+     * Can this collection configuration be edited by the end user.
+     * Defaults to `true`.
+     * Keep in mind that you can also set this prop to individual properties.
+     * This prop has only effect if you are using the collection editor.
      */
-    previewProperties?: string[];
+    editable?: boolean;
+
+    /**
+     * If set to true, the default values of the properties will be applied
+     * to the entity every time the entity is updated (not only when created).
+     * Defaults to false.
+     */
+    alwaysApplyDefaultValues?: boolean;
 }
 
 /**
@@ -491,21 +505,26 @@ export type EntityCustomView<M extends Record<string, any> = any> =
         /**
          * Key of this custom view.
          */
-        key: string,
+        key: string;
+
         /**
          * Name of this custom view.
          */
-        name: string,
+        name: string;
+
         /**
-         * If set to true, the actions of the entity will be included in the
-         * bottom of the panel (save buttons, delete buttons, etc.)
+         * If set to true, the actions of the entity (save, discard,delete) will be
+         * included in the view. By default the actions are located in the right or bottom,
+         * based on the screen size. You can force the actions to be located at the bottom
+         * by setting this prop to "bottom".
          */
-        includeActions?: boolean;
+        includeActions?: boolean | "bottom";
+
         /**
          * Builder for rendering the custom view
          */
         Builder?: React.ComponentType<EntityCustomViewParams<M>>;
-    }
+    };
 
 /**
  * Parameters passed to the builder in charge of rendering a custom panel for
@@ -570,6 +589,12 @@ export type EntityTableController<M extends Record<string, any> = any> = {
     clearFilter?: () => void;
     itemCount?: number;
     setItemCount?: (itemCount: number) => void;
+    initialScroll?: number;
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
     paginationEnabled?: boolean;
     pageSize?: number;
     checkFilterCombination?: (filterValues: FilterValues<any>,

package/src/types/datasource.ts

@@ -9,6 +9,7 @@ import { FireCMSContext } from "./firecms_context";
 export interface FetchEntityProps<M extends Record<string, any> = any> {
     path: string;
     entityId: string;
+    databaseId?: string;
     collection?: EntityCollection<M, any>
 }
 
@@ -18,7 +19,6 @@ export interface FetchEntityProps<M extends Record<string, any> = any> {
 export type ListenEntityProps<M extends Record<string, any> = any> =
     FetchEntityProps<M>
     & {
-    databaseId?: string;
     onUpdate: (entity: Entity<M>) => void,
     onError?: (error: Error) => void,
 }
@@ -139,6 +139,7 @@ export interface DataSource {
     fetchEntity<M extends Record<string, any> = any>({
                                                          path,
                                                          entityId,
+                                                         databaseId,
                                                          collection
                                                      }: FetchEntityProps<M>
     ): Promise<Entity<M> | undefined>;

package/src/types/dialogs_controller.tsx

@@ -15,19 +15,23 @@ export interface DialogsController {
      * Open a dialog
      * @param props
      */
-    open: (props: DialogControllerEntryProps) => { closeDialog: () => void };
+    open: <T extends object = object>(props: DialogControllerEntryProps<T>) => { closeDialog: () => void };
 }
 
 /**
  * Props used to open a side dialog
  * @group Hooks and utilities
  */
-export interface DialogControllerEntryProps {
+export interface DialogControllerEntryProps<T extends object = object> {
 
     key: string;
     /**
      * The component type that will be rendered
      */
-    Component: React.ComponentType<{ open: boolean, closeDialog: () => void }>;
+    Component: React.ComponentType<{ open: boolean, closeDialog: () => void } & T>;
+    /**
+     * Props to pass to the dialog component
+     */
+    props?: T;
 
 }

package/src/types/entities.ts

@@ -8,7 +8,7 @@ export type EntityStatus = "new" | "existing" | "copy";
  * Representation of an entity fetched from the datasource
  * @group Models
  */
-export interface Entity<M extends object> {
+export interface Entity<M extends object = any> {
 
     /**
      * ID of the entity

package/src/types/entity_actions.tsx

@@ -15,6 +15,16 @@ export type EntityAction<M extends object = any, USER extends User = User> = {
      */
     name: string;
 
+    /**
+     * Key of the action. You only need to provide this if you want to
+     * override the default actions.
+     * The default actions are:
+     * - edit
+     * - delete
+     * - copy
+     */
+    key?: string;
+
     /**
      * Icon of the action
      */
@@ -53,4 +63,6 @@ export type EntityActionClickProps<M extends object, USER extends User = User> =
      * If this actions is being called from a side dialog
      */
     sideEntityController?: SideEntityController;
+
+    openEntityMode: "side_panel" | "full_screen";
 };

package/src/types/fields.tsx

@@ -1,6 +1,7 @@
 import { CMSType, Property, PropertyOrBuilder } from "./properties";
 import { ResolvedEntityCollection, ResolvedProperty } from "./resolved_entities";
 import { FormexController } from "@firecms/formex";
+import { Entity } from "./entities";
 
 /**
  * When building a custom field you need to create a React component that takes
@@ -81,7 +82,8 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
     partOfArray?: boolean;
 
     /**
-     * Should this field render with the minimal amount of UI elements
+     * Display the child properties directly, without being wrapped in an
+     * extendable panel. Note that this will also hide the title of this property.
      */
     minimalistView?: boolean;
 
@@ -160,6 +162,14 @@ export interface FormContext<M extends Record<string, any> = any> {
      */
     path?: string;
 
+    status: "new" | "existing" | "copy";
+
+    entity?: Entity<M>;
+
+    savingError?: Error;
+
+    openEntityMode: "side_panel" | "full_screen";
+
     /**
      * This is the underlying formex controller that powers the form
      */
@@ -207,7 +217,8 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
     partOfArray?: boolean;
 
     /**
-     * Is this field part of a block (oneOf array)
+     * Display the child properties directly, without being wrapped in an
+     * extendable panel. Note that this will also hide the title of this property.
      */
     minimalistView?: boolean;
 

package/src/types/navigation.ts

@@ -5,6 +5,7 @@ import { EntityReference } from "./entities";
 /**
  * Controller that includes the resolved navigation and utility methods and
  * attributes.
+ * This controller holds the state of the navigation including the collections.
  * @group Models
  */
 export type NavigationController<EC extends EntityCollection = EntityCollection<any>> = {
@@ -56,8 +57,8 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      * Get the collection configuration for a given path.
      * The collection is resolved from the given path or alias.
      */
-    getCollection: (pathOrId: string,
-                    includeUserOverride?: boolean) => EC | undefined;
+    getCollection: (pathOrId: string, includeUserOverride?: boolean) => EC | undefined;
+
     /**
      * Get the collection configuration from its parent ids.
      */
@@ -69,12 +70,14 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
     getCollectionFromPaths: (pathSegments: string[]) => EC | undefined;
 
     /**
-     * Default path under the navigation routes of the CMS will be created
+     * Default path under the navigation routes of the CMS will be created.
+     * Defaults to '/'. You may want to change this `basepath` to 'admin' for example.
      */
     basePath: string;
 
     /**
-     * Default path under the collection routes of the CMS will be created
+     * Default path under the collection routes of the CMS will be created.
+     * It defaults to '/c'
      */
     baseCollectionPath: string;
 
@@ -87,16 +90,6 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      */
     urlPathToDataPath: (cmsPath: string) => string;
 
-    /**
-     * Convert a collection or entity path to a URL path
-     * @param path
-     */
-    buildCMSUrlPath: (path: string) => string;
-
-    buildUrlEditCollectionPath: (props: {
-        path: string
-    }) => string;
-
     /**
      * Base url path for the home screen
      */
@@ -117,10 +110,11 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
     buildUrlCollectionPath: (path: string) => string;
 
     /**
-     * Turn a path with aliases into a resolved path
+     * Turn a path with collection ids into a resolved path.
+     * The ids (typically used in urls) will be replaced with relative paths (typically used in database paths)
      * @param pathWithAliases
      */
-    resolveAliasesFrom: (pathWithAliases: string) => string;
+    resolveIdsFrom: (pathWithAliases: string) => string;
 
     /**
      * Call this method to recalculate the navigation
@@ -144,8 +138,34 @@ export type NavigationController<EC extends EntityCollection = EntityCollection<
      * @param ids
      */
     convertIdsToPaths: (ids: string[]) => string[];
+
+    /**
+     * A function to navigate to a specified route or URL.
+     *
+     * @param {string} to - The target route or URL to navigate to.
+     * @param {NavigateOptions} [options] - Optional configuration settings for navigation, such as replace behavior or state data.
+     */
+    navigate: (to: string, options?: NavigateOptions) => void;
+
 }
 
+export interface NavigateOptions {
+    replace?: boolean;
+    state?: any;
+    preventScrollReset?: boolean;
+    relative?: "route" | "path";
+    flushSync?: boolean;
+    viewTransition?: boolean;
+}
+
+// currently not used, in favor of a single blocker in `FireCMSRoute`
+export type NavigationBlocker = {
+    updateBlockListener: (path: string, block: boolean, basePath?: string) => () => void;
+    isBlocked: (path: string) => boolean;
+    proceed?: () => void;
+    reset?: () => void;
+};
+
 /**
  * Custom additional views created by the developer, added to the main
  * navigation.

package/src/types/plugins.tsx

@@ -195,6 +195,7 @@ export interface PluginFormActionProps<USER extends User = User, EC extends Enti
     formContext?: FormContext<any>;
     context: FireCMSContext<USER>;
     currentEntityId?: string;
+    openEntityMode: "side_panel" | "full_screen";
 }
 
 export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Record<string, any> = any, EC extends EntityCollection<M> = EntityCollection<M>> = {

package/src/types/properties.ts

@@ -156,6 +156,12 @@ export interface BaseProperty<T extends CMSType, CustomProps = any> {
      * save the new config. The saved config will then become the source of truth.
      */
     editable?: boolean;
+
+    /**
+     * A number between 0 and 100 that indicates the width of the field in the form view.
+     * It defaults to 100, but you can set it to 50 to have two fields in the same row.
+     */
+    widthPercentage?: number;
 }
 
 /**
@@ -285,14 +291,14 @@ export type PropertyBuilder<T extends CMSType = any, M extends Record<string, an
 /**
  * @group Entity properties
  */
-export type PropertyOrBuilder<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>> =
+export type PropertyOrBuilder<T extends CMSType = CMSType, M extends Record<string, any> = any> =
     Property<T>
     | PropertyBuilder<T, M>;
 
 /**
  * @group Entity properties
  */
-export type PropertiesOrBuilders<M extends Record<string, any> = Record<string, any>> =
+export type PropertiesOrBuilders<M extends Record<string, any> = any> =
     {
         [k in keyof M]: PropertyOrBuilder<M[k], M>;
     };
@@ -371,7 +377,7 @@ export interface StringProperty extends BaseProperty<string> {
 
     /**
      * You can specify a `Storage` configuration. It is used to
-     * indicate that this string refers to a path in Google Cloud Storage.
+     * indicate that this string refers to a path in your storage provider.
      */
     storage?: StorageConfig;
 
@@ -469,6 +475,12 @@ export interface ArrayProperty<T extends ArrayT[] = any[], ArrayT extends CMSTyp
      */
     expanded?: boolean;
 
+    /**
+     * Display the child properties directly, without being wrapped in an
+     * extendable panel.
+     */
+    minimalistView?: boolean;
+
 }
 
 /**
@@ -517,6 +529,12 @@ export interface MapProperty<T extends Record<string, CMSType> = Record<string,
      */
     spreadChildren?: boolean;
 
+    /**
+     * Display the child properties directly, without being wrapped in an
+     * extendable panel. Note that this will also hide the title of this property.
+     */
+    minimalistView?: boolean;
+
     /**
      * Should the field be initially expanded. Defaults to `true`
      */

package/src/types/side_dialogs_controller.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { EntityFormProps } from "../form";
 
 /**
  * Controller to open the side dialog
@@ -78,4 +79,5 @@ export interface SideDialogPanelProps {
      * Use this prop to store additional data in the panel
      */
     additional?: any;
+
 }