Make tag selectors fancy

The tag selection dropdown when creating, editing or searching patches
now look much nicer. It shows the tag color and the tag description
(which is also searchable).

Author: JelteF

pgcommitfest/commitfest/templates/selectize_js.html

@@ -1,41 +1,83 @@
 <script>
  {% for f, url in form.selectize_fields.items %}
-  $('#id_{{f}}').selectize({
-   plugins: ['remove_button'],
-   valueField: 'id',
-   labelField: 'value',
-   searchField: 'value',
-   {%if url%}
-    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);},
-     });
+  {% if f == 'tags' or f == 'tag' %}
+   $('#id_{{f}}').selectize({
+    plugins: ['remove_button'],
+    valueField: 'id',
+    labelField: 'name',
+    searchField: ['name', 'description'],
+    placeholder: 'Select tags (type to search by name or description)...',
+    {% if tags_data %}
+     options: {{ tags_data|safe }},
+    {% endif %}
+    render: {
+     option: function(item, escape) {
+      return '<div class="option">' +
+      '<span class="tag-color" style="background-color: ' + escape(item.color) + '; width: 12px; height: 12px; display: inline-block; border-radius: 2px; margin-right: 6px;"></span>' +
+      '<strong>' + escape(item.name) + '</strong>' +
+      (item.description ? '<br><small class="text-muted">' + escape(item.description) + '</small>' : '') +
+      '</div>';
+     },
+     item: function(item, escape) {
+      return '<div class="item">' +
+      '<span class="tag-color" style="background-color: ' + escape(item.color) + '; width: 10px; height: 10px; display: inline-block; border-radius: 2px; margin-right: 4px; vertical-align: middle;"></span>' +
+      escape(item.name) +
+      '</div>';
+     }
     },
-   {%endif%}
-   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);
+    onDropdownOpen: function() {
+     var self = this;
+     var $dropdown = self.$dropdown;
+     var $options = $dropdown.find('[data-selectable]');
+     var totalOptions = self.options ? Object.keys(self.options).length : 0;
+     var visibleOptions = $options.length;
+
+     // Add footer hint if there are more options than visible (due to search filtering or scrolling)
+     if (totalOptions > 6 && !$dropdown.find('.selectize-scroll-hint').length) {
+      $dropdown.append('<div class="selectize-scroll-hint text-center text-muted small py-2 px-3" style="border-top: 1px solid #dee2e6; background-color: #f8f9fa;">' +
+       '⬇ Scroll to see all ' + totalOptions + ' tags, or type to search' +
+       '</div>');
+     }
     }
-   },
-  });
+   });
+  {% else %}
+   $('#id_{{f}}').selectize({
+    plugins: ['remove_button'],
+    valueField: 'id',
+    labelField: 'value',
+    searchField: 'value',
+    {%if url%}
+     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);},
+      });
+     },
+    {%endif%}
+    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);
+     }
+    },
+   });
+  {% endif %}
  {%endfor%}
 </script>
 

pgcommitfest/commitfest/views.py

@@ -604,6 +604,21 @@ def commitfest(request, cfid):
     # the user is logged in. XXX: Figure out how to avoid doing that..
     form = CommitFestFilterForm(request.GET)
 
+    # Prepare tag data for enhanced selectize dropdown
+    import json
+
+    tags_data = json.dumps(
+        [
+            {
+                "id": tag.id,
+                "name": tag.name,
+                "color": tag.color,
+                "description": tag.description,
+            }
+            for tag in Tag.objects.all().order_by("name")
+        ]
+    )
+
     return render(
         request,
         "commitfest.html",
@@ -612,6 +627,7 @@ def commitfest(request, cfid):
             "form": form,
             "patches": patch_list.patches,
             "statussummary": statussummary,
+            "tags_data": tags_data,
             "all_tags": {t.id: t for t in Tag.objects.all()},
             "has_filter": patch_list.has_filter,
             "title": f"{cf.title} ({cf.periodstring})",
@@ -805,6 +821,21 @@ def patchform(request, patchid):
     else:
         form = PatchForm(instance=patch)
 
+    # Prepare tag data for enhanced selectize dropdown
+    import json
+
+    tags_data = json.dumps(
+        [
+            {
+                "id": tag.id,
+                "name": tag.name,
+                "color": tag.color,
+                "description": tag.description,
+            }
+            for tag in Tag.objects.all().order_by("name")
+        ]
+    )
+
     return render(
         request,
         "base_form.html",
@@ -813,6 +844,7 @@ def patchform(request, patchid):
             "form": form,
             "patch": patch,
             "title": "Edit patch",
+            "tags_data": tags_data,
             "breadcrumbs": [
                 {"title": cf.title, "href": "/%s/" % cf.pk},
                 {"title": "View patch", "href": "/%s/%s/" % (cf.pk, patch.pk)},
@@ -861,12 +893,28 @@ def newpatch(request, cfid):
     else:
         form = NewPatchForm(request=request)
 
+    # Prepare tag data for enhanced selectize dropdown
+    import json
+
+    tags_data = json.dumps(
+        [
+            {
+                "id": tag.id,
+                "name": tag.name,
+                "color": tag.color,
+                "description": tag.description,
+            }
+            for tag in Tag.objects.all().order_by("name")
+        ]
+    )
+
     return render(
         request,
         "base_form.html",
         {
             "form": form,
             "title": "New patch",
+            "tags_data": tags_data,
             "breadcrumbs": [
                 {"title": f"{cf.title} ({cf.periodstring})", "href": "/%s/" % cf.pk},
             ],