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

package/.prettierrc

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

package/README.md

@@ -47,3 +47,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

@@ -126,6 +126,7 @@ const SortModal = () => {
 		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 +134,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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@retikolo/drag-drop-content-types",
-	"version": "1.3.11",
+	"version": "1.4.0",
 	"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({
@@ -17,6 +20,7 @@ async function createDefaultConfig() {
       rank: 'rank',
       title: '',
     }
+
   };
   await pluginStore.set({ key: 'settings', value });
   return pluginStore.get({ key: 'settings' });
@@ -43,7 +47,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 +55,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 +71,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 +136,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,
       },
     },
   ],
-};
+};