Use selectize for author/reviewer filter for patch lists

This has a few benefits:
1. It makes it much easier to select a user, since you don't have to
   scroll through the very long list anymore.
2. It makes the pageload faster, because the full user list is not part
   of the generated html.
3. No heavy query to get all the users.

Based on some previous quick attempts, this is expected to make the
page load significantly faster.

By doing this I also realized that the Author multiselect for patch
create/edit was showing "username (firstname lastname)" instead of
"firstname lastname (username)" like we do everywhere else. So this
fixes that too.

Author: JelteF

pgcommitfest/commitfest/forms.py

@@ -1,6 +1,5 @@
 from django import forms
 from django.contrib.auth.models import User
-from django.db.models import Q
 from django.forms import ValidationError
 from django.forms.widgets import HiddenInput
 from django.http import Http404
@@ -11,39 +10,57 @@
 
 
 class CommitFestFilterForm(forms.Form):
+    selectize_fields = {
+        "author": "/lookups/user",
+        "reviewer": "/lookups/user",
+    }
+
     text = forms.CharField(max_length=50, required=False)
     status = forms.ChoiceField(required=False)
     targetversion = forms.ChoiceField(required=False)
-    author = forms.ChoiceField(required=False)
-    reviewer = forms.ChoiceField(required=False)
+    author = forms.ChoiceField(required=False, label="Author (type to search)")
+    reviewer = forms.ChoiceField(required=False, label="Reviewer (type to search)")
     sortkey = forms.IntegerField(required=False)
 
-    def __init__(self, cf, *args, **kwargs):
-        super(CommitFestFilterForm, self).__init__(*args, **kwargs)
+    def __init__(self, data, *args, **kwargs):
+        super(CommitFestFilterForm, self).__init__(data, *args, **kwargs)
 
         self.fields["sortkey"].widget = forms.HiddenInput()
 
         c = [(-1, "* All")] + list(PatchOnCommitFest._STATUS_CHOICES)
         self.fields["status"] = forms.ChoiceField(choices=c, required=False)
 
-        if cf:
-            q = Q(patch_author__commitfests=cf) | Q(patch_reviewer__commitfests=cf)
-        else:
-            q = Q()
-        userchoices = [(-1, "* All"), (-2, "* None"), (-3, "* Yourself")] + [
-            (u.id, "%s %s (%s)" % (u.first_name, u.last_name, u.username))
-            for u in User.objects.filter(q)
-            .distinct()
-            .order_by("first_name", "last_name")
-        ]
+        userchoices = [(-1, "* All"), (-2, "* None"), (-3, "* Yourself")]
+
+        print(data)
+        selected_user_ids = set()
+        if data and "author" in data:
+            try:
+                selected_user_ids.add(int(data["author"]))
+            except ValueError:
+                pass
+
+        if data and "reviewer" in data:
+            try:
+                selected_user_ids.add(int(data["reviewer"]))
+            except ValueError:
+                pass
+
+        if selected_user_ids:
+            userchoices.extend(
+                (u.id, f"{u.first_name} {u.last_name} ({u.username})")
+                for u in User.objects.filter(pk__in=selected_user_ids)
+            )
+            print(userchoices)
+
         self.fields["targetversion"] = forms.ChoiceField(
             choices=[("-1", "* All"), ("-2", "* None")]
             + [(v.id, v.version) for v in TargetVersion.objects.all()],
             required=False,
             label="Target version",
         )
