@retikolo/drag-drop-content-types-strapi 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +77 -0
- package/dist/_chunks/Settings-BUJ6OWyE.js +3632 -0
- package/dist/_chunks/Settings-Cx22s5Bk.mjs +3615 -0
- package/dist/_chunks/en-I3-CH3Sy.js +31 -0
- package/dist/_chunks/en-bxpER_P-.mjs +31 -0
- package/dist/_chunks/fr-C8Qw4iPZ.js +4 -0
- package/dist/_chunks/fr-hkSxFuzl.mjs +4 -0
- package/dist/_chunks/index-CxWC49Ye.mjs +477 -0
- package/dist/_chunks/index-D5Ne-GrP.js +478 -0
- package/dist/admin/index.js +3 -0
- package/dist/admin/index.mjs +4 -0
- package/dist/admin/src/components/Initializer.d.ts +5 -0
- package/dist/admin/src/components/PluginIcon.d.ts +2 -0
- package/dist/admin/src/components/SettingsTextField.d.ts +14 -0
- package/dist/admin/src/components/SettingsToggleField.d.ts +13 -0
- package/dist/admin/src/components/SortModal/CustomItem.d.ts +12 -0
- package/dist/admin/src/components/SortModal/SortMenu.d.ts +3 -0
- package/dist/admin/src/components/SortModal/SortableList.d.ts +3 -0
- package/dist/admin/src/components/SortModal/SortableListItem.d.ts +7 -0
- package/dist/admin/src/components/SortModal/index.d.ts +2 -0
- package/dist/admin/src/components/SortModal/utils.d.ts +2 -0
- package/dist/admin/src/components/TooltipIconButton.d.ts +11 -0
- package/dist/admin/src/index.d.ts +13 -0
- package/dist/admin/src/pages/App.d.ts +2 -0
- package/dist/admin/src/pages/HomePage.d.ts +2 -0
- package/dist/admin/src/pages/Settings.d.ts +2 -0
- package/dist/admin/src/permissions.d.ts +7 -0
- package/dist/admin/src/pluginId.d.ts +1 -0
- package/dist/admin/src/utils/getTranslation.d.ts +2 -0
- package/dist/admin/src/utils/strapi.d.ts +13 -0
- package/dist/admin/src/utils/useQueryParams.d.ts +7 -0
- package/dist/server/index.js +266 -0
- package/dist/server/index.mjs +267 -0
- package/dist/server/src/bootstrap.d.ts +5 -0
- package/dist/server/src/config/index.d.ts +5 -0
- package/dist/server/src/content-types/index.d.ts +2 -0
- package/dist/server/src/controllers/dragdrop.d.ts +9 -0
- package/dist/server/src/controllers/index.d.ts +16 -0
- package/dist/server/src/controllers/settings.d.ts +8 -0
- package/dist/server/src/destroy.d.ts +5 -0
- package/dist/server/src/index.d.ts +79 -0
- package/dist/server/src/middlewares/index.d.ts +2 -0
- package/dist/server/src/policies/index.d.ts +2 -0
- package/dist/server/src/register.d.ts +5 -0
- package/dist/server/src/routes/dragdrop.d.ts +13 -0
- package/dist/server/src/routes/index.d.ts +26 -0
- package/dist/server/src/routes/settings.d.ts +12 -0
- package/dist/server/src/services/dragdrop.d.ts +21 -0
- package/dist/server/src/services/index.d.ts +21 -0
- package/dist/server/src/services/settings.d.ts +8 -0
- package/package.json +98 -0
|
@@ -0,0 +1,478 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
const React = require("react");
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const arrayMove = require("array-move");
|
|
5
|
+
const admin = require("@strapi/strapi/admin");
|
|
6
|
+
const designSystem = require("@strapi/design-system");
|
|
7
|
+
const icons = require("@strapi/icons");
|
|
8
|
+
const reactIntl = require("react-intl");
|
|
9
|
+
const core = require("@dnd-kit/core");
|
|
10
|
+
const sortable = require("@dnd-kit/sortable");
|
|
11
|
+
const utilities = require("@dnd-kit/utilities");
|
|
12
|
+
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
|
|
13
|
+
const React__default = /* @__PURE__ */ _interopDefault(React);
|
|
14
|
+
const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
|
|
15
|
+
const v = glob[path];
|
|
16
|
+
if (v) {
|
|
17
|
+
return typeof v === "function" ? v() : Promise.resolve(v);
|
|
18
|
+
}
|
|
19
|
+
return new Promise((_, reject) => {
|
|
20
|
+
(typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
|
|
21
|
+
reject.bind(
|
|
22
|
+
null,
|
|
23
|
+
new Error(
|
|
24
|
+
"Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
|
|
25
|
+
)
|
|
26
|
+
)
|
|
27
|
+
);
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
const PLUGIN_ID = "drag-drop-content-types";
|
|
31
|
+
const Initializer = ({ setPlugin }) => {
|
|
32
|
+
const ref = React.useRef(setPlugin);
|
|
33
|
+
React.useEffect(() => {
|
|
34
|
+
ref.current(PLUGIN_ID);
|
|
35
|
+
}, []);
|
|
36
|
+
return null;
|
|
37
|
+
};
|
|
38
|
+
function useQueryParams() {
|
|
39
|
+
const [params, setParams] = React.useState(null);
|
|
40
|
+
React.useEffect(() => {
|
|
41
|
+
const q = new Proxy(new URLSearchParams(window.location.search), {
|
|
42
|
+
get: (queryParams, prop) => queryParams.get(prop.toString())
|
|
43
|
+
});
|
|
44
|
+
setParams(q);
|
|
45
|
+
}, [window.location.search]);
|
|
46
|
+
return { queryParams: params };
|
|
47
|
+
}
|
|
48
|
+
const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
|
|
49
|
+
const CustomItem = React.forwardRef(
|
|
50
|
+
({ item, isOpacityEnabled, isDragging, style, ...props }, ref) => {
|
|
51
|
+
const styles = {
|
|
52
|
+
opacity: isOpacityEnabled ? "0.4" : "1",
|
|
53
|
+
cursor: isDragging ? "grabbing" : "grab",
|
|
54
|
+
lineHeight: "0.5",
|
|
55
|
+
transform: isDragging ? "scale(1.05)" : "scale(1)",
|
|
56
|
+
...style
|
|
57
|
+
};
|
|
58
|
+
const ellipsis = (str, num = str.length, ellipsisStr = "...") => str.length >= num ? str.slice(0, num >= ellipsisStr.length ? num - ellipsisStr.length : num) + ellipsisStr : str;
|
|
59
|
+
item.title = ellipsis(item.title ?? "", 30);
|
|
60
|
+
item.subtitle = ellipsis(item.subtitle ?? "", 30);
|
|
61
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, style: styles, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
62
|
+
designSystem.Box,
|
|
63
|
+
{
|
|
64
|
+
style: { zIndex: 10, cursor: "all-scroll", userSelect: "none" },
|
|
65
|
+
background: "neutral0",
|
|
66
|
+
hasRadius: true,
|
|
67
|
+
shadow: "filterShadow",
|
|
68
|
+
padding: 2,
|
|
69
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 1, children: [
|
|
70
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 2, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Drag, {}) }),
|
|
71
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 10, s: 12, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { children: [
|
|
72
|
+
item.title,
|
|
73
|
+
item.subtitle
|
|
74
|
+
] }) })
|
|
75
|
+
] })
|
|
76
|
+
}
|
|
77
|
+
) });
|
|
78
|
+
}
|
|
79
|
+
);
|
|
80
|
+
const SortableListItem = ({ item, ...props }) => {
|
|
81
|
+
const { attributes, isDragging, listeners, setNodeRef, transform, transition } = sortable.useSortable({
|
|
82
|
+
id: item.id
|
|
83
|
+
});
|
|
84
|
+
const styles = {
|
|
85
|
+
transform: utilities.CSS.Transform.toString(transform),
|
|
86
|
+
transition: transition || void 0
|
|
87
|
+
};
|
|
88
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
89
|
+
CustomItem,
|
|
90
|
+
{
|
|
91
|
+
item,
|
|
92
|
+
ref: setNodeRef,
|
|
93
|
+
style: styles,
|
|
94
|
+
isOpacityEnabled: isDragging,
|
|
95
|
+
...props,
|
|
96
|
+
...attributes,
|
|
97
|
+
...listeners
|
|
98
|
+
}
|
|
99
|
+
);
|
|
100
|
+
};
|
|
101
|
+
function getSubtitle(entry, subTitleField, titleField) {
|
|
102
|
+
try {
|
|
103
|
+
if (subTitleField && entry[subTitleField]) {
|
|
104
|
+
if (entry[subTitleField].constructor.name == "Array") {
|
|
105
|
+
if (entry[subTitleField].length > 0)
|
|
106
|
+
return ` - ${entry[subTitleField][0][titleField]}`;
|
|
107
|
+
} else if (typeof entry[subTitleField] === "object") {
|
|
108
|
+
return ` - ${entry[subTitleField][titleField]}`;
|
|
109
|
+
} else {
|
|
110
|
+
return ` - ${entry[subTitleField]}`;
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
return "";
|
|
114
|
+
} catch (e) {
|
|
115
|
+
console.log("Unsupported subtitle field value.", e);
|
|
116
|
+
return "";
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
function getTitle(entry, titleField, mainField) {
|
|
120
|
+
const title = entry[titleField] ? entry[titleField] : entry[mainField];
|
|
121
|
+
return title?.toString();
|
|
122
|
+
}
|
|
123
|
+
const SortableList = ({ data, onShowMore, hasMore, settings, onSortEnd }) => {
|
|
124
|
+
const { formatMessage } = reactIntl.useIntl();
|
|
125
|
+
let { title, subtitle, mainField } = settings;
|
|
126
|
+
subtitle = subtitle ?? "";
|
|
127
|
+
mainField = mainField ?? "";
|
|
128
|
+
const convertDataItem = (pageEntry) => {
|
|
129
|
+
return {
|
|
130
|
+
...pageEntry,
|
|
131
|
+
title: getTitle(pageEntry, title, mainField),
|
|
132
|
+
subtitle: getSubtitle(pageEntry, subtitle, title)
|
|
133
|
+
};
|
|
134
|
+
};
|
|
135
|
+
const defaultItems = data.map((x) => convertDataItem(x));
|
|
136
|
+
const [items, setItems] = React.useState(defaultItems);
|
|
137
|
+
if (items.length !== defaultItems.length)
|
|
138
|
+
setItems(defaultItems);
|
|
139
|
+
const [activeItem, setActiveItem] = React.useState();
|
|
140
|
+
const sensors = core.useSensors(core.useSensor(core.PointerSensor), core.useSensor(core.TouchSensor));
|
|
141
|
+
const handleDragStart = (event) => {
|
|
142
|
+
const { active } = event;
|
|
143
|
+
setActiveItem(items.find((item) => item.id === active.id));
|
|
144
|
+
};
|
|
145
|
+
const handleDragEnd = (event) => {
|
|
146
|
+
const { active, over } = event;
|
|
147
|
+
if (!over) return;
|
|
148
|
+
const activeItem2 = items.find((item) => item.id === active.id);
|
|
149
|
+
const overItem = items.find((item) => item.id === over.id);
|
|
150
|
+
if (!activeItem2 || !overItem) {
|
|
151
|
+
return;
|
|
152
|
+
}
|
|
153
|
+
const activeIndex = items.findIndex((item) => item.id === active.id);
|
|
154
|
+
const overIndex = items.findIndex((item) => item.id === over.id);
|
|
155
|
+
if (activeIndex !== overIndex) {
|
|
156
|
+
setItems((prev) => sortable.arrayMove(prev, activeIndex, overIndex));
|
|
157
|
+
}
|
|
158
|
+
setActiveItem(void 0);
|
|
159
|
+
onSortEnd({ oldIndex: activeIndex, newIndex: overIndex });
|
|
160
|
+
};
|
|
161
|
+
const handleDragCancel = () => {
|
|
162
|
+
setActiveItem(void 0);
|
|
163
|
+
};
|
|
164
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth: "280px" }, children: [
|
|
165
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
166
|
+
core.DndContext,
|
|
167
|
+
{
|
|
168
|
+
sensors,
|
|
169
|
+
collisionDetection: core.closestCenter,
|
|
170
|
+
onDragStart: handleDragStart,
|
|
171
|
+
onDragEnd: handleDragEnd,
|
|
172
|
+
onDragCancel: handleDragCancel,
|
|
173
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SortableListItem, { item }, item.id)) })
|
|
174
|
+
}
|
|
175
|
+
),
|
|
176
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, { margin: 0 }),
|
|
177
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { size: "S", disabled: hasMore ? true : false, onClick: onShowMore, children: formatMessage({ id: getTranslation("plugin.settings.sortableList.showMore") }) }) })
|
|
178
|
+
] });
|
|
179
|
+
};
|
|
180
|
+
const SortMenu = ({ status, data, onSortEnd, onShowMore, hasMore, settings, onClose }) => {
|
|
181
|
+
const [visible, setVisible] = React.useState(false);
|
|
182
|
+
const buttonRef = React__default.default.useRef(null);
|
|
183
|
+
const togglePortal = React__default.default.useCallback(() => {
|
|
184
|
+
setVisible((prev) => !prev);
|
|
185
|
+
}, []);
|
|
186
|
+
const handleClose = React__default.default.useCallback((event) => {
|
|
187
|
+
if (event?.target?.id !== "drag-drop-content-type-plugin--sort-menu-button") {
|
|
188
|
+
setVisible(false);
|
|
189
|
+
if (onClose) {
|
|
190
|
+
onClose();
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}, [onClose]);
|
|
194
|
+
return /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { children: [
|
|
195
|
+
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
196
|
+
designSystem.IconButton,
|
|
197
|
+
{
|
|
198
|
+
id: "drag-drop-content-type-plugin--sort-menu-button",
|
|
199
|
+
ref: buttonRef,
|
|
200
|
+
variant: "secondary",
|
|
201
|
+
disabled: status === "success" ? false : true,
|
|
202
|
+
withTooltip: false,
|
|
203
|
+
onClick: togglePortal,
|
|
204
|
+
label: "Sort",
|
|
205
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(icons.Drag, {})
|
|
206
|
+
}
|
|
207
|
+
) }),
|
|
208
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
209
|
+
designSystem.Popover.Content,
|
|
210
|
+
{
|
|
211
|
+
onEscapeKeyDown: handleClose,
|
|
212
|
+
onPointerDownOutside: handleClose,
|
|
213
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
214
|
+
SortableList,
|
|
215
|
+
{
|
|
216
|
+
data,
|
|
217
|
+
onShowMore,
|
|
218
|
+
onSortEnd,
|
|
219
|
+
hasMore,
|
|
220
|
+
settings
|
|
221
|
+
}
|
|
222
|
+
)
|
|
223
|
+
}
|
|
224
|
+
)
|
|
225
|
+
] }) });
|
|
226
|
+
};
|
|
227
|
+
const SortModal = () => {
|
|
228
|
+
const { get, post, put } = admin.useFetchClient();
|
|
229
|
+
const [data, setData] = React.useState([]);
|
|
230
|
+
const [pagination, setPagination] = React.useState();
|
|
231
|
+
const [status, setStatus] = React.useState("loading");
|
|
232
|
+
const [mainField, setMainField] = React.useState("id");
|
|
233
|
+
const [uid, setUid] = React.useState(null);
|
|
234
|
+
const [settings, setSettings] = React.useState({
|
|
235
|
+
rank: "",
|
|
236
|
+
title: "",
|
|
237
|
+
subtitle: "",
|
|
238
|
+
mainField: null
|
|
239
|
+
});
|
|
240
|
+
const [noEntriesFromNextPage, setNoEntriesFromNextPage] = React.useState(0);
|
|
241
|
+
const [hasSorted, setHasSorted] = React.useState(false);
|
|
242
|
+
const { queryParams } = useQueryParams();
|
|
243
|
+
const { toggleNotification } = admin.useNotification();
|
|
244
|
+
const { formatAPIError } = admin.useAPIErrorHandler();
|
|
245
|
+
const paths = window.location.pathname.split("/");
|
|
246
|
+
const contentTypePath = paths[paths.length - 1];
|
|
247
|
+
const params = queryParams;
|
|
248
|
+
const pageSize = parseInt(params?.pageSize) ?? 0;
|
|
249
|
+
const currentPage = parseInt(params?.page) ?? 0;
|
|
250
|
+
const locale = params?.["plugins[i18n][locale]"];
|
|
251
|
+
const listIncrementSize = pageSize ? pageSize / 2 : 1;
|
|
252
|
+
const hasMore = noEntriesFromNextPage ? noEntriesFromNextPage + listIncrementSize >= data?.length - 1 : false;
|
|
253
|
+
const fetchContentTypeConfig = async () => {
|
|
254
|
+
try {
|
|
255
|
+
const { data: data2 } = await get(
|
|
256
|
+
`/content-manager/content-types/${contentTypePath}/configuration`
|
|
257
|
+
);
|
|
258
|
+
const settings2 = data2.data.contentType?.settings;
|
|
259
|
+
setMainField(settings2.mainField);
|
|
260
|
+
setUid(data2.data.contentType?.uid);
|
|
261
|
+
setNoEntriesFromNextPage(settings2.pageSize / 2);
|
|
262
|
+
} catch (e) {
|
|
263
|
+
console.log(e);
|
|
264
|
+
}
|
|
265
|
+
};
|
|
266
|
+
const fetchSettings = async () => {
|
|
267
|
+
try {
|
|
268
|
+
const { data: data2 } = await get(`/drag-drop-content-types/settings`);
|
|
269
|
+
let fetchedSettings = {
|
|
270
|
+
rank: data2.body.rank,
|
|
271
|
+
title: data2.body.title?.length > 0 ? data2.body.title : mainField,
|
|
272
|
+
subtitle: data2.body.subtitle?.length > 0 ? data2.body.subtitle : null,
|
|
273
|
+
mainField
|
|
274
|
+
};
|
|
275
|
+
setSettings(fetchedSettings);
|
|
276
|
+
} catch (e) {
|
|
277
|
+
console.log(e);
|
|
278
|
+
}
|
|
279
|
+
};
|
|
280
|
+
const getPageEntries = async () => {
|
|
281
|
+
if (pageSize) {
|
|
282
|
+
const sortIndexParam = {
|
|
283
|
+
contentType: contentTypePath,
|
|
284
|
+
rankFieldName: settings.rank,
|
|
285
|
+
start: Math.max(
|
|
286
|
+
0,
|
|
287
|
+
(currentPage - 1) * pageSize - noEntriesFromNextPage
|
|
288
|
+
),
|
|
289
|
+
limit: currentPage === 1 ? pageSize + noEntriesFromNextPage : pageSize + 2 * noEntriesFromNextPage,
|
|
290
|
+
locale
|
|
291
|
+
};
|
|
292
|
+
const results = await post(`/drag-drop-content-types/sort-index`, sortIndexParam);
|
|
293
|
+
return results;
|
|
294
|
+
}
|
|
295
|
+
};
|
|
296
|
+
const initializeContentType = async () => {
|
|
297
|
+
try {
|
|
298
|
+
if (settings?.rank) {
|
|
299
|
+
const entries = await getPageEntries();
|
|
300
|
+
if (entries?.data?.length) {
|
|
301
|
+
const firstEntry = entries.data[0];
|
|
302
|
+
const firstEntryRank = firstEntry[settings.rank];
|
|
303
|
+
if (entries.data?.length > 0 && firstEntryRank && !!firstEntryRank.toString()) {
|
|
304
|
+
setStatus("success");
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
} catch (e) {
|
|
309
|
+
console.log("Could not initialize content type", e);
|
|
310
|
+
setStatus("error");
|
|
311
|
+
}
|
|
312
|
+
};
|
|
313
|
+
const fetchContentType = async () => {
|
|
314
|
+
try {
|
|
315
|
+
const entries = await getPageEntries();
|
|
316
|
+
if (entries?.data?.length) {
|
|
317
|
+
setStatus("success");
|
|
318
|
+
setData(entries.data);
|
|
319
|
+
const { data: data2 } = await get(
|
|
320
|
+
`/content-manager/collection-types/${contentTypePath}?sort=${settings.rank}:asc&page=${currentPage}&pageSize=${pageSize}&locale=${locale}`
|
|
321
|
+
);
|
|
322
|
+
setPagination(data2.pagination);
|
|
323
|
+
}
|
|
324
|
+
} catch (e) {
|
|
325
|
+
console.log("Could not fetch content type", e);
|
|
326
|
+
setStatus("error");
|
|
327
|
+
}
|
|
328
|
+
};
|
|
329
|
+
const updateContentType = async (item) => {
|
|
330
|
+
const { oldIndex, newIndex } = item;
|
|
331
|
+
try {
|
|
332
|
+
const sortedList = arrayMove.arrayMoveImmutable(data, oldIndex, newIndex);
|
|
333
|
+
const rankUpdates = [];
|
|
334
|
+
let rankHasChanged = false;
|
|
335
|
+
for (let i = 0; i < sortedList.length; i++) {
|
|
336
|
+
if (sortedList[i].id != data[i].id) {
|
|
337
|
+
const newRank = pageSize * (currentPage - 1) + i || 0;
|
|
338
|
+
const update = {
|
|
339
|
+
id: sortedList[i].id,
|
|
340
|
+
rank: newRank
|
|
341
|
+
};
|
|
342
|
+
rankUpdates.push(update);
|
|
343
|
+
rankHasChanged = true;
|
|
344
|
+
} else if (rankHasChanged) {
|
|
345
|
+
break;
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
await put("/drag-drop-content-types/batch-update", {
|
|
349
|
+
contentType: contentTypePath,
|
|
350
|
+
updates: rankUpdates
|
|
351
|
+
});
|
|
352
|
+
let sortedListViewEntries = currentPage == 1 ? sortedList.slice(0, pageSize) : sortedList.length < pageSize ? sortedList.slice(noEntriesFromNextPage, sortedList.length) : sortedList.slice(
|
|
353
|
+
noEntriesFromNextPage,
|
|
354
|
+
pageSize + noEntriesFromNextPage
|
|
355
|
+
);
|
|
356
|
+
setData(sortedList);
|
|
357
|
+
setStatus("success");
|
|
358
|
+
afterUpdate(sortedListViewEntries, pagination);
|
|
359
|
+
} catch (e) {
|
|
360
|
+
console.log("Could not update content type:", e);
|
|
361
|
+
toggleNotification({
|
|
362
|
+
type: "warning",
|
|
363
|
+
message: formatAPIError(e)
|
|
364
|
+
});
|
|
365
|
+
setStatus("error");
|
|
366
|
+
}
|
|
367
|
+
};
|
|
368
|
+
const afterUpdate = (newData, pagination2) => {
|
|
369
|
+
setHasSorted(true);
|
|
370
|
+
};
|
|
371
|
+
const handleModalClose = () => {
|
|
372
|
+
if (hasSorted) {
|
|
373
|
+
window.location.reload();
|
|
374
|
+
}
|
|
375
|
+
};
|
|
376
|
+
const showMoreHandler = () => {
|
|
377
|
+
setNoEntriesFromNextPage(noEntriesFromNextPage + listIncrementSize);
|
|
378
|
+
};
|
|
379
|
+
React.useEffect(() => {
|
|
380
|
+
fetchContentTypeConfig();
|
|
381
|
+
}, []);
|
|
382
|
+
React.useEffect(() => {
|
|
383
|
+
fetchSettings();
|
|
384
|
+
}, [mainField]);
|
|
385
|
+
React.useEffect(() => {
|
|
386
|
+
if (settings?.rank) {
|
|
387
|
+
initializeContentType();
|
|
388
|
+
}
|
|
389
|
+
}, [settings]);
|
|
390
|
+
React.useEffect(() => {
|
|
391
|
+
if (settings?.rank && pageSize && currentPage) {
|
|
392
|
+
fetchContentType();
|
|
393
|
+
}
|
|
394
|
+
}, [noEntriesFromNextPage, locale, pageSize, currentPage, settings]);
|
|
395
|
+
return (
|
|
396
|
+
// <CheckPermissions permissions={pluginPermissions.main}>
|
|
397
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
398
|
+
SortMenu,
|
|
399
|
+
{
|
|
400
|
+
data,
|
|
401
|
+
status,
|
|
402
|
+
onOpen: fetchContentType,
|
|
403
|
+
onSortEnd: updateContentType,
|
|
404
|
+
onShowMore: showMoreHandler,
|
|
405
|
+
onClose: handleModalClose,
|
|
406
|
+
hasMore,
|
|
407
|
+
settings
|
|
408
|
+
}
|
|
409
|
+
)
|
|
410
|
+
);
|
|
411
|
+
};
|
|
412
|
+
const pluginPermissions = {
|
|
413
|
+
main: [{ action: "plugin::drag-drop-content-types.read", subject: null }]
|
|
414
|
+
};
|
|
415
|
+
const prefixPluginTranslations = (trad, pluginId) => {
|
|
416
|
+
return Object.keys(trad).reduce((acc, current) => {
|
|
417
|
+
acc[`${pluginId}.${current}`] = trad[current];
|
|
418
|
+
return acc;
|
|
419
|
+
}, {});
|
|
420
|
+
};
|
|
421
|
+
const index = {
|
|
422
|
+
register(app) {
|
|
423
|
+
app.createSettingSection(
|
|
424
|
+
{
|
|
425
|
+
id: PLUGIN_ID,
|
|
426
|
+
intlLabel: {
|
|
427
|
+
id: `${PLUGIN_ID}.plugin.name`,
|
|
428
|
+
defaultMessage: "Drag Drop Content Types"
|
|
429
|
+
},
|
|
430
|
+
permissions: pluginPermissions.main
|
|
431
|
+
},
|
|
432
|
+
[
|
|
433
|
+
{
|
|
434
|
+
intlLabel: {
|
|
435
|
+
id: `${PLUGIN_ID}.plugin.configuration`,
|
|
436
|
+
defaultMessage: "Configuration"
|
|
437
|
+
},
|
|
438
|
+
id: "settings",
|
|
439
|
+
to: `${PLUGIN_ID}`,
|
|
440
|
+
Component: () => Promise.resolve().then(() => require("./Settings-BUJ6OWyE.js"))
|
|
441
|
+
}
|
|
442
|
+
]
|
|
443
|
+
);
|
|
444
|
+
app.registerPlugin({
|
|
445
|
+
id: PLUGIN_ID,
|
|
446
|
+
initializer: Initializer,
|
|
447
|
+
isReady: false,
|
|
448
|
+
name: PLUGIN_ID
|
|
449
|
+
});
|
|
450
|
+
},
|
|
451
|
+
bootstrap(app) {
|
|
452
|
+
app.getPlugin("content-manager").injectComponent("listView", "actions", {
|
|
453
|
+
name: "sort-component",
|
|
454
|
+
Component: SortModal
|
|
455
|
+
});
|
|
456
|
+
},
|
|
457
|
+
async registerTrads(app) {
|
|
458
|
+
const { locales } = app;
|
|
459
|
+
const importedTranslations = await Promise.all(
|
|
460
|
+
locales.map((locale) => {
|
|
461
|
+
return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => Promise.resolve().then(() => require("./en-I3-CH3Sy.js")), "./translations/fr.json": () => Promise.resolve().then(() => require("./fr-C8Qw4iPZ.js")) }), `./translations/${locale}.json`, 3).then(({ default: data }) => {
|
|
462
|
+
return {
|
|
463
|
+
data: prefixPluginTranslations(data, PLUGIN_ID),
|
|
464
|
+
locale
|
|
465
|
+
};
|
|
466
|
+
}).catch(() => {
|
|
467
|
+
return {
|
|
468
|
+
data: {},
|
|
469
|
+
locale
|
|
470
|
+
};
|
|
471
|
+
});
|
|
472
|
+
})
|
|
473
|
+
);
|
|
474
|
+
return importedTranslations;
|
|
475
|
+
}
|
|
476
|
+
};
|
|
477
|
+
exports.getTranslation = getTranslation;
|
|
478
|
+
exports.index = index;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
interface SettingsTextFieldProps {
|
|
2
|
+
fieldName: string;
|
|
3
|
+
displayName: string;
|
|
4
|
+
required: boolean;
|
|
5
|
+
value?: string;
|
|
6
|
+
hasLabel?: boolean;
|
|
7
|
+
hasHint?: boolean;
|
|
8
|
+
hasTooltip?: boolean;
|
|
9
|
+
hasPlaceholder?: boolean;
|
|
10
|
+
type?: string;
|
|
11
|
+
updateItem: (fieldName: string, value: string) => void;
|
|
12
|
+
}
|
|
13
|
+
declare const SettingsTextField: (props: SettingsTextFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export default SettingsTextField;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
interface SettingsToggleFieldProps {
|
|
2
|
+
fieldName: string;
|
|
3
|
+
displayName: string;
|
|
4
|
+
required: boolean;
|
|
5
|
+
value?: boolean;
|
|
6
|
+
hasLabel?: boolean;
|
|
7
|
+
hasHint?: boolean;
|
|
8
|
+
hasTooltip?: boolean;
|
|
9
|
+
type?: string;
|
|
10
|
+
updateItem: (fieldName: string, value: boolean) => void;
|
|
11
|
+
}
|
|
12
|
+
declare const SettingsToggleField: (props: SettingsToggleFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export default SettingsToggleField;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { HTMLAttributes } from "react";
|
|
2
|
+
export type TItem = {
|
|
3
|
+
id: number;
|
|
4
|
+
title: string;
|
|
5
|
+
subtitle: string;
|
|
6
|
+
};
|
|
7
|
+
declare const CustomItem: import("react").ForwardRefExoticComponent<{
|
|
8
|
+
item: TItem;
|
|
9
|
+
isOpacityEnabled?: boolean | undefined;
|
|
10
|
+
isDragging?: boolean | undefined;
|
|
11
|
+
} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
|
+
export default CustomItem;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { HTMLAttributes } from "react";
|
|
2
|
+
import { TItem } from "./CustomItem";
|
|
3
|
+
type Props = {
|
|
4
|
+
item: TItem;
|
|
5
|
+
} & HTMLAttributes<HTMLDivElement>;
|
|
6
|
+
declare const SortableListItem: ({ item, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export default SortableListItem;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface TooltipIconButtonProps {
|
|
3
|
+
children: React.ReactNode;
|
|
4
|
+
label: string | undefined;
|
|
5
|
+
variant?: string;
|
|
6
|
+
onClick?: () => void;
|
|
7
|
+
disabled?: boolean;
|
|
8
|
+
showBorder?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const TooltipIconButton: ({ children, label, variant, onClick, disabled, showBorder }: TooltipIconButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export default TooltipIconButton;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
type TradOptions = Record<string, string>;
|
|
2
|
+
declare const _default: {
|
|
3
|
+
register(app: any): void;
|
|
4
|
+
bootstrap(app: any): void;
|
|
5
|
+
registerTrads(app: any): Promise<({
|
|
6
|
+
data: TradOptions;
|
|
7
|
+
locale: string;
|
|
8
|
+
} | {
|
|
9
|
+
data: {};
|
|
10
|
+
locale: string;
|
|
11
|
+
})[]>;
|
|
12
|
+
};
|
|
13
|
+
export default _default;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const PLUGIN_ID = "drag-drop-content-types";
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { GetPageEntriesResponse, Pagination } from "../components/SortModal/types";
|
|
2
|
+
export declare const GET_DATA = "ContentManager/ListView/GET_DATA";
|
|
3
|
+
export declare const GET_DATA_SUCCEEDED = "ContentManager/ListView/GET_DATA_SUCCEEDED";
|
|
4
|
+
export declare function getData(uid: any, params: any): {
|
|
5
|
+
type: string;
|
|
6
|
+
uid: any;
|
|
7
|
+
params: any;
|
|
8
|
+
};
|
|
9
|
+
export declare function getDataSucceeded(pagination: Pagination, data: GetPageEntriesResponse[]): {
|
|
10
|
+
type: string;
|
|
11
|
+
pagination: Pagination;
|
|
12
|
+
data: GetPageEntriesResponse[];
|
|
13
|
+
};
|