Make committer select box easier to use (#66)

The select box for selecting a committer of a patch was kinda hard to
use. This fixes it in two ways:
1. Sorts names by first names, instead of last names. This way the list
   actually looks ordered.
2. Use Selectize to make the select box searchable.

To make such a change to selectize simpler in the future this starts
including the selectize css/js on every page and adds a simple
"enable-selectize" class that can be used to easily enable selectize on
any select box.

Author: JelteF

media/commitfest/js/commitfest.js

@@ -379,4 +379,26 @@ $(document).ready(() => {
             return false;
         });
     });
+
+    $(".enable-selectize").selectize({
+        plugins: ["remove_button"],
+        valueField: "id",
+        labelField: "value",
+        searchField: "value",
+        onFocus: function () {
+            if (this.$input.is("[multiple]")) {
+                return;
+            }
+            this.lastValue = this.getValue();
+            this.clear(false);
+        },
+        onBlur: function () {
+            if (this.$input.is("[multiple]")) {
+                return;
+            }
+            if (this.getValue() === "") {
+                this.setValue(this.lastValue);
+            }
+        },
+    });
 });

pgcommitfest/commitfest/templates/base.html

@@ -6,6 +6,8 @@
   <link rel="stylesheet" href="/media/commitfest/css/jquery-ui.css" type="text/css">
   <link rel="stylesheet" href="/media/commitfest/css/bootstrap.css" />
   <link rel="stylesheet" href="/media/commitfest/css/bootstrap-theme.min.css" />
+  <link rel="stylesheet" href="/media/commitfest/css/selectize.css" />
+  <link rel="stylesheet" href="/media/commitfest/css/selectize.default.css" />
   <link rel="stylesheet" href="/media/commitfest/css/commitfest.css?{% static_file_param %}" />
   <link rel="shortcut icon" href="/media/commitfest/favicon.ico" />
   {%block extrahead%}{%endblock%}
@@ -49,6 +51,7 @@ <h1>{{title}}</h1>
   <script src="/media/commitfest/js/jquery.js"></script>
   <script src="/media/commitfest/js/jquery-ui.js"></script>
   <script src="/media/commitfest/js/bootstrap.js"></script>
+  <script src="/media/commitfest/js/selectize.min.js"></script>
   <script src="/media/commitfest/js/commitfest.js?{% static_file_param %}"></script>
   {%block morescript%}{%endblock%}
  </html>

pgcommitfest/commitfest/templates/base_form.html

@@ -70,9 +70,6 @@ <h3>Search user</h3>
  {%endif%}
 {%endblock%}
 
-{%block extrahead%}
- {%include "selectize_css.html" %}
-{%endblock%}
 {%block morescript%}
 
  {%include "selectize_js.html" %}

pgcommitfest/commitfest/templates/commitfest.html

@@ -131,9 +131,6 @@ <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>

pgcommitfest/commitfest/templates/me.html

@@ -104,9 +104,6 @@ <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/patch.html

@@ -213,7 +213,7 @@ <h3>Flag as committed</h3>
      <form class="form" style="margin-bottom: 5px;">
       <div class="form-group">
        <label for="committerlist">Committer</label>
-       <select id="committerSelect" class="form-control">
+       <select id="committerSelect" class="enable-selectize">
         <option value="" style="display:none;"></option>
         {%for c in committers%}
          <option value="{{c.user.username}}">{{c.user.first_name}} {{c.user.last_name}}</option>

pgcommitfest/commitfest/templates/selectize_css.html

@@ -1,4 +1,3 @@
-<script src="/media/commitfest/js/selectize.min.js"></script>
 <script>
  {% for f, url in form.selectize_fields.items %}
   $('#id_{{f}}').selectize({

pgcommitfest/commitfest/templates/selectize_js.html

@@ -664,7 +664,7 @@ def patch(request, patchid):
     cf = patch_commitfests[0].commitfest
 
     committers = Committer.objects.filter(active=True).order_by(
-        "user__last_name", "user__first_name"
+        "user__first_name", "user__last_name"
     )
 
     cfbot_branch = getattr(patch, "cfbot_branch", None)