drag/drop re-ordering fixed in ACP, #2463

public/less/admin/admin.less

@@ -260,3 +260,9 @@
 		display: none; /* not sure why I have to do this, but it only seems to show up on prod */
 	}
 }
+
+.table-reordering {
+	tr:hover {
+		cursor: move;
+	}
+}

public/src/admin/manage/categories.js

@@ -40,20 +40,23 @@ define('admin/manage/categories', [
 			return false;
 		}
 
-		function updateCategoryOrders() {
+		function updateCategoryOrders(evt, ui) {
-			var categories = $('.admin-categories #entry-container').children();
+			var categories = $(evt.target).children(),
-			for(var i = 0; i<categories.length; ++i) {
+				modified = {},
-				var input = $(categories[i]).find('input[data-name="order"]');
+				cid;
 
-				input.val(i+1).attr('data-value', i+1);
+			for(var i=0;i<categories.length;i++) {
-				modified(input);
+				cid = $(categories[i]).attr('data-cid');
+				modified[cid] = {
+					order: i+1
+				};
 			}
+
+			socket.emit('admin.categories.update', modified);
 		}
 
 		$('#entry-container').sortable({
-			stop: function(event, ui) {
+			stop: updateCategoryOrders,
-				updateCategoryOrders();
-			},
 			distance: 10
 		});
 

src/controllers/admin.js

@@ -119,6 +119,10 @@ function getStatsForSet(set, field, callback) {
 }
 
 adminController.categories.get = function(req, res, next) {
+
+};
+
+adminController.categories.getAll = function(req, res, next) {
 	var uid = req.user ? parseInt(req.user.uid, 10) : 0,
 		active = [],
 		disabled = [];

src/routes/admin.js

@@ -44,7 +44,8 @@ function addRoutes(router, middleware, controllers) {
 	router.get('/general/languages', controllers.admin.languages.get);
 	router.get('/general/sounds', controllers.admin.sounds.get);
 
-	router.get('/manage/categories', controllers.admin.categories.get);
+	router.get('/manage/categories', controllers.admin.categories.getAll);
+	router.get('/manage/categories/:category_id', controllers.admin.categories.get);
 
 	router.get('/manage/tags', controllers.admin.tags.get);
 

src/views/admin/manage/categories.tpl

@@ -4,7 +4,7 @@
 			<div class="panel-heading"><i class="fa fa-folder"></i> Categories</div>
 			<div class="panel-body">
 				<div class="row">
-					<table class="table table-striped table-hover">
+					<table class="table table-striped table-hover table-reordering">
 						<thead>
 							<tr>
 								<th></th>
@@ -12,6 +12,7 @@
 								<th>Description</th>
 								<th class="text-center">Topics</th>
 								<th class="text-center">Posts</th>
+								<th></th>
 							</tr>
 						</thead>
 						<tbody id="entry-container">
@@ -31,6 +32,7 @@
 								<td>{active.description}</td>
 								<td class="text-center">{active.topic_count}</td>
 								<td class="text-center">{active.post_count}</td>
+								<td><a href="./categories/{active.cid}" class="btn btn-default btn-block btn-xs">Edit</a></td>
 							</tr>
 							<!-- END active -->
 						</tbody>
@@ -55,7 +57,7 @@
 			<div class="panel-heading"><i class="fa fa-folder"></i> Categories</div>
 			<div class="panel-body">
 				<div class="row">
-					<table class="table table-striped table-hover">
+					<table class="table table-striped table-hover table-reordering">
 						<thead>
 							<tr>
 								<th></th>
@@ -63,6 +65,7 @@
 								<th>Description</th>
 								<th class="text-center">Topics</th>
 								<th class="text-center">Posts</th>
+								<th></th>
 							</tr>
 						</thead>
 						<tbody id="entry-container">
@@ -82,6 +85,7 @@
 								<td>{disabled.description}</td>
 								<td class="text-center">{disabled.topic_count}</td>
 								<td class="text-center">{disabled.post_count}</td>
+								<td><a href="./categories/{active.cid}" class="btn btn-default btn-block btn-xs">Edit</a></td>
 							</tr>
 							<!-- END disabled -->
 						</tbody>

src/views/admin/partials/categories/row.tpl

@@ -1,16 +0,0 @@
-							<tr data-cid="{cid}">
-								<td>
-									<span class="label" style="
-										<!-- IF backgroundImage -->background-image: url({backgroundImage});<!-- ENDIF backgroundImage -->
-										<!-- IF bgColor -->background-color: {bgColor};<!-- ENDIF bgColor -->
-										color: {color};
-										background-size:cover;
-									">
-										<i data-name="icon" value="{icon}" class="fa fa-fw {icon}"></i>
-									</span>
-								</td>
-								<td>{name}</td>
-								<td>{description}</td>
-								<td class="text-center">{topic_count}</td>
-								<td class="text-center">{post_count}</td>
-							</tr>