categories admin basic features completed - name, description, icon selector + background color

public/css/admin.less

@@ -9,18 +9,12 @@
 		width: 800px;
 	}
 
-	.admin-categories {
-		form {
-			margin: 0 0 0px;
-		}
-	}
-
 	.entry-row {
 		border-radius: 10px;
 		margin-bottom: 10px;
 		padding: 10px;
 		cursor: move;
-		width: 555px;
+		width: 695px;
 	}
 
 	input.description {
@@ -41,6 +35,10 @@
 			border-radius: 5px;
 			margin-top: -8px;	
 		}
+		
+		.category_description {
+			width: 300px;
+		}
 
 		select {
 			border: 0;

public/templates/admin/categories.tpl

@@ -15,23 +15,17 @@
 		<li data-cid="{categories.cid}" class="entry-row {categories.blockclass}">
 			<form class="form-inline">
 				<div class="icon">
-					<i onclick="select_icon(this); modified(this);" class="{categories.icon} icon-2x"></i>
+					<i data-name="icon" value="{categories.icon}" class="{categories.icon} icon-2x"></i>
 				</div>
-				<input placeholder="Category Name" value="{categories.name}" onchange="modified(this);" class="input-medium"></input>
-				<select class="blockclass input-medium" data-value="{categories.blockclass}" onchange="update_blockclass(this); modified(this);">
+				<input placeholder="Category Name" data-name="name" value="{categories.name}" class="category_name input-medium"></input>
+				<select class="blockclass input-medium" data-name="blockclass" data-value="{categories.blockclass}">
 					<option value="category-purple">category-purple</option>
 					<option value="category-darkblue">category-darkblue</option>
 					<option value="category-blue">category-blue</option>
 					<option value="category-darkgreen">category-darkgreen</option>
 					<option value="category-orange">category-orange</option>
 				</select>
-				<!--<input value="{categories.icon}" class="input-medium" onchange="update_icon(this);"></input>-->
-				<input onchange="modified(this);" placeholder="Category Description" value="{categories.description}" class="input-medium description"></input>
-				<!--<a target="_blank" href="../category/{categories.slug}">category/{categories.slug}</a>-->
-
-				<!--<div style="float: right">
-					<button class="btn btn-large btn-inverse">Save</button>
-				</div>-->
+				<input data-name="description" placeholder="Category Description" value="{categories.description}" class="category_description input-medium description"></input>
 			</form>
 		</li>
 
@@ -45,10 +39,18 @@
 
 <script type="text/javascript">
 
-var modified_catgories = {};
+var modified_categories = {};
 
 function modified(el) {
+	var cid = $(el).parents('li').attr('data-cid');
+
+	modified_categories[cid] = modified_categories[cid] || {};
+	modified_categories[cid][el.getAttribute('data-name')] = el.value;
+}
 
+function save() {
+	socket.emit('api:admin.categories.update', modified_categories);
+	modified_categories = {};
 }
 
 function select_icon(el) {
@@ -57,27 +59,24 @@ function select_icon(el) {
 	jQuery('#icons .' + selected).parent().addClass('selected');
 
 
-
 	bootbox.confirm('<h2>Select an icon.</h2>' + document.getElementById('icons').innerHTML, function(confirm) {
 		if (confirm) {
 			var iconClass = jQuery('.bootbox .selected').children(':first').attr('class');
-			el.className = iconClass + ' icon-2x';
+			el.className = iconClass + ' icon icon-2x';
+			el.value = iconClass;
 		}
 	});
 
 	jQuery('.bootbox .span3').on('click', function() {
 		jQuery('.bootbox .selected').removeClass('selected');
 		jQuery(this).addClass('selected');
-	})
+	});
 }
 
 
 function update_blockclass(el) {
 	el.parentNode.parentNode.className = 'entry-row ' + el.value;
 }
-function update_icon(el) {
-	jQuery(el.parentNode.parentNode);
-}
 
 jQuery('#entry-container').sortable();
 jQuery('.blockclass').each(function() {
@@ -98,7 +97,19 @@ jQuery('.blockclass').each(function() {
 				jQuery(this.parentNode).addClass('active');
 				return false;
 			}
-		})
+		});
+
+		jQuery('#save').on('click', save);
+
+		jQuery('.icon').on('click', function(ev) {
+			select_icon(ev.target);
+		});
+
+		jQuery('.blockclass').on('change', update_blockclass);
+
+		jQuery('.category_name, .category_description, .blockclass').on('change', function(ev) {
+			modified(ev.target);
+		});
 	});
 	
 }());

src/admin/categories.js

@@ -24,8 +24,45 @@ var	RDB = require('./../redis.js'),
 		});
 	};
 
-	CategoriesAdmin.edit = function(data, callback) {
-		// just a reminder to self that name + slugs are stored into topics data as well.
+	CategoriesAdmin.update = function(modified, socket) {
+		var updated = [];
+
+		for (var cid in modified) {
+			var category = modified[cid];
+
+			for (var key in category) {
+				RDB.set('cid:' + cid + ':' + key, category[key]);
+
+				if (key == 'name') {
+					// reset slugs if name is updated
+					var slug = cid + '/' + utils.slugify(category[key]);
+					RDB.set('cid:' + cid + ':slug', slug);
+					RDB.set('category:slug:' + slug + ':cid', cid);
+
+					RDB.smembers('categories:' + cid + ':tid', function(err, tids) {
+						var pipe = RDB.multi();
+
+						for (var tid in tids) {
+							pipe.set(schema.topics(tid).category_name, category[key]);
+							pipe.set(schema.topics(tid).category_slug, slug);
+						}
+						pipe.exec();
+					});
+					
+				}
+			}
+
+			updated.push(cid);
+		}
+
+		
+
+		socket.emit('event:alert', {
+			title: 'Updated Categories',
+			message: 'Category IDs ' + updated.join(', ') + ' was successfully updated.',
+			type: 'success',
+			timeout: 2000
+		});
 	};
 
 }(exports));

src/websockets.js

@@ -12,7 +12,10 @@ var SocketIO = require('socket.io').listen(global.server, { log:false }),
 	threadTools = require('./threadTools.js'),
 	postTools = require('./postTools.js'),
 	meta = require('./meta.js'),
-	async = require('async');
+	async = require('async'),
+	admin = {
+		'categories': require('./admin/categories.js')
+	};
 	
 (function(io) {
 	var	users = {},
@@ -405,6 +408,10 @@ var SocketIO = require('socket.io').listen(global.server, { log:false }),
 				socket.emit('api:admin.topics.getMore', JSON.stringify(topics));
 			});
 		});
+
+		socket.on('api:admin.categories.update', function(data) {
+			admin.categories.update(data, socket);
+		})
 	});
 	
 }(SocketIO));