@firecms/collection_editor 3.0.0-canary.102 → 3.0.0-canary.103

package/dist/index.umd.js

@@ -25,6 +25,7 @@
     name: Yup__namespace.string().required("Required"),
     path: Yup__namespace.string().required("Required")
   });
+  const useCollectionEditorController = () => React.useContext(CollectionEditorContext);
   function CollectionDetailsForm({
     isNewCollection,
     reservedGroups,
@@ -44,8 +45,12 @@
       isSubmitting,
       submitCount
     } = formex.useFormex();
+    const collectionEditor = useCollectionEditorController();
     const [iconDialogOpen, setIconDialogOpen] = React.useState(false);
     const [advancedPanelExpanded, setAdvancedPanelExpanded] = React.useState(false);
+    const updateDatabaseId = (databaseId) => {
+      setFieldValue("databaseId", databaseId ?? void 0);
+    };
     const updateName = (name) => {
       setFieldValue("name", name);
       const pathTouched = formex.getIn(touched, "path");
@@ -66,6 +71,7 @@
         setAdvancedPanelExpanded(true);
       }
     }, [errors.id]);
+    const DatabaseField = collectionEditor.components?.DatabaseField ?? DefaultDatabaseField;
     const collectionIcon = /* @__PURE__ */ jsxRuntime.jsx(core.IconForView, { collectionOrView: values });
     const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
     const {
@@ -92,9 +98,16 @@
         /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: "flex flex-row py-2 pt-3 items-center",
+            className: "flex flex-row gap-2 py-2 pt-3 items-center",
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: !isNewCollection ? "h5" : "h4", className: "flex-grow", children: isNewCollection ? "New collection" : `${values?.name} collection` }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                DatabaseField,
+                {
+                  databaseId: values.databaseId,
+                  onDatabaseIdUpdate: updateDatabaseId
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Change icon", children: /* @__PURE__ */ jsxRuntime.jsx(
                 ui.IconButton,
                 {
@@ -173,7 +186,7 @@
               })
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: showErrors && Boolean(errors.group) ? errors.group : "Group of the collection" })
+          /* @__PURE__ */ jsxRuntime.jsx(core.FieldCaption, { children: showErrors && Boolean(errors.group) ? errors.group : "Group in the home page" })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(
           ui.ExpandablePanel,
@@ -377,6 +390,30 @@
       )
     ] }) });
   }
+  function DefaultDatabaseField({
+    databaseId,
+    onDatabaseIdUpdate
+  }) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Tooltip,
+      {
+        title: "Database ID",
+        side: "top",
+        align: "start",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.TextField,
+          {
+            size: "smallest",
+            invisible: true,
+            inputClassName: "text-end",
+            value: databaseId ?? "",
+            onChange: (e) => onDatabaseIdUpdate(e.target.value),
+            placeholder: "(default)"
+          }
+        )
+      }
+    );
+  }
   function idToPropertiesPath(id) {
     return "properties." + id.replaceAll(".", ".properties.");
   }
@@ -1961,19 +1998,6 @@
             showErrors
           }
         ),
