Add user search autocomplete

app/app/urls.py

@@ -60,6 +60,7 @@
     url(r'^api/v0.1/', include(dbrouter.urls)),
     url(r'^api/v0.1/', include(ebrouter.urls)),
     url(r'^actions/api/v0.1/', include(dbrouter.urls)),  # same as active, but not cached in cloudfront
+    url(r'^api/v0.1/users_search/', dashboard.views.get_users, name='users_search'),
 
     # Health check endpoint
     re_path(r'^health/', include('health_check.urls')),

app/assets/onepager/js/send.js

@@ -66,12 +66,11 @@ $(document).ready(function() {
     if ($(this).hasClass('disabled'))
       return;
     loading_button($(this));
-
     // get form data
     var email = $('#email').val();
     var github_url = $('#issueURL').val();
     var from_name = $('#fromName').val();
-    var username = $('#username').val();
+    var username = $('.username-search').select2('data')[0].text;
     var amountInEth = parseFloat($('#amount').val());
     var comments_priv = $('#comments_priv').val();
     var comments_public = $('#comments_public').val();
@@ -84,7 +83,6 @@ $(document).ready(function() {
     var isSendingETH = (tokenAddress == '0x0' || tokenAddress == '0x0000000000000000000000000000000000000000');
     var tokenDetails = tokenAddressToDetails(tokenAddress);
     var tokenName = 'ETH';
-    var weiConvert = Math.pow(10, 18);
 
     if (!isSendingETH) {
       tokenName = tokenDetails.name;
@@ -155,7 +153,7 @@ function sendTip(email, github_url, from_name, username, amountInEth, comments_p
   if (username.indexOf('@') == -1) {
     username = '@' + username;
   }
-  var _disableDeveloperTip = true;
+
   var gas_money = parseInt(Math.pow(10, (9 + 5)) * ((defaultGasPrice * 1.001) / Math.pow(10, 9)));
   var isSendingETH = (tokenAddress == '0x0' || tokenAddress == '0x0000000000000000000000000000000000000000');
   var tokenDetails = tokenAddressToDetails(tokenAddress);
@@ -171,7 +169,6 @@ function sendTip(email, github_url, from_name, username, amountInEth, comments_p
   var amountInWei = amountInEth * 1.0 * weiConvert;
   // validation
   var hasEmail = email != '';
-  var hasUsername = username != '';
 
   // validation
   if (hasEmail && !validateEmail(email)) {

app/assets/v2/js/pages/bounty_details.js

@@ -296,18 +296,19 @@ var callbacks = {
   },
   'started_owners_username': function(key, val, result) {
     var started = [];
+
     if (result.interested) {
       var interested = result.interested;
+
       interested.forEach(function(_interested, position) {
         var name = (position == interested.length - 1) ?
           _interested.profile.handle : _interested.profile.handle.concat(',');
-        if(!_interested.pending){
+
+        if (!_interested.pending)
           started.push(profileHtml(_interested.profile.handle, name));
-        }
       });
-      if (started.length == 0) {
+      if (started.length == 0)
         started.push('<i class="fas fa-minus"></i>');
-      }
     }
     return [ 'started_owners_username', started ];
   },

app/assets/v2/js/user-search.js

@@ -0,0 +1,58 @@
+$(function() {
+  $('.username-search').select2({
+    ajax: {
+      url: '/api/v0.1/users_search/',
+      dataType: 'json',
+      delay: 250,
+      data: function(params) {
+
+        let query = {
+          term: params.term[0] === '@' ? params.term.slice(1) : params.term
+        };
+
+        return query;
+      },
+      processResults: function(data) {
+        return {
+          results: data
+        };
+      },
+      cache: true
+    },
+    placeholder: 'Search by username',
+    minimumInputLength: 3,
+    escapeMarkup: function(markup) {
+
+      return markup;
+    },
+    templateResult: formatUser,
+    templateSelection: formatUserSelection
+  });
+
+  function formatUser(user) {
+
+    if (user.loading) {
+      return user.text;
+    }
+    let markup = `<div class="d-flex align-items-baseline">
+                    <div class="mr-2">
+                      <img class="rounded-circle" src="${user.avatar_url || static_url + 'v2/images/user-placeholder.png'}" width="40" height="40"/>
+                    </div>
+                    <div class="">${user.text}</div>
+                  </div>`;
+
+    return markup;
+  }
+
+  function formatUserSelection(user) {
+
+    let selected;
+
+    if (user.id) {
+      selected = `<img class="rounded-circle" src="${user.avatar_url || static_url + 'v2/images/user-placeholder.png'}" width="20" height="20"/> ${user.text}`;
+    } else {
+      selected = user.text;
+    }
+    return selected;
+  }
+});

app/dashboard/templates/onepager/base.html

@@ -33,6 +33,38 @@
     <link rel="stylesheet" href="{% static "v2/css/forms/button.css" %}">
     <link rel="stylesheet" href="{% static "cookielaw/css/cookielaw.css" %}">
 
+    <style>
+      .d-flex {
+        display: flex;
+      }
+
+      .align-items-baseline {
+        align-items: center;
+      }
+
+      .mr-2 {
+        margin-right: 1rem;
+      }
+
+      .rounded-circle {
+        border-radius: 50%;
+        vertical-align: middle;
+      }
+
+      .select2-container .select2-selection--single {
+        height: 34px;
+        text-align: left;
+      }
+
+      .select2-container--default .select2-selection--single .select2-selection__rendered {
+        line-height: 32px;
+      }
+
+      .select2-container--default .select2-selection--single .select2-selection__arrow {
+        height: 32px;
+      }
+    </style>
+
     <script type="text/javascript">
       var static_url = "{{ STATIC_URL }}";
       var media_url = "{{ MEDIA_URL }}";

app/dashboard/templates/onepager/send2.html

@@ -28,6 +28,8 @@
   <script src="/dynamic/js/tokens_dynamic.js"></script>
   <script src="{% static "onepager/js/send.js" %}"></script>
   <script src="{% static "onepager/js/confetti.js" %}"></script>
+  <script src="{% static "v2/js/user-search.js" %}"></script>
+
 {% endblock %}
 <!-- Main -->
 {% block 'main' %}
@@ -59,8 +61,8 @@ <h1>{% trans "Send Tip." %}</h1>
     </div>
     <div id="usd_amount"> &nbsp;</div>
     <div>
-      {% trans "To Github Username" %}:
-      <input type="text" placeholder="@username" id="username" value="" style="max-width: 400px; margin-left: auto; margin-right: auto;">
+      <label for="">{% trans "To Github Username" %}:</label> <br>
+      <select id="username" class="username-search custom-select" style="max-width: 400px; margin-left: auto; margin-right: auto;"></select>
     </div>
     <div>
       {% trans "From Github Username" %} {% if not request.user.is_authenticated %}(<a href="{% url 'social:begin' 'github' %}?next=/tip">{% trans "Login" %}</a>) {%endif%}

app/dashboard/views.py

@@ -27,7 +27,7 @@
 from django.contrib.admin.views.decorators import staff_member_required
 from django.contrib.auth.models import User
 from django.core.cache import cache
-from django.http import Http404, JsonResponse
+from django.http import Http404, HttpResponse, JsonResponse
 from django.shortcuts import redirect
 from django.template.response import TemplateResponse
 from django.templatetags.static import static
@@ -1557,3 +1557,25 @@ def change_bounty(request, bounty_id):
         'result': result
     }
     return TemplateResponse(request, 'bounty/change.html', params)
+
+
+def get_users(request):
+    if request.is_ajax():
+        q = request.GET.get('term')
+        profiles = Profile.objects.filter(handle__icontains=q)
+        results = []
+        for user in profiles:
+            profile_json = {}
+            profile_json['id'] = user.id
+            profile_json['text'] = user.handle
+            profile_json['email'] = user.email
+            profile_json['avatar_id'] = user.avatar_id
+            if user.avatar_id:
+                profile_json['avatar_url'] = user.avatar_url
+            profile_json['preferred_payout_address'] = user.preferred_payout_address
+            results.append(profile_json)
+        data = json.dumps(results)
+    else:
+        raise Http404
+    mimetype = 'application/json'
+    return HttpResponse(data, mimetype)