# HG changeset patch
# User Mads Kiilerich <mads@kiilerich.com>
# Date 1502637558 -7200
# Node ID d43cf470e625837f2776fbcff85629ffda1d62cd
# Parent  541383de7568565c78a752fa5a76478600025a45
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.

diff -r 541383de7568 -r d43cf470e625 kallithea/public/js/base.js
--- 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) {
diff -r 541383de7568 -r d43cf470e625 kallithea/templates/base/root.html
--- 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'))},