@firecms/core 3.0.0-3.0.0-beta.4.pre.1.0

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -0,0 +1,116 @@
+import { useNavigate } from "react-router-dom";
+
+import { useCustomizationController, useFireCMSContext } from "../../hooks";
+import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
+import { IconForView } from "../../util";
+import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
+import { IconButton, StarBorderIcon, StarIcon } from "@firecms/ui";
+import { NavigationCard } from "./NavigationCard";
+import { SmallNavigationCard } from "./SmallNavigationCard";
+
+/**
+ * This is the component used in the home page to render a card for each
+ * collection or view.
+ * @group Components
+ * @param view
+ * @param path
+ * @param collection
+ * @param url
+ * @param name
+ * @param description
+ * @param onClick
+ * @constructor
+ */
+export function NavigationCardBinding({
+                                          path,
+                                          collection,
+                                          view,
+                                          url,
+                                          name,
+                                          description,
+                                          onClick,
+                                          type
+                                      }: TopNavigationEntry & {
+    onClick?: () => void
+}) {
+
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+    const collectionIcon = <IconForView collectionOrView={collection ?? view}/>;
+
+    const navigate = useNavigate();
+    const context = useFireCMSContext();
+    const customizationController = useCustomizationController();
+
+    const favourite = (userConfigurationPersistence?.favouritePaths ?? []).includes(path);
+
+    const actionsArray: React.ReactNode[] = userConfigurationPersistence
+        ? [
+            <IconButton
+                key={"favourite"}
+                onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (favourite) {
+                        userConfigurationPersistence.setFavouritePaths(
+                            userConfigurationPersistence.favouritePaths.filter(p => p !== path)
+                        );
+                    } else {
+                        userConfigurationPersistence.setFavouritePaths(
+                            [...userConfigurationPersistence.favouritePaths, path]
+                        );
+                    }
+                }}>
+                {
+                    favourite
+                        ? <StarIcon
+                            size={18}
+                            className={"text-secondary"}/>
+                        : <StarBorderIcon
+                            size={18}
+                            className={"text-gray-400 dark:text-gray-500"}/>}
+            </IconButton>
+        ]
+        : [];
+
+    if (customizationController.plugins && collection) {
+        const actionProps: PluginHomePageActionsProps = {
+            path,
+            collection,
+            context
+        };
+        customizationController.plugins.forEach((plugin, i) => (
+            actionsArray.push(plugin.homePage?.CollectionActions
+                ? <plugin.homePage.CollectionActions
+                    key={`actions_${i}`}
+                    {...actionProps}
+                    extraProps={plugin.homePage.extraProps}
+                />
+                : null
+            )))
+    }
+
+    const actions: React.ReactNode | undefined = <>
+        {actionsArray}
+    </>
+
+    if (type === "admin") {
+        return <SmallNavigationCard icon={collectionIcon}
+                                    name={name}
+                                    url={url}/>
+    }
+
+    return <NavigationCard
+        icon={collectionIcon}
+        name={name}
+        description={description}
+        actions={actions}
+        onClick={() => {
+            onClick?.();
+            navigate(url);
+            if (userConfigurationPersistence) {
+                userConfigurationPersistence.setRecentlyVisitedPaths(
+                    [path, ...(userConfigurationPersistence.recentlyVisitedPaths ?? []).filter(p => p !== path)]
+                );
+            }
+        }}/>;
+}

package/src/components/HomePage/NavigationGroup.tsx

