@retikolo/drag-drop-content-types 1.3.11 → 1.4.1

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "es5"
+}

package/README.md

@@ -37,6 +37,9 @@ Go to `Settings` -> `Drag Drop Content Type` -> `Configuration`:
 #### Hints
 * Add "Default sort attribute" `rank`, "Default sort order" `ASC` and remove the `rank` attribute from the view using "Configure the view" button.
 * You can also set a `title` value that is displayed in the menu instead of the default.
+* If you want a second field to be displayed in the drag and drop menu, you can add s `subtitle` in the settings. The subtitle should either be:
+- A field containing a string or number or something like that.
+- It can be an object (like a relation), but it must have the `title` field specified in the settings (it won't recognize automatically!).
 
 ### In your frontend
 Assuming you go with the default settings, you can make a request on the following url to get the ordered items:
@@ -47,3 +50,7 @@ http://localhost:1337/api/foo?sort=rank:asc
 
 ## 🤝 Contribute
 Feel free to fork and make pull requests to this plugin. All input is welcome - thanks for all contributions so far!
+
+
+## ⭐️ Support
+I you like this project, please give it a star. Maybe this will help it getting integrated to strapi's core some day 😊.

package/admin/src/components/SortModal/index.js

@@ -65,7 +65,8 @@ const SortModal = () => {
 			);
 			let fetchedSettings = {
 				rank: data.body.rank,
-				title: data.body.title.length > 0 ? data.body.title : mainField
+				title: data.body.title.length > 0 ? data.body.title : mainField,
+				subtitle: data.body.subtitle.length > 0 ? data.body.subtitle : null
 			}
 			setSettings(fetchedSettings);
 		} catch (e) {
@@ -121,11 +122,32 @@ const SortModal = () => {
 		}
 	};
 
