[feature] Add Select2Widget for choice fields #254

Implement a reusable Select2Widget that uses Django's native admin assets to avoid extra dependencies.

Closes #254

Author: shivsubh

openwisp_utils/static/openwisp-utils/js/select2.js

@@ -0,0 +1,18 @@
+"use strict";
+
+django.jQuery(function ($) {
+  function initSelect2($element) {
+    $element.not('select[name*="__prefix__"]').each(function () {
+      var $el = $(this);
+      if (!$el.hasClass("select2-hidden-accessible")) {
+        $el.select2();
+      }
+    });
+  }
+
+  initSelect2($("select.ow-select2"));
+
+  $(document).on("formset:added", function (event, $row) {
+    initSelect2($row.find("select.ow-select2"));
+  });
+});

openwisp_utils/widgets.py

@@ -0,0 +1,34 @@
+from django.conf import settings
+from django.contrib.admin.widgets import SELECT2_TRANSLATIONS
+from django.forms import Media, Select
+from django.utils.translation import get_language
+
+
+class Select2Widget(Select):
+    """Select2 autocomplete widget for Django ChoiceFields."""
+
+    @property
+    def media(self):
+        extra = "" if getattr(settings, "DEBUG", False) else ".min"
+        i18n_name = SELECT2_TRANSLATIONS.get(get_language())
+        i18n_file = (
+            ("admin/js/vendor/select2/i18n/{0}.js".format(i18n_name),)
+            if i18n_name
+            else ()
+        )
+        return Media(
+            js=(
+                "admin/js/vendor/jquery/jquery{0}.js".format(extra),
+                "admin/js/vendor/select2/select2.full{0}.js".format(extra),
+            )
+            + i18n_file
+            + ("admin/js/jquery.init.js", "openwisp-utils/js/select2.js"),
+            css={
+                "screen": ("admin/css/vendor/select2/select2{0}.css".format(extra),),
+            },
+        )
+
+    def __init__(self, attrs=None, choices=()):
+        attrs = attrs or {}
+        attrs["class"] = "ow-select2 {0}".format(attrs.get("class", "")).strip()
+        super().__init__(attrs, choices)

tests/test_project/admin.py

@@ -15,6 +15,7 @@
     InputFilter,
     SimpleInputFilter,
 )
+from openwisp_utils.widgets import Select2Widget
 
 from .models import (
     Book,
@@ -122,6 +123,11 @@ class ShelfAdmin(TimeReadonlyAdminMixin, admin.ModelAdmin):
     ]
     search_fields = ["name"]
 
+    def formfield_for_choice_field(self, db_field, request, **kwargs):
+        if db_field.name == "books_type":
+            kwargs["widget"] = Select2Widget()
+        return super().formfield_for_choice_field(db_field, request, **kwargs)
+
 
 @admin.register(OrganizationRadiusSettings)
 class OrganizationRadiusSettingsAdmin(admin.ModelAdmin):

tests/test_project/tests/test_widgets.py

@@ -0,0 +1,22 @@
+from django.test import TestCase
+from openwisp_utils.widgets import Select2Widget
+
+
+class TestWidgets(TestCase):
+    def test_select2_widget_attrs(self):
+        widget = Select2Widget()
+        html = widget.render("name", "value")
+        self.assertIn('class="ow-select2"', html)
+
+        # test overriding works and class is preserved
+        widget = Select2Widget(attrs={"class": "my-class"})
+        html = widget.render("name", "value")
+        self.assertIn("ow-select2 my-class", html)
+
+    def test_select2_widget_media(self):
+        widget = Select2Widget()
+        media = str(widget.media)
+        self.assertIn("admin/css/vendor/select2/select2", media)
+        self.assertIn("admin/js/vendor/jquery/jquery", media)
+        self.assertIn("admin/js/vendor/select2/select2.full", media)
+        self.assertIn("openwisp-utils/js/select2.js", media)