filters: Add autocomplete to labels filter

Author: fstachura

htdocs/css/style.css

@@ -475,6 +475,14 @@ select[class^=change-property-], .archive-patch-select, .add-bundle {
     margin: 0 .1em;
 }
 
+.labels-field {
+    padding: 4px;
+    margin-right: 8px;
+    box-sizing: border-box;
+    border-radius: 4px;
+    min-width: 200px;
+}
+
 .patch-form-submit {
     font-weight: bold;
     padding: 4px;

patchwork/forms.py

@@ -148,6 +148,9 @@ def __init__(self, instance=None, project=None, *args, **kwargs):
         self.fields['labels'] = forms.ModelMultipleChoiceField(
             queryset=Label.get_project_labels(project),
             required=False,
+            widget=forms.SelectMultiple(
+                attrs={'class': 'labels-field', 'placeholder': 'Labels'}
+            ),
         )
 
     class Meta:
@@ -231,6 +234,9 @@ def __init__(self, project, *args, **kwargs):
 
         self.fields['labels'] = forms.ModelMultipleChoiceField(
             queryset=Label.get_project_labels(project),
+            widget=forms.SelectMultiple(
+                attrs={'class': 'labels-field', 'placeholder': 'Labels to add'}
+            ),
             required=False,
         )
         self.fields['state'] = OptionalModelChoiceField(

patchwork/templates/patchwork/partials/filters.html

@@ -1,5 +1,6 @@
 {% load static %}
 
+{{ project_labels|json_script:"project-labels-data" }}
 <script type="text/javascript">
 var filterform_displayed = false;
 function filter_click()
@@ -35,6 +36,26 @@
     })();
 });
 
+// Submit form on shift+enter or ctrl+enter
+Selectize.define('mod_enter_key_submit', function (options) {
+    var self = this;
+
+    this.onKeyDown = (function (e) {
+        var original = self.onKeyDown;
+
+        return function (e) {
+            var wasOpened = this.isOpen;
+
+            if (e.keyCode === 13 && (e.shiftKey || e.ctrlKey)) {
+                self.trigger('submit');
+                return;
+            }
+
+            original.apply(this, arguments);
+        };
+    })();
+});
+
 $(document).ready(function() {
     $('#submitter_input').selectize({
         plugins: ['enter_key_submit'],
@@ -76,6 +97,33 @@
             });
         }
     });
+
+    const project_labels = JSON.parse(
+        document.getElementById('project-labels-data').textContent
+    );
+
+    let label_options = project_labels.map(l => ({
+        value: l,
+        text: l,
+    }));
+
+    label_options = label_options.concat(
+        project_labels.map(l => ({
+            value: "-" + l,
+            text: "-" + l,
+        }))
+    );
+
+    $('#labels_input').selectize({
+        plugins: ['mod_enter_key_submit'],
+        maxItems: null,
+        persist: false,
+        hideSelected: true,
+        // Search for options that begin with a minus sign
+        respect_word_boundaries: false,
+        delimiter: ' ',
+        options: label_options,
+    });
 });
 </script>
 

patchwork/templates/patchwork/partials/patch-forms.html

@@ -1,3 +1,18 @@
+{% load static %}
+
+<script type="text/javascript">
+$(document).ready(function() {
+    $('.labels-field').selectize({
+        maxItems: null,
+        persist: false,
+        hideSelected: true,
+        // Search for options that begin with a minus sign
+        respect_word_boundaries: false,
+        delimiter: ' ',
+    });
+});
+</script>
+
 <div class="patch-forms" id="patch-forms">
 {% if patch_form %}
   <div id="patch-form-properties" class="patch-form">

patchwork/views/__init__.py

@@ -189,10 +189,16 @@ def generic_list(
     if not filter_settings:
         filter_settings = []
 
+    project_labels = [
+        label.name
+        for label in Label.get_project_labels(project)
+    ]
+
     filters = Filters(request)
     context = {
         'project': project,
         'projects': Project.objects.all(),
+        'project_labels': project_labels,
         'filters': filters,
     }