+	// Get subtitle from entry if defined in settings
+	const getSubtitle = (entry) => {
+		try {
+			if (settings.subtitle && entry[settings.subtitle]) {
+				if (entry[settings.subtitle].constructor.name == "Array") {
+					if (entry[settings.subtitle].length > 0)
+						return `- ${entry[settings.subtitle][0][settings.title]}`;
+				} else if (typeof entry[settings.subtitle] === "object") {
+					return `- ${entry[settings.subtitle][settings.title]}`;
+				} else {
+					return `- ${entry[settings.subtitle]}`;
+				}
+			}
+			return "";
+		} catch (e) {
+			console.log("Unsupported subtitle field value.", e);
+			return "";
+		}
+	}
+
 	// Update all ranks via put request.
 	const updateContentType = async ({ oldIndex, newIndex }) => {
 		try {
 			// Increase performance by breaking loop after last element having a rank change is updated
 			const sortedList = arrayMoveImmutable(data, oldIndex, newIndex);
+			const rankUpdates = [];
 			let rankHasChanged = false;
 			// Iterate over all results and append them to the list
 			for (let i = 0; i < sortedList.length; i++) {
@@ -133,20 +155,23 @@ const SortModal = () => {
 				if (sortedList[i].id != data[i].id) {
 					const newRank =
 						parseInt(pageSize * (currentPage - 1) + i) || 0;
-					// Update rank via put request
-					await axiosInstance.put(
-						`/drag-drop-content-types/sort-update/${sortedList[i].id}`,
-						{
-							contentType: contentTypePath,
-							rankFieldName: settings.rank,
-							rank: newRank,
-						}
-					);
+					const update = {
+						id: sortedList[i].id,
+						rank: newRank,
+					};
+					rankUpdates.push(update);
 					rankHasChanged = true;
 				} else if (rankHasChanged) {
 					break;
 				}
 			}
+
+			// Batch Update DB with new ranks
+			await axiosInstance.put("/drag-drop-content-types/batch-update", {
+				contentType: contentTypePath,
+				updates: rankUpdates,
+			});
+
 			// distinguish last page from full/first page
 			let sortedListViewEntries =
 				currentPage == 1
@@ -199,6 +224,7 @@ const SortModal = () => {
 					&nbsp;
 					<span title={value[settings.title] ? value[settings.title] : value[mainField]}>
 						{value[settings.title] ? value[settings.title] : value[mainField]}
+						{getSubtitle(value)}
 					</span>
 				</div>
 			</MenuItem>

package/admin/src/pages/Settings/index.js

@@ -133,6 +133,33 @@ const Settings = () => {
                       } />
                   </Box>
                 </GridItem>
+                <GridItem col={6} s={12}>
+                  <Box padding={0}>
+                    <TextInput
+                      placeholder="Subtitle"
+                      label="Subitle Field Name"
+                      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."
+                      name="content"
+                      onChange={e => {
+                        setSettings({
+                          ...settings,
+                          subtitle: e.target.value,
+                        })
+                      }}
+                      value={settings.subtitle}
+                      labelAction={
+                        <Tooltip description="Field that will show up in the drag drop menu attached to title">
+                          <button aria-label="Information about the email" style={{
+                            border: 'none',
+                            padding: 0,
+                            background: 'transparent'
+                          }}>
+                            <Information aria-hidden={true} />
+                          </button>
+                        </Tooltip>
+                      } />
+                  </Box>
+                </GridItem>
               </Grid>
             </Stack>
           </Box>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@retikolo/drag-drop-content-types",
-	"version": "1.3.11",
+	"version": "1.4.1",
 	"description": "This plugin add a drag and droppable list that allows you to sort content type entries.",
 	"strapi": {
 		"name": "drag-drop-content-types",
@@ -17,7 +17,8 @@
 	},
 	"dependencies": {
 		"array-move": "^4.0.0",
-		"react-sortable-hoc": "^2.0.0"
+		"react-sortable-hoc": "^2.0.0",
+		"zod": "^3.20.2"
 	},
 	"author": {
 		"name": "Aeneas Meier",

package/server/controllers/sort.js

@@ -1,5 +1,8 @@
+// @ts-check
 'use strict';
 
+const { z } = require('zod');
+
 // Get the store from the drag-drop plugin
 function getPluginStore() {
   return strapi.store({
@@ -16,7 +19,9 @@ async function createDefaultConfig() {
     body: {
       rank: 'rank',
       title: '',
+      subtitle: '',
     }
+
   };
   await pluginStore.set({ key: 'settings', value });
   return pluginStore.get({ key: 'settings' });
@@ -43,7 +48,7 @@ async function setSettings(settings) {
 // Search for entries ordered by rank
 async function index(contentType, start, limit, locale, rankFieldName) {
   let indexData = {
-    sort: { },
+    sort: {},
     populate: '*',
     start: start,
     limit: limit,
@@ -51,7 +56,7 @@ async function index(contentType, start, limit, locale, rankFieldName) {
   }
   indexData.sort[rankFieldName] = 'asc'
   try {
-    return await strapi.entityService.findMany(contentType, indexData );
+    return await strapi.entityService.findMany(contentType, indexData);
   } catch (err) {
     return {};
   }
@@ -67,6 +72,40 @@ async function update(id, contentType, rank, rankFieldName) {
   return await strapi.query(contentType).update(updateData);
 }
 
+/**
+ *
+ * @param {RankUpdate[]} updates
+ * @param {string} contentType
+ */
+async function batchUpdate(updates, contentType) {
+  const config = await getSettings();
+  const sortFieldName = config.body.rank;
+  const results = [];
+
+  for (const update of updates) {
+    // update entry's rank in db
+    try {
+      const updatedEntry = await strapi.db.query(contentType).update({
+        where: { id: update.id },
+        data: {
+          [sortFieldName]: update.rank,
+        },
+      });
+      updatedEntry?.id && results.push(updatedEntry);
+    } catch (err) {
+      console.log(err);
+    }
+  }
+  if (results?.length !== updates?.length) {
+    throw new Error('Error updating rank entries.');
+  } else {
+    return results.map((entry) => ({
+      id: entry.id,
+      rank: entry[sortFieldName],
+    }));
+  }
+}
+
 module.exports = {
   async getSettings(ctx) {
     try {
@@ -98,4 +137,33 @@ module.exports = {
       ctx.throw(500, err);
     }
   },
-};
+  async batchUpdate(ctx) {
+    try {
+      const payload = await BatchUpdateRequestSchema.parseAsync(
+        ctx.request.body
+      );
+      try {
+        ctx.body = await batchUpdate(payload.updates, payload.contentType);
+      } catch (err) {
+        ctx.throw(500, err);
+      }
+    } catch (err) {
+      ctx.throw(400, err);
+    }
+  },
+};
+
+// TYPE-SAFETY AND VALIDATION
+
+// Request schema used for parsing/validating incoming API requests. Uses Zod which works well with Typescript if used in the future.
+const RankUpdateSchema = z.object({
+  id: z.number(),
+  rank: z.number(),
+});
+const BatchUpdateRequestSchema = z.object({
+  contentType: z.string(),
+  updates: z.array(RankUpdateSchema),
+});
+
+// Try to enforce Typescript types in Javascript using JSDoc
+/** @typedef { z.infer<typeof RankUpdateSchema> } RankUpdate */

package/server/routes/sort.js

@@ -1,5 +1,3 @@
-
-
 module.exports = {
   type: 'admin',
   routes: [
@@ -22,22 +20,31 @@ module.exports = {
       },
     },
     {
-      method: "POST",
-      path: "/sort-index",
-      handler: "sort.index",
+      method: 'POST',
+      path: '/sort-index',
+      handler: 'sort.index',
+      config: {
+        policies: [],
+        auth: false,
+      },
+    },
+    {
+      method: 'PUT',
+      path: '/batch-update',
+      handler: 'sort.batchUpdate',
       config: {
         policies: [],
         auth: false,
       },
     },
     {
-      method: "PUT",
-      path: "/sort-update/:id",
-      handler: "sort.update",
+      method: 'PUT',
+      path: '/sort-update/:id',
+      handler: 'sort.update',
       config: {
         policies: [],
         auth: false,
       },
     },
   ],
-};
+};