@retikolo/drag-drop-content-types-strapi 2.0.0

package/dist/_chunks/en-I3-CH3Sy.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const en = {
+  "plugin.name": "Drag Drop Content Type",
+  "plugin.configuration": "Configuration",
+  "plugin.settings.errors.required": "Required field",
+  "plugin.settings.buttons.save": "Save",
+  "plugin.settings.buttons.off": "Off",
+  "plugin.settings.buttons.on": "On",
+  "plugin.settings.title": "Drag Drop Content Type Config",
+  "plugin.settings.subtitle": "Manage field values for drag-droppable entries",
+  "plugin.settings.updated": "Settings successfully updated",
+  "plugin.settings.field-names": "Field Names",
+  "plugin.settings.triggerWebhooks.label": "Trigger Webhooks",
+  "plugin.settings.triggerWebhooks.hint": "If enabled, the 'entry.update' webhook will be triggered when entries are reordered",
+  "plugin.settings.triggerWebhooks.tooltip": "Enable to trigger webhooks when entries are reordered",
+  "plugin.settings.rank.label": "Rank Field Name",
+  "plugin.settings.rank.hint": "You must create a Number Field with this label and type integer in the Content-Type Builder",
+  "plugin.settings.rank.tooltip": "Field which is used for ordering content-type entries",
+  "plugin.settings.rank.placeholder": "Rank",
+  "plugin.settings.title.label": "Title Field Name",
+  "plugin.settings.title.hint": "Select or create a Short Text Field with this label in the Content-Type Builder. Leave blank to use content-type entry title",
+  "plugin.settings.title.tooltip": "Field that will show up in the drag drop menu",
+  "plugin.settings.title.placeholder": "Title",
+  "plugin.settings.subtitle.label": "Subitle Field Name",
+  "plugin.settings.subtitle.hint": "Optionally select a second subtitle field to show up attached to the title in the drag drop menu. Leave blank to not show a subtitle.",
+  "plugin.settings.subtitle.tooltip": "Field that will show up in the drag drop menu attached to title",
+  "plugin.settings.subtitle.placeholder": "Subtitle",
+  "plugin.settings.sortableList.showMore": "Show more"
+};
+exports.default = en;

package/dist/_chunks/en-bxpER_P-.mjs

@@ -0,0 +1,31 @@
+const en = {
+  "plugin.name": "Drag Drop Content Type",
+  "plugin.configuration": "Configuration",
+  "plugin.settings.errors.required": "Required field",
+  "plugin.settings.buttons.save": "Save",
+  "plugin.settings.buttons.off": "Off",
+  "plugin.settings.buttons.on": "On",
+  "plugin.settings.title": "Drag Drop Content Type Config",
+  "plugin.settings.subtitle": "Manage field values for drag-droppable entries",
+  "plugin.settings.updated": "Settings successfully updated",
+  "plugin.settings.field-names": "Field Names",
+  "plugin.settings.triggerWebhooks.label": "Trigger Webhooks",
+  "plugin.settings.triggerWebhooks.hint": "If enabled, the 'entry.update' webhook will be triggered when entries are reordered",
+  "plugin.settings.triggerWebhooks.tooltip": "Enable to trigger webhooks when entries are reordered",
+  "plugin.settings.rank.label": "Rank Field Name",
+  "plugin.settings.rank.hint": "You must create a Number Field with this label and type integer in the Content-Type Builder",
+  "plugin.settings.rank.tooltip": "Field which is used for ordering content-type entries",
+  "plugin.settings.rank.placeholder": "Rank",
+  "plugin.settings.title.label": "Title Field Name",
+  "plugin.settings.title.hint": "Select or create a Short Text Field with this label in the Content-Type Builder. Leave blank to use content-type entry title",
+  "plugin.settings.title.tooltip": "Field that will show up in the drag drop menu",
+  "plugin.settings.title.placeholder": "Title",
+  "plugin.settings.subtitle.label": "Subitle Field Name",
+  "plugin.settings.subtitle.hint": "Optionally select a second subtitle field to show up attached to the title in the drag drop menu. Leave blank to not show a subtitle.",
+  "plugin.settings.subtitle.tooltip": "Field that will show up in the drag drop menu attached to title",
+  "plugin.settings.subtitle.placeholder": "Subtitle",
+  "plugin.settings.sortableList.showMore": "Show more"
+};
+export {
+  en as default
+};

