@firecms/collection_editor 3.0.0-canary.178 → 3.0.0-canary.179

package/dist/index.es.js

@@ -22,7 +22,7 @@ const useCollectionEditorController = () => {
   return useContext(CollectionEditorContext);
 };
 function LayoutModeSwitch(t0) {
-  const $ = c(28);
+  const $ = c(29);
   const {
     value,
     onChange,
@@ -140,26 +140,35 @@ function LayoutModeSwitch(t0) {
     t16 = $[24];
   }
   let t17;
-  if ($[25] !== t1 || $[26] !== t16) {
-    t17 = /* @__PURE__ */ jsxs("div", { className: t1, children: [
+  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+    t17 = /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", className: "ml-3.5", children: "Should documents be opened full screen or in an inline side dialog" });
+    $[25] = t17;
+  } else {
+    t17 = $[25];
+  }
+  let t18;
+  if ($[26] !== t1 || $[27] !== t16) {
+    t18 = /* @__PURE__ */ jsxs("div", { className: t1, children: [
       t2,
-      t16
+      t16,
+      t17
     ] });
-    $[25] = t1;
-    $[26] = t16;
-    $[27] = t17;
+    $[26] = t1;
+    $[27] = t16;
+    $[28] = t18;
   } else {
-    t17 = $[27];
+    t18 = $[28];
   }
-  return t17;
+  return t18;
 }
 function CollectionDetailsForm(t0) {
-  const $ = c(174);
+  const $ = c(177);
   const {
     isNewCollection,
     reservedGroups,
     groups,
-    parentCollection
+    parentCollection,
+    children
   } = t0;
   const groupRef = React__default.useRef(null);
   const {
@@ -839,7 +848,7 @@ function CollectionDetailsForm(t0) {
   }
   let t97;
   if ($[151] !== advancedPanelExpanded || $[152] !== t96) {
-    t97 = /* @__PURE__ */ jsx("div", { className: "col-span-12 mt-8", children: /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t41, initiallyExpanded: false, children: t96 }) });
+    t97 = /* @__PURE__ */ jsx(ExpandablePanel, { expanded: advancedPanelExpanded, onExpandedChange: setAdvancedPanelExpanded, title: t41, initiallyExpanded: false, children: t96 });
     $[151] = advancedPanelExpanded;
     $[152] = t96;
     $[153] = t97;
@@ -847,78 +856,90 @@ function CollectionDetailsForm(t0) {
     t97 = $[153];
   }
   let t98;
-  if ($[154] !== t27 || $[155] !== t36 || $[156] !== t37 || $[157] !== t40 || $[158] !== t97) {
-    t98 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
+  if ($[154] !== children || $[155] !== t97) {
+    t98 = /* @__PURE__ */ jsxs("div", { className: "col-span-12 mt-8", children: [
+      t97,
+      children
+    ] });
+    $[154] = children;
+    $[155] = t97;
+    $[156] = t98;
+  } else {
+    t98 = $[156];
+  }
+  let t99;
+  if ($[157] !== t27 || $[158] !== t36 || $[159] !== t37 || $[160] !== t40 || $[161] !== t98) {
+    t99 = /* @__PURE__ */ jsxs("div", { className: t19, children: [
       t27,
       t36,
       t37,
       t40,
-      t97
+      t98
     ] });
-    $[154] = t27;
-    $[155] = t36;
-    $[156] = t37;
-    $[157] = t40;
-    $[158] = t97;
-    $[159] = t98;
+    $[157] = t27;
+    $[158] = t36;
+    $[159] = t37;
+    $[160] = t40;
+    $[161] = t98;
+    $[162] = t99;
   } else {
-    t98 = $[159];
+    t99 = $[162];
   }
-  let t99;
-  if ($[160] === Symbol.for("react.memo_cache_sentinel")) {
-    t99 = /* @__PURE__ */ jsx("div", { style: {
+  let t100;
+  if ($[163] === Symbol.for("react.memo_cache_sentinel")) {
+    t100 = /* @__PURE__ */ jsx("div", { style: {
       height: "52px"
     } });
-    $[160] = t99;
+    $[163] = t100;
   } else {
-    t99 = $[160];
+    t100 = $[163];
   }
-  let t100;
-  if ($[161] !== setFieldValue) {
-    t100 = (icon) => {
+  let t101;
+  if ($[164] !== setFieldValue) {
+    t101 = (icon) => {
       setIconDialogOpen(false);
       setFieldValue("icon", icon);
     };
-    $[161] = setFieldValue;
-    $[162] = t100;
-  } else {
-    t100 = $[162];
-  }
-  let t101;
-  if ($[163] !== t100 || $[164] !== values.icon) {
-    t101 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: values.icon, onIconSelected: t100 }) });
-    $[163] = t100;
-    $[164] = values.icon;
+    $[164] = setFieldValue;
     $[165] = t101;
   } else {
     t101 = $[165];
   }
   let t102;
-  if ($[166] !== iconDialogOpen || $[167] !== t101) {
-    t102 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t101 });
-    $[166] = iconDialogOpen;
-    $[167] = t101;
+  if ($[166] !== t101 || $[167] !== values.icon) {
+    t102 = /* @__PURE__ */ jsx("div", { className: "p-4 overflow-auto min-h-[200px]", children: /* @__PURE__ */ jsx(SearchIconsView, { selectedIcon: values.icon, onIconSelected: t101 }) });
+    $[166] = t101;
+    $[167] = values.icon;
     $[168] = t102;
   } else {
     t102 = $[168];
   }
   let t103;
-  if ($[169] !== T0 || $[170] !== t102 || $[171] !== t18 || $[172] !== t98) {
-    t103 = /* @__PURE__ */ jsx("div", { className: t7, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t8, className: t9, children: [
+  if ($[169] !== iconDialogOpen || $[170] !== t102) {
+    t103 = /* @__PURE__ */ jsx(Dialog, { open: iconDialogOpen, onOpenChange: setIconDialogOpen, maxWidth: "xl", fullWidth: true, children: t102 });
+    $[169] = iconDialogOpen;
+    $[170] = t102;
+    $[171] = t103;
+  } else {
+    t103 = $[171];
+  }
+  let t104;
+  if ($[172] !== T0 || $[173] !== t103 || $[174] !== t18 || $[175] !== t99) {
+    t104 = /* @__PURE__ */ jsx("div", { className: t7, children: /* @__PURE__ */ jsxs(T0, { maxWidth: t8, className: t9, children: [
       t18,
-      t98,
       t99,
-      t102
+      t100,
+      t103
     ] }) });
-    $[169] = T0;
-    $[170] = t102;
-    $[171] = t18;
-    $[172] = t98;
+    $[172] = T0;
     $[173] = t103;
+    $[174] = t18;
+    $[175] = t99;
+    $[176] = t104;
   } else {
-    t103 = $[173];
+    t104 = $[176];
   }
-  return t103;
+  return t104;
 }
 function _temp3$4(value_3) {
   if (value_3 === "code_defined") {
@@ -8456,10 +8477,8 @@ function CollectionEditorImportMapping(t0) {
         editable: true
       };
       if (propertyPath_0) {
-        if (inferredNewProperty) {
+        {
           setFieldValue(propertyPath_0, inferredNewProperty, false);
-        } else {
-          setFieldValue(propertyPath_0, property_1, false);
         }
         setFieldTouched(propertyPath_0, true, false);
       }
@@ -9358,82 +9377,109 @@ function CollectionEditorInternal({
     setNextMode();
   };
   const editable = collection?.editable === void 0 || collection?.editable === true;
+  const isMergedCollection = collection?.merged ?? false;
   const collectionEditable = editable || isNewCollection;
-  return /* @__PURE__ */ jsx(DialogContent, { fullHeight: true, children: /* @__PURE__ */ jsx(Formex, { value: formController, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-    !isNewCollection && /* @__PURE__ */ jsxs(Tabs, { value: currentView, innerClassName: cls(defaultBorderMixin, "px-4 h-14 w-full justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
-      /* @__PURE__ */ jsx(Tab, { value: "details", children: "Details" }),
-      /* @__PURE__ */ jsx(Tab, { value: "properties", children: "Properties" }),
-      /* @__PURE__ */ jsx(Tab, { value: "subcollections", children: "Additional views" })
-    ] }),
-    /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: formController.handleSubmit, className: cls(isNewCollection ? "h-full" : "h-[calc(100%-48px)]", "flex-grow flex flex-col relative"), children: [
-      currentView === "loading" && /* @__PURE__ */ jsx(CircularProgressCenter, {}),
-      currentView === "extra_view" && path && extraView?.View && /* @__PURE__ */ jsx(extraView.View, { path }),
-      currentView === "welcome" && /* @__PURE__ */ jsx(CollectionEditorWelcomeView, { path, onContinue: (importData, propertiesOrder_0) => {
-        if (importData) {
-          onImportDataSet(importData, propertiesOrder_0);
-          setCurrentView("import_data_mapping");
-        } else {
-          setCurrentView("details");
-        }
-      }, existingCollectionPaths: existingPaths, parentCollection, pathSuggestions }),
-      currentView === "import_data_mapping" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportMapping, { importConfig, collectionEditable, propertyConfigs }),
-      currentView === "import_data_preview" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportDataPreview, { importConfig, properties: values_1.properties, propertiesOrder: values_1.propertiesOrder }),
-      currentView === "import_data_saving" && importConfig && /* @__PURE__ */ jsx(ImportSaveInProgress, { importConfig, collection: values_1, path, onImportSuccess: async (importedCollection) => {
-        snackbarController.open({
-          type: "info",
-          message: "Data imported successfully"
-        });
-        await saveCollection(values_1);
-        handleClose(importedCollection);
-      } }),
-      currentView === "details" && /* @__PURE__ */ jsx(CollectionDetailsForm, { existingPaths, existingIds, groups, parentCollectionIds, parentCollection, isNewCollection }),
-      currentView === "subcollections" && collection && /* @__PURE__ */ jsx(SubcollectionsEditTab, { parentCollection, configController, getUser, collectionInference, parentCollectionIds, collection }),
-      currentView === "properties" && /* @__PURE__ */ jsx(CollectionPropertiesEditorForm, { showErrors: submitCount > 0, isNewCollection, reservedGroups, onPropertyError: (propertyKey, namespace, error_0) => {
-        const current = removeUndefined({
-          ...propertyErrorsRef.current,
-          [getFullIdPath(propertyKey, namespace)]: removeUndefined(error_0, true)
-        }, true);
-        propertyErrorsRef.current = current;
-        formController.validate();
-      }, getUser, getData: getDataWithPath, doCollectionInference, propertyConfigs, collectionEditable, extraIcon: extraView?.icon && /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: () => setCurrentView("extra_view"), children: extraView.icon }) }),
-      currentView !== "welcome" && /* @__PURE__ */ jsxs(DialogActions, { position: "absolute", children: [
-        error && /* @__PURE__ */ jsx(ErrorView, { error }),
-        isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => {
-          importConfig.setInUse(false);
-          return setCurrentView("welcome");
-        }, children: [
-          /* @__PURE__ */ jsx(ArrowBackIcon, {}),
-          "Back"
-        ] }),
-        isNewCollection && includeTemplates && currentView === "import_data_preview" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => {
-          setCurrentView("import_data_mapping");
-        }, children: [
-          /* @__PURE__ */ jsx(ArrowBackIcon, {}),
-          "Back"
-        ] }),
-        isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("welcome"), children: [
-          /* @__PURE__ */ jsx(ArrowBackIcon, {}),
-          "Back"
-        ] }),
-        isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("details"), children: [
-          /* @__PURE__ */ jsx(ArrowBackIcon, {}),
-          "Back"
-        ] }),
-        /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => {
-          handleCancel();
-        }, children: "Cancel" }),
-        isNewCollection && currentView === "import_data_mapping" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: onImportMappingComplete, children: "Next" }),
-        isNewCollection && currentView === "import_data_preview" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: () => {
-          setNextMode();
-        }, children: "Next" }),
-        isNewCollection && (currentView === "details" || currentView === "properties") && /* @__PURE__ */ jsxs(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled: isSubmitting || currentView === "details" && !validValues, startIcon: currentView === "properties" ? /* @__PURE__ */ jsx(CheckIcon, {}) : void 0, children: [
-          currentView === "details" && "Next",
-          currentView === "properties" && "Create collection"
-        ] }),
-        !isNewCollection && /* @__PURE__ */ jsx(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, children: "Update collection" })
+  const [deleteRequested, setDeleteRequested] = useState(false);
+  const deleteCollection = () => {
+    if (!collection) return;
+    configController?.deleteCollection({
+      id: collection.id
+    }).then(() => {
+      setDeleteRequested(false);
+      handleCancel();
+      snackbarController.open({
+        message: "Collection deleted",
+        type: "success"
+      });
+    });
+  };
+  return /* @__PURE__ */ jsxs(DialogContent, { fullHeight: true, children: [
+    /* @__PURE__ */ jsx(Formex, { value: formController, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      !isNewCollection && /* @__PURE__ */ jsxs(Tabs, { value: currentView, innerClassName: cls(defaultBorderMixin, "px-4 h-14 w-full justify-end bg-surface-50 dark:bg-surface-950 border-b"), onValueChange: (v) => setCurrentView(v), children: [
+        /* @__PURE__ */ jsx(Tab, { value: "details", children: "Details" }),
+        /* @__PURE__ */ jsx(Tab, { value: "properties", children: "Properties" }),
+        /* @__PURE__ */ jsx(Tab, { value: "subcollections", children: "Additional views" })
+      ] }),
+      /* @__PURE__ */ jsxs("form", { noValidate: true, onSubmit: formController.handleSubmit, className: cls(isNewCollection ? "h-full" : "h-[calc(100%-48px)]", "flex-grow flex flex-col relative"), children: [
+        currentView === "loading" && /* @__PURE__ */ jsx(CircularProgressCenter, {}),
+        currentView === "extra_view" && path && extraView?.View && /* @__PURE__ */ jsx(extraView.View, { path }),
+        currentView === "welcome" && /* @__PURE__ */ jsx(CollectionEditorWelcomeView, { path, onContinue: (importData, propertiesOrder_0) => {
+          if (importData) {
+            onImportDataSet(importData, propertiesOrder_0);
+            setCurrentView("import_data_mapping");
+          } else {
+            setCurrentView("details");
+          }
+        }, existingCollectionPaths: existingPaths, parentCollection, pathSuggestions }),
+        currentView === "import_data_mapping" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportMapping, { importConfig, collectionEditable, propertyConfigs }),
+        currentView === "import_data_preview" && importConfig && /* @__PURE__ */ jsx(CollectionEditorImportDataPreview, { importConfig, properties: values_1.properties, propertiesOrder: values_1.propertiesOrder }),
+        currentView === "import_data_saving" && importConfig && /* @__PURE__ */ jsx(ImportSaveInProgress, { importConfig, collection: values_1, path, onImportSuccess: async (importedCollection) => {
+          snackbarController.open({
+            type: "info",
+            message: "Data imported successfully"
+          });
+          await saveCollection(values_1);
+          handleClose(importedCollection);
+        } }),
+        currentView === "details" && /* @__PURE__ */ jsx(CollectionDetailsForm, { existingPaths, existingIds, groups, parentCollectionIds, parentCollection, isNewCollection, children: !isNewCollection && isMergedCollection && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 mt-8", children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "secondary", children: "This collection is defined in code. The changes done in this editor will override the properties defined in code. You can delete the overridden values to revert to the state defined in code." }),
+          /* @__PURE__ */ jsx(Button, { variant: "neutral", onClick: () => {
+            setDeleteRequested(true);
+          }, children: "Reset to code" })
+        ] }) }),
+        currentView === "subcollections" && collection && /* @__PURE__ */ jsx(SubcollectionsEditTab, { parentCollection, configController, getUser, collectionInference, parentCollectionIds, collection }),
+        currentView === "properties" && /* @__PURE__ */ jsx(CollectionPropertiesEditorForm, { showErrors: submitCount > 0, isNewCollection, reservedGroups, onPropertyError: (propertyKey, namespace, error_0) => {
+          const current = removeUndefined({
+            ...propertyErrorsRef.current,
+            [getFullIdPath(propertyKey, namespace)]: removeUndefined(error_0, true)
+          }, true);
+          propertyErrorsRef.current = current;
+          formController.validate();
+        }, getUser, getData: getDataWithPath, doCollectionInference, propertyConfigs, collectionEditable, extraIcon: extraView?.icon && /* @__PURE__ */ jsx(IconButton, { color: "primary", onClick: () => setCurrentView("extra_view"), children: extraView.icon }) }),
+        currentView !== "welcome" && /* @__PURE__ */ jsxs(DialogActions, { position: "absolute", children: [
+          error && /* @__PURE__ */ jsx(ErrorView, { error }),
+          isNewCollection && includeTemplates && currentView === "import_data_mapping" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => {
+            importConfig.setInUse(false);
+            return setCurrentView("welcome");
+          }, children: [
+            /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            "Back"
+          ] }),
+          isNewCollection && includeTemplates && currentView === "import_data_preview" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => {
+            setCurrentView("import_data_mapping");
+          }, children: [
+            /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            "Back"
+          ] }),
+          isNewCollection && includeTemplates && currentView === "details" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("welcome"), children: [
+            /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            "Back"
+          ] }),
+          isNewCollection && currentView === "properties" && /* @__PURE__ */ jsxs(Button, { variant: "text", type: "button", onClick: () => setCurrentView("details"), children: [
+            /* @__PURE__ */ jsx(ArrowBackIcon, {}),
+            "Back"
+          ] }),
+          /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => {
+            handleCancel();
+          }, children: "Cancel" }),
+          isNewCollection && currentView === "import_data_mapping" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: onImportMappingComplete, children: "Next" }),
+          isNewCollection && currentView === "import_data_preview" && /* @__PURE__ */ jsx(Button, { variant: "filled", color: "primary", onClick: () => {
+            setNextMode();
+          }, children: "Next" }),
+          isNewCollection && (currentView === "details" || currentView === "properties") && /* @__PURE__ */ jsxs(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, disabled: isSubmitting || currentView === "details" && !validValues, startIcon: currentView === "properties" ? /* @__PURE__ */ jsx(CheckIcon, {}) : void 0, children: [
+            currentView === "details" && "Next",
+            currentView === "properties" && "Create collection"
+          ] }),
+          !isNewCollection && /* @__PURE__ */ jsx(LoadingButton, { variant: "filled", color: "primary", type: "submit", loading: isSubmitting, children: "Update collection" })
+        ] })
       ] })
