Skip to content

[stable10] Users page lazy multiselect group dropdowns #1174

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nickvergessen merged 1 commit into from
Aug 30, 2016
Merged

[stable10] Users page lazy multiselect group dropdowns #1174

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 29 additions & 23 deletions core/js/multiselect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
'onuncheck':false,
'minWidth': 'default;'
};
var slideDuration = 200;
var slideDuration = 0;
$(this).attr('data-msid', multiSelectId);
$.extend(settings,options);
$.each(this.children(),function(i,option) {
Expand Down Expand Up @@ -75,6 +75,26 @@

var self = this;
self.menuDirection = 'down';

function closeDropDown() {
if(!button.parent().data('preventHide')) {
// How can I save the effect in a var?
if(self.menuDirection === 'down') {
button.parent().children('ul').slideUp(slideDuration,function() {
button.parent().children('ul').remove();
button.removeClass('active down');
$(self).trigger($.Event('dropdownclosed', settings));
});
} else {
button.parent().children('ul').fadeOut(slideDuration,function() {
button.parent().children('ul').remove();
button.removeClass('active up');
$(self).trigger($.Event('dropdownclosed', settings));
});
}
}
}

button.click(function(event){

var button=$(this);
Expand All @@ -83,21 +103,20 @@
button.parent().children('ul').slideUp(slideDuration,function() {
button.parent().children('ul').remove();
button.removeClass('active down');
$(self).trigger($.Event('dropdownclosed', settings));
});
} else {
button.parent().children('ul').fadeOut(slideDuration,function() {
button.parent().children('ul').remove();
button.removeClass('active up');
$(self).trigger($.Event('dropdownclosed', settings));
});
}
return;
}
// tell other lists to shut themselves
var lists=$('ul.multiselectoptions');
lists.slideUp(slideDuration,function(){
lists.remove();
$('div.multiselect').removeClass('active');
button.addClass('active');
});
lists.trigger($.Event('shut'));
button.addClass('active');
event.stopPropagation();
var options=$(this).parent().next().children();
Expand Down Expand Up @@ -309,29 +328,16 @@
list.detach().insertBefore($(this));
list.addClass('up');
button.addClass('up');
list.fadeIn();
list.show();
self.menuDirection = 'up';
}
list.click(function(event) {
event.stopPropagation();
});
list.one('shut', closeDropDown);
});
$(window).click(function() {
if(!button.parent().data('preventHide')) {
// How can I save the effect in a var?
if(self.menuDirection === 'down') {
button.parent().children('ul').slideUp(slideDuration,function() {
button.parent().children('ul').remove();
button.removeClass('active down');
});
} else {
button.parent().children('ul').fadeOut(slideDuration,function() {
button.parent().children('ul').remove();
button.removeClass('active up');
});
}
}
});

$(window).click(closeDropDown);

return span;
};
Expand Down
9 changes: 9 additions & 0 deletions settings/css/settings.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,15 @@ span.usersLastLoginTooltip { white-space: nowrap; }
top: 3px;
}

#newuser .groups {
display: inline;
}

#newuser .groupsListContainer.hidden,
#userlist .groupsListContainer.hidden {
display: none;
}