package/dist/_chunks/fr-C8Qw4iPZ.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const fr = {};
+exports.default = fr;

package/dist/_chunks/fr-hkSxFuzl.mjs

@@ -0,0 +1,4 @@
+const fr = {};
+export {
+  fr as default
+};

package/dist/_chunks/index-CxWC49Ye.mjs

@@ -0,0 +1,477 @@
+import React__default, { useRef, useEffect, useState, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { arrayMoveImmutable } from "array-move";
+import { useFetchClient, useNotification, useAPIErrorHandler } from "@strapi/strapi/admin";
+import { Box, Grid, Typography, Divider, Button, Popover, IconButton } from "@strapi/design-system";
+import { Drag } from "@strapi/icons";
+import { useIntl } from "react-intl";
+import { useSensors, useSensor, PointerSensor, TouchSensor, DndContext, closestCenter } from "@dnd-kit/core";
+import { useSortable, SortableContext, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const PLUGIN_ID = "drag-drop-content-types";
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef(setPlugin);
+  useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+  return null;
+};
+function useQueryParams() {
+  const [params, setParams] = useState(null);
+  useEffect(() => {
+    const q = new Proxy(new URLSearchParams(window.location.search), {
+      get: (queryParams, prop) => queryParams.get(prop.toString())
+    });
+    setParams(q);
+  }, [window.location.search]);
+  return { queryParams: params };
+}
+const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
+const CustomItem = forwardRef(
+  ({ item, isOpacityEnabled, isDragging, style, ...props }, ref) => {
+    const styles = {
+      opacity: isOpacityEnabled ? "0.4" : "1",
+      cursor: isDragging ? "grabbing" : "grab",
+      lineHeight: "0.5",
+      transform: isDragging ? "scale(1.05)" : "scale(1)",
+      ...style
+    };
+    const ellipsis = (str, num = str.length, ellipsisStr = "...") => str.length >= num ? str.slice(0, num >= ellipsisStr.length ? num - ellipsisStr.length : num) + ellipsisStr : str;
+    item.title = ellipsis(item.title ?? "", 30);
+    item.subtitle = ellipsis(item.subtitle ?? "", 30);
+    return /* @__PURE__ */ jsx("div", { ref, style: styles, ...props, children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        style: { zIndex: 10, cursor: "all-scroll", userSelect: "none" },
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "filterShadow",
+        padding: 2,
+        children: /* @__PURE__ */ jsxs(Grid.Root, { gap: 1, children: [
+          /* @__PURE__ */ jsx(Grid.Item, { col: 2, s: 12, children: /* @__PURE__ */ jsx(Drag, {}) }),
+          /* @__PURE__ */ jsx(Grid.Item, { col: 10, s: 12, children: /* @__PURE__ */ jsxs(Typography, { children: [
+            item.title,
+            item.subtitle
+          ] }) })
+        ] })
+      }
+    ) });
+  }
+);
+const SortableListItem = ({ item, ...props }) => {
+  const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
+    id: item.id
+  });
+  const styles = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition || void 0
+  };
+  return /* @__PURE__ */ jsx(
+    CustomItem,
+    {
+      item,
+      ref: setNodeRef,
+      style: styles,
+      isOpacityEnabled: isDragging,
+      ...props,
+      ...attributes,
+      ...listeners
+    }
+  );
+};
+function getSubtitle(entry, subTitleField, titleField) {
+  try {
+    if (subTitleField && entry[subTitleField]) {
+      if (entry[subTitleField].constructor.name == "Array") {
+        if (entry[subTitleField].length > 0)
+          return ` - ${entry[subTitleField][0][titleField]}`;
+      } else if (typeof entry[subTitleField] === "object") {
+        return ` - ${entry[subTitleField][titleField]}`;
+      } else {
+        return ` - ${entry[subTitleField]}`;
+      }
+    }
+    return "";
+  } catch (e) {
+    console.log("Unsupported subtitle field value.", e);
+    return "";
+  }
+}
+function getTitle(entry, titleField, mainField) {
+  const title = entry[titleField] ? entry[titleField] : entry[mainField];
+  return title?.toString();
+}
+const SortableList = ({ data, onShowMore, hasMore, settings, onSortEnd }) => {
+  const { formatMessage } = useIntl();
+  let { title, subtitle, mainField } = settings;
+  subtitle = subtitle ?? "";
+  mainField = mainField ?? "";
+  const convertDataItem = (pageEntry) => {
+    return {
+      ...pageEntry,
+      title: getTitle(pageEntry, title, mainField),
+      subtitle: getSubtitle(pageEntry, subtitle, title)
+    };
+  };
+  const defaultItems = data.map((x) => convertDataItem(x));
+  const [items, setItems] = useState(defaultItems);
+  if (items.length !== defaultItems.length)
+    setItems(defaultItems);
+  const [activeItem, setActiveItem] = useState();
+  const sensors = useSensors(useSensor(PointerSensor), useSensor(TouchSensor));
+  const handleDragStart = (event) => {
+    const { active } = event;
+    setActiveItem(items.find((item) => item.id === active.id));
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (!over) return;
+    const activeItem2 = items.find((item) => item.id === active.id);
+    const overItem = items.find((item) => item.id === over.id);
+    if (!activeItem2 || !overItem) {
+      return;
+    }
+    const activeIndex = items.findIndex((item) => item.id === active.id);
+    const overIndex = items.findIndex((item) => item.id === over.id);
+    if (activeIndex !== overIndex) {
+      setItems((prev) => arrayMove(prev, activeIndex, overIndex));
+    }
+    setActiveItem(void 0);
+    onSortEnd({ oldIndex: activeIndex, newIndex: overIndex });
+  };
+  const handleDragCancel = () => {
+    setActiveItem(void 0);
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { maxWidth: "280px" }, children: [
+    /* @__PURE__ */ jsx(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCenter,
+        onDragStart: handleDragStart,
+        onDragEnd: handleDragEnd,
+        onDragCancel: handleDragCancel,
+        children: /* @__PURE__ */ jsx(SortableContext, { items, children: items.map((item) => /* @__PURE__ */ jsx(SortableListItem, { item }, item.id)) })
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { margin: 0 }),
+    /* @__PURE__ */ jsx(Box, { padding: 1, children: /* @__PURE__ */ jsx(Button, { size: "S", disabled: hasMore ? true : false, onClick: onShowMore, children: formatMessage({ id: getTranslation("plugin.settings.sortableList.showMore") }) }) })
+  ] });
+};
+const SortMenu = ({ status, data, onSortEnd, onShowMore, hasMore, settings, onClose }) => {
+  const [visible, setVisible] = useState(false);
+  const buttonRef = React__default.useRef(null);
+  const togglePortal = React__default.useCallback(() => {
+    setVisible((prev) => !prev);
+  }, []);
+  const handleClose = React__default.useCallback((event) => {
+    if (event?.target?.id !== "drag-drop-content-type-plugin--sort-menu-button") {
+      setVisible(false);
+      if (onClose) {
+        onClose();
+      }
+    }
+  }, [onClose]);
+  return /* @__PURE__ */ jsx(React__default.Fragment, { children: /* @__PURE__ */ jsxs(Popover.Root, { children: [
+    /* @__PURE__ */ jsx(Popover.Trigger, { children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        id: "drag-drop-content-type-plugin--sort-menu-button",
+        ref: buttonRef,
+        variant: "secondary",
+        disabled: status === "success" ? false : true,
+        withTooltip: false,
+        onClick: togglePortal,
+        label: "Sort",
+        children: /* @__PURE__ */ jsx(Drag, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Popover.Content,
+      {
+        onEscapeKeyDown: handleClose,
+        onPointerDownOutside: handleClose,
+        children: /* @__PURE__ */ jsx(
+          SortableList,
+          {
+            data,
+            onShowMore,
+            onSortEnd,
+            hasMore,
+            settings
+          }
+        )
+      }
+    )
+  ] }) });
+};
+const SortModal = () => {
+  const { get, post, put } = useFetchClient();
+  const [data, setData] = useState([]);
+  const [pagination, setPagination] = useState();
+  const [status, setStatus] = useState("loading");
+  const [mainField, setMainField] = useState("id");
+  const [uid, setUid] = useState(null);
+  const [settings, setSettings] = useState({
+    rank: "",
+    title: "",
+    subtitle: "",
+    mainField: null
+  });
+  const [noEntriesFromNextPage, setNoEntriesFromNextPage] = useState(0);
+  const [hasSorted, setHasSorted] = useState(false);
+  const { queryParams } = useQueryParams();
+  const { toggleNotification } = useNotification();
+  const { formatAPIError } = useAPIErrorHandler();
+  const paths = window.location.pathname.split("/");
+  const contentTypePath = paths[paths.length - 1];
+  const params = queryParams;
+  const pageSize = parseInt(params?.pageSize) ?? 0;
+  const currentPage = parseInt(params?.page) ?? 0;
+  const locale = params?.["plugins[i18n][locale]"];
+  const listIncrementSize = pageSize ? pageSize / 2 : 1;
+  const hasMore = noEntriesFromNextPage ? noEntriesFromNextPage + listIncrementSize >= data?.length - 1 : false;
+  const fetchContentTypeConfig = async () => {
+    try {
+      const { data: data2 } = await get(
+        `/content-manager/content-types/${contentTypePath}/configuration`
+      );
+      const settings2 = data2.data.contentType?.settings;
+      setMainField(settings2.mainField);
+      setUid(data2.data.contentType?.uid);
+      setNoEntriesFromNextPage(settings2.pageSize / 2);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  const fetchSettings = async () => {
+    try {
+      const { data: data2 } = await get(`/drag-drop-content-types/settings`);
+      let fetchedSettings = {
+        rank: data2.body.rank,
+        title: data2.body.title?.length > 0 ? data2.body.title : mainField,
+        subtitle: data2.body.subtitle?.length > 0 ? data2.body.subtitle : null,
+        mainField
+      };
+      setSettings(fetchedSettings);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  const getPageEntries = async () => {
+    if (pageSize) {
+      const sortIndexParam = {
+        contentType: contentTypePath,
+        rankFieldName: settings.rank,
+        start: Math.max(
+          0,
+          (currentPage - 1) * pageSize - noEntriesFromNextPage
+        ),
+        limit: currentPage === 1 ? pageSize + noEntriesFromNextPage : pageSize + 2 * noEntriesFromNextPage,
+        locale
+      };
+      const results = await post(`/drag-drop-content-types/sort-index`, sortIndexParam);
+      return results;
+    }
+  };
+  const initializeContentType = async () => {
+    try {
+      if (settings?.rank) {
+        const entries = await getPageEntries();
+        if (entries?.data?.length) {
+          const firstEntry = entries.data[0];
+          const firstEntryRank = firstEntry[settings.rank];
+          if (entries.data?.length > 0 && firstEntryRank && !!firstEntryRank.toString()) {
+            setStatus("success");
+          }
+        }
+      }
+    } catch (e) {
+      console.log("Could not initialize content type", e);
+      setStatus("error");
+    }
+  };
+  const fetchContentType = async () => {
+    try {
+      const entries = await getPageEntries();
+      if (entries?.data?.length) {
+        setStatus("success");
+        setData(entries.data);
+        const { data: data2 } = await get(
+          `/content-manager/collection-types/${contentTypePath}?sort=${settings.rank}:asc&page=${currentPage}&pageSize=${pageSize}&locale=${locale}`
+        );
+        setPagination(data2.pagination);
+      }
+    } catch (e) {
+      console.log("Could not fetch content type", e);
+      setStatus("error");
+    }
+  };
+  const updateContentType = async (item) => {
+    const { oldIndex, newIndex } = item;
+    try {
+      const sortedList = arrayMoveImmutable(data, oldIndex, newIndex);
+      const rankUpdates = [];
+      let rankHasChanged = false;
+      for (let i = 0; i < sortedList.length; i++) {
+        if (sortedList[i].id != data[i].id) {
+          const newRank = pageSize * (currentPage - 1) + i || 0;
+          const update = {
+            id: sortedList[i].id,
+            rank: newRank
+          };
+          rankUpdates.push(update);
+          rankHasChanged = true;
+        } else if (rankHasChanged) {
+          break;
+        }
+      }
+      await put("/drag-drop-content-types/batch-update", {
+        contentType: contentTypePath,
+        updates: rankUpdates
+      });
+      let sortedListViewEntries = currentPage == 1 ? sortedList.slice(0, pageSize) : sortedList.length < pageSize ? sortedList.slice(noEntriesFromNextPage, sortedList.length) : sortedList.slice(
+        noEntriesFromNextPage,
+        pageSize + noEntriesFromNextPage
+      );
+      setData(sortedList);
+      setStatus("success");
+      afterUpdate(sortedListViewEntries, pagination);
+    } catch (e) {
+      console.log("Could not update content type:", e);
+      toggleNotification({
+        type: "warning",
+        message: formatAPIError(e)
+      });
+      setStatus("error");
+    }
+  };
+  const afterUpdate = (newData, pagination2) => {
+    setHasSorted(true);
+  };
+  const handleModalClose = () => {
+    if (hasSorted) {
+      window.location.reload();
+    }
+  };
+  const showMoreHandler = () => {
+    setNoEntriesFromNextPage(noEntriesFromNextPage + listIncrementSize);
+  };
+  useEffect(() => {
+    fetchContentTypeConfig();
+  }, []);
+  useEffect(() => {
+    fetchSettings();
+  }, [mainField]);
+  useEffect(() => {
+    if (settings?.rank) {
+      initializeContentType();
+    }
+  }, [settings]);
+  useEffect(() => {
+    if (settings?.rank && pageSize && currentPage) {
+      fetchContentType();
+    }
+  }, [noEntriesFromNextPage, locale, pageSize, currentPage, settings]);
+  return (
+    // <CheckPermissions permissions={pluginPermissions.main}>
+    /* @__PURE__ */ jsx(
+      SortMenu,
+      {
+        data,
+        status,
+        onOpen: fetchContentType,
+        onSortEnd: updateContentType,
+        onShowMore: showMoreHandler,
+        onClose: handleModalClose,
+        hasMore,
+        settings
+      }
+    )
+  );
+};
+const pluginPermissions = {
+  main: [{ action: "plugin::drag-drop-content-types.read", subject: null }]
+};
+const prefixPluginTranslations = (trad, pluginId) => {
+  return Object.keys(trad).reduce((acc, current) => {
+    acc[`${pluginId}.${current}`] = trad[current];
+    return acc;
+  }, {});
+};
+const index = {
+  register(app) {
+    app.createSettingSection(
+      {
+        id: PLUGIN_ID,
+        intlLabel: {
+          id: `${PLUGIN_ID}.plugin.name`,
+          defaultMessage: "Drag Drop Content Types"
+        },
+        permissions: pluginPermissions.main
+      },
+      [
+        {
+          intlLabel: {
+            id: `${PLUGIN_ID}.plugin.configuration`,
+            defaultMessage: "Configuration"
+          },
+          id: "settings",
+          to: `${PLUGIN_ID}`,
+          Component: () => import("./Settings-Cx22s5Bk.mjs")
+        }
+      ]
+    );
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: false,
+      name: PLUGIN_ID
+    });
+  },
+  bootstrap(app) {
+    app.getPlugin("content-manager").injectComponent("listView", "actions", {
+      name: "sort-component",
+      Component: SortModal
+    });
+  },
+  async registerTrads(app) {
+    const { locales } = app;
+    const importedTranslations = await Promise.all(
+      locales.map((locale) => {
+        return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("./en-bxpER_P-.mjs"), "./translations/fr.json": () => import("./fr-hkSxFuzl.mjs") }), `./translations/${locale}.json`, 3).then(({ default: data }) => {
+          return {
+            data: prefixPluginTranslations(data, PLUGIN_ID),
+            locale
+          };
+        }).catch(() => {
+          return {
+            data: {},
+            locale
+          };
+        });
+      })
+    );
+    return importedTranslations;
+  }
+};
+export {
+  getTranslation as g,
+  index as i
+};