Mercurial > kallithea
changeset 6807:d43cf470e625
autocomplete: use select2 when selecting users or groups to give permissions
This is a minimal change to MembersAutoComplete, inspired by Dominik Ruf.
The UX is slightly different than before, with select2 putting up an extra
input field, already before typing anything.
We use minimumInputLength 1 to get the same behaviour as before and avoid
displaying all users in a list.
author | Mads Kiilerich <mads@kiilerich.com> |
---|---|
date | Sun, 13 Aug 2017 17:19:18 +0200 |
parents | 541383de7568 |
children | 71033bd37b4c |
files | kallithea/public/js/base.js kallithea/templates/base/root.html |
diffstat | 2 files changed, 22 insertions(+), 25 deletions(-) [+] |
line wrap: on
line diff
--- a/kallithea/public/js/base.js Sun Aug 13 17:19:18 2017 +0200 +++ b/kallithea/public/js/base.js Sun Aug 13 17:19:18 2017 +0200 @@ -1153,7 +1153,7 @@ }); } -var MembersAutoComplete = function ($inputElement, users_list, groups_list) { +var MembersAutoComplete = function ($inputElement, $typeElement, users_list, groups_list) { var matchAll = function (sQuery) { var u = autocompleteMatchUsers(sQuery, users_list); @@ -1161,26 +1161,24 @@ return u.concat(g); }; - var membersAC = autocompleteCreate($inputElement, matchAll); - - // Handler for selection of an entry - var itemSelectHandler = function (sType, aArgs) { - var nextId = $inputElement.prop('id').split('perm_new_member_name_')[1]; - var myAC = aArgs[0]; // reference back to the AC instance - var elLI = aArgs[1]; // reference to the selected LI element - var oData = aArgs[2]; // object literal of selected item's result data - //fill the autocomplete with value - if (oData.nname != undefined) { - //users - myAC.getInputEl().value = oData.nname; - $('#perm_new_member_type_'+nextId).val('user'); + $inputElement.select2( + { + placeholder: $inputElement.attr('placeholder'), + minimumInputLength: 1, + query: function (query) { + query.callback({results: matchAll(query.term)}); + }, + formatSelection: autocompleteFormatter, + formatResult: autocompleteFormatter, + escapeMarkup: function(m) { return m; }, + }).on("select2-selecting", function(e) { + // e.choice.id is automatically used as selection value - just set the type of the selection + if (e.choice.nname != undefined) { + $typeElement.val('user'); } else { - //groups - myAC.getInputEl().value = oData.grname; - $('#perm_new_member_type_'+nextId).val('users_group'); + $typeElement.val('users_group'); } - }; - membersAC.itemSelectEvent.subscribe(itemSelectHandler); + }); } var MentionsAutoComplete = function ($inputElement, users_list) { @@ -1340,17 +1338,15 @@ '<td><input type="radio" value="{1}.read" checked="checked" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' + '<td><input type="radio" value="{1}.write" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' + '<td><input type="radio" value="{1}.admin" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' + - '<td class="ac">' + - '<div class="perm_ac" id="perm_ac_{0}">' + - '<input class="yui-ac-input" id="perm_new_member_name_{0}" name="perm_new_member_name_{0}" value="" type="text">' + + '<td>' + + '<input class="form-control" id="perm_new_member_name_{0}" name="perm_new_member_name_{0}" value="" type="text" placeholder="{2}">' + '<input id="perm_new_member_type_{0}" name="perm_new_member_type_{0}" value="" type="hidden">' + - '</div>' + '</td>' + '<td></td>'; var $last_node = $('.last_new_member').last(); // empty tr between last and add var next_id = $('.new_members').length; - $last_node.before($('<tr class="new_members">').append(template.format(next_id, perm_type))); - MembersAutoComplete($("#perm_new_member_name_"+next_id), users_list, groups_list); + $last_node.before($('<tr class="new_members">').append(template.format(next_id, perm_type, _TM['Type name of user or member to grant permission']))); + MembersAutoComplete($("#perm_new_member_name_"+next_id), $("#perm_new_member_type_"+next_id), users_list, groups_list); } function ajaxActionRevokePermission(url, obj_id, obj_type, field_id, extra_data) {
--- a/kallithea/templates/base/root.html Sun Aug 13 17:19:18 2017 +0200 +++ b/kallithea/templates/base/root.html Sun Aug 13 17:19:18 2017 +0200 @@ -37,6 +37,7 @@ 'Selection Link': ${h.jshtml(_('Selection Link'))}, 'Collapse Diff': ${h.jshtml(_('Collapse Diff'))}, 'Expand Diff': ${h.jshtml(_('Expand Diff'))}, + 'Type name of user or member to grant permission': ${h.jshtml(_('Type name of user or member to grant permission'))}, 'Failed to revoke permission': ${h.jshtml(_('Failed to revoke permission'))}, 'Confirm to revoke permission for {0}: {1} ?': ${h.jshtml(_('Confirm to revoke permission for {0}: {1} ?'))}, 'Enabled': ${h.jshtml(_('Enabled'))},