Mercurial > kallithea

changeset 6806:541383de7568

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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.
author Mads Kiilerich <mads@kiilerich.com>
date Sun, 13 Aug 2017 17:19:18 +0200
parents 4d7d3445e388
children d43cf470e625
files kallithea/public/js/base.js kallithea/templates/pullrequests/pullrequest_show.html
diffstat 2 files changed, 18 insertions(+), 23 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
@@ -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();
+    });
 }
 
 
--- 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>