-        self.fields["author"] = forms.ChoiceField(choices=userchoices, required=False)
-        self.fields["reviewer"] = forms.ChoiceField(choices=userchoices, required=False)
+        self.fields["author"].choices = userchoices
+        self.fields["reviewer"].choices = userchoices
 
         for f in (
             "status",
@@ -54,7 +71,7 @@ def __init__(self, cf, *args, **kwargs):
 
 
 class PatchForm(forms.ModelForm):
-    selectize_multiple_fields = {
+    selectize_fields = {
         "authors": "/lookups/user",
         "reviewers": "/lookups/user",
     }
@@ -80,7 +97,7 @@ def __init__(self, *args, **kwargs):
         )
 
         # Selectize multiple fields -- don't pre-populate everything
-        for field, url in list(self.selectize_multiple_fields.items()):
+        for field, url in list(self.selectize_fields.items()):
             # If this is a postback of a selectize field, it may contain ids that are not currently
             # stored in the field. They must still be among the *allowed* values of course, which
             # are handled by the existing queryset on the field.
@@ -97,8 +114,8 @@ def __init__(self, *args, **kwargs):
             self.fields[field].queryset = self.fields[field].queryset.filter(
                 pk__in=set(vals)
             )
-            self.fields[field].label_from_instance = lambda u: "{} ({})".format(
-                u.username, u.get_full_name()
+            self.fields[field].label_from_instance = (
+                lambda u: f"{u.get_full_name()} ({u.username})"
             )
 
         # Only allow modifying reviewers and committers if the patch is closed.

pgcommitfest/commitfest/lookups.py

@@ -25,7 +25,7 @@ def userlookup(request):
                 "values": [
                     {
                         "id": u.id,
-                        "value": "{} ({})".format(u.username, u.get_full_name()),
+                        "value": f"{u.get_full_name()} ({u.username})",
                     }
                     for u in users
                 ],

pgcommitfest/commitfest/templates/base_form.html

@@ -22,7 +22,7 @@
         <div class="alert alert-danger">{{e}}</div>
        {%endfor%}
       {%endif%}
-      {%if not field.name in form.selectize_multiple_fields%}{{field|field_class:"form-control"}}{%else%}{{field}}{%endif%}
+      {%if not field.name in form.selectize_fields%}{{field|field_class:"form-control"}}{%else%}{{field}}{%endif%}
       {%if field.help_text%}<br/>{{field.help_text|safe}}{%endif%}</div>
     </div>
    {%else%}
@@ -71,34 +71,12 @@ <h3>Search user</h3>
 {%endblock%}
 
 {%block extrahead%}
- <link rel="stylesheet" href="/media/commitfest/css/selectize.css" />
- <link rel="stylesheet" href="/media/commitfest/css/selectize.default.css" />
+ {%include "selectize_css.html" %}
 {%endblock%}
 {%block morescript%}
- <script src="/media/commitfest/js/selectize.min.js"></script>
+
+ {%include "selectize_js.html" %}
  <script>
-/* Set up selectize fields */
-  {% for f, url in selectize_multiple_fields %}
-   $('#id_{{f}}').selectize({
-    plugins: ['remove_button'],
-    valueField: 'id',
-    labelField: 'value',
-    searchField: 'value',
-    load: function(query, callback) {
-     if (!query.length) return callback();
-     $.ajax({
-      'url': '{{url}}',
-      'type': 'GET',
-      'dataType': 'json',
-      'data': {
-       'query': query,
-      },
-      'error': function() { callback();},
-      'success': function(res) { callback(res.values);},
-     });
-    }
-   });
-  {%endfor%}
   {%if user.is_staff%}
    $('.selectize-control').after(
     $('<a href="#" class="btn btn-default btn-sm">Import user not listed</a>').click(function () {

pgcommitfest/commitfest/templates/commitfest.html

@@ -14,36 +14,7 @@
  {%if cf.isopen or user.is_staff %}
   <a class="btn btn-default" href="new/">New patch</a>
  {%endif%}
- <div id="collapseFilters" class="collapse {%if has_filter%}in{%endif%}">
-  <form id="filterform" method="GET" action="." style="margin-bottom: 0px">
-   <table class="table table-condensed" style="margin-bottom: 0px">
-    <thead>
-     <tr>
-      {%for f in form%}
-       {%if not f.is_hidden%}
-        <td>{{f.label}}</td>
-       {%else%}
-        <td></td>
-       {%endif%}
-      {%endfor%}
-	    {%comment%} Add one extra for buttons {%endcomment%}
-      <td></td>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-      {%for f in form%}
-       <td>{{f|field_class:"form-control"}}</td>
-      {%endfor%}
-      <td>
-       <input type="submit" class="btn btn-default" value="Filter">
-       <a class="btn btn-default" href=".">Clear</a>
-      </td>
-     </tr>
-    </tbody>
-   </table>
-  </form>
- </div>
+ {%include "filter_form.html" %}
 
  <p>
   <br/>
@@ -160,7 +131,11 @@ <h3>{{p.is_open|yesno:"Active patches,Closed patches"}}</h3>
  </div>
 {%endblock%}
 
+{%block extrahead%}
+ {%include "selectize_css.html" %}
+{%endblock%}
 {%block morescript%}
+ {%include "selectize_js.html" %}
  <script>
   {%if user.is_staff%}
    function send_selected() {

pgcommitfest/commitfest/templates/filter_form.html

@@ -0,0 +1,33 @@
+{%load commitfest %}
+<div id="collapseFilters" class="collapse {%if has_filter%}in{%endif%}">
+ <form id="filterform" method="GET" action="." style="margin-bottom: 0px">
+  <table class="table table-condensed" style="margin-bottom: 0px">
+   <thead>
+    <tr>
+     {%for f in form%}
+      {%if not f.is_hidden%}
+       <td>{{f.label}}</td>
+      {%else%}
+       <td></td>
+      {%endif%}
+     {%endfor%}
+	    {%comment%} Add one extra for buttons {%endcomment%}
+     <td></td>
+    </tr>
+   </thead>
+   <tbody>
+    <tr>
+     {%for f in form%}
+      <td>
+       {%if not f.name in form.selectize_fields%}{{f|field_class:"form-control"}}{%else%}{{f}}{%endif%}
+      </td>
+     {%endfor%}
+     <td>
+      <input type="submit" class="btn btn-default" value="Filter">
+      <a class="btn btn-default" href=".">Clear</a>
+     </td>
+    </tr>
+   </tbody>
+  </table>
+ </form>
+</div>

pgcommitfest/commitfest/templates/home.html

@@ -12,36 +12,7 @@
   </div>
   <button type="submit" class="btn btn-default">Search</button>
  </form>
- <div id="collapseFilters" class="collapse {%if has_filter%}in{%endif%}">
-  <form id="filterform" method="GET" action="." style="margin-bottom: 0px">
-   <table class="table table-condensed" style="margin-bottom: 0px">
-    <thead>
-     <tr>
-      {%for f in form%}
-       {%if not f.is_hidden%}
-        <td>{{f.label}}</td>
-       {%else%}
-        <td></td>
-       {%endif%}
-      {%endfor%}
-	    {%comment%} Add one extra for buttons {%endcomment%}
-      <td></td>
-     </tr>
-    </thead>
-    <tbody>
-     <tr>
-      {%for f in form%}
-       <td>{{f|field_class:"form-control"}}</td>
-      {%endfor%}
-      <td>
-       <input type="submit" class="btn btn-default" value="Filter">
-       <a class="btn btn-default" href=".">Clear</a>
-      </td>
-     </tr>
-    </tbody>
-   </table>
-  </form>
- </div>
+ {%include "filter_form.html" %}
  {%for p in patches %}
   {%ifchanged p.is_open%}
    {%if not forloop.first%}
@@ -133,3 +104,9 @@ <h3>{%if user.is_authenticated%}Open patches you are subscribed to{%elif p.is_op
    {%endif%}
  {%endfor%}
 {%endblock%}
+{%block extrahead%}
+ {%include "selectize_css.html" %}
+{%endblock%}
+{%block morescript%}
+ {%include "selectize_js.html" %}
+{%endblock%}

pgcommitfest/commitfest/templates/selectize_css.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="/media/commitfest/css/selectize.css" />
+<link rel="stylesheet" href="/media/commitfest/css/selectize.default.css" />
+

pgcommitfest/commitfest/templates/selectize_js.html

@@ -0,0 +1,41 @@
+<script src="/media/commitfest/js/selectize.min.js"></script>
+<script>
+ {% for f, url in form.selectize_fields.items %}
+  $('#id_{{f}}').selectize({
+   plugins: ['remove_button'],
+   valueField: 'id',
+   labelField: 'value',
+   searchField: 'value',
+   load: function(query, callback) {
+    if (!query.length) return callback();
+    $.ajax({
+     'url': '{{url}}',
+     'type': 'GET',
+     'dataType': 'json',
+     'data': {
+      'query': query,
+     },
+     'error': function() { callback();},
+     'success': function(res) { callback(res.values);},
+    });
+   },
+   onFocus: function() {
+    if (this.$input.is('[multiple]')) {
+     return;
+    }
+    console.log(this.getValue());
+    this.lastValue = this.getValue();
+    this.clear(false);
+   },
+   onBlur: function() {
+    if (this.$input.is('[multiple]')) {
+     return;
+    }
+    if(this.getValue() == '') {
+     this.setValue(this.lastValue);
+    }
+   },
+  });
+ {%endfor%}
+</script>
+

pgcommitfest/commitfest/views.py

@@ -56,7 +56,7 @@ def home(request):
 
     # Generates a fairly expensive query, which we shouldn't do unless
     # the user is logged in. XXX: Figure out how to avoid doing that..
-    form = CommitFestFilterForm(None, request.GET)
+    form = CommitFestFilterForm(request.GET)
 
     if request.user.is_authenticated:
         patch_list = patchlist(request, cf, personalized=True)
@@ -504,7 +504,7 @@ def commitfest(request, cfid):
 
     # Generates a fairly expensive query, which we shouldn't do unless
     # the user is logged in. XXX: Figure out how to avoid doing that..
-    form = CommitFestFilterForm(cf, request.GET)
+    form = CommitFestFilterForm(request.GET)
 
     return render(
         request,
@@ -707,7 +707,6 @@ def patchform(request, patchid):
             "form": form,
             "patch": patch,
             "title": "Edit patch",
-            "selectize_multiple_fields": form.selectize_multiple_fields.items(),
             "breadcrumbs": [
                 {"title": cf.title, "href": "/%s/" % cf.pk},
                 {"title": "View patch", "href": "/%s/%s/" % (cf.pk, patch.pk)},
@@ -766,7 +765,6 @@ def newpatch(request, cfid):
                 {"title": cf.title, "href": "/%s/" % cf.pk},
             ],
             "savebutton": "Create patch",
-            "selectize_multiple_fields": form.selectize_multiple_fields.items(),
             "threadbrowse": True,
         },
     )