Add drag-and-drop functionality to snippets table

Author: mgiannopoulos24

src/css/manage.scss

@@ -213,3 +213,15 @@ td.column-description {
 		}
 	}
 }
+
+/* Drag and Drop Sorting */
+
+.sortable-placeholder {
+	background-color: #f9f9f9;
+	border: 1px dashed #ccc;
+	block-size: 50px;
+}
+
+.wp-list-table tbody tr {
+	cursor: move;
+}

src/js/manage.ts

@@ -1,5 +1,6 @@
-import { handleShowCloudPreview, handleSnippetActivationSwitches, handleSnippetPriorityChanges } from './services/manage'
+import { handleShowCloudPreview, handleSnippetActivationSwitches, handleSnippetOrdering, handleSnippetPriorityChanges } from './services/manage'
 
 handleSnippetActivationSwitches()
 handleSnippetPriorityChanges()
 handleShowCloudPreview()
+handleSnippetOrdering()

src/js/services/manage/index.ts

@@ -1,3 +1,4 @@
 export { handleSnippetActivationSwitches } from './activation'
 export { handleSnippetPriorityChanges } from './priority'
 export { handleShowCloudPreview } from './cloud'
+export { handleSnippetOrdering } from './ordering'

src/js/services/manage/ordering.ts

@@ -0,0 +1,36 @@
+import $ from 'jquery'
+import { updateSnippet } from './requests'
+import type { Snippet } from '../../types/Snippet'
+
+export const handleSnippetOrdering = () => {
+	const table = $('.wp-list-table tbody')
+
+	if (!table.length) {
+		return
+	}
+
+	(<any> table).sortable({
+		items: '> tr',
+		cursor: 'move',
+		axis: 'y',
+		containment: 'parent',
+		cancel: 'input, textarea, button, select, option, a',
+		placeholder: 'sortable-placeholder',
+		update: () => {
+			const rows = table.find('tr')
+
+			rows.each(function (index) {
+				const row = $(this)
+				const priorityInput = row.find('.snippet-priority')
+				const currentPriority = parseInt(<string> priorityInput.val(), 10)
+				const newPriority = index + 1
+
+				if (currentPriority !== newPriority) {
+					priorityInput.val(newPriority)
+					const snippet: Partial<Snippet> = { priority: newPriority }
+					updateSnippet('priority', row[0], snippet)
+				}
+			})
+		}
+	})
+}

src/php/admin-menus/class-manage-menu.php

@@ -193,7 +193,7 @@ public function enqueue_assets() {
 		wp_enqueue_script(
 			'code-snippets-manage-js',
 			plugins_url( 'dist/manage.js', $plugin->file ),
-			[ 'wp-i18n' ],
+			[ 'jquery-ui-sortable', 'wp-i18n' ],
 			$plugin->version,
 			true
 		);
@@ -334,4 +334,4 @@ public function ajax_callback() {
 
 		wp_send_json_success();
 	}
-}
+}