@@ -0,0 +1,39 @@
+import { PropsWithChildren } from "react";
+import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
+import { ExpandablePanel, Typography } from "@firecms/ui";
+
+export function NavigationGroup({
+                                    children,
+                                    group
+                                }: PropsWithChildren<{
+    group: string | undefined
+}>) {
+    const userConfigurationPersistence = useUserConfigurationPersistence();
+    return (
+        <ExpandablePanel
+            invisible={true}
+            titleClassName={"font-medium text-sm text-gray-600 dark:text-gray-400"}
+            className={"py-4"}
+            initiallyExpanded={!(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped")}
+            onExpandedChange={expanded => {
+                if (userConfigurationPersistence) {
+
+                    if (!expanded) {
+                        const paths = (userConfigurationPersistence.collapsedGroups ?? []).concat(group ?? "ungrouped");
+                        userConfigurationPersistence.setCollapsedGroups(paths);
+                    } else {
+                        userConfigurationPersistence.setCollapsedGroups((userConfigurationPersistence.collapsedGroups ?? []).filter(g => g !== (group ?? "ungrouped")));
+                    }
+                }
+            }}
+            title={<Typography color={"secondary"}
+                               className="font-medium ml-1">
+                {group?.toUpperCase() ?? "Views".toUpperCase()}
+            </Typography>}>
+
+            <div className="mb-8">
+                {children}
+            </div>
+        </ExpandablePanel>
+    );
+}

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -0,0 +1,45 @@
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cn, focusedMixin, Typography, } from "@firecms/ui";
+
+import { Link as ReactLink } from "react-router-dom";
+
+export type SmallNavigationCardProps = {
+    name: string,
+    url: string;
+    icon: React.ReactElement;
+};
+
+export function SmallNavigationCard({
+                                 name,
+                                 url,
+                                 icon,
+                             }: SmallNavigationCardProps) {
+
+    return (
+        <>
+
+            <ReactLink
+                tabIndex={0}
+                className={cn(cardMixin,
+                    cardClickableMixin,
+                    focusedMixin,
+                    "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ")}
+                to={url}
+            >
+
+                <div className="flex flex-row items-center flex-grow gap-2 ">
+                    {icon}
+
+                    <Typography gutterBottom variant="h5"
+                                component="h2"
+                                className="mb-0 ml-4">
+                        {name}
+                    </Typography>
+                </div>
+
+                <div className={"p-4"}>
+                    <ArrowForwardIcon color="primary"/>
+                </div>
+            </ReactLink>
+
+        </>);
+}

package/src/components/HomePage/index.tsx

@@ -0,0 +1,5 @@
+export * from "./DefaultHomePage";
+export * from "./NavigationCardBinding";
+export * from "./NavigationGroup";
+export * from "./NavigationCard";
+export * from "./SmallNavigationCard";

package/src/components/NotFoundPage.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Link as ReactLink } from "react-router-dom";
+import { Button, Typography } from "@firecms/ui";
+
+export function NotFoundPage() {
+
+    return (
+        <div className="flex w-full h-full">
+            <div className="m-auto flex items-center flex-col"
+            >
+                <Typography variant={"h4"} align={"center"}
+                            gutterBottom={true}>
+                    Page not found
+                </Typography>
+                <Typography align={"center"} gutterBottom={true}>
+                    This page does not exist or you may not have access to it
+                </Typography>
+                <Button
+                    variant={"text"}
+                    component={ReactLink}
+                    to={"/"}>Back to home</Button>
+            </div>
+        </div>
+    );
+}

package/src/components/PropertyConfigBadge.tsx

@@ -0,0 +1,17 @@
+import { getIconForWidget } from "../util";
+import { PropertyConfig } from "../types";
+import { getDefaultFieldConfig } from "../core";
+
+export function PropertyConfigBadge({ propertyConfig }: { propertyConfig: PropertyConfig | undefined }): React.ReactNode {
+    const classes = "h-8 w-8 p-1 rounded-full shadow text-white";
+
+    const defaultPropertyConfig = typeof propertyConfig?.property === "object" ? getDefaultFieldConfig(propertyConfig.property) : undefined;
+
+    return <div
+        className={classes}
+        style={{
+            background: propertyConfig?.color ?? defaultPropertyConfig?.color ?? "#888"
+        }}>
+        {propertyConfig?.Icon ? getIconForWidget(propertyConfig, "medium") : getIconForWidget(defaultPropertyConfig, "medium")}
+    </div>
+}

package/src/components/PropertyIdCopyTooltipContent.tsx

