group join leave, and updating

public/css/admin.less

@@ -147,7 +147,7 @@
 		> ul {
 			padding-left: 0;
 
-			li {
+			> li {
 				list-style-type: none;
 				margin-bottom: 1em;
 				padding: 1em;
@@ -163,7 +163,7 @@
 		.members {
 			padding: 1em;
 
-			li {
+			li[data-uid] {
 				display: inline-block;
 				border: 1px solid rgb(200, 200, 200);
 				margin-right: 1em;
@@ -175,6 +175,11 @@
 				span {
 					padding: 0 1em;
 				}
+
+				&:hover {
+					.pointer;
+					background: rgba(192, 192, 192, 0.2);
+				}
 			}
 		}
 	}

public/src/forum/admin/groups.js

@@ -5,6 +5,9 @@ $(document).ready(function() {
 		createNameEl = $('#create-group-name'),
 		detailsModal = $('#group-details-modal'),
 		detailsSearch = detailsModal.find('#group-details-search'),
+		searchResults = detailsModal.find('#group-details-search-results'),
+		groupMembersEl = detailsModal.find('ul.current_members'),
+		detailsModalSave = detailsModal.find('.btn-primary'),
 		searchDelay = undefined,
 		listEl = $('#groups-list');
 
@@ -66,28 +69,31 @@ $(document).ready(function() {
 					var	formEl = detailsModal.find('form'),
 						nameEl = formEl.find('#change-group-name'),
 						descEl = formEl.find('#change-group-desc'),
-						membersEl = formEl.find('ul.members'),
 						memberIcon = document.createElement('li'),
 						numMembers = groupObj.members.length,
 						membersFrag = document.createDocumentFragment(),
 						memberIconImg, x;
 
-					console.log(groupObj);
 
 					nameEl.val(groupObj.name);
 					descEl.val(groupObj.description);
 
 					// Member list
-					memberIcon.innerHTML = '<img />';
+					memberIcon.innerHTML = '<img /><span></span>';
 					memberIconImg = memberIcon.querySelector('img');
+					memberIconLabel = memberIcon.querySelector('span');
 					if (numMembers > 0) {
 						for(x=0;x<numMembers;x++) {
 							memberIconImg.src = groupObj.members[x].picture;
+							memberIconLabel.innerHTML = groupObj.members[x].username;
+							memberIcon.setAttribute('data-uid', groupObj.members[x].uid);
 							membersFrag.appendChild(memberIcon.cloneNode(true));
 						}
-						membersEl.appendChild(membersFrag);
+						groupMembersEl.html('');
+						groupMembersEl[0].appendChild(membersFrag);
 					}
 
+					detailsModal.attr('data-gid', groupObj.gid);
 					detailsModal.modal('show');
 				});
 			break;
@@ -119,6 +125,7 @@ $(document).ready(function() {
 						foundUserImg.src = results[x].picture;
 						foundUserLabel.innerHTML = results[x].username;
 						foundUser.setAttribute('title', results[x].username);
+						foundUser.setAttribute('data-uid', results[x].uid);
 						resultsSlug.appendChild(foundUser.cloneNode(true));
 					}
 
@@ -128,4 +135,60 @@ $(document).ready(function() {
 			});
 		}, 200);
 	});
+
+	searchResults.on('click', 'li[data-uid]', function() {
+		var	userLabel = this,
+			uid = parseInt(this.getAttribute('data-uid')),
+			gid = detailsModal.attr('data-gid'),
+			members = [];
+
+		groupMembersEl.find('li[data-uid]').each(function() {
+			members.push(parseInt(this.getAttribute('data-uid')));
+		});
+
+		if (members.indexOf(uid) === -1) {
+			socket.emit('api:groups.join', {
+				gid: gid,
+				uid: uid
+			}, function(err, data) {
+				if (!err) {
+					groupMembersEl.append(userLabel.cloneNode(true));
+				}
+			});
+		}
+	});
+
+	groupMembersEl.on('click', 'li[data-uid]', function() {
+		var	uid = this.getAttribute('data-uid'),
+			gid = detailsModal.attr('data-gid');
+
+		socket.emit('api:groups.leave', {
+			gid: gid,
+			uid: uid
+		}, function(err, data) {
+			if (!err) {
+				groupMembersEl.find('li[data-uid="' + uid + '"]').remove();
+			}
+		});
+	});
+
+	detailsModalSave.on('click', function() {
+		var	formEl = detailsModal.find('form'),
+			nameEl = formEl.find('#change-group-name'),
+			descEl = formEl.find('#change-group-desc'),
+			gid = detailsModal.attr('data-gid');
+
+		socket.emit('api:groups.update', {
+			gid: gid,
+			values: {
+				name: nameEl.val(),
+				description: descEl.val()
+			}
+		}, function(err) {
+			if (!err) {
+				detailsModal.modal('hide');
+				ajaxify.go('admin/groups');
+			}
+		});
+	});
 });

public/templates/admin/groups.tpl

@@ -18,7 +18,7 @@
 				<div class="col-lg-4">
 					<ul class="pull-right members">
 					<!-- BEGIN members -->
-						<li title="{groups.members.username}"><img src="http://www.gravatar.com/avatar/e1565907855fffe8433c31671a49f177?size=128&default=identicon&rating=pg" /></li>
+						<li data-uid="{groups.members.uid}" title="{groups.members.username}"><img src="{groups.members.picture}" /></li>
 					<!-- END members -->
 					</ul>
 				</div>
@@ -79,7 +79,8 @@
 						</div>
 						<div class="form-group">
 							<label>Members</label>
-							<ul class="members" id="group-details-members"></ul>
+							<p>Click on a user to remove them from the group</p>
+							<ul class="members current_members" id="group-details-members"></ul>
 						</div>
 						<div class="form-group">
 							<label for="add-member">Add User to Group</label>

src/groups.js

@@ -76,6 +76,12 @@ var	async = require('async'),
 				} else callback(new Error('group-exists'))
 			});
 		},
+		update: function(gid, values, callback) {
+			RDB.exists('gid:' + gid, function(err, exists) {
+				if (!err && exists) RDB.hmset('gid:' + gid, values, callback);
+				else calback(new Error('gid-not-found'));
+			});
+		},
 		destroy: function(gid, callback) {
 			RDB.hset('gid:' + gid, 'deleted', '1', callback);
 		},

src/websockets.js

@@ -822,6 +822,20 @@ var SocketIO = require('socket.io').listen(global.server, {
 				callback(err ? err.message : null, groupObj || undefined);
 			});
 		});
+
+		socket.on('api:groups.join', function(data, callback) {
+			Groups.join(data.gid, data.uid, callback);
+		});
+
+		socket.on('api:groups.leave', function(data, callback) {
+			Groups.leave(data.gid, data.uid, callback);
+		});
+
+		socket.on('api:groups.update', function(data, callback) {
+			Groups.update(data.gid, data.values, function(err) {
+				callback(err ? err.message : null);
+			});
+		});
 	});
 
 }(SocketIO));