multi-content-type-relation 2.1.2 → 2.2.1

package/dist/_chunks/index-DEkcD0zR.mjs

@@ -0,0 +1,470 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from "react";
+import { useIntl } from "react-intl";
+import { useLocation } from "react-router-dom";
+import { Status, Typography, Td, IconButton, Flex, Box, Table, Thead, Tr, Th, Tbody, Loader, Field, TextInput, DesignSystemProvider } from "@strapi/design-system";
+import { f as fetchMatchingContent, u as useTranslate, g as getContentTypeForUid, a as formatToStrapiField, v as validateCurrentRelations } from "./index-BGSdnZnr.mjs";
+import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { useSortable, SortableContext, verticalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
+import { Drag, Eye, Plus, Trash } from "@strapi/icons";
+function useSearchedEntries(keyword, contentTypes, locale) {
+  const [loading, setLoading] = useState(false);
+  const [results, setResults] = useState([]);
+  const [total, setTotal] = useState(0);
+  async function fetchEntries() {
+    setResults([]);
+    setTotal(0);
+    if (loading || !keyword) return;
+    try {
+      const { data, total: total2 } = await fetchMatchingContent(
+        keyword,
+        contentTypes,
+        locale
+      );
+      setResults(data);
+      setTotal(total2);
+    } finally {
+      setLoading(false);
+    }
+  }
+  useEffect(() => {
+    const timeout = setTimeout(() => fetchEntries(), 500);
+    return () => clearTimeout(timeout);
+  }, [keyword]);
+  return useMemo(
+    () => ({
+      loading,
+      results,
+      total
+    }),
+    [results, total]
+  );
+}
+const PublicationState = ({
+  isPublished,
+  hasDraftAndPublish
+}) => {
+  const { translate } = useTranslate();
+  const configuration = 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__ */ jsx(
+    Status,
+    {
+      showbullet: "false",
+      variant: configuration.variant,
+      size: "S",
+      width: "min-content",
+      style: { paddingLeft: 12, paddingRight: 12 },
+      children: /* @__PURE__ */ jsx(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 } = useTranslate();
+  const contentType = getContentTypeForUid(entry.uid);
+  const location = useLocation();
+  const { setDraggableNodeRef, setDroppableNodeRef, transform, transition, attributes, listeners } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  const [currentLocale, setCurrentLocale] = useState("");
+  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__ */ jsxs(
+    "tr",
+    {
+      style,
+      ref: setDroppableNodeRef,
+      ...attributes,
+      children: [
+        /* @__PURE__ */ jsx(Td, { children: type === "selected" ? /* @__PURE__ */ jsx(IconButton, { ref: setDraggableNodeRef, ...listeners, children: /* @__PURE__ */ jsx(Drag, {}) }) : null }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { color: "neutral800", children: entry.item[entry.searchableField] }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { color: "neutral800", children: entry.displayName }) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(
+          PublicationState,
+          {
+            isPublished: !!entry.item.publishedAt,
+            hasDraftAndPublish: contentType?.options?.draftAndPublish
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { children: [
+          /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: translate("tableItem.goToEntry"),
+              onClick: goToEntry,
+              style: { "marginRight": "5px" },
+              children: /* @__PURE__ */ jsx(Eye, {})
+            }
+          ),
+          type === "suggestion" ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: translate("tableItem.add"),
+              onClick: () => onAdd(entry),
+              disabled,
+              marginLeft: 1,
+              children: /* @__PURE__ */ jsx(Plus, {})
+            }
+          ) : type === "selected" ? /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              label: translate("tableItem.delete"),
+              onClick: () => onDelete(entry),
+              marginLeft: 1,
+              children: /* @__PURE__ */ jsx(Trash, {})
+            }
+          ) : null
+        ] }) })
+      ]
+    }
+  );
+};
+function InputContentSuggestions({
+  uniqueId,
+  suggestions,
+  selected,
+  onAddEntry,
+  onDeleteEntry,
+  onEntriesSorted,
+  maximum
+}) {
+  const { translate } = useTranslate();
+  const suggestionAsSelectedEntry = 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 = 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 = useSensors(
+    useSensor(PointerSensor)
+  );
+  const sortableItems = 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(arrayMove(selected, oldIndex, newIndex));
+    }
+  };
+  if (!availableSuggestions?.length && !selected?.length) return null;
+  return /* @__PURE__ */ jsx(Box, { padding: [2, 0, 2, 0], background: "neutral100", children: /* @__PURE__ */ jsxs(Table, { style: { whiteSpace: "unset", borderCollapse: "separate", borderSpacing: "0 10px" }, children: [
+    /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+      /* @__PURE__ */ jsx(Th, {}),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: translate("contentSuggestions.title") }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: translate("contentSuggestions.contentType") }) }),
+      /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: translate("contentSuggestions.state") }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(Tbody, { children: [
+      selected?.length ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+        DndContext,
+        {
+          sensors,
+          collisionDetection: closestCenter,
+          onDragEnd: handleDragEnd,
+          children: /* @__PURE__ */ jsx(
+            SortableContext,
+            {
+              items: sortableItems,
+              strategy: verticalListSortingStrategy,
+              children: selected.map((entry) => /* @__PURE__ */ jsx(
+                TableItem,
+                {
+                  id: buildSelectedId(entry),
+                  entry,
+                  type: "selected",
+                  onDelete
+                },
+                buildSelectedId(entry)
+              ))
+            }
+          )
+        }
+      ) }) : null,
+      availableSuggestions.length && selected?.length ? /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan: 5, children: /* @__PURE__ */ jsx("hr", { style: { width: "100%" } }) }) }) : null,
+      availableSuggestions.map((entry) => /* @__PURE__ */ 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 } = useIntl();
+  const { translate } = useTranslate();
+  const location = 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] = useState("");
+  const [selected, setSelected] = useState([]);
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    const value2 = selected.length > maximumItems || selected.length < minimumItems ? [] : selected;
+    onChange({ target: { name, value: formatToStrapiField(value2, currentLocale) } });
+  }, [selected]);
+  const hint = 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 = 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
+  );
+  useEffect(() => {
+    async function validateContent() {
+      if (!value) {
+        setLoading(false);
+        return;
+      }
+      const entries = JSON.parse(value);
+      const result = await 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__ */ jsx(Loader, {});
+  return /* @__PURE__ */ jsxs(
+    Field.Root,
+    {
+      name,
+      id: name,
+      error,
+      hint: description,
+      required,
+      children: [
+        /* @__PURE__ */ jsx(Field.Label, { action: labelAction, children: label }),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            placeholder: translate("input.placeholder"),
+            required,
+            hint,
+            error: inputError,
+            value: keyword,
+            onChange: (e) => setKeyword(e.target.value)
+          }
+        ),
+        searchLoading ? /* @__PURE__ */ jsx(Loader, {}) : /* @__PURE__ */ jsx(
+          InputContentSuggestions,
+          {
+            uniqueId: Date.now(),
+            suggestions: results,
+            selected,
+            onAddEntry,
+            onDeleteEntry,
+            onEntriesSorted,
+            maximum: maximumItems
+          }
+        )
+      ]
+    }
+  );
+};
+const Index = (props) => {
+  const { locale } = useIntl();
+  const theme = useMemo(() => ({}), []);
+  const attribute = 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__ */ jsx(DesignSystemProvider, { theme, children: /* @__PURE__ */ jsx(MainInput, { ...props, attribute }) });
+};
+export {
+  Index as default
+};