@@ -0,0 +1,28 @@
+import { ContentPasteIcon, IconButton, Typography } from "@firecms/ui";
+import { useCallback, useState } from "react";
+
+export function PropertyIdCopyTooltipContent({ propertyId }: { propertyId: string }) {
+
+    const [copied, setCopied] = useState(false);
+
+    return (
+        <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
+            <div>
+                <Typography variant={"caption"} className={"min-w-20 text-slate-400"}
+                            color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
+                <Typography variant={"caption"} className={"text-white"}><code>{propertyId}</code></Typography>
+            </div>
+            {/*    Copy to clipboard button*/}
+            <IconButton size={"small"}>
+                <ContentPasteIcon size={"smallest"}
+                                  className={"text-white"}
+                                  onClick={useCallback(() => {
+                                      navigator.clipboard.writeText(propertyId);
+                                      setCopied(true);
+                                      setTimeout(() => setCopied(false), 2000);
+                                  }, [propertyId])}
+                />
+            </IconButton>
+        </div>
+    );
+}

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -0,0 +1,379 @@
+import React, { MouseEventHandler, useCallback, useEffect, useMemo, useState } from "react";
+import { CollectionSize, Entity, EntityCollection, FilterValues } from "../../types";
+
+import {
+    EntityCollectionRowActions,
+    EntityCollectionTable,
+    useDataSourceEntityCollectionTableController
+} from "../EntityCollectionTable";
+import {
+    useAuthController,
+    useCustomizationController,
+    useDataSource,
+    useLargeLayout,
+    useNavigationController,
+    useSideEntityController
+} from "../../hooks";
+import { ErrorView } from "../ErrorView";
+import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
+import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } 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 ReferenceSelectionInnerProps<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[];
+
+    /**
+     * 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 useReferenceDialog}
+ * @group Components
+ */
+export function ReferenceSelectionTable<M extends Record<string, any>>(
+    {
+        onSingleEntitySelected,
+        onMultipleEntitiesSelected,
+        multiselect,
+        collection,
+        path: pathInput,
+        selectedEntityIds: selectedEntityIdsProp,
+        description,
+        forceFilter,
+        maxSelection,
+    }: ReferenceSelectionInnerProps<M>) {
+
+    const sideDialogContext = useSideDialogContext();
+    const sideEntityController = useSideEntityController();
+    const navigation = useNavigationController();
+    const analyticsController = useAnalyticsController();
+    const customizationController = useCustomizationController();
+
+    const fullPath = navigation.resolveAliasesFrom(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: fullPath,
+            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: fullPath,
+                        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, fullPath, selectedEntityIdsProp, collection, selectionController.setSelectedEntities]);
+
+    const onClear = () => {
+        analyticsController.onAnalyticsEvent?.("reference_selection_clear", {
+            path: fullPath
+        });
+        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: fullPath,
+                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: fullPath
+        });
+        sideEntityController.open({
+            path: fullPath,
+            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}
+            fullPath={fullPath}
+            selectionController={selectionController}/>;
+
+    };
+
+    const onDone = useCallback((event: React.SyntheticEvent) => {
+        event.stopPropagation();
+        sideDialogContext.close(false);
+    }, [sideDialogContext]);
+
+    if (!collection) {
+        return <ErrorView
+            error={"Could not find collection with id " + collection}/>
+    }
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const resolvedCollection = useMemo(() => resolveCollection({
+        collection: collection,
+        path: fullPath,
+        values: {},
+        fields: customizationController.propertyConfigs
+    }), [collection, customizationController.propertyConfigs, fullPath]);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const displayedColumnIds = useColumnIds(resolvedCollection, false);
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const tableController = useDataSourceEntityCollectionTableController<M>({
+        fullPath,
+        collection,
+        entitiesDisplayedFirst,
+        forceFilter
+    });
+
+    const {
+        textSearchLoading,
+        textSearchInitialised,
+        onTextSearchClick,
+        textSearchEnabled
+    } =
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useTableSearchHelper({
+            collection,
+            fullPath,
+        });
+
+    return (
+
+        <div className="flex flex-col h-full">
+
+            <div className="flex-grow">
+                {entitiesDisplayedFirst &&
+                    <EntityCollectionTable
+                        textSearchLoading={textSearchLoading}
+                        onTextSearchClick={textSearchInitialised ? undefined : onTextSearchClick}
+                        textSearchEnabled={textSearchEnabled}
+                        displayedColumnIds={displayedColumnIds}
+                        onEntityClick={onEntityClick}
+                        tableController={tableController}
+                        tableRowActionsBuilder={tableRowActionsBuilder}
+                        title={<Typography variant={"subtitle2"}>
+                            {collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`}
+                        </Typography>}
+                        defaultSize={collection.defaultSize}
+                        properties={resolvedCollection.properties}
+                        forceFilter={forceFilter}
+                        inlineEditing={false}
+                        selectionController={selectionController}
+                        actions={<ReferenceDialogActions
+                            collection={collection}
+                            path={fullPath}
+                            onNewClick={onNewClick}
+                            onClear={onClear}/>
+                        }
+                    />}
+            </div>
+            <DialogActions translucent={false}>
+                {description &&
+                    <Typography variant={"body2"}
+                                className="flex-grow text-left">
+                        {description}
+                    </Typography>}
+                <Button
+                    onClick={onDone}
+                    color="primary"
+                    variant="filled">
+                    Done
+                </Button>
+            </DialogActions>
+        </div>
+
+    );
+
+}
+
+function ReferenceDialogActions({
+                                    collection,
+                                    path,
+                                    onClear,
+                                    onNewClick
+                                }: {
+    collection: EntityCollection<any>,
+    path: string,
+    onClear: () => void,
+    onNewClick: () => void
+}) {
+
+    const authController = useAuthController();
+
+    const largeLayout = useLargeLayout();
+
+    const onClick: MouseEventHandler<HTMLButtonElement> | undefined = onNewClick
+        ? (e) => {
+            e.preventDefault();
+            onNewClick();
+        }
+        : undefined;
+    const addButton = canCreateEntity(collection, authController, path, null) &&
+        onClick && (largeLayout
+            ? <Button
+                onClick={onClick}
+                startIcon={<AddIcon/>}
+                variant="outlined"
+                color="primary">
+                Add {collection.singularName ?? collection.name}
+            </Button>
+            : <Button
+                onClick={onClick}
+                variant="outlined"
+                color="primary"
+            >
+                <AddIcon/>
+            </Button>);
+
+    return (
+        <>
+            <Button onClick={onClear}
+                    variant={"text"}
+                    color="primary">
+                Clear
+            </Button>
+            {addButton}
+        </>
+    );
+}