closes #2754

moved group edit from modal to its own page
added hidden/private to group edit in acp, they were only in the client
groups page
moved add users above member list

public/src/admin/manage/group.js

@@ -0,0 +1,144 @@
+"use strict";
+/*global define, templates, socket, ajaxify, app, admin, bootbox, utils, config */
+
+define('admin/manage/group', [
+	'iconSelect',
+	'admin/modules/colorpicker'
+], function(iconSelect, colorpicker) {
+	var	Groups = {};
+
+	Groups.init = function() {
+		var	groupDetailsSearch = $('#group-details-search'),
+			groupDetailsSearchResults = $('#group-details-search-results'),
+			groupMembersEl = $('ul.current_members'),
+			groupIcon = $('#group-icon'),
+			changeGroupUserTitle = $('#change-group-user-title'),
+			changeGroupLabelColor = $('#change-group-label-color'),
+			groupLabelPreview = $('#group-label-preview'),
+			searchDelay;
+
+
+		var groupName = ajaxify.variables.get('groupName');
+
+		changeGroupUserTitle.keyup(function() {
+			groupLabelPreview.text(changeGroupUserTitle.val());
+		});
+
+		changeGroupLabelColor.keyup(function() {
+			groupLabelPreview.css('background', changeGroupLabelColor.val() || '#000000');
+		});
+
+		groupDetailsSearch.on('keyup', function() {
+
+			if (searchDelay) {
+				clearTimeout(searchDelay);
+			}
+
+			searchDelay = setTimeout(function() {
+				var searchText = groupDetailsSearch.val(),
+					foundUser;
+
+				socket.emit('admin.user.search', {query: searchText}, function(err, results) {
+					if (!err && results && results.users.length > 0) {
+						var numResults = results.users.length, x;
+						if (numResults > 20) {
+							numResults = 20;
+						}
+
+						groupDetailsSearchResults.empty();
+						for (x = 0; x < numResults; x++) {
+							foundUser = $('<li />');
+							foundUser
+								.attr({title: results.users[x].username, 'data-uid': results.users[x].uid})
+								.append($('<img />').attr('src', results.users[x].picture))
+								.append($('<span />').html(results.users[x].username));
+
+							groupDetailsSearchResults.append(foundUser);
+						}
+					} else {
+						groupDetailsSearchResults.html('<li>No Users Found</li>');
+					}
+				});
+			}, 200);
+		});
+
+		groupDetailsSearchResults.on('click', 'li[data-uid]', function() {
+			var userLabel = $(this),
+				uid = parseInt(userLabel.attr('data-uid'), 10),
+				members = [];
+
+			groupMembersEl.find('li[data-uid]').each(function() {
+				members.push(parseInt($(this).attr('data-uid'), 10));
+			});
+
+			if (members.indexOf(uid) === -1) {
+				socket.emit('admin.groups.join', {
+					groupName: groupName,
+					uid: uid
+				}, function(err, data) {
+					if (!err) {
+						groupMembersEl.append(userLabel.clone(true));
+					}
+				});
+			}
+		});
+
+		groupMembersEl.on('click', 'li[data-uid]', function() {
+			var uid = $(this).attr('data-uid');
+
+			socket.emit('admin.groups.get', groupName, function(err, groupObj){
+				if (err) {
+					return app.alertError(err.message);
+				}
+
+				bootbox.confirm('Are you sure you want to remove this user?', function(confirm) {
+					if (!confirm) {
+						return;
+					}
+
+					socket.emit('admin.groups.leave', {
+						groupName: groupName,
+						uid: uid
+					}, function(err, data) {
+						if (err) {
+							return app.alertError(err.message);
+						}
+						groupMembersEl.find('li[data-uid="' + uid + '"]').remove();
+					});
+				});
+			});
+		});
+
+		$('#group-icon').on('click', function() {
+			iconSelect.init(groupIcon);
+		});
+
+		colorpicker.enable(changeGroupLabelColor, function(hsb, hex) {
+			groupLabelPreview.css('background-color', '#' + hex);
+		});
+
+		$('.save').on('click', function() {
+			socket.emit('admin.groups.update', {
+				groupName: groupName,
+				values: {
+					name: $('#change-group-name').val(),
+					userTitle: changeGroupUserTitle.val(),
+					description: $('#change-group-desc').val(),
+					icon: groupIcon.attr('value'),
+					labelColor: changeGroupLabelColor.val(),
+					private: $('#group-private').is(':checked'),
+					hidden: $('#group-hidden').is(':checked')
+				}
+			}, function(err) {
+				if (err) {
+					return app.alertError(err.message);
+				}
+				app.alertSuccess('Changes saved!');
+			});
+			return false;
+		});
+
+	};
+
+	return Groups;
+});

