# HG changeset patch
# User Mads Kiilerich <mads@kiilerich.com>
# Date 1502637558 -7200
# Node ID 541383de7568565c78a752fa5a76478600025a45
# Parent  4d7d3445e3886e0a9962bf1e37874cba72c3b069
autocomplete: use select2 when selecting users to add as reviewers to PRs

This is a minimal change to PullRequestAutoComplete, 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.

The select2 widget is reused for adding more users, so when a user is selected,
we process it, close the widget, and abort the selection, waiting for the user
to enter another user name.

diff -r 4d7d3445e388 -r 541383de7568 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
@@ -1315,25 +1315,22 @@
 
 /* activate auto completion of users as PR reviewers */
 var PullRequestAutoComplete = function ($inputElement, users_list) {
-    var matchUsers = function (sQuery) {
-        return autocompleteMatchUsers(sQuery, users_list);
-    };
-
-    var reviewerAC = autocompleteCreate($inputElement, matchUsers);
-    reviewerAC.suppressInputUpdate = true;
-
-    // Handler for selection of an entry
-    if(reviewerAC.itemSelectEvent){
-        reviewerAC.itemSelectEvent.subscribe(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
-
-            addReviewMember(oData.id, oData.fname, oData.lname, oData.nname,
-                            oData.gravatar_lnk, oData.gravatar_size);
-            myAC.getInputEl().value = '';
-        });
-    }
+    $inputElement.select2(
+    {
+        placeholder: $inputElement.attr('placeholder'),
+        minimumInputLength: 1,
+        query: function (query) {
+            query.callback({results: autocompleteMatchUsers(query.term, users_list)});
+        },
+        formatSelection: autocompleteFormatter,
+        formatResult: autocompleteFormatter,
+        escapeMarkup: function(m) { return m; },
+    }).on("select2-selecting", function(e) {
+        addReviewMember(e.choice.id, e.choice.fname, e.choice.lname, e.choice.nname,
+                        e.choice.gravatar_lnk, e.choice.gravatar_size);
+        $inputElement.select2("close");
+        e.preventDefault();
+    });
 }
 
 
diff -r 4d7d3445e388 -r 541383de7568 kallithea/templates/pullrequests/pullrequest_show.html
--- a/kallithea/templates/pullrequests/pullrequest_show.html	Sun Aug 13 17:19:18 2017 +0200
+++ b/kallithea/templates/pullrequests/pullrequest_show.html	Sun Aug 13 17:19:18 2017 +0200
@@ -239,10 +239,8 @@
             </ul>
           </div>
           %if editable:
-          <div class='ac'>
-            <div class="reviewer_ac">
-               ${h.text('user', class_='yui-ac-input form-control',placeholder=_('Type name of reviewer to add'))}
-            </div>
+          <div>
+             ${h.text('user', class_='form-control',placeholder=_('Type name of reviewer to add'))}
           </div>
           %endif
         </div>