# HG changeset patch
# User Mads Kiilerich <mads@kiilerich.com>
# Date 2017-08-13 17:19:18
# Node ID 4d7d3445e3886e0a9962bf1e37874cba72c3b069
# Parent  2f93ca3eab8b41a5c36c26a2749e656396ab57e6

autocomplete: use select2 when selecting owner of repos and PRs

This is a minimal change to SimpleUserAutoComplete, 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. This field will always have an old value and
the placeholder is thus never used, but we show it instead of the default
"Please enter 1 or more character" message.

The initSelection iteration is not pretty, but no more complex than what
happens when filtering the user list, and it has the advantage of giving a nice
name/gravatar display of the current user.

diff --git a/kallithea/public/js/base.js b/kallithea/public/js/base.js
--- a/kallithea/public/js/base.js
+++ b/kallithea/public/js/base.js
@@ -1132,21 +1132,25 @@ var autocompleteCreate = function ($inpu
 }
 
 var SimpleUserAutoComplete = function ($inputElement, users_list) {
-
-    var matchUsers = function (sQuery) {
-        return autocompleteMatchUsers(sQuery, users_list);
-    }
-
-    var userAC = autocompleteCreate($inputElement, matchUsers);
-
-    // Handler for selection of an entry
-    var itemSelectHandler = function (sType, aArgs) {
-        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
-        myAC.getInputEl().value = oData.nname;
-    };
-    userAC.itemSelectEvent.subscribe(itemSelectHandler);
+    $inputElement.select2(
+    {
+        formatInputTooShort: $inputElement.attr('placeholder'),
+        initSelection : function (element, callback) {
+            var val = $inputElement.val();
+            $.each(users_list, function(i, user) {
+                if (user.nname == val)
+                    callback(user);
+            });
+        },
+        minimumInputLength: 1,
+        query: function (query) {
+            query.callback({results: autocompleteMatchUsers(query.term, users_list)});
+        },
+        formatSelection: autocompleteFormatter,
+        formatResult: autocompleteFormatter,
+        escapeMarkup: function(m) { return m; },
+        id: function(item) { return item.nname; },
+    });
 }
 
 var MembersAutoComplete = function ($inputElement, users_list, groups_list) {
diff --git a/kallithea/templates/admin/repos/repo_edit_settings.html b/kallithea/templates/admin/repos/repo_edit_settings.html
--- a/kallithea/templates/admin/repos/repo_edit_settings.html
+++ b/kallithea/templates/admin/repos/repo_edit_settings.html
@@ -40,11 +40,9 @@ ${h.form(url('update_repo', repo_name=c.
             </div>
             <div class="form-group">
                 <label class="control-label" for="owner">${_('Owner')}:</label>
-                <div class="ac">
-                    <div class="perm_ac">
-                       ${h.text('owner',class_='yui-ac-input form-control')}
-                       <span class="help-block">${_('Change owner of this repository.')}</span>
-                    </div>
+                <div>
+                   ${h.text('owner',class_='form-control', placeholder=_('Type name of user'))}
+                   <span class="help-block">${_('Change owner of this repository.')}</span>
                 </div>
              </div>
             <div class="form-group">
diff --git a/kallithea/templates/pullrequests/pullrequest_show.html b/kallithea/templates/pullrequests/pullrequest_show.html
--- a/kallithea/templates/pullrequests/pullrequest_show.html
+++ b/kallithea/templates/pullrequests/pullrequest_show.html
@@ -138,8 +138,8 @@ ${self.repo_context_bar('showpullrequest
                   <span>${c.pull_request.owner.full_name_and_username}</span><br/>
                   <span><a href="mailto:${c.pull_request.owner.email}">${c.pull_request.owner.email}</a></span><br/>
           </div>
-          <div class="pr-do-edit ac" style="display:none">
-               ${h.text('owner', class_='form-control', value=c.pull_request.owner.username, placeholder=_('Username'))}
+          <div class="pr-do-edit" style="display:none">
+               ${h.text('owner', class_='form-control', value=c.pull_request.owner.username, placeholder=_('Type name of user'))}
           </div>
         </div>