-    ] })
-  ] }) }) });
+    ] }) }),
+    /* @__PURE__ */ jsx(ConfirmationDialog, { open: deleteRequested, onAccept: deleteCollection, onCancel: () => setDeleteRequested(false), title: /* @__PURE__ */ jsx(Fragment, { children: "Delete the stored config?" }), body: /* @__PURE__ */ jsxs(Fragment, { children: [
+      " This will ",
+      /* @__PURE__ */ jsx("b", { children: "not delete any data" }),
+      ", only the stored config, and reset to the code state."
+    ] }) })
+  ] });
 }
 function applyPropertyConfigs(collection, propertyConfigs) {
   const {
@@ -10610,18 +10656,19 @@ function IntroWidget(t0) {
   }
   return t6;
 }
-const mergeCollections = (baseCollections, backendCollections, modifyCollection) => {
+const mergeCollections = (baseCollections, backendCollections = [], modifyCollection) => {
   const markAsEditable = (c2) => {
     makePropertiesEditable(c2.properties);
     c2.subcollections?.forEach(markAsEditable);
   };
-  const storedCollections = backendCollections ?? [];
-  storedCollections.forEach(markAsEditable);
-  console.debug("Collections specified in code:", baseCollections);
-  console.debug("Collections stored in the backend", storedCollections);
-  const result = joinCollectionLists(baseCollections, storedCollections, [], modifyCollection);
+  backendCollections.forEach(markAsEditable);
+  const result = joinCollectionLists(baseCollections, backendCollections, [], modifyCollection);
   result.sort((a, b) => baseCollections.findIndex((c2) => c2.id === a.id) - baseCollections.findIndex((c2) => c2.id === b.id));
-  console.debug("Collections after joining:", result);
+  console.debug("Collections result", {
+    baseCollections,
+    backendCollections,
+    result
+  });
   return result;
 };
 function MissingReferenceWidget(t0) {