[feat] 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,36 @@
+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,23 @@
+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)