package/dist/admin/index.js

@@ -1,3 +1,3 @@
 "use strict";
-const index = require("../_chunks/index-BtldAbIW.js");
+const index = require("../_chunks/index-CEXSrD4g.js");
 module.exports = index.index;

package/dist/admin/index.mjs

@@ -1,4 +1,4 @@
-import { i } from "../_chunks/index-DdX2rVzB.mjs";
+import { i } from "../_chunks/index-BGSdnZnr.mjs";
 export {
   i as default
 };

package/dist/admin/src/components/Input/InputContentSuggestions.d.ts

@@ -6,8 +6,7 @@ type Props = {
     onAddEntry?(entry: SelectedEntry): void;
     onDeleteEntry?(entry: SelectedEntry): void;
     onEntriesSorted?(entries: SelectedEntry[]): void;
-    sortable?: boolean;
     maximum?: number;
 };
-export declare function InputContentSuggestions({ uniqueId, suggestions, selected, onAddEntry, onDeleteEntry, onEntriesSorted, maximum, sortable }: Props): import("react/jsx-runtime").JSX.Element | null;
+export declare function InputContentSuggestions({ uniqueId, suggestions, selected, onAddEntry, onDeleteEntry, onEntriesSorted, maximum, }: Props): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/admin/src/components/Input/TableItem.d.ts

@@ -1,12 +1,11 @@
 import { SelectedEntry } from '../../interface';
 type Props = {
     entry: SelectedEntry;
+    id: string;
     type: 'suggestion' | 'selected';
-    uniqueId: number;
     onAdd?(entry: SelectedEntry): void;
     onDelete?(entry: SelectedEntry): void;
     disabled?: boolean;
-    sortable?: boolean;
 };
-export declare const TableItem: ({ entry, type, uniqueId, disabled, onAdd, onDelete }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const TableItem: ({ entry, id, type, disabled, onAdd, onDelete }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/admin/src/helpers/content.d.ts

@@ -1,5 +1,5 @@
 import { FormattedStrapiEntry, MatchingContentResponse, SelectedEntry } from '../interface';
 export declare const fetchMatchingContent: (keyword: string, contentTypes: string, locale: string) => Promise<MatchingContentResponse>;
-export declare const formatToStrapiField: (entries: SelectedEntry[]) => string;
+export declare const formatToStrapiField: (entries: SelectedEntry[], locale: string) => string;
 export declare const validateCurrentRelations: (entries: FormattedStrapiEntry[]) => Promise<SelectedEntry[]>;
 export declare const listContentTypes: () => Promise<any>;