category enable/disabled #2463

public/src/admin/manage/categories.js

@@ -9,6 +9,8 @@ define('admin/manage/categories', [
 	var	Categories = {};
 
 	Categories.init = function() {
+		var bothEl = $('#active-categories, #disabled-categories');
+
 		var modified_categories = {};
 
 		function modified(el) {
@@ -55,9 +57,29 @@ define('admin/manage/categories', [
 			socket.emit('admin.categories.update', modified);
 		}
 
-		$('#entry-container').sortable({
+		bothEl.sortable({
 			stop: updateCategoryOrders,
-			distance: 10
+			distance: 15
+		});
+
+		// Category enable/disable
+		bothEl.on('click', '[data-action="toggle"]', function(ev) {
+			var btnEl = $(this),
+				cid = btnEl.parents('tr').attr('data-cid'),
+				disabled = btnEl.attr('data-disabled') === 'false' ? '1' : '0',
+				payload = {};
+
+			payload[cid] = {
+				disabled: disabled
+			};
+
+			socket.emit('admin.categories.update', payload, function(err, result) {
+				if (err) {
+					return app.alertError(err.message);
+				} else {
+					ajaxify.refresh();
+				}
+			});
 		});
 
 		$('.blockclass, .admin-categories form select').each(function() {
@@ -76,7 +98,7 @@ define('admin/manage/categories', [
 				icon: $('#new-category-modal i').attr('value'),
 				bgColor: '#0059b2',
 				color: '#fff',
-				order: $('.admin-categories #entry-container').children().length + 1
+				order: $('#disabled-categories').children().length + 1
 			};
 
 			socket.emit('admin.categories.create', category, function(err, data) {
@@ -145,7 +167,7 @@ define('admin/manage/categories', [
 			$('#addNew').on('click', showCreateCategoryModal);
 			$('#create-category-btn').on('click', createNewCategory);
 
-			$('#entry-container, #new-category-modal').on('click', '.icon', function(ev) {
+			$('#active-categories, #disabled-categories, #new-category-modal').on('click', '.icon', function(ev) {
 				iconSelect.init($(this).find('i'), modified);
 			});
 
@@ -153,20 +175,6 @@ define('admin/manage/categories', [
 				modified(ev.target);
 			});
 
-			$('.dropdown').on('click', '[data-disabled]', function(ev) {
-				var btn = $(this),
-					categoryRow = btn.parents('li'),
-					cid = categoryRow.attr('data-cid'),
-					disabled = btn.attr('data-disabled') === 'false' ? '1' : '0';
-
-				categoryRow.remove();
-				modified_categories[cid] = modified_categories[cid] || {};
-				modified_categories[cid].disabled = disabled;
-
-				save();
-				return false;
-			});
-
 			// Colour Picker
 			$('[data-name="bgColor"], [data-name="color"]').each(enableColorPicker);
 

src/views/admin/manage/categories.tpl

@@ -15,7 +15,7 @@
 								<th></th>
 							</tr>
 						</thead>
-						<tbody id="entry-container">
+						<tbody id="active-categories">
 							<!-- BEGIN active -->
 							<tr data-cid="{active.cid}">
 								<td>
@@ -32,7 +32,12 @@
 								<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>
+								<td>
+									<div class="btn-group">
+										<a href="./categories/{active.cid}" class="btn btn-default btn-xs">Edit</a>
+										<button data-action="toggle" data-disabled="{active.disabled}" class="btn btn-default btn-xs">Disable</button>
+									</div>
+								</td>
 							</tr>
 							<!-- END active -->
 						</tbody>
@@ -68,7 +73,7 @@
 								<th></th>
 							</tr>
 						</thead>
-						<tbody id="entry-container">
+						<tbody id="disabled-categories">
 							<!-- BEGIN disabled -->
 							<tr data-cid="{disabled.cid}">
 								<td>
@@ -85,7 +90,12 @@
 								<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>
+								<td>
+									<div class="btn-group">
+										<a href="./categories/{disabled.cid}" class="btn btn-default btn-xs">Edit</a>
+										<button data-action="toggle" data-disabled="{disabled.disabled}" class="btn btn-default btn-xs">Enable</button>
+									</div>
+								</td>
 							</tr>
 							<!-- END disabled -->
 						</tbody>