multi-content-type-relation 2.1.1 → 2.2.1

package/README.md

@@ -74,6 +74,12 @@ If, for some reasons, you want to hydrate the relations of the relations of the
 
 This setting show debug log of the plugin for better understanding
 
+###### Key: `disableRevertRelations`
+
+> `required:` no | `type:` Boolean | default false
+
+This setting disable relaction MCTR if needed for performances/stability concerns
+
 ## Submit an issue
 
 You can use github issues to raise an issue about this plugin

package/dist/_chunks/en-Bk9okOMP.js

@@ -30,4 +30,3 @@ const en = {
   "common.locale": "en"
 };
 exports.default = en;
-//# sourceMappingURL=en-Bk9okOMP.js.map

package/dist/_chunks/en-Cj4T04Z2.mjs

@@ -30,4 +30,3 @@ const en = {
 export {
   en as default
 };
-//# sourceMappingURL=en-Cj4T04Z2.mjs.map

package/dist/_chunks/fr-KHPiQOFP.mjs

@@ -30,4 +30,3 @@ const fr = {
 export {
   fr as default
 };
-//# sourceMappingURL=fr-KHPiQOFP.mjs.map

package/dist/_chunks/fr-ZS3aTnjj.js

@@ -30,4 +30,3 @@ const fr = {
   "common.locale": "fr"
 };
 exports.default = fr;
-//# sourceMappingURL=fr-ZS3aTnjj.js.map

package/dist/_chunks/{index-BHcolZ4N.mjs → index-BGSdnZnr.mjs}

@@ -51,15 +51,22 @@ const fetchMatchingContent = async (keyword, contentTypes, locale) => {
     total
   };
 };
-const formatToStrapiField = (entries) => {
+const formatToStrapiField = (entries, locale) => {
   if (entries.length === 0) return "";
-  return JSON.stringify(
-    entries.map((entry) => ({
-      uid: entry.uid,
-      documentId: entry.item.documentId,
-      MRCT: true
-    })).filter(Boolean)
+  const storedData = JSON.stringify(
+    entries.map((entry) => {
+      const obj = {
+        uid: entry.uid,
+        documentId: entry.item.documentId,
+        MRCT: true
+      };
+      if (locale) {
+        obj.locale = locale;
+      }
+      return obj;
+    }).filter(Boolean)
   );
+  return storedData;
 };
 const validateCurrentRelations = async (entries) => {
   const { post } = getFetchClient();
@@ -108,23 +115,41 @@ const SidePanel = () => {
     model: uid,
     isSingleType
   } = unstable_useContentManagerContext();
+  const currentLocale = new URLSearchParams(location.search).get(
+    "plugins[i18n][locale]"
+  );
   const [linkedContent, setLinkedContent] = useState([]);
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [disabled, setDisabledFeature] = useState(false);
   useEffect(() => {
     const fetchRevertRelations = async () => {
       const { post } = getFetchClient();
       const response = await post(`/${pluginId}/fetch-revert-relations`, {
         documentId,
         uid,
-        isSingleType
+        isSingleType,
+        locale: currentLocale
       });
       setLinkedContent(Array.isArray(response.data) ? response.data.filter(Boolean) : []);
       setLoading(false);
     };
-    fetchRevertRelations();
+    const fetchConfiguration = async () => {
+      const { get } = getFetchClient();
+      const response = await get(`/${pluginId}/get-configuration`);
+      if (response.data.disableRevertRelations) {
+        setDisabledFeature(true);
+        setLoading(false);
+      } else {
+        fetchRevertRelations();
+      }
+    };
+    fetchConfiguration();
   }, []);
   if (loading)
     return /* @__PURE__ */ jsx(Box, { width: "100%", children: /* @__PURE__ */ jsx(Loader, {}) });
+  if (disabled) {
+    return /* @__PURE__ */ jsx("div", {});
+  }
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Divider, {}),
     /* @__PURE__ */ jsxs(Box, { width: "100%", marginTop: 4, children: [
@@ -164,7 +189,7 @@ const SidePanel = () => {
                     /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
                       "a",
                       {
-                        href: content.isSingleType ? `/admin/content-manager/single-types/${content.uid}` : `/admin/content-manager/collection-types/${content.uid}/${content.documentId}`,
+                        href: content.isSingleType ? `/admin/content-manager/single-types/${content.uid}${currentLocale ? `?plugins[i18n][locale]=${currentLocale}` : ""}` : `/admin/content-manager/collection-types/${content.uid}/${content.documentId}${currentLocale ? `?plugins[i18n][locale]=${currentLocale}` : ""}`,
                         target: "_blank",
                         style: { textDecoration: "none" },
                         children: /* @__PURE__ */ jsx(
@@ -223,7 +248,7 @@ const index = {
       components: {
         Input: () => import(
           /* webpackChunkName: "input-component" */
-          "./index-D6nv39Fp.mjs"
+          "./index-DEkcD0zR.mjs"
         )
       },
       inputSize: {
@@ -331,4 +356,3 @@ export {
   useTranslate as u,
   validateCurrentRelations as v
 };
-//# sourceMappingURL=index-BHcolZ4N.mjs.map

package/dist/_chunks/index-Bu99PZdl.js

@@ -0,0 +1,470 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactIntl = require("react-intl");
+const reactRouterDom = require("react-router-dom");
+const designSystem = require("@strapi/design-system");
+const index = require("./index-CEXSrD4g.js");
+const core = require("@dnd-kit/core");
+const sortable = require("@dnd-kit/sortable");
+const icons = require("@strapi/icons");
+function useSearchedEntries(keyword, contentTypes, locale) {
+  const [loading, setLoading] = react.useState(false);
+  const [results, setResults] = react.useState([]);
+  const [total, setTotal] = react.useState(0);
+  async function fetchEntries() {
+    setResults([]);
+    setTotal(0);
+    if (loading || !keyword) return;
+    try {
+      const { data, total: total2 } = await index.fetchMatchingContent(
+        keyword,
+        contentTypes,
+        locale
+      );
+      setResults(data);
+      setTotal(total2);
+    } finally {
+      setLoading(false);
+    }
+  }
+  react.useEffect(() => {
+    const timeout = setTimeout(() => fetchEntries(), 500);
+    return () => clearTimeout(timeout);
+  }, [keyword]);
+  return react.useMemo(
+    () => ({
+      loading,
+      results,
+      total
+    }),
+    [results, total]
+  );
+}
+const PublicationState = ({
+  isPublished,
+  hasDraftAndPublish
+}) => {
+  const { translate } = index.useTranslate();
+  const configuration = react.useMemo(() => {
+    const conf = {
+      variant: "alternative",
+      text: translate("publicationState.na")
+    };
+    if (hasDraftAndPublish) {
+      conf.variant = isPublished ? "success" : "secondary";
+      conf.text = isPublished ? translate("publicationState.published") : translate("publicationState.draft");
+    }
+    return conf;
+  }, [isPublished, hasDraftAndPublish, translate]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    designSystem.Status,
+    {
+      showbullet: "false",
+      variant: configuration.variant,
+      size: "S",
+      width: "min-content",
+      style: { paddingLeft: 12, paddingRight: 12 },
+      children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { fontWeight: "bold", textColor: `${configuration.variant}700`, children: configuration.text })
+    }
+  );
+};
+const CSS = /* @__PURE__ */ Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      const {
+        x,
+        y
+      } = transform;
+      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
+    }
+  },
+  Scale: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
+    }
+  },
+  Transition: {
+    toString(_ref) {
+      let {
+        property,
+        duration,
+        easing
+      } = _ref;
+      return property + " " + duration + "ms " + easing;
+    }
+  }
+});
+const TableItem = ({
+  entry,
+  id,
+  type,
+  disabled,
+  onAdd,
+  onDelete
+}) => {
+  const { translate } = index.useTranslate();
+  const contentType = index.getContentTypeForUid(entry.uid);
+  const location = reactRouterDom.useLocation();
+  const { setDraggableNodeRef, setDroppableNodeRef, transform, transition, attributes, listeners } = sortable.useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  const [currentLocale, setCurrentLocale] = react.useState("");
+  react.useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const locale = searchParams.get("plugins[i18n][locale]");
+    if (!locale) return;
+    setCurrentLocale(locale);
+  }, [location]);
+  const goToEntry = () => {
+    if (!currentLocale) return;
+    const contentTypes = window.sessionStorage.getItem("mctr::content_types");
+    if (contentTypes) {
+      try {
+        const parsedContentTypes = JSON.parse(contentTypes);
+        if (Array.isArray(parsedContentTypes)) {
+          const contentType2 = parsedContentTypes.find(
+            (ct) => ct.uid === entry.uid
+          );
+          if (contentType2) {
+            const kind = contentType2.kind;
+            let url = "";
+            if (kind === "collectionType") {
+              url = `/admin/content-manager/collection-types/${entry.uid}/${entry.item.documentId}`;
+            } else {
+              url = `/admin/content-manager/single-types/${entry.uid}`;
+            }
+            url += `?plugins[i18n][locale]=${currentLocale}`;
+            window.open(url, "_blank");
+            return;
+          }
+        }
+      } catch (e) {
+        console.error("[MCTR] Failed to retrieve content types");
+      }
+    } else {
+      alert(translate("tableItem.error"));
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "tr",
+    {
+      style,
+      ref: setDroppableNodeRef,
+      ...attributes,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: type === "selected" ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { ref: setDraggableNodeRef, ...listeners, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Drag, {}) }) : null }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { color: "neutral800", children: entry.item[entry.searchableField] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { color: "neutral800", children: entry.displayName }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          PublicationState,
+          {
+            isPublished: !!entry.item.publishedAt,
+            hasDraftAndPublish: contentType?.options?.draftAndPublish
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.IconButton,
+            {
+              label: translate("tableItem.goToEntry"),
+              onClick: goToEntry,
+              style: { "marginRight": "5px" },
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.Eye, {})
+            }
+          ),
+          type === "suggestion" ? /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.IconButton,
+            {
+              label: translate("tableItem.add"),
+              onClick: () => onAdd(entry),
+              disabled,
+              marginLeft: 1,
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {})
+            }
+          ) : type === "selected" ? /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.IconButton,
+            {
+              label: translate("tableItem.delete"),
+              onClick: () => onDelete(entry),
+              marginLeft: 1,
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+            }
+          ) : null
+        ] }) })
+      ]
+    }
+  );
+};
+function InputContentSuggestions({
+  uniqueId,
+  suggestions,
+  selected,
+  onAddEntry,
+  onDeleteEntry,
+  onEntriesSorted,
+  maximum
+}) {
+  const { translate } = index.useTranslate();
+  const suggestionAsSelectedEntry = react.useMemo(() => {
+    return (suggestions || []).flatMap(
+      (suggestion) => suggestion.results.map((entrySuggestion) => ({
+        displayName: suggestion.displayName,
+        item: entrySuggestion,
+        searchableField: suggestion.searchableField,
+        uid: suggestion.uid
+      }))
+    ).slice(0, 10);
+  }, [suggestions]);
+  const buildSelectedId = (entry) => {
+    return `${uniqueId}-${entry.uid}-${entry.item.documentId}`;
+  };
+  const availableSuggestions = react.useMemo(() => {
+    const selectedIdentifiers = (selected || []).map(buildSelectedId);
+    return suggestionAsSelectedEntry.filter(
+      (suggestion) => !selectedIdentifiers.includes(buildSelectedId(suggestion))
+    );
+  }, [suggestions, selected]);
+  const onAdd = (entry) => {
+    if (typeof onAddEntry === "function") {
+      onAddEntry(entry);
+    }
+  };
+  const onDelete = (entry) => {
+    if (typeof onDeleteEntry === "function") {
+      onDeleteEntry(entry);
+    }
+  };
+  const onSort = (entries) => {
+    if (typeof onEntriesSorted === "function") {
+      onEntriesSorted(entries);
+    }
+  };
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor)
+  );
+  const sortableItems = react.useMemo(() => {
+    const items = selected?.map((entry) => buildSelectedId(entry)) ?? [];
+    return items;
+  }, [selected]);
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!active || !over) return;
+    if (active.id !== over.id) {
+      const oldIndex = selected.findIndex(
+        (entry) => buildSelectedId(entry) === active.id
+      );
+      const newIndex = selected.findIndex(
+        (entry) => buildSelectedId(entry) === over.id
+      );
+      onSort(sortable.arrayMove(selected, oldIndex, newIndex));
+    }
+  };
+  if (!availableSuggestions?.length && !selected?.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: [2, 0, 2, 0], background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { style: { whiteSpace: "unset", borderCollapse: "separate", borderSpacing: "0 10px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: translate("contentSuggestions.title") }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: translate("contentSuggestions.contentType") }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: translate("contentSuggestions.state") }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tbody, { children: [
+      selected?.length ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        core.DndContext,
+        {
+          sensors,
+          collisionDetection: core.closestCenter,
+          onDragEnd: handleDragEnd,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            sortable.SortableContext,
+            {
+              items: sortableItems,
+              strategy: sortable.verticalListSortingStrategy,
+              children: selected.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
+                TableItem,
+                {
+                  id: buildSelectedId(entry),
+                  entry,
+                  type: "selected",
+                  onDelete
+                },
+                buildSelectedId(entry)
+              ))
+            }
+          )
+        }
+      ) }) : null,
+      availableSuggestions.length && selected?.length ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Tr, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Td, { colSpan: 5, children: /* @__PURE__ */ jsxRuntime.jsx("hr", { style: { width: "100%" } }) }) }) : null,
+      availableSuggestions.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
+        TableItem,
+        {
+          id: buildSelectedId(entry),
+          entry,
+          type: "suggestion",
+          onAdd,
+          disabled: typeof maximum === "number" ? (selected?.length ?? 0) >= maximum : false
+        },
+        buildSelectedId(entry)
+      ))
+    ] })
+  ] }) });
+}
+const MainInput = ({
+  name,
+  error,
+  description,
+  onChange,
+  value,
+  labelAction,
+  label,
+  attribute,
+  required
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { translate } = index.useTranslate();
+  const location = reactRouterDom.useLocation();
+  const maximumItems = attribute.options.max;
+  const minimumItems = attribute.options.min || 0;
+  const currentLocale = new URLSearchParams(location.search).get(
+    "plugins[i18n][locale]"
+  );
+  const [keyword, setKeyword] = react.useState("");
+  const [selected, setSelected] = react.useState([]);
+  const [loading, setLoading] = react.useState(true);
+  react.useEffect(() => {
+    const value2 = selected.length > maximumItems || selected.length < minimumItems ? [] : selected;
+    onChange({ target: { name, value: index.formatToStrapiField(value2, currentLocale) } });
+  }, [selected]);
+  const hint = react.useMemo(() => {
+    const minLabel = minimumItems > 0 ? `${translate("input.hint.min")} ${minimumItems} ${minimumItems > 1 ? translate("input.hint.entries") : translate("input.hint.entry")}` : "";
+    const maxLabel = maximumItems > 0 ? `${translate("input.hint.max")} ${maximumItems} ${maximumItems > 1 ? translate("input.hint.entries") : translate("input.hint.entry")}` : "";
+    return `
+      ${minLabel ? `${minLabel}` : ""}
+      ${minLabel && maxLabel ? ", " : ""}
+      ${maxLabel}
+      ${minLabel || maxLabel ? translate("input.hint.separator") : ""}
+      ${selected.length} ${translate("input.hint.selected")}
+    `;
+  }, [selected, maximumItems, minimumItems, translate]);
+  const inputError = react.useMemo(() => {
+    if (!error) return "";
+    if (selected.length < minimumItems)
+      return `${error} - ${translate("input.error.min")} ${minimumItems} ${translate("input.error.required")}`;
+    if (selected.length > maximumItems)
+      return `${error} - ${translate("input.error.max")} ${maximumItems} ${translate("input.error.required")}`;
+    return error;
+  }, [error, maximumItems, minimumItems, selected, translate]);
+  const { loading: searchLoading, results } = useSearchedEntries(
+    keyword,
+    attribute.options.contentTypes,
+    currentLocale
+  );
+  react.useEffect(() => {
+    async function validateContent() {
+      if (!value) {
+        setLoading(false);
+        return;
+      }
+      const entries = JSON.parse(value);
+      const result = await index.validateCurrentRelations(entries);
+      setSelected(result);
+      setLoading(false);
+    }
+    validateContent();
+  }, []);
+  const onAddEntry = (entry) => {
+    const alreadyDefined = selected.some(
+      (selectedEntry) => selectedEntry.uid === entry.uid && selectedEntry.item.id === entry.item.id
+    );
+    if (alreadyDefined) return;
+    setSelected([...selected, entry]);
+  };
+  const onDeleteEntry = (entry) => {
+    const newSelected = selected.filter(
+      (selectedEntry) => !(selectedEntry.uid === entry.uid && selectedEntry.item.id === entry.item.id)
+    );
+    setSelected(newSelected);
+  };
+  const onEntriesSorted = (entries) => {
+    setSelected(entries);
+  };
+  if (loading) return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {});
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Field.Root,
+    {
+      name,
+      id: name,
+      error,
+      hint: description,
+      required,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: labelAction, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.TextInput,
+          {
+            placeholder: translate("input.placeholder"),
+            required,
+            hint,
+            error: inputError,
+            value: keyword,
+            onChange: (e) => setKeyword(e.target.value)
+          }
+        ),
+        searchLoading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) : /* @__PURE__ */ jsxRuntime.jsx(
+          InputContentSuggestions,
+          {
+            uniqueId: Date.now(),
+            suggestions: results,
+            selected,
+            onAddEntry,
+            onDeleteEntry,
+            onEntriesSorted,
+            maximum: maximumItems
+          }
+        )
+      ]
+    }
+  );
+};
+const Index = (props) => {
+  const { locale } = reactIntl.useIntl();
+  const theme = react.useMemo(() => ({}), []);
+  const attribute = react.useMemo(() => {
+    if (!props.attribute) return props.attribute;
+    if (!props.attribute.options) return props.attribute;
+    if (!props.attribute.options.contentTypes) return props.attribute;
+    const contentTypes = Object.keys(
+      props.attribute.options.contentTypes
+    ).filter((key) => props.attribute.options.contentTypes[key]);
+    return {
+      ...props.attribute,
+      options: {
+        ...props.attribute.options,
+        contentTypes: contentTypes.join(",")
+      }
+    };
+  }, [props.attribute]);
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.DesignSystemProvider, { theme, children: /* @__PURE__ */ jsxRuntime.jsx(MainInput, { ...props, attribute }) });
+};
+exports.default = Index;