@firecms/entity_history 3.0.0-beta.14

package/dist/index.umd.js

@@ -0,0 +1,592 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react"), require("@firecms/core"), require("react-compiler-runtime"), require("@firecms/ui"), require("react-fast-compare")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react", "@firecms/core", "react-compiler-runtime", "@firecms/ui", "react-fast-compare"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS data import/export"] = {}, global.jsxRuntime, global.React, global.core, global.reactCompilerRuntime, global.ui, global.equal));
+})(this, function(exports2, jsxRuntime, React, core, reactCompilerRuntime, ui, equal) {
+  "use strict";
+  function _interopNamespaceDefault(e) {
+    const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+    if (e) {
+      for (const k in e) {
+        if (k !== "default") {
+          const d = Object.getOwnPropertyDescriptor(e, k);
+          Object.defineProperty(n, k, d.get ? d : {
+            enumerable: true,
+            get: () => e[k]
+          });
+        }
+      }
+    }
+    n.default = e;
+    return Object.freeze(n);
+  }
+  const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+  const HistoryControllerContext = React.createContext({});
+  const useHistoryController = () => {
+    return React.useContext(HistoryControllerContext);
+  };
+  const HistoryControllerProvider = React.memo(function HistoryControllerProvider2(t0) {
+    const $ = reactCompilerRuntime.c(5);
+    const {
+      children,
+      getUser
+    } = t0;
+    let t1;
+    if ($[0] !== getUser) {
+      t1 = {
+        getUser
+      };
+      $[0] = getUser;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    let t2;
+    if ($[2] !== children || $[3] !== t1) {
+      t2 = /* @__PURE__ */ jsxRuntime.jsx(HistoryControllerContext.Provider, { value: t1, children });
+      $[2] = children;
+      $[3] = t1;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    return t2;
+  }, equal);
+  function UserChip(t0) {
+    const $ = reactCompilerRuntime.c(11);
+    const {
+      user
+    } = t0;
+    const t1 = user.email ?? user.uid;
+    let t2;
+    if ($[0] !== user.displayName || $[1] !== user.photoURL) {
+      t2 = user.photoURL && /* @__PURE__ */ jsxRuntime.jsx("img", { className: "rounded-full w-6 h-6 mr-2", src: user.photoURL, alt: user.displayName ?? "User picture" });
+      $[0] = user.displayName;
+      $[1] = user.photoURL;
+      $[2] = t2;
+    } else {
+      t2 = $[2];
+    }
+    const t3 = user.displayName ?? user.email ?? user.uid;
+    let t4;
+    if ($[3] !== t3) {
+      t4 = /* @__PURE__ */ jsxRuntime.jsx("span", { children: t3 });
+      $[3] = t3;
+      $[4] = t4;
+    } else {
+      t4 = $[4];
+    }
+    let t5;
+    if ($[5] !== t2 || $[6] !== t4) {
+      t5 = /* @__PURE__ */ jsxRuntime.jsxs(ui.Chip, { size: "small", className: "flex items-center", children: [
+        t2,
+        t4
+      ] });
+      $[5] = t2;
+      $[6] = t4;
+      $[7] = t5;
+    } else {
+      t5 = $[7];
+    }
+    let t6;
+    if ($[8] !== t1 || $[9] !== t5) {
+      t6 = /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: t1, children: t5 });
+      $[8] = t1;
+      $[9] = t5;
+      $[10] = t6;
+    } else {
+      t6 = $[10];
+    }
+    return t6;
+  }
+  function EntityHistoryEntry({
+    actions,
+    disabled,
+    hover,
+    collection: collectionProp,
+    previewKeys,
+    onClick,
+    size,
+    entity
+  }) {
+    const authController = core.useAuthController();
+    const customizationController = core.useCustomizationController();
+    const navigationController = core.useNavigationController();
+    const sideEntityController = core.useSideEntityController();
+    const collection = collectionProp ?? navigationController.getCollection(entity.path);
+    const updatedOn = entity.values?.["__metadata"]?.["updated_on"];
+    if (!collection) {
+      throw Error(`Couldn't find the corresponding collection view for the path: ${entity.path}`);
+    }
+    const updatedBy = entity.values?.["__metadata"]?.["updated_by"];
+    const {
+      getUser
+    } = useHistoryController();
+    const user = getUser?.(updatedBy);
+    const resolvedCollection = React__namespace.useMemo(() => core.resolveCollection({
+      collection,
+      path: entity.path,
+      values: entity.values,
+      propertyConfigs: customizationController.propertyConfigs,
+      authController
+    }), [collection]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-2 mt-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-4 flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", color: "secondary", children: updatedOn.toLocaleString() }),
+        !user && updatedBy && /* @__PURE__ */ jsxRuntime.jsx(ui.Chip, { size: "small", children: updatedBy }),
+        user && /* @__PURE__ */ jsxRuntime.jsx(UserChip, { user })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("bg-white dark:bg-surface-900", "min-h-[42px]", "w-full", "items-center", hover ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800" : "", size === "small" ? "p-1" : "px-2 py-1", "flex border rounded-lg", onClick ? "cursor-pointer" : "", ui.defaultBorderMixin), children: [
+        actions,
+        entity && /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "See details for this revision", className: "my-2 grow-0 shrink-0 self-start", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { color: "inherit", className: "", onClick: (e) => {
+          sideEntityController.open({
+            entityId: entity.id,
+            path: entity.path,
+            allowFullScreen: false,
+            collection: {
+              ...collection,
+              subcollections: void 0,
+              entityViews: void 0,
+              permissions: {
+                create: false,
+                delete: false,
+                edit: false,
+                read: true
+              }
+            },
+            updateUrl: true
+          });
+        }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.KeyboardTabIcon, {}) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col grow w-full m-1 shrink min-w-0", children: previewKeys && previewKeys.map((key) => {
+          const childProperty = core.getPropertyInPath(resolvedCollection.properties, key);
+          const valueInPath = core.getValueInPath(entity.values, key);
+          const element = childProperty ? entity ? /* @__PURE__ */ jsxRuntime.jsx(core.PropertyPreview, { propertyKey: key, value: valueInPath, property: childProperty, size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(core.SkeletonPropertyComponent, { property: childProperty, size: "small" }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "body2", children: typeof valueInPath === "string" ? valueInPath : JSON.stringify(valueInPath) });
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full my-1 items-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", color: "secondary", className: "min-w-[140px] md:min-w-[200px] w-1/5 pr-8 overflow-hidden text-ellipsis text-right", children: key }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-4/5", children: element })
+          ] }, "ref_prev_" + key);
+        }) })
+      ] })
+    ] });
+  }
+  function EntityHistoryView(t0) {
+    const $ = reactCompilerRuntime.c(53);
+    const {
+      entity,
+      collection,
+      formContext
+    } = t0;
+    const authController = core.useAuthController();
+    const snackbarController = core.useSnackbarController();
+    const dirty = formContext?.formex.dirty;
+    const dataSource = core.useDataSource();
+    const pathAndId = entity ? entity?.path + "/" + entity?.id : void 0;
+    const [revertVersionDialog, setRevertVersionDialog] = React.useState(void 0);
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t1 = [];
+      $[0] = t1;
+    } else {
+      t1 = $[0];
+    }
+    const [revisions, setRevisions] = React.useState(t1);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [hasMore, setHasMore] = React.useState(true);
+    const [limit, setLimit] = React.useState(5);
+    const containerRef = React.useRef(null);
+    const observerRef = React.useRef(null);
+    const loadMoreRef = React.useRef(null);
+    let t2;
+    let t3;
+    if ($[1] !== dataSource || $[2] !== limit || $[3] !== pathAndId) {
+      t2 = () => {
+        if (!pathAndId) {
+          return;
+        }
+        setIsLoading(true);
+        const listener = dataSource.listenCollection?.({
+          path: pathAndId + "/__history",
+          order: "desc",
+          orderBy: "__metadata.updated_on",
+          limit,
+          startAfter: void 0,
+          onUpdate: (entities) => {
+            setRevisions(entities);
+            setHasMore(entities.length === limit && entities.length >= 5);
+            setIsLoading(false);
+          },
+          onError: (error) => {
+            console.error("Error fetching history:", error);
+            setIsLoading(false);
+            setHasMore(false);
+          }
+        });
+        return () => {
+          if (typeof listener === "function") {
+            listener();
+          }
+        };
+      };
+      t3 = [pathAndId, limit, dataSource];
+      $[1] = dataSource;
+      $[2] = limit;
+      $[3] = pathAndId;
+      $[4] = t2;
+      $[5] = t3;
+    } else {
+      t2 = $[4];
+      t3 = $[5];
+    }
+    React.useEffect(t2, t3);
+    let t4;
+    if ($[6] !== hasMore || $[7] !== isLoading) {
+      t4 = () => {
+        const currentContainer = containerRef.current;
+        const currentLoadMore = loadMoreRef.current;
+        if (!currentContainer || !currentLoadMore || !hasMore || isLoading) {
+          if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+          }
+          return;
+        }
+        const options = {
+          root: currentContainer,
+          rootMargin: "0px 0px 200px 0px",
+          threshold: 0.01
+        };
+        const handleObserver = (entries) => {
+          const target = entries[0];
+          if (target.isIntersecting && hasMore && !isLoading) {
+            setLimit((prev) => prev + 5);
+          }
+        };
+        const observer = new IntersectionObserver(handleObserver, options);
+        observer.observe(currentLoadMore);
+        observerRef.current = observer;
+        return () => {
+          observer.disconnect();
+          if (observerRef.current === observer) {
+            observerRef.current = null;
+          }
+        };
+      };
+      $[6] = hasMore;
+      $[7] = isLoading;
+      $[8] = t4;
+    } else {
+      t4 = $[8];
+    }
+    let t5;
+    if ($[9] !== hasMore || $[10] !== isLoading || $[11] !== revisions.length) {
+      t5 = [hasMore, isLoading, revisions.length];
+      $[9] = hasMore;
+      $[10] = isLoading;
+      $[11] = revisions.length;
+      $[12] = t5;
+    } else {
+      t5 = $[12];
+    }
+    React.useEffect(t4, t5);
+    if (!entity) {
+      let t62;
+      if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+        t62 = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "History is only available for existing entities" }) });
+        $[13] = t62;
+      } else {
+        t62 = $[13];
+      }
+      return t62;
+    }
+    let t6;
+    if ($[14] !== authController || $[15] !== collection || $[16] !== dataSource || $[17] !== entity || $[18] !== formContext || $[19] !== snackbarController) {
+      t6 = function doRevert2(revertVersion) {
+        if (!entity) {
+          throw new Error("No entity to revert");
+        }
+        const revertValues = {
+          ...revertVersion.values,
+          __metadata: {
+            ...revertVersion.values?.__metadata,
+            reverted: true,
+            updated_on: /* @__PURE__ */ new Date(),
+            updated_by: authController.user?.uid ?? null
+          }
+        };
+        const saveReverted = dataSource.saveEntity({
+          path: entity.path,
+          entityId: entity.id,
+          values: revertValues,
+          collection,
+          status: "existing"
+        });
+        const saveRevertedHistory = dataSource.saveEntity({
+          path: revertVersion.path,
+          entityId: revertVersion.id,
+          values: revertValues,
+          collection,
+          status: "existing"
+        });
+        return Promise.all([saveReverted, saveRevertedHistory]).then(() => {
+          formContext.formex.resetForm({
+            values: revertVersion.values
+          });
+          setRevertVersionDialog(void 0);
+          snackbarController.open({
+            message: "Reverted version",
+            type: "info"
+          });
+        }).catch((error_0) => {
+          console.error("Error reverting entity:", error_0);
+          snackbarController.open({
+            message: "Error reverting entity",
+            type: "error"
+          });
+        });
+      };
+      $[14] = authController;
+      $[15] = collection;
+      $[16] = dataSource;
+      $[17] = entity;
+      $[18] = formContext;
+      $[19] = snackbarController;
+      $[20] = t6;
+    } else {
+      t6 = $[20];
+    }
+    const doRevert = t6;
+    let t7;
+    if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+      t7 = ui.cls("relative flex-1 h-full overflow-auto w-full flex flex-col gap-4 p-8");
+      $[21] = t7;
+    } else {
+      t7 = $[21];
+    }
+    let t8;
+    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+      t8 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "h5", className: "mt-24 ml-4", children: "History" });
+      $[22] = t8;
+    } else {
+      t8 = $[22];
+    }
+    let t9;
+    if ($[23] !== revisions.length) {
+      t9 = revisions.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { className: "ml-4 mt-8", children: "No history available" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "caption", className: "ml-4", children: "When you save an entity, a new version is created and stored in the history." })
+      ] });
+      $[23] = revisions.length;
+      $[24] = t9;
+    } else {
+      t9 = $[24];
+    }
+    let t10;
+    if ($[25] !== collection || $[26] !== dirty || $[27] !== revisions || $[28] !== snackbarController) {
+      let t112;
+      if ($[30] !== collection || $[31] !== dirty || $[32] !== snackbarController) {
+        t112 = (revision, index) => {
+          const previewKeys = revision.values?.__metadata?.changed_fields;
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-cols gap-2 w-full", children: /* @__PURE__ */ jsxRuntime.jsx(EntityHistoryEntry, { size: "large", entity: revision, collection, previewKeys, actions: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { title: "Revert to this version", className: "m-2 grow-0 self-start", children: /* @__PURE__ */ jsxRuntime.jsx(ui.IconButton, { onClick: () => {
+            if (dirty) {
+              snackbarController.open({
+                message: "Please save or discard your changes before reverting",
+                type: "warning"
+              });
+            } else {
+              setRevertVersionDialog(revision);
+            }
+          }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.HistoryIcon, {}) }) }) }) }, index);
+        };
+        $[30] = collection;
+        $[31] = dirty;
+        $[32] = snackbarController;
+        $[33] = t112;
+      } else {
+        t112 = $[33];
+      }
+      t10 = revisions.map(t112);
+      $[25] = collection;
+      $[26] = dirty;
+      $[27] = revisions;
+      $[28] = snackbarController;
+      $[29] = t10;
+    } else {
+      t10 = $[29];
+    }
+    let t11;
+    if ($[34] !== hasMore || $[35] !== isLoading || $[36] !== revisions.length) {
+      t11 = revisions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: loadMoreRef, className: "py-4 text-center", children: [
+        isLoading && /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "Loading more..." }),
+        !hasMore && revisions.length > 5 && /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { children: "No more history available" })
+      ] });
+      $[34] = hasMore;
+      $[35] = isLoading;
+      $[36] = revisions.length;
+      $[37] = t11;
+    } else {
+      t11 = $[37];
+    }
+    let t12;
+    if ($[38] !== t10 || $[39] !== t11 || $[40] !== t9) {
+      t12 = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 max-w-6xl mx-auto w-full", children: [
+        t8,
+        t9,
+        t10,
+        t11
+      ] });
+      $[38] = t10;
+      $[39] = t11;
+      $[40] = t9;
+      $[41] = t12;
+    } else {
+      t12 = $[41];
+    }
+    const t13 = Boolean(revertVersionDialog);
+    let t14;
+    if ($[42] !== doRevert || $[43] !== revertVersionDialog) {
+      t14 = function() {
+        if (!revertVersionDialog) {
+          return;
+        }
+        doRevert(revertVersionDialog);
+      };
+      $[42] = doRevert;
+      $[43] = revertVersionDialog;
+      $[44] = t14;
+    } else {
+      t14 = $[44];
+    }
+    let t15;
+    let t16;
+    if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+      t15 = function() {
+        setRevertVersionDialog(void 0);
+      };
+      t16 = /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { variant: "subtitle2", children: "Revert data to this version?" });
+      $[45] = t15;
+      $[46] = t16;
+    } else {
+      t15 = $[45];
+      t16 = $[46];
+    }
+    let t17;
+    if ($[47] !== t13 || $[48] !== t14) {
+      t17 = /* @__PURE__ */ jsxRuntime.jsx(core.ConfirmationDialog, { open: t13, onAccept: t14, onCancel: t15, title: t16 });
+      $[47] = t13;
+      $[48] = t14;
+      $[49] = t17;
+    } else {
+      t17 = $[49];
+    }
+    let t18;
+    if ($[50] !== t12 || $[51] !== t17) {
+      t18 = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: t7, children: [
+        t12,
+        t17
+      ] });
+      $[50] = t12;
+      $[51] = t17;
+      $[52] = t18;
+    } else {
+      t18 = $[52];
+    }
+    return t18;
+  }
+  const entityHistoryCallbacks = {
+    onSaveSuccess: async (props) => {
+      const changedFields = props.previousValues ? findChangedFields(props.previousValues, props.values) : null;
+      const uid = props.context.authController.user?.uid;
+      props.context.dataSource.saveEntity({
+        path: props.path + "/" + props.entityId + "/__history",
+        values: {
+          ...props.values,
+          __metadata: {
+            changed_fields: changedFields,
+            updated_on: /* @__PURE__ */ new Date(),
+            updated_by: uid
+          }
+        },
+        status: "new"
+      }).then(() => {
+        console.debug("History saved for", props.path, props.entityId);
+      });
+    }
+  };
+  function findChangedFields(oldValues, newValues, prefix = "") {
+    const changedFields = [];
+    if (equal(oldValues, newValues)) return changedFields;
+    if (!oldValues || !newValues) return [prefix || "."];
+    const allKeys = /* @__PURE__ */ new Set([...Object.keys(oldValues), ...Object.keys(newValues)]);
+    for (const key of allKeys) {
+      const oldValue = oldValues[key];
+      const newValue = newValues[key];
+      const currentPath = prefix ? `${prefix}.${key}` : key;
+      if (key in oldValues !== key in newValues) {
+        changedFields.push(currentPath);
+        continue;
+      }
+      if (equal(oldValue, newValue)) continue;
+      if (Array.isArray(oldValue) && Array.isArray(newValue)) {
+        if (oldValue.length !== newValue.length) {
+          changedFields.push(currentPath);
+        } else {
+          for (let i = 0; i < oldValue.length; i++) {
+            if (typeof oldValue[i] === "object" && oldValue[i] !== null && typeof newValue[i] === "object" && newValue[i] !== null) {
+              const nestedChanges = findChangedFields(oldValue[i], newValue[i], `${currentPath}[${i}]`);
+              if (nestedChanges.length > 0) {
+                changedFields.push(currentPath);
+                break;
+              }
+            } else if (!equal(oldValue[i], newValue[i])) {
+              changedFields.push(currentPath);
+              break;
+            }
+          }
+        }
+      } else if (typeof oldValue === "object" && oldValue !== null && typeof newValue === "object" && newValue !== null) {
+        const nestedChanges = findChangedFields(oldValue, newValue, currentPath);
+        changedFields.push(...nestedChanges);
+      } else {
+        changedFields.push(currentPath);
+      }
+    }
+    return changedFields;
+  }
+  function useEntityHistoryPlugin(props) {
+    const {
+      defaultEnabled = false
+    } = props ?? {};
+    const modifyCollection = React.useCallback((collection) => {
+      if (collection.history === true || defaultEnabled && collection.history !== false) {
+        return {
+          ...collection,
+          entityViews: [...collection.entityViews ?? [], {
+            key: "__history",
+            name: "History",
+            tabComponent: /* @__PURE__ */ jsxRuntime.jsx(ui.HistoryIcon, { size: "small" }),
+            Builder: EntityHistoryView,
+            position: "start"
+          }],
+          callbacks: core.mergeCallbacks(collection.callbacks, entityHistoryCallbacks)
+        };
+      }
+      return collection;
+    }, []);
+    return React.useMemo(() => ({
+      key: "entity_history",
+      provider: {
+        Component: HistoryControllerProvider,
+        props: {
+          getUser: props?.getUser
+        }
+      },
+      collection: {
+        modifyCollection
+      }
+    }), [props]);
+  }
+  exports2.HistoryControllerContext = HistoryControllerContext;
+  exports2.HistoryControllerProvider = HistoryControllerProvider;
+  exports2.useEntityHistoryPlugin = useEntityHistoryPlugin;
+  exports2.useHistoryController = useHistoryController;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});
+//# sourceMappingURL=index.umd.js.map