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 listv1.18.x
barisusakli
10 years ago
parent
1d72a8f0ee
commit
38b838d462
@ -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;
|
||||
});
|
||||
@ -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;
|
||||
@ -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}" />
|
||||
Loading…
Reference in New Issue