@firecms/core 3.0.0-canary.29 → 3.0.0-canary.292

package/src/form/components/FormLayout.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { cls } from "@firecms/ui";
+
+export function FormLayout({
+                               children,
+                               className
+                           }: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <div className={cls("flex flex-wrap gap-x-4 w-full space-y-8", className)}>
+            {children}
+        </div>
+    );
+}

package/src/form/components/LabelWithIcon.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import React, { forwardRef } from "react";
+import { cls } from "@firecms/ui";
 
 interface LabelWithIconProps {
     icon: React.ReactNode;
@@ -12,22 +13,32 @@ interface LabelWithIconProps {
  * Render the label of with an icon and the title of a property
  * @group Form custom fields
  */
-export function LabelWithIcon({
-                                  icon,
-                                  title,
-                                  small,
-                                  className,
-                                  required
-                              }: LabelWithIconProps) {
-    return (
-        <span
-            className={`inline-flex items-center my-0.5  ${small ? "gap-1" : "gap-2"} ${className ?? ""}`}>
-
-            {icon}
-
-            <span
-                className={`text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</span>
-
+export const LabelWithIcon = forwardRef<HTMLDivElement, LabelWithIconProps>(
+    ({
+         icon,
+         title,
+         small,
+         className,
+         required
+     }, ref) => {
+        return (
+            <div
+                ref={ref}
+                className={cls("align-middle inline-flex items-center my-0.5",
+                    small ? "gap-1" : "gap-2",
+                    className)}
+            >
+                {icon}
+                <span
+                    className={`text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${
+                        small ? "translate-x-2 scale-75" : ""
+                    }`}
+                >
+          {(title ?? "") + (required ? " *" : "")}
         </span>
-    );
-}
+            </div>
+        );
+    }
+);
+
+LabelWithIcon.displayName = "LabelWithIcon";

package/src/form/components/LabelWithIconAndTooltip.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { LabelWithIcon } from "./LabelWithIcon";
+import { PropertyIdCopyTooltip } from "../../components/PropertyIdCopyTooltip";
+
+interface LabelWithIconAndTooltip {
+    icon: React.ReactNode;
+    title?: string;
+    small?: boolean;
+    className?: string;
+    required?: boolean;
+    propertyKey: string
+}
+
+/**
+ * Render the label of with an icon and the title of a property
+ * @group Form custom fields
+ */
+export function LabelWithIconAndTooltip({
+                                            propertyKey,
+                                            className,
+                                            ...props
+                                        }: LabelWithIconAndTooltip) {
+    return (
+        <PropertyIdCopyTooltip propertyKey={propertyKey} className={className}>
+            <LabelWithIcon {...props}/>
+        </PropertyIdCopyTooltip>
+    );
+}

package/src/form/components/LocalChangesMenu.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from "react";
+import {
+    Button,
+    CancelIcon,
+    CheckIcon,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    KeyboardArrowDownIcon,
+    Menu,
+    MenuItem,
+    Typography,
+    VisibilityIcon,
+    WarningIcon
+} from "@firecms/ui";
+import { FormexController } from "@firecms/formex";
+import { useSnackbarController } from "../../hooks";
+import { mergeDeep } from "../../util";
+import { flattenKeys, removeEntityFromCache } from "../../util/entity_cache";
+import { ResolvedProperties } from "../../types";
+import { PropertyCollectionView } from "../../components/PropertyCollectionView";
+
+interface LocalChangesMenuProps<M extends object> {
+    cacheKey: string;
+    localChangesData: Partial<M>;
+    formex: FormexController<M>;
+    onClearLocalChanges?: () => void;
+    properties: ResolvedProperties<M>;
+}
+
+export function LocalChangesMenu<M extends object>({
+                                                       localChangesData,
+                                                       formex,
+                                                       onClearLocalChanges,
+                                                       cacheKey,
+                                                       properties
+                                                   }: LocalChangesMenuProps<M>) {
+
+    const snackbarController = useSnackbarController();
+    const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
+    const [open, setOpen] = useState(false);
+
+    const handleOpenMenu = () => setOpen(true);
+    const handleCloseMenu = () => setOpen(false);
+
+    const handlePreview = () => {
+        setPreviewDialogOpen(true);
+        handleCloseMenu();
+    };
+
+    const handleApply = () => {
+        const mergedValues = mergeDeep(formex.values, localChangesData);
+        const touched = { ...formex.touched };
+        const previewKeys = flattenKeys(localChangesData);
+        previewKeys.forEach((key) => {
+            touched[key] = true;
+        });
+
+        formex.setTouched(touched);
+        formex.setValues(mergedValues);
+        snackbarController.open({
+            type: "info",
+            message: "Local changes applied to the form"
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+    };
+
+    const handleDiscard = () => {
+        removeEntityFromCache(cacheKey);
+        snackbarController.open({
+            type: "info",
+            message: "Local changes discarded"
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+    };
+
+    return (
+        <>
+            <Menu
+                trigger={
+                    <Button
+                        size={"small"}
+                        className={
+                            "font-semibold text-xs rounded-full px-4 py-1 bg-yellow-200 dark:bg-yellow-900 hover:bg-yellow-300 dark:hover:bg-yellow-800 text-yellow-800 dark:text-yellow-200"
+                        }
+                        onClick={handleOpenMenu}
+                    >
+                        <WarningIcon size={"smallest"} className={"mr-1 text-yellow-600 dark:text-yellow-400"}/>
+                        Unsaved Local changes
+                        <KeyboardArrowDownIcon size={"smallest"}/>
+                    </Button>
+                }
+                open={open}
+                onOpenChange={setOpen}
+            >
+                <div className={"max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300"}>
+                    This document was edited locally and has unsaved changes. These local changes will be lost if you
+                    don't apply them.
+                </div>
+                <MenuItem dense onClick={handlePreview}><VisibilityIcon size={"small"}/>Preview Changes</MenuItem>
+                <MenuItem dense onClick={handleApply}><CheckIcon size={"small"}/>Apply Changes</MenuItem>
+                <MenuItem dense onClick={handleDiscard}><CancelIcon size={"small"}/>Discard Local Changes</MenuItem>
+            </Menu>
+
+            <Dialog
+                open={previewDialogOpen}
+                onOpenChange={setPreviewDialogOpen}
+                maxWidth={"4xl"}
+            >
+                <DialogTitle variant={"h6"}>Preview Local Changes</DialogTitle>
+                <DialogContent className={"my-4"}>
+                    <Typography variant={"body2"} className={"mb-4"}>
+                        These are the local changes that will be applied to the form.
+                    </Typography>
+                    <div className={`border rounded-lg ${defaultBorderMixin}`} style={{
+                        maxHeight: 520,
+                        overflow: "auto"
+                    }}>
+                        <div className="p-4">
+                            <PropertyCollectionView data={localChangesData}
+                                                    properties={properties as ResolvedProperties}/>
+                        </div>
+                    </div>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setPreviewDialogOpen(false)}>Close</Button>
+                    <Button
+                        variant={"filled"}
+                        onClick={() => {
+                            handleApply();
+                            setPreviewDialogOpen(false);
+                        }}
+                    >
+                        Apply changes
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

package/src/form/components/StorageItemPreview.tsx

@@ -1,43 +1,45 @@
 import React from "react";
 
-import { Entity, EntityCollection, ResolvedStringProperty } from "../../types";
+import { ResolvedStringProperty } from "../../types";
 import { PreviewSize, PropertyPreview } from "../../preview";
 
-import { cn, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
+import { cls, DescriptionIcon, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../components";
 
 interface StorageItemPreviewProps {
     name: string;
     property: ResolvedStringProperty;
     value: string,
-    entity: Entity<any>,
     onRemove: (value: string) => void;
     size: PreviewSize;
     disabled: boolean;
-    collection: EntityCollection;
+    placeholder?: boolean;
+    className?: string;
 }
 
 export function StorageItemPreview({
                                        name,
                                        property,
                                        value,
-                                       entity,
                                        onRemove,
                                        disabled,
                                        size,
-                                       collection
+                                       placeholder,
+                                       className
                                    }: StorageItemPreviewProps) {
 
     return (
-        <div className={cn(paperMixin,
-            "relative m-4 border-box flex items-center justify-center",
-            size === "medium" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]")}>
+        <div className={cls(paperMixin,
+            "relative border-box flex items-center justify-center",
+            size === "large" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]",
+            className)}>
 
-            {!disabled &&
+            {!placeholder && !disabled &&
                 <div
-                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-gray-900">
+                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-surface-900">
 
                     <Tooltip
+                        asChild={true}
                         title="Remove">
                         <IconButton
                             size={"small"}
@@ -51,16 +53,24 @@ export function StorageItemPreview({
                 </div>
             }
 
-            {value &&
+            {!placeholder && value &&
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={name}
                                      value={value}
                                      property={property}
-                        // entity={entity}
+                                     interactive={false}
                                      size={size}/>
                 </ErrorBoundary>
             }
 
+            {placeholder &&
+                <div
+                    onClick={(e) => e.stopPropagation()}
+                    className="flex flex-col items-center justify-center w-full h-full">
+                    <DescriptionIcon className="text-surface-700 dark:text-surface-300"/>
+                </div>
+            }
+
 
         </div>
     );

package/src/form/components/StorageUploadProgress.tsx

@@ -3,8 +3,7 @@ import React, { useCallback } from "react";
 import { useSnackbarController, useStorageSource } from "../../hooks";
 import { StorageFieldItem } from "../../util/useStorageUploadController";
 import { ErrorView } from "../../components";
-import { cn, paperMixin, Skeleton } from "@firecms/ui";
-import { EntityCollection, StorageSource } from "../../types";
+import { cls, paperMixin, Skeleton } from "@firecms/ui";
 
 export interface StorageUploadItemProps {
     storagePath: string;
@@ -49,7 +48,7 @@ export function StorageUploadProgress({
             metadata
         })
             .then(async ({ path }) => {
-                console.debug("Upload successful");
+                console.debug("Upload successful", path);
                 await onFileUploadComplete(path, entry, metadata);
                 if (mounted.current)
                     setLoading(false);
@@ -80,7 +79,7 @@ export function StorageUploadProgress({
     }, [entry.file, entry.fileName, upload]);
 
     if (simple) {
-        return <div className={`m-4 w-${imageSize} h-${imageSize}`}>
+        return <div className={`w-${imageSize} h-${imageSize}`}>
 
             {loading && <Skeleton className={`w-${imageSize} h-${imageSize}`}/>}
 
@@ -88,8 +87,8 @@ export function StorageUploadProgress({
     }
     return (
 
-        <div className={cn(paperMixin,
-            "relative m-4 border-box flex items-center justify-center",
+        <div className={cls(paperMixin,
+            "p-4 relative border-box flex items-center justify-center",
             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&

package/src/form/components/index.tsx

@@ -1,3 +1,5 @@
-export * from "./FormikArrayContainer";
 export * from "./FieldHelperText";
 export * from "./LabelWithIcon";
+export * from "./LabelWithIconAndTooltip";
+export * from "./FormEntry";
+export * from "./FormLayout";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -1,10 +1,11 @@
 import React from "react";
 import { FieldProps } from "../../types";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel } from "@firecms/ui";
-import { getIconForProperty } from "../../util";
+import { ExpandablePanel, Typography } from "@firecms/ui";
+import { getArrayResolvedProperties, getIconForProperty, isReadOnly } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { useAuthController } from "../../hooks";
 
 /**
  * Array field used for custom
@@ -20,16 +21,26 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         showError,
                                                                         isSubmitting,
                                                                         setValue,
-                                                                        tableMode,
+                                                                        minimalistView: minimalistViewProp,
                                                                         property,
                                                                         includeDescription,
-                                                                        underlyingValueHasChanged,
                                                                         context,
                                                                         disabled
                                                                     }: FieldProps<T, any, any>) {
 
-    if (!Array.isArray(property.resolvedProperties))
-        throw Error("ArrayCustomShapedFieldBinding misconfiguration. Property `of` not set");
+    const authController = useAuthController();
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
+    let resolvedProperties = "resolvedProperties" in property ? property.resolvedProperties : undefined;
+    if (!resolvedProperties) {
+        resolvedProperties = getArrayResolvedProperties({
+            propertyValue: value,
+            propertyKey,
+            property,
+            ignoreMissingFields: false,
+            authController
+        })
+    }
 
     const expanded = property.expanded === undefined ? true : property.expanded;
 
@@ -39,22 +50,26 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
         setValue
     });
 
-    const title = <LabelWithIcon icon={getIconForProperty(property, "small")}
-                                 required={property.validation?.required}
-                                 className={"text-text-secondary dark:text-text-secondary-dark"}
-                                 title={property.name}/>;
+    const title = (<>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            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>}
+    </>);
 
-    const body = property.resolvedProperties.map((childProperty, index) => {
+    const body = resolvedProperties.map((childProperty, index) => {
+        const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
         const fieldProps = {
             propertyKey: `${propertyKey}[${index}]`,
-            disabled,
+            disabled: disabled || thisDisabled,
             property: childProperty,
             includeDescription,
-            underlyingValueHasChanged,
             context,
-            tableMode: false,
             partOfArray: true,
-            partOfBlock: false,
+            minimalistView: false,
             autoFocus: false
         };
         return <div key={`custom_shaped_array_${index}`} className="pb-4">
@@ -66,14 +81,14 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
 
         <>
 
-            {!tableMode &&
+            {!minimalistView &&
                 <ExpandablePanel initiallyExpanded={expanded}
                                  title={title}
-                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
+                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
                     {body}
                 </ExpandablePanel>}
 
-            {tableMode && body}
+            {minimalistView && body}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps, ResolvedProperty } from "../../types";
 import { ReferencePreview } from "../../preview";
-import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
-import { ErrorView } from "../../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
 import { useNavigationController, useReferenceDialog } from "../../hooks";
-import { Button, cn, ExpandablePanel, fieldBackgroundMixin } from "@firecms/ui";
+import { Button, cls, EditIcon, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
@@ -25,13 +25,15 @@ export function ArrayOfReferencesFieldBinding({
                                                   showError,
                                                   disabled,
                                                   isSubmitting,
-                                                  tableMode,
+                                                  minimalistView: minimalistViewProp,
                                                   property,
                                                   includeDescription,
                                                   setValue,
                                                   setFieldValue
                                               }: ArrayOfReferencesFieldProps) {
 
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
     const ofProperty = property.of as ResolvedProperty;
     if (ofProperty.dataType !== "reference") {
         throw Error("ArrayOfReferencesField expected a property containing references");
@@ -56,7 +58,6 @@ export function ArrayOfReferencesFieldBinding({
     }
 
     const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
-        console.debug("onMultipleEntitiesSelected", entities);
         setValue(entities.map(e => getReferenceFrom(e)));
     }, [setValue]);
 
@@ -70,34 +71,44 @@ export function ArrayOfReferencesFieldBinding({
         }
     );
 
-    const onEntryClick = useCallback((e: React.SyntheticEvent) => {
+    const onEntryClick = (e: React.SyntheticEvent) => {
         e.preventDefault();
         referenceDialogController.open();
-    }, [referenceDialogController]);
-
-    const buildEntry = useCallback((index: number, internalId: number) => {
+    };
+
+    const buildEntry = useCallback(({
+                                        index,
+                                        internalId,
+                                        storedProps,
+                                        storeProps
+                                    }: ArrayEntryParams) => {
         const entryValue = value && value.length > index ? value[index] : undefined;
         if (!entryValue)
             return <div>Internal ERROR</div>;
         return (
-                <ReferencePreview
-                    key={internalId}
-                    disabled={!ofProperty.path}
-                    previewProperties={ofProperty.previewProperties}
-                    size={"medium"}
-                    onClick={onEntryClick}
-                    hover={!disabled}
-                    reference={entryValue}
-                />
+            <ReferencePreview
+                key={internalId}
+                disabled={!ofProperty.path}
+                previewProperties={ofProperty.previewProperties}
+                size={"medium"}
+                onClick={onEntryClick}
+                hover={!disabled}
+                reference={entryValue}
+                includeId={ofProperty.includeId}
+                includeEntityLink={ofProperty.includeEntityLink}
+            />
         );
     }, [ofProperty.path, ofProperty.previewProperties, value]);
 
-    const title = (
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
-    );
+    const title = (<>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"h-8 flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
 
     const body = <>
         {!collection && <ErrorView
@@ -105,20 +116,23 @@ export function ArrayOfReferencesFieldBinding({
 
         {collection && <div className={"group"}>
 
-            <FormikArrayContainer value={value}
-                                  addLabel={property.name ? "Add reference to " + property.name : "Add reference"}
-                                  name={propertyKey}
-                                  buildEntry={buildEntry}
-                                  disabled={isSubmitting}
-                                  setFieldValue={setFieldValue}
-                                  newDefaultEntry={property.of.defaultValue}/>
+            <ArrayContainer droppableId={propertyKey}
+                            value={value}
+                            disabled={isSubmitting}
+                            buildEntry={buildEntry}
+                            canAddElements={false}
+                            addLabel={property.name ? "Add reference to " + property.name : "Add reference"}
+                            newDefaultEntry={property.of.defaultValue}
+                            onValueChange={(value) => setFieldValue(propertyKey, value)}
+            />
 
             <Button
-                className="my-4 justify-center text-left"
-                variant="outlined"
+                className="ml-3.5 my-4 justify-center text-left"
+                variant="text"
                 color="primary"
                 disabled={isSubmitting}
                 onClick={onEntryClick}>
+                <EditIcon size={"small"}/>
                 Edit {property.name}
             </Button>
         </div>}
@@ -127,16 +141,16 @@ export function ArrayOfReferencesFieldBinding({
     return (
         <>
 
-            {!tableMode &&
+            {!minimalistView &&
                 <ExpandablePanel
                     titleClassName={fieldBackgroundMixin}
-                    className={cn("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
+                    innerClassName={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
                     initiallyExpanded={expanded}
                     title={title}>
                     {body}
                 </ExpandablePanel>}
 
-            {tableMode && body}
+            {minimalistView && body}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}