@retikolo/drag-drop-content-types 1.3.4 → 1.3.6

package/README.md

@@ -31,10 +31,12 @@ module.exports = {
 
 ### In the app
 Go to `Settings` -> `Drag Drop Content Type` -> `Configuration`:
-* Specify how the rank field and the corresponding title field are called in your content types. Default value are `rank` and `title`.
-* Add the specified fields to your content type. With the default values this would be `title` (Text (Type: Short Text)) and `rank` (Number (Number format: integer)) 
-* You will be rewared with the drag-dropable menu in the list view of all content types having the specified fields.
-* (Recommendation: Add "Default sort attribute" `rank`, "Default sort order" `ASC` and remove the `rank` attribute from the view using "Configure the view" button.)
+* Specify how the rank field is called in your content-types. Default value is `rank`.
+* Add the `rank` fields to your content type. With the default value this would be `rank` (Number (Number format: integer)).
+
+#### 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.
 
 ### In your frontend
 Assuming you go with the default settings, you can make a request on the following url to get the ordered items:

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

@@ -12,17 +12,15 @@ import { Icon } from "@strapi/design-system/Icon";
 import Drag from "@strapi/icons/Drag";
 import Layer from "@strapi/icons/Layer";
 
-const DEFAULT_SORT_MENU_PAGE_SIZE = 10;
-const DEFAULT_NUMBER_OF_ENTRIES_FROM_NEXT_PAGE = 3;
-
 const SortModal = () => {
 	const [data, setData] = useState([]);
 	const [currentPage, setCurrentPage] = useState(1);
-	const [pageSize, setPageSize] = useState(DEFAULT_SORT_MENU_PAGE_SIZE);
+	const [pageSize, setPageSize] = useState();
 	const [pagination, setPagination] = useState();
 	const [status, setStatus] = useState("loading");
+	const [mainField, setMainField] = useState('id');
 	const [settings, setSettings] = useState();
-	const [noEntriesFromNextPage, setNoEntriesFromNextPage] = useState(DEFAULT_NUMBER_OF_ENTRIES_FROM_NEXT_PAGE);
+	const [noEntriesFromNextPage, setNoEntriesFromNextPage] = useState();
 
 	// TODO: Refactor get queryParams to hook
 	const [params] = useQueryParams();
@@ -42,13 +40,32 @@ const SortModal = () => {
 		[dispatch, pagination, data]
 	);
 
+	// Fetch content type config settings
+	const fetchContentTypeConfig = async () => {
+		// TODO: tie this in with middleware with the request that is already being made on page load
+		try {
+			const { data } = await axiosInstance.get(
+				`/content-manager/content-types/${contentTypePath}/configuration`
+			);
+			setMainField(data.data.contentType.settings.mainField);
+			setPageSize(data.data.contentType.settings.pageSize);
+			setNoEntriesFromNextPage(data.data.contentType.settings.pageSize / 2);
+		} catch (e) {
+			console.log(e);
+		}
+	};
+
 	// Fetch settings from configuration
 	const fetchSettings = async () => {
 		try {
 			const { data } = await axiosInstance.get(
 				`/drag-drop-content-types/settings`
 			);
-			setSettings(data.body);
+			let fetchedSettings = {
+				rank: data.body.rank,
+				title: data.body.title.length > 0 ? data.body.title : mainField
+			}
+			setSettings(fetchedSettings);
 		} catch (e) {
 			console.log(e);
 		}
@@ -76,8 +93,7 @@ const SortModal = () => {
 				const entries = await getPageEntries()
 				if (
 					entries.data.length > 0 &&
-					!!toString(entries.data[0][settings.rank]) &&
-					!!entries.data[0][settings.title]
+					!!toString(entries.data[0][settings.rank])
 				) {
 					setStatus("success");
 				}
@@ -95,7 +111,7 @@ const SortModal = () => {
 			setStatus("success");
 			setData(entries.data);
 			// TODO: remove this line and get pagination from elsewhere
-			const { data } = await axiosInstance.get(`/content-manager/collection-types/${contentTypePath}?sort=rank:asc&page=${currentPage}&pageSize=${pageSize}&locale=${locale}`);
+			const { data } = await axiosInstance.get(`/content-manager/collection-types/${contentTypePath}?sort=${settings.rank}:asc&page=${currentPage}&pageSize=${pageSize}&locale=${locale}`);
 			setPagination(data.pagination);
 		} catch (e) {
 			console.log(e);
@@ -171,8 +187,8 @@ const SortModal = () => {
 				>
 					<Icon height={"0.6em"} as={Drag} />
 					&nbsp;
-					<span title={value[settings.title]}>
-						{value[settings.title]}
+					<span title={value[settings.title] ? value[settings.title] : value[mainField] }>
+						{value[settings.title] ? value[settings.title] : value[mainField] }
 					</span>
 				</div>
 			</MenuItem>
@@ -194,7 +210,7 @@ const SortModal = () => {
 					<Divider unsetMargin={false} />
 					<Button
 						size="S"
-						disabled={noEntriesFromNextPage + listIncrementSize >= data.length ? true : false}
+						disabled={noEntriesFromNextPage + listIncrementSize >= data.length - 1 ? true : false}
 						onClick={() => { setNoEntriesFromNextPage(noEntriesFromNextPage + listIncrementSize) }}
 					>Show more</Button>
 				</div>
@@ -207,6 +223,7 @@ const SortModal = () => {
 					<SimpleMenu
 						as={IconButton}
 						icon={<Layer />}
+						label="Sort via drag and drop"
 						onClick={() => {
 							fetchContentType();
 						}}
@@ -219,10 +236,15 @@ const SortModal = () => {
 		);
 	};
 
+	// Fetch content-type on page render
+	useEffect(() => {
+		fetchContentTypeConfig();
+	}, []);
+
 	// Fetch settings on page render
 	useEffect(() => {
 		fetchSettings();
-	}, []);
+	}, [mainField]);
 
 	// Update view when settings change
 	useEffect(() => {

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

@@ -111,7 +111,7 @@ const Settings = () => {
                     <TextInput
                       placeholder="Title"
                       label="Title Field Name"
-                      hint="You must create a Short Text Field with this label in the Content-Type Builder"
+                      hint="Select or create a Short Text Field with this label in the Content-Type Builder. Leave blank to use content-type entry title"
                       name="content"
                       onChange={e => {
                         setSettings({
@@ -142,4 +142,4 @@ const Settings = () => {
   );
 };
 
-export default Settings;
+export default Settings;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@retikolo/drag-drop-content-types",
-	"version": "1.3.4",
+	"version": "1.3.6",
 	"description": "This plugin add a drag and droppable list that allows you to sort content type entries.",
 	"strapi": {
 		"name": "drag-drop-content-types",

package/server/controllers/sort.js

@@ -15,7 +15,7 @@ async function createDefaultConfig() {
   const value = {
     body: {
       rank: 'rank',
-      title: 'title',
+      title: '',
     }
   };
   await pluginStore.set({ key: 'settings', value });
@@ -50,7 +50,11 @@ async function index(contentType, start, limit, locale, rankFieldName) {
     locale: locale,
   }
   indexData.sort[rankFieldName] = 'asc'
-  return await strapi.entityService.findMany(contentType, indexData );
+  try {
+    return await strapi.entityService.findMany(contentType, indexData );
+  } catch (err) {
+    return {};
+  }
 }
 
 // Update rank of specified content type