feat(helpdesk): add drag-and-drop reorder to categories (#139)

- Drag handle column with icon-menu grip
- HTML5 native drag-and-drop on table rows
- reorderCategory controller task persists ordering via AJAX

source/packages/com_mokosuite/admin/src/Controller/DisplayController.php

@@ -526,6 +526,19 @@ class DisplayController extends BaseController
 		$this->jsonResponse(['success' => true, 'message' => 'Category deleted.']);
 	}
 
+	public function reorderCategory()
+	{
+		Session::checkToken() or die(Text::_('JINVALID_TOKEN'));
+		if (!$this->checkAcl('mokosuite.tickets')) { $this->jsonForbidden(); }
+		$order = json_decode(Factory::getApplication()->getInput()->getRaw('order', '[]'), true);
+		if (!is_array($order)) { $this->jsonResponse(['success' => false, 'message' => 'Invalid order']); return; }
+		$db = Factory::getDbo();
+		foreach ($order as $i => $id) {
+			$db->setQuery('UPDATE ' . $db->quoteName('#__mokosuite_ticket_categories') . ' SET ordering = ' . (int) $i . ' WHERE id = ' . (int) $id)->execute();
+		}
+		$this->jsonResponse(['success' => true, 'message' => 'Order saved.']);
+	}
+
 	public function saveCanned()
 	{
 		Session::checkToken() or die(Text::_('JINVALID_TOKEN'));

source/packages/com_mokosuite/admin/tmpl/categories/default.php

@@ -9,6 +9,7 @@ $users      = $this->users;
 $token      = Session::getFormToken();
 $saveUrl    = Route::_('index.php?option=com_mokosuite&task=display.saveCategory&format=json');
 $deleteUrl  = Route::_('index.php?option=com_mokosuite&task=display.deleteCategory&format=json');
+$reorderUrl = Route::_('index.php?option=com_mokosuite&task=display.reorderCategory&format=json');
 ?>
 
 <div id="mokosuite-categories">
@@ -22,10 +23,11 @@ $deleteUrl  = Route::_('index.php?option=com_mokosuite&task=display.deleteCatego
 	<div class="card">
 		<div class="table-responsive">
 			<table class="table table-striped mb-0" id="cat-table">
-				<thead><tr><th>Title</th><th>SLA Response</th><th>SLA Resolution</th><th>Auto-Assign</th><th>Active</th><th></th></tr></thead>
+				<thead><tr><th style="width:30px"></th><th>Title</th><th>SLA Response</th><th>SLA Resolution</th><th>Auto-Assign</th><th>Active</th><th></th></tr></thead>
 				<tbody>
 				<?php foreach ($categories as $c): ?>
-				<tr data-id="<?php echo $c->id; ?>">
+				<tr data-id="<?php echo $c->id; ?>" draggable="true">
+					<td><span class="icon-menu text-muted" style="cursor:grab;"></span></td>
 					<td><input type="text" class="form-control form-control-sm cat-field" data-field="title" value="<?php echo htmlspecialchars($c->title); ?>"></td>
 					<td><input type="number" class="form-control form-control-sm cat-field" data-field="sla_response_minutes" value="<?php echo $c->sla_response_minutes; ?>" style="width:80px"> min</td>
 					<td><input type="number" class="form-control form-control-sm cat-field" data-field="sla_resolution_minutes" value="<?php echo $c->sla_resolution_minutes; ?>" style="width:80px"> min</td>
@@ -122,5 +124,39 @@ document.addEventListener('DOMContentLoaded', function() {
 		});
 		tr.querySelector('input').focus();
 	});
+
+	// Drag-and-drop reorder
+	var tbody = document.querySelector('#cat-table tbody');
+	var dragRow = null;
+
+	tbody.addEventListener('dragstart', function(e) {
+		dragRow = e.target.closest('tr');
+		if (dragRow) dragRow.style.opacity = '0.5';
+	});
+	tbody.addEventListener('dragend', function() {
+		if (dragRow) dragRow.style.opacity = '';
+		dragRow = null;
+	});
+	tbody.addEventListener('dragover', function(e) {
+		e.preventDefault();
+		var target = e.target.closest('tr');
+		if (target && target !== dragRow) {
+			var rect = target.getBoundingClientRect();
+			if ((e.clientY - rect.top) > rect.height / 2) {
+				target.parentNode.insertBefore(dragRow, target.nextSibling);
+			} else {
+				target.parentNode.insertBefore(dragRow, target);
+			}
+		}
+	});
+	tbody.addEventListener('drop', function(e) {
+		e.preventDefault();
+		var ids = [];
+		tbody.querySelectorAll('tr[data-id]').forEach(function(r) { if (r.dataset.id !== '0') ids.push(r.dataset.id); });
+		var fd = new FormData();
+		fd.append('order', JSON.stringify(ids));
+		fd.append(token, '1');
+		fetch('<?php echo $reorderUrl; ?>', {method:'POST', body:fd, headers:{'X-Requested-With':'XMLHttpRequest'}});
+	});
 });
 </script>