tr:hover>td.password>span, tr:hover>td.displayName>span { margin:0; cursor:pointer; }
tr:hover>td.remove>a, tr:hover>td.password>img,tr:hover>td.displayName>img, tr:hover>td.quota>img { visibility:visible; cursor:pointer; }
td.remove {
Expand Down
4 changes: 0 additions & 4 deletions settings/js/users/groups.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,10 +136,6 @@ GroupList = {
var addedGroup = result.groupname;
UserList.availableGroups = $.unique($.merge(UserList.availableGroups, [addedGroup]));
GroupList.addGroup(result.groupname);

$('.groupsselect, .subadminsselect')
.append($('<option>', { value: result.groupname })
.text(result.groupname));
}
GroupList.toggleAddGroup();
}).fail(function(result) {
Expand Down
174 changes: 96 additions & 78 deletions settings/js/users/users.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,6 @@ var UserList = {
var $tr = $userListBody.find('tr:first-child').clone();
// this removes just the `display:none` of the template row
$tr.removeAttr('style');
var subAdminsEl;
var subAdminSelect;
var groupsSelect;

/**
* Avatar or placeholder
Expand All @@ -86,32 +83,17 @@ var UserList = {
$tr.find('td.mailAddress > .action').tooltip({placement: 'top'});
$tr.find('td.password > .action').tooltip({placement: 'top'});


/**
* groups and subadmins
*/
// make them look like the multiselect buttons
// until they get time to really get initialized
groupsSelect = $('<select multiple="multiple" class="groupsselect multiselect button" data-placehoder="Groups" title="' + t('settings', 'no group') + '"></select>')
.data('username', user.name)
.data('user-groups', user.groups);
if ($tr.find('td.subadmins').length > 0) {
subAdminSelect = $('<select multiple="multiple" class="subadminsselect multiselect button" data-placehoder="subadmins" title="' + t('settings', 'no group') + '">')
.data('username', user.name)
.data('user-groups', user.groups)
.data('subadmin', user.subadmin);
$tr.find('td.subadmins').empty();
}
$.each(this.availableGroups, function (i, group) {
groupsSelect.append($('<option value="' + escapeHTML(group) + '">' + escapeHTML(group) + '</option>'));
if (typeof subAdminSelect !== 'undefined' && group !== 'admin') {
subAdminSelect.append($('<option value="' + escapeHTML(group) + '">' + escapeHTML(group) + '</option>'));
}
});
$tr.find('td.groups').empty().append(groupsSelect);
subAdminsEl = $tr.find('td.subadmins');
if (subAdminsEl.length > 0) {
subAdminsEl.append(subAdminSelect);
}
var $tdGroups = $tr.find('td.groups');
this._updateGroupListLabel($tdGroups, user.groups);
$tdGroups.find('.action').tooltip({placement: 'top'});

var $tdSubadmins = $tr.find('td.subadmins');
this._updateGroupListLabel($tdSubadmins, user.subadmin);
$tdSubadmins.find('.action').tooltip({placement: 'top'});

/**
* remove action
Expand Down Expand Up @@ -198,10 +180,6 @@ var UserList = {
// defer init so the user first sees the list appear more quickly
window.setTimeout(function(){
$quotaSelect.singleSelect();
UserList.applyGroupSelect(groupsSelect);
if (subAdminSelect) {
UserList.applySubadminSelect(subAdminSelect);
}
}, 0);
return $tr;
},
Expand Down Expand Up @@ -322,7 +300,7 @@ var UserList = {
},
markRemove: function(uid) {
var $tr = UserList.getRow(uid);
var groups = $tr.find('.groups .groupsselect').val();
var groups = $tr.find('.groups').data('groups');
for(var i in groups) {
var gid = groups[i];
var $li = GroupList.getGroupLI(gid);
Expand All @@ -337,7 +315,7 @@ var UserList = {
},
undoRemove: function(uid) {
var $tr = UserList.getRow(uid);
var groups = $tr.find('.groups .groupsselect').val();
var groups = $tr.find('.groups').data('groups');
for(var i in groups) {
var gid = groups[i];
var $li = GroupList.getGroupLI(gid);
Expand Down Expand Up @@ -438,19 +416,9 @@ var UserList = {
});
},

applyGroupSelect: function (element) {
var checked = [];
applyGroupSelect: function (element, user, checked) {
var $element = $(element);
var user = UserList.getUID($element);

if ($element.data('user-groups')) {
if (typeof $element.data('user-groups') === 'string') {
checked = $element.data('user-groups').split(", ");
}
else {
checked = $element.data('user-groups');
}
}
var checkHandler = null;
if(user) { // Only if in a user row, and not the #newusergroups select
checkHandler = function (group) {
Expand Down Expand Up @@ -490,13 +458,6 @@ var UserList = {
};
}
var addGroup = function (select, group) {
$('select[multiple]').each(function (index, element) {
$element = $(element);
if ($element.find('option').filterAttr('value', group).length === 0 &&
select.data('msid') !== $element.data('msid')) {
$element.append('<option value="' + escapeHTML(group) + '">' + escapeHTML(group) + '</option>');
}
});
GroupList.addGroup(escapeHTML(group));
};
var label;
Expand All @@ -517,19 +478,8 @@ var UserList = {
});
},

applySubadminSelect: function (element) {
var checked = [];
applySubadminSelect: function (element, user, checked) {
var $element = $(element);
var user = UserList.getUID($element);

if ($element.data('subadmin')) {
if (typeof $element.data('subadmin') === 'string') {
checked = $element.data('subadmin').split(", ");
}
else {
checked = $element.data('subadmin');
}
}
var checkHandler = function (group) {
if (group === 'admin') {
return false;
Expand All @@ -545,15 +495,7 @@ var UserList = {
);
};

var addSubAdmin = function (group) {
$('select[multiple]').each(function (index, element) {
if ($(element).find('option').filterAttr('value', group).length === 0) {
$(element).append('<option value="' + escapeHTML(group) + '">' + escapeHTML(group) + '</option>');
}
});
};
$element.multiSelect({
createCallback: addSubAdmin,
createText: null,
checked: checked,
oncheck: checkHandler,
Expand Down Expand Up @@ -611,6 +553,76 @@ var UserList = {
}
}
);
},

/**
* Creates a temporary jquery.multiselect selector on the given group field
*/
_triggerGroupEdit: function($td, isSubadminSelect) {
var $groupsListContainer = $td.find('.groupsListContainer');
var placeholder = $groupsListContainer.attr('data-placeholder') || t('settings', 'no group');
var user = UserList.getUID($td);
var checked = $td.data('groups') || [];
var extraGroups = [].concat(checked);

$td.find('.multiselectoptions').remove();

// jquery.multiselect can only work with select+options in DOM ? We'll give jquery.multiselect what it wants...
var $groupsSelect;
if (isSubadminSelect) {
$groupsSelect = $('<select multiple="multiple" class="groupsselect multiselect button" title="' + placeholder + '"></select>');
} else {
$groupsSelect = $('<select multiple="multiple" class="subadminsselect multiselect button" title="' + placeholder + '"></select>')
}

function createItem(group) {
if (isSubadminSelect && group === 'admin') {
// can't become subadmin of "admin" group
return;
}
$groupsSelect.append($('<option value="' + escapeHTML(group) + '">' + escapeHTML(group) + '</option>'));
}

$.each(this.availableGroups, function (i, group) {
// some new groups might be selected but not in the available groups list yet
var extraIndex = extraGroups.indexOf(group);
if (extraIndex >= 0) {
// remove extra group as it was found
extraGroups.splice(extraIndex, 1);
}
createItem(group);
});
$.each(extraGroups, function (i, group) {
createItem(group);
});

$td.append($groupsSelect);

if (isSubadminSelect) {
UserList.applySubadminSelect($groupsSelect, user, checked);
} else {
UserList.applyGroupSelect($groupsSelect, user, checked);
}

$groupsListContainer.addClass('hidden');
$td.find('.multiselect:not(.groupsListContainer):first').click();
$groupsSelect.on('dropdownclosed', function(e) {
$groupsSelect.remove();
$td.find('.multiselect:not(.groupsListContainer)').parent().remove();
$td.find('.multiselectoptions').remove();
$groupsListContainer.removeClass('hidden');
UserList._updateGroupListLabel($td, e.checked);
});
},

/**
* Updates the groups list td with the given groups selection
*/
_updateGroupListLabel: function($td, groups) {
var placeholder = $td.find('.groupsListContainer').attr('data-placeholder');
var $groupsEl = $td.find('.groupsList');
$groupsEl.text(groups.join(', ') || placeholder || t('settings', 'no group'));
$td.data('groups', groups);
}
};

Expand All @@ -635,13 +647,6 @@ $(document).ready(function () {
// TODO: move other init calls inside of initialize
UserList.initialize($('#userlist'));

$('.groupsselect').each(function (index, element) {
UserList.applyGroupSelect(element);
});
$('.subadminsselect').each(function (index, element) {
UserList.applySubadminSelect(element);
});

$userListBody.on('click', '.password', function (event) {
event.stopPropagation();

Expand Down Expand Up @@ -785,11 +790,24 @@ $(document).ready(function () {
});
});

$('#newuser .groupsListContainer').on('click', function (event) {
event.stopPropagation();
var $div = $(this).closest('.groups');
UserList._triggerGroupEdit($div);
});
$userListBody.on('click', '.groups .groupsListContainer, .subadmins .groupsListContainer', function (event) {
event.stopPropagation();
var $td = $(this).closest('td');
var isSubadminSelect = $td.hasClass('subadmins');
UserList._triggerGroupEdit($td, isSubadminSelect);
});

// init the quota field select box after it is shown the first time
$('#app-settings').one('show', function() {
$(this).find('#default_quota').singleSelect().on('change', UserList.onQuotaSelect);
});

UserList._updateGroupListLabel($('#newuser .groups'), []);
$('#newuser').submit(function (event) {
event.preventDefault();
var username = $('#newusername').val();
Expand Down Expand Up @@ -825,7 +843,7 @@ $(document).ready(function () {
}

promise.then(function() {
var groups = $('#newusergroups').val() || [];
var groups = $('#newuser .groups').data('groups') || [];
$.post(
OC.generateUrl('/settings/users/users'),
{
Expand Down
Loading