Generalize multiselect dropdown widget

We need a generic multiselect dropdown widget all over the place and the one
specialized for selecting sources in the filterbox was *almost* all we needed.

changelog.d/+improve-dropdown-widget.changed.md

@@ -0,0 +1,2 @@
+Generalized the multiselect dropdown widget used for the source field in the
+filterbox so that we can use it for other dropdowns on other pages.

src/argus/htmx/incidents/filter.py

@@ -3,15 +3,15 @@
 from argus.filter import get_filter_backend
 from argus.incident.models import SourceSystem
 from argus.incident.constants import Level
+from argus.htmx.widgets import DropdownMultiSelect
 
 
 filter_backend = get_filter_backend()
 QuerySetFilter = filter_backend.QuerySetFilter
 
 
-class DropdownMultiSelect(forms.CheckboxSelectMultiple):
-    template_name = "htmx/incidents/_incident_source_select.html"
-    option_template_name = "htmx/forms/checkbox_select_multiple.html"
+class BadgeDropdownMultiSelect(DropdownMultiSelect):
+    template_name = "htmx/incidents/widgets/incident_source_select.html"
 
 
 class IncidentFilterForm(forms.Form):
@@ -20,7 +20,12 @@ class IncidentFilterForm(forms.Form):
     acked = forms.BooleanField(required=False)
     unacked = forms.BooleanField(required=False)
     source = forms.MultipleChoiceField(
-        widget=DropdownMultiSelect(attrs={"placeholder": "select sources..."}),
+        widget=BadgeDropdownMultiSelect(
+            attrs={"placeholder": "select sources..."},
+            extra={
+                "hx_get": "htmx:incidents-filter",
+            },
+        ),
         choices=tuple(SourceSystem.objects.values_list("id", "name")),
         required=False,
         label="Sources",

src/argus/htmx/templates/htmx/forms/dropdown_select_multiple.html

@@ -4,6 +4,7 @@
      hx-swap="outerHTML"
      hx-target="find .show-selected-box"
      hx-select=".show-selected-box"
+     {% if widget.extra.hx_get %}hx-get="{% url widget.extra.hx_get %}"{% endif %}
      {% endblock field_control %}>
   <div tabindex="0"
        role="button"

src/argus/htmx/templates/htmx/incidents/_incident_source_select.html → src/argus/htmx/templates/htmx/incidents/widgets/incident_source_select.html

@@ -1,8 +1,4 @@
 {% extends "htmx/forms/dropdown_select_multiple.html" %}
-{% block field_control %}
-  {{ block.super }}
-  hx-get="{% url 'htmx:incidents-filter' %}"
-{% endblock field_control %}
 {% block show_selected %}
   <span class="badge badge-primary">{{ option.label }}</span>
 {% endblock show_selected %}

src/argus/htmx/widgets.py

@@ -0,0 +1,23 @@
+from django import forms
+
+
+class ExtraWidgetMixin:
+    def __init__(self, extra=None, **kwargs):
+        super().__init__(**kwargs)
+        self.extra = {} if extra is None else extra
+
+    def __deepcopy__(self, memo):
+        obj = super().__deepcopy__(memo)
+        obj.extra = self.extra.copy()
+        memo[id(self)] = obj
+        return obj
+
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        context["widget"]["extra"] = self.extra
+        return context
+
+
+class DropdownMultiSelect(ExtraWidgetMixin, forms.CheckboxSelectMultiple):
+    template_name = "htmx/forms/dropdown_select_multiple.html"
+    option_template_name = "htmx/forms/checkbox_select_multiple.html"