public/src/admin/manage/groups.js

@@ -2,30 +2,16 @@
 /*global define, templates, socket, ajaxify, app, admin, bootbox, utils, config */
 
 define('admin/manage/groups', [
-	'iconSelect',
-	'admin/modules/colorpicker',
 	'translator',
 	'components'
-], function(iconSelect, colorpicker, translator, components) {
+], function(translator, components) {
 	var	Groups = {};
 
 	Groups.init = function() {
 		var	createModal = $('#create-modal'),
 			createGroupName = $('#create-group-name'),
 			createModalGo = $('#create-modal-go'),
-			createModalError = $('#create-modal-error'),
+			createModalError = $('#create-modal-error');
-			groupDetailsModal = $('#group-details-modal'),
-			groupDetailsSearch = $('#group-details-search'),
-			groupDetailsSearchResults = $('#group-details-search-results'),
-			groupMembersEl = $('ul.current_members'),
-			detailsModalSave = $('#details-modal-save'),
-			groupIcon = $('#group-icon'),
-			changeGroupName = $('#change-group-name'),
-			changeGroupDesc = $('#change-group-desc'),
-			changeGroupUserTitle = $('#change-group-user-title'),
-			changeGroupLabelColor = $('#change-group-label-color'),
-			groupLabelPreview = $('#group-label-preview'),
-			searchDelay;
 
 		createModal.on('keypress', function(e) {
 			if (e.keyCode === 13) {
@@ -67,24 +53,6 @@ define('admin/manage/groups', [
 			});
 		});
 
-		groupDetailsModal.find('form').keypress(function(e) {
-			if (e.keyCode === 13) {
-				detailsModalSave.click();
-			}
-		});
-
-		changeGroupUserTitle.keydown(function() {
-			setTimeout(function() {
-				groupLabelPreview.text(changeGroupUserTitle.val());
-			}, 0);
-		});
-
-		changeGroupLabelColor.keydown(function() {
-			setTimeout(function() {
-				groupLabelPreview.css('background', changeGroupLabelColor.val() || '#000000');
-			}, 0);
-		});
-
 		$('.groups-list').on('click', 'button[data-action]', function() {
 			var el = $(this),
 				action = el.attr('data-action'),
@@ -106,139 +74,9 @@ define('admin/manage/groups', [
 					}
 				});
 				break;
-			case 'members':
-				socket.emit('admin.groups.get', groupName, function(err, groupObj) {
-					changeGroupName.val(groupObj.name).prop('readonly', groupObj.system);
-					changeGroupDesc.val(groupObj.description);
-					changeGroupUserTitle.val(groupObj.userTitle);
-					groupIcon.attr('class', 'fa fa-2x ' + groupObj.icon).attr('value', groupObj.icon);
-					changeGroupLabelColor.val(groupObj.labelColor);
-					groupLabelPreview.css('background', groupObj.labelColor || '#000000').text(groupObj.userTitle);
-					groupMembersEl.empty();
-
-					if (groupObj.members.length > 0) {
-						for (var x = 0; x < groupObj.members.length; x++) {
-							var memberIcon = $('<li />')
-								.attr('data-uid', groupObj.members[x].uid)
-								.append($('<img />').attr('src', groupObj.members[x].picture))
-								.append($('<span />').html(groupObj.members[x].username));
-							groupMembersEl.append(memberIcon);
-						}
-					}
-
-					groupDetailsModal.attr('data-groupname', groupObj.name);
-					groupDetailsModal.modal('show');
-				});
-				break;
 			}
 		});
 
-		groupDetailsSearch.on('keyup', function() {
-
-			if (searchDelay) {
-				clearTimeout(searchDelay);
-			}
-
-			searchDelay = setTimeout(function() {
-				var searchText = groupDetailsSearch.val(),
-					foundUser;
-
-				socket.emit('admin.user.search', {query: searchText}, function(err, results) {
-					if (!err && results && results.users.length > 0) {
-						var numResults = results.users.length, x;
-						if (numResults > 20) {
-							numResults = 20;
-						}
-
-						groupDetailsSearchResults.empty();
-						for (x = 0; x < numResults; x++) {
-							foundUser = $('<li />');
-							foundUser
-								.attr({title: results.users[x].username, 'data-uid': results.users[x].uid})
-								.append($('<img />').attr('src', results.users[x].picture))
-								.append($('<span />').html(results.users[x].username));
-
-							groupDetailsSearchResults.append(foundUser);
-						}
-					} else {
-						groupDetailsSearchResults.html('<li>No Users Found</li>');
-					}
-				});
-			}, 200);
-		});
-
-		groupDetailsSearchResults.on('click', 'li[data-uid]', function() {
-			var userLabel = $(this),
-				uid = parseInt(userLabel.attr('data-uid'), 10),
-				groupName = groupDetailsModal.attr('data-groupname'),
-				members = [];
-
-			groupMembersEl.find('li[data-uid]').each(function() {
-				members.push(parseInt($(this).attr('data-uid'), 10));
-			});
-
-			if (members.indexOf(uid) === -1) {
-				socket.emit('admin.groups.join', {
-					groupName: groupName,
-					uid: uid
-				}, function(err, data) {
-					if (!err) {
-						groupMembersEl.append(userLabel.clone(true));
-					}
-				});
-			}
-		});
-
-		groupMembersEl.on('click', 'li[data-uid]', function() {
-			var uid = $(this).attr('data-uid'),
-				groupName = groupDetailsModal.attr('data-groupname');
-
-			socket.emit('admin.groups.get', groupName, function(err, groupObj){
-				if (!err){
-					bootbox.confirm('Are you sure you want to remove this user?', function(confirm) {
-						if (confirm){
-							socket.emit('admin.groups.leave', {
-								groupName: groupName,
-								uid: uid
-							}, function(err, data) {
-								if (!err) {
-									groupMembersEl.find('li[data-uid="' + uid + '"]').remove();
-								}
-							});
-						}
-					});
-				}
-			});
-		});
-
-		$('#change-group-icon').on('click', function() {
-			iconSelect.init(groupIcon);
-		});
-
-		colorpicker.enable(changeGroupLabelColor, function(hsb, hex) {
-			groupLabelPreview.css('background-color', '#' + hex);
-		});
-
-		detailsModalSave.on('click', function() {
-			socket.emit('admin.groups.update', {
-				groupName: groupDetailsModal.attr('data-groupname'),
-				values: {
-					name: changeGroupName.val(),
-					userTitle: changeGroupUserTitle.val(),
-					description: changeGroupDesc.val(),
-					icon: groupIcon.attr('value'),
-					labelColor: changeGroupLabelColor.val()
-				}
-			}, function(err) {
-				if (!err) {
-					groupDetailsModal.on('hidden.bs.modal', function() {
-						ajaxify.go('admin/manage/groups');
-					});
-					groupDetailsModal.modal('hide');
-				}
-			});
-		});
-
 	};
 
 	return Groups;

src/controllers/admin.js

@@ -15,7 +15,6 @@ var async = require('async'),
 	events = require('../events'),
 	languages = require('../languages'),
 	plugins = require('../plugins'),
-	groups = require('../groups'),
 	validator = require('validator');
 
 
@@ -24,7 +23,7 @@ var adminController = {
 	tags: {},
 	flags: {},
 	topics: {},
-	groups: {},
+	groups: require('./admin/groups'),
 	appearance: {},
 	extend: {
 		widgets: {}
@@ -376,23 +375,6 @@ adminController.extend.rewards = function(req, res, next) {
 	});
 };
 
-adminController.groups.get = function(req, res, next) {
-	groups.getGroupsFromSet('groups:createtime', req.uid, 0, -1, function(err, groups) {
-		if (err) {
-			return next(err);
-		}
-
-		groups = groups.filter(function(group) {
-			return group && group.name.indexOf(':privileges:') === -1 && group.name !== 'registered-users';
-		});
-
-		res.render('admin/manage/groups', {
-			groups: groups,
-			yourid: req.user.uid
-		});
-	});
-};
-
 adminController.themes.get = function(req, res, next) {
 	var themeDir = path.join(__dirname, '../../node_modules/' + req.params.theme);
 	fs.exists(themeDir, function(exists) {

src/controllers/admin/groups.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var async = require('async'),
+	groups = require('../../groups'),
+	meta = require('../../meta'),
+	helpers = require('../helpers');
+
+
+var groupsController = {};
+
+
+groupsController.list = function(req, res, next) {
+	groups.getGroupsFromSet('groups:createtime', req.uid, 0, -1, function(err, groups) {
+		if (err) {
+			return next(err);
+		}
+
+		groups = groups.filter(function(group) {
+			return group && group.name.indexOf(':privileges:') === -1 && group.name !== 'registered-users';
+		});
+
+		res.render('admin/manage/groups', {
+			groups: groups,
+			yourid: req.user.uid
+		});
+	});
+};
+
+groupsController.get = function(req, res, next) {
+	var groupName = res.locals.groupName;
+	async.waterfall([
+		function(next){
+			groups.exists(groupName, next);
+		},
+		function(exists, next) {
+			if (!exists) {
+				helpers.notFound(req, res);
+			}
+			groups.get(groupName, {uid: req.uid}, next);
+		}
+	], function(err, group) {
+		if (err) {
+			return next(err);
+		}
+		res.render('admin/manage/group', {group: group});
+	});
+};
+
+module.exports = groupsController;

src/groups.js

@@ -211,7 +211,7 @@ var async = require('async'),
 		if (group) {
 			group.name = validator.escape(group.name);
 			group.description = validator.escape(group.description);
-			group.userTitle = validator.escape(group.userTitle);
+			group.userTitle = validator.escape(group.userTitle) || group.name;
 		}
 	};
 

src/routes/admin.js

@@ -59,7 +59,8 @@ function addRoutes(router, middleware, controllers) {
 	router.get('/manage/users/sort-reputation', controllers.admin.users.sortByReputation);
 	router.get('/manage/users/banned', controllers.admin.users.banned);
 
-	router.get('/manage/groups', controllers.admin.groups.get);
+	router.get('/manage/groups', controllers.admin.groups.list);
+	router.get('/manage/groups/:slug', middleware.exposeGroupName, controllers.admin.groups.get);
 
 	router.get('/settings/:term?', controllers.admin.settings.get);
 

src/socket.io/admin/groups.js

@@ -38,15 +38,12 @@ Groups.leave = function(socket, data, callback) {
 	groups.leave(data.groupName, data.uid, callback);
 };
 
-// Possibly remove this and call SocketGroups.update instead
 Groups.update = function(socket, data, callback) {
-	if(!data) {
+	if (!data) {
 		return callback(new Error('[[error:invalid-data]]'));
 	}
 
-	groups.update(data.groupName, data.values, function(err) {
+	groups.update(data.groupName, data.values, callback);
-		callback(err ? err.message : null);
-	});
 };
 
 module.exports = Groups;

src/views/admin/manage/group.tpl

@@ -0,0 +1,126 @@
+<div class="row">
+	<form role="form" class="group" data-groupname="{group.name}">
+		<div class="col-md-9">
+			<div class="panel panel-default">
+				<div class="panel-heading"><i class="fa fa-folder"></i> Group Settings</div>
+				<div class="panel-body group-settings-form">
+
+
+				<fieldset>
+					<div class="col-xs-12">
+						<label for="change-group-name">Name</label>
+						<input type="text" class="form-control" id="change-group-name" placeholder="Group Name" value="{group.name}" <!-- IF group.system -->readonly<!-- ENDIF group.system -->/>
+					</div>
+				</fieldset>
+
+				<fieldset>
+					<div class="col-xs-12">
+						<label for="change-group-desc">Description</label>
+						<input type="text" class="form-control" id="change-group-desc" placeholder="A short description about your group" value="{group.description}" />
+					</div>
+				</fieldset>
+
+				<fieldset>
+					<div class="col-xs-12">
+						<label for="change-group-user-title">Title of Members</label>
+						<input type="text" class="form-control" id="change-group-user-title" placeholder="The title of users if they are a member of this group" value="{group.userTitle}"/>
+					</div>
+				</fieldset>
+
+				<fieldset>
+					<div class="col-xs-12">
+						<label for="change-group-icon">Group Icon</label><br/>
+						<i id="group-icon" class="fa fa-2x <!-- IF group.icon -->{group.icon}<!-- ELSE -->fa-shield<!-- ENDIF group.icon -->" value="{group.icon}"></i>
+					</div>
+				</fieldset>
+
+				<fieldset>
+					<div class="col-xs-12">
+						<label for="change-group-label-color">Group Label Color</label>
+						<span id="group-label-preview" class="label label-default" style="background:<!-- IF group.labelColor -->{group.labelColor}<!-- ELSE -->#000000<!-- ENDIF group.labelColor -->;">{group.userTitle}</span>
+						<input id="change-group-label-color" placeholder="#0059b2" data-name="bgColor" value="{group.labelColor}" class="form-control" />
+					</div>
+				</fieldset>
+
+				<fieldset>
+					<div class="col-xs-12">
+						<div class="checkbox">
+							<label>
+								<input id="group-private" name="private" type="checkbox"<!-- IF group.private --> checked<!-- ENDIF group.private-->> <strong>[[groups:details.private]]</strong>
+								<p class="help-block">
+									[[groups:details.private_help]]
+								</p>
+							</label>
+						</div>
+					</div>
+				</fieldset>
+
+				<fieldset>
+					<div class="col-xs-12">
+						<div class="checkbox">
+							<label>
+								<input id="group-hidden" name="hidden" type="checkbox"<!-- IF group.hidden --> checked<!-- ENDIF group.hidden-->> <strong>[[groups:details.hidden]]</strong>
+								<p class="help-block">
+									[[groups:details.hidden_help]]
+								</p>
+							</label>
+						</div>
+					</div>
+				</fieldset>
+
+				<fieldset>
+					<div class="col-xs-12">
+						<label for="add-member">Add User to Group</label>
+						<input type="text" class="form-control" id="group-details-search" placeholder="Search Users" />
+						<ul class="members user-list" id="group-details-search-results"></ul>
+					</div>
+				</fieldset>
+
+				<fieldset>
+					<div class="col-xs-12">
+						<label>Members</label>
+						<p>Click on a user to remove them from the group</p>
+						<ul class="members current_members user-list">
+							<!-- BEGIN group.members -->
+								<li data-uid="{group.members.uid}">
+									<img src="{group.members.picture}" />
+									<span>{group.members.username}</span>
+								</li>
+							<!-- END group.members -->
+						</ul>
+					</div>
+				</fieldset>
+
+
+			</div>
+		</div>
+
+		<div class="col-md-3 options acp-sidebar">
+			<div class="panel panel-default">
+				<div class="panel-heading">Groups Control Panel</div>
+				<div class="panel-body">
+					<div class="btn-group btn-group-justified">
+						<div class="btn-group">
+							<button class="btn btn-primary save">Save</button>
+						</div>
+						<div class="btn-group">
+							<button class="btn btn-default revert">Revert</button>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+
+	</form>
+</div>
+
+<div id="icons" style="display:none;">
+	<div class="icon-container">
+		<div class="row fa-icons">
+			<i class="fa fa-doesnt-exist"></i>
+			<!-- IMPORT partials/fontawesome.tpl -->
+		</div>
+	</div>
+</div>
+
+<input type="hidden" template-variable="groupName" value="{group.name}" />

src/views/admin/manage/groups.tpl

@@ -2,7 +2,7 @@
 	<div class="col-lg-9">
 		<div class="panel panel-default">
 			<div class="panel-heading"><i class="fa fa-group"></i> Groups List</div>
-			<div class="panel-body">	
+			<div class="panel-body">
 				<table class="table table-striped groups-list">
 					<tr>
 						<th>Group Name</th>
@@ -18,7 +18,7 @@
 						</td>
 						<td>
 							<div class="btn-group pull-right">
-								<button class="btn btn-default btn-xs" data-action="members"><i class="fa fa-edit"></i> Edit</button>
+								<a href="{config.relative_path}/admin/manage/groups/{groups.slug}" class="btn btn-default btn-xs"><i class="fa fa-edit"></i> Edit</a>
 								<!-- IF !groups.system -->
 								<button class="btn btn-danger btn-xs" data-action="delete"><i class="fa fa-times"></i></button>
 								<!-- ENDIF !groups.system -->
@@ -27,7 +27,7 @@
 						</td>
 					</tr>
 					<!-- END groups -->
-				</table>				
+				</table>
 			</div>
 		</div>
 	</div>
@@ -43,8 +43,6 @@
 		</div>
 	</div>
 
-
-
 	<div class="modal fade" id="create-modal">
 		<div class="modal-dialog">
 			<div class="modal-content">
@@ -73,65 +71,8 @@
 		</div>
 	</div>
 
-	<div class="modal fade" id="group-details-modal">
-		<div class="modal-dialog">
-			<div class="modal-content">
-				<div class="modal-header">
-					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-					<h4 class="modal-title">Manage Group</h4>
-				</div>
-				<div class="modal-body">
-					<div class="alert alert-danger hide" id="create-modal-error"></div>
-					<form>
-						<div class="form-group">
-							<label for="change-group-name">Group Name</label>
-							<input type="text" class="form-control" id="change-group-name" placeholder="Group Name" />
-						</div>
-						<div class="form-group">
-							<label for="change-group-desc">Description</label>
-							<input type="text" class="form-control" id="change-group-desc" placeholder="A short description about your group" />
-						</div>
-						<div class="form-group">
-							<label for="change-group-user-title">Title of Members</label>
-							<input type="text" class="form-control" id="change-group-user-title" placeholder="The title of users if they are a member of this group" />
-						</div>
-						<div class="form-group">
-							<label for="change-group-icon">Group Icon</label><br/>
-							<i id="group-icon" class="fa fa-shield fa-2x"></i>
-							<button type="button" class="btn btn-default btn-sm" id="change-group-icon" placeholder="">Change Icon</button>
-						</div>
-						<div class="form-group">
-							<label for="change-group-label-color">Group Label Color</label>
-							<span id="group-label-preview" class="label label-default"></span>
-							<input id="change-group-label-color" placeholder="#0059b2" data-name="bgColor" value="" class="form-control" />
-						</div>
-						<div class="form-group">
-							<label>Members</label>
-							<p>Click on a user to remove them from the group</p>
-							<ul class="members current_members user-list"></ul>
-						</div>
-						<div class="form-group">
-							<label for="add-member">Add User to Group</label>
-							<input type="text" class="form-control" id="group-details-search" placeholder="Search Users" />
-							<ul class="members user-list" id="group-details-search-results"></ul>
-						</div>
-					</form>
-				</div>
-				<div class="modal-footer">
-					<button type="button" class="btn btn-primary" id="details-modal-save" data-dismiss="modal">Save</button>
-				</div>
-			</div>
-		</div>
-	</div>
 </div>
 
 <input type="hidden" template-variable="yourid" value="{yourid}" />
 
-<div id="icons" style="display:none;">
+
-	<div class="icon-container">
-		<div class="row fa-icons">
-			<i class="fa fa-doesnt-exist"></i>
-			<!-- IMPORT partials/fontawesome.tpl -->
-		</div>
-	</div>
-</div>