-        widgetId === "markdown" && /* @__PURE__ */ jsxRuntime.jsx(
-          StringPropertyValidation,
-          {
-            disabled,
-            length: true,
-            lowercase: true,
-            max: true,
-            min: true,
-            trim: true,
-            uppercase: true,
-            showErrors
-          }
-        ),
         widgetId === "email" && /* @__PURE__ */ jsxRuntime.jsx(
           StringPropertyValidation,
           {
@@ -2784,7 +2808,7 @@
           "div",
           {
             className: ui.cls(
-              "flex flex-row items-center text-base min-h-[52px]",
+              "flex flex-row items-center text-base min-h-[48px]",
               optionDisabled ? "w-full" : ""
             ),
             children: [
@@ -2894,6 +2918,121 @@
     "block"
   ];
   const supportedFields = Object.entries(core.DEFAULT_FIELD_CONFIGS).filter(([id]) => supportedFieldsIds.includes(id)).map(([id, config]) => ({ [id]: config })).reduce((a, b) => ({ ...a, ...b }), {});
+  function MarkdownPropertyField({
+    disabled,
+    showErrors
+  }) {
+    const {
+      values,
+      setFieldValue
+    } = formex.useFormex();
+    const baseStoragePath = "storage";
+    const fileName = `${baseStoragePath}.fileName`;
+    const maxSize = `${baseStoragePath}.maxSize`;
+    const storagePath = `${baseStoragePath}.storagePath`;
+    const fileNameValue = formex.getIn(values, fileName) ?? "{rand}_{file}";
+    const storagePathValue = formex.getIn(values, storagePath) ?? "/";
+    const maxSizeValue = formex.getIn(values, maxSize);
+    const hasFilenameCallback = typeof fileNameValue === "function";
+    const hasStoragePathCallback = typeof storagePathValue === "function";
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(ValidationPanel, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        StringPropertyValidation,
+        {
+          disabled,
+          length: true,
+          lowercase: true,
+          max: true,
+          min: true,
+          trim: true,
+          uppercase: true,
+          showErrors
+        }
+      ) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.ExpandablePanel,
+        {
+          title: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row text-gray-500", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.FileUploadIcon, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Typography,
+              {
+                variant: "subtitle2",
+                className: "ml-2",
+                children: "File upload config"
+              }
+            )
+          ] }),
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-12 gap-2 p-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(
+              formex.Field,
+              {
+                name: fileName,
+                as: ui.DebouncedTextField,
+                label: "File name",
+                size: "small",
+                disabled: hasFilenameCallback || disabled,
+                value: hasFilenameCallback ? "-" : fileNameValue
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-12", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                formex.Field,
+                {
+                  name: storagePath,
+                  as: ui.DebouncedTextField,
+                  label: "Storage path",
+                  disabled: hasStoragePathCallback || disabled,
+                  size: "small",
+                  value: hasStoragePathCallback ? "-" : storagePathValue
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Typography, { variant: "caption", className: "ml-3.5 mt-1 mb-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { children: "You can use the following placeholders in the file name and storage path values:" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("ul", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("li", { children: "{file} - Full name of the uploaded file" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("li", { children: "{file.name} - Name of the uploaded file without extension" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("li", { children: "{file.ext} - Extension of the uploaded file" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("li", { children: "{entityId} - ID of the entity" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("li", { children: "{propertyKey} - ID of this field" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("li", { children: "{path} - Path of this entity" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("li", { children: "{rand} - Random value used to avoid name collisions" })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "ml-3.5 mt-1 mb-2", children: "When using Markdown, the URL of the uploaded files are always saved in the text value (not the path)." })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(
+              ui.DebouncedTextField,
+              {
+                name: maxSize,
+                type: "number",
+                label: "Max size (in bytes)",
+                size: "small",
+                value: maxSizeValue !== void 0 && maxSizeValue !== null ? maxSizeValue.toString() : "",
+                onChange: (e) => {
+                  const value = e.target.value;
+                  if (value === "") setFieldValue(maxSize, void 0);
+                  else setFieldValue(maxSize, parseInt(value));
+                }
+              }
+            ) })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-12", children: /* @__PURE__ */ jsxRuntime.jsx(
+        ui.TextField,
+        {
+          name: "defaultValue",
+          disabled,
+          onChange: (e) => {
+            setFieldValue("defaultValue", e.target.value === "" ? void 0 : e.target.value);
+          },
+          label: "Default value",
+          value: formex.getIn(values, "defaultValue") ?? ""
+        }
+      ) })
+    ] });
+  }
   const PropertyForm = React.memo(
     function PropertyForm2(props) {
       const {
@@ -2954,7 +3093,10 @@
           } = newPropertyWithId;
           doOnPropertyChanged({
             id,
-            property: { ...property2, editable: property2.editable ?? true }
+            property: {
+              ...property2,
+              editable: property2.editable ?? true
+            }
           });
           if (!existingProperty)
             controller.resetForm({ values: initialValue });
@@ -3159,7 +3301,7 @@
       }, 0);
     };
     let childComponent;
-    if (selectedFieldConfigId === "text_field" || selectedFieldConfigId === "multiline" || selectedFieldConfigId === "markdown" || selectedFieldConfigId === "email") {
+    if (selectedFieldConfigId === "text_field" || selectedFieldConfigId === "multiline" || selectedFieldConfigId === "email") {
       childComponent = /* @__PURE__ */ jsxRuntime.jsx(
         StringPropertyField,
         {
@@ -3176,6 +3318,14 @@
           showErrors
         }
       );
+    } else if (selectedFieldConfigId === "markdown") {
+      childComponent = /* @__PURE__ */ jsxRuntime.jsx(
+        MarkdownPropertyField,
+        {
+          disabled,
+          showErrors
+        }
+      );
     } else if (selectedFieldConfigId === "select" || selectedFieldConfigId === "number_select") {
       childComponent = /* @__PURE__ */ jsxRuntime.jsx(
         EnumPropertyField,
@@ -5803,7 +5953,8 @@
       getPathSuggestions,
       getUser,
       getData,
-      onAnalyticsEvent
+      onAnalyticsEvent,
+      components
     }) {
       const navigation = core.useNavigationController();
       const navigate = reactRouter.useNavigate();
@@ -5902,7 +6053,8 @@
             createCollection,
             editProperty,
             configPermissions: configPermissions ?? defaultConfigPermissions,
-            getPathSuggestions
+            getPathSuggestions,
+            components
           },
           children: [
             children,
@@ -6012,7 +6164,6 @@
     },
     equal
   );
-  const useCollectionEditorController = () => React.useContext(CollectionEditorContext);
   function EditorCollectionAction({
     path: fullPath,
     parentCollectionIds,
@@ -6336,7 +6487,8 @@
     getUser,
     collectionInference,
     getData,
-    onAnalyticsEvent
+    onAnalyticsEvent,
+    components
   }) {
     return {
       key: "collection_editor",
@@ -6352,7 +6504,8 @@
           getPathSuggestions,
           getUser,
           getData,
-          onAnalyticsEvent
+          onAnalyticsEvent,
+          components
         }
       },
       homePage: {