Replace select2 from submissions and use choices js

hypha/apply/dashboard/templates/dashboard/reviewer_dashboard.html

@@ -93,4 +93,6 @@ <h2 class="text-xl mb-2">
 {% block extra_js %}
     {{ filter.form.media.js }}
     <script src="{% static 'js/submission-filters.js' %}"></script>
+    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
+    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/funds/forms.py

@@ -21,7 +21,7 @@
 )
 from .permissions import can_change_external_reviewers
 from .utils import model_form_initial, render_icon
-from .widgets import MetaTermSelect2Widget, Select2MultiCheckboxesWidget
+from .widgets import MetaTermWidget, MultiCheckboxesWidget
 
 
 class ApplicationSubmissionModelForm(forms.ModelForm):
@@ -234,7 +234,7 @@ class BatchUpdateReviewersForm(forms.Form):
     )
     external_reviewers = forms.ModelMultipleChoiceField(
         queryset=User.objects.reviewers().only("pk", "full_name"),
-        widget=Select2MultiCheckboxesWidget(attrs={"data-placeholder": "Select..."}),
+        widget=MultiCheckboxesWidget(attrs={"data-placeholder": "Select..."}),
         label=_("External Reviewers"),
         required=False,
     )
@@ -398,7 +398,7 @@ def label_from_instance(self, obj):
 class UpdateMetaTermsForm(ApplicationSubmissionModelForm):
     meta_terms = GroupedModelMultipleChoiceField(
         queryset=None,  # updated in init method
-        widget=MetaTermSelect2Widget(attrs={"data-placeholder": "Select..."}),
+        widget=MetaTermWidget(attrs={"data-placeholder": "Select..."}),
         label=_("Meta terms"),
         choices_groupby="get_parent",
         required=False,

hypha/apply/funds/tables.py

@@ -22,7 +22,7 @@
 from hypha.images.models import CustomImage
 
 from .models import ApplicationSubmission, Round, ScreeningStatus
-from .widgets import MultiCheckboxesWidget, Select2MultiCheckboxesWidget
+from .widgets import MultiCheckboxesWidget
 from .workflow import STATUSES, get_review_active_statuses
 
 User = get_user_model()
@@ -290,15 +290,6 @@ def get_meta_terms_from_dataset(dataset):
     ).distinct()
 
 
-class Select2CheckboxWidgetMixin(filters.Filter):
-    def __init__(self, *args, **kwargs):
-        label = kwargs.get("label")
-        kwargs.setdefault(
-            "widget", Select2MultiCheckboxesWidget(attrs={"data-placeholder": label})
-        )
-        super().__init__(*args, **kwargs)
-
-
 class MultiCheckboxesMixin(filters.Filter):
     def __init__(self, *args, **kwargs):
         label = kwargs.get("label")
@@ -308,29 +299,17 @@ def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
 
-class Select2MultipleChoiceFilter(
-    Select2CheckboxWidgetMixin, filters.MultipleChoiceFilter
-):
-    pass
-
-
 class MultipleChoiceFilter(MultiCheckboxesMixin, filters.MultipleChoiceFilter):
     pass
 
 
-class Select2ModelMultipleChoiceFilter(
-    Select2MultipleChoiceFilter, filters.ModelMultipleChoiceFilter
-):
-    pass
-
-
 class ModelMultipleChoiceFilter(
     MultipleChoiceFilter, filters.ModelMultipleChoiceFilter
 ):
     pass
 
 
-class StatusMultipleChoiceFilter(Select2MultipleChoiceFilter):
+class StatusMultipleChoiceFilter(MultipleChoiceFilter):
     def __init__(self, limit_to, *args, **kwargs):
         choices = [
             (slugify(name), name)
@@ -356,25 +335,21 @@ def get_filter_predicate(self, v):
 
 
 class SubmissionFilter(filters.FilterSet):
-    fund = Select2ModelMultipleChoiceFilter(
+    fund = ModelMultipleChoiceFilter(
         field_name="page", queryset=get_used_funds, label=_("Funds")
     )
-    round = Select2ModelMultipleChoiceFilter(
-        queryset=get_used_rounds, label=_("Rounds")
-    )
-    lead = Select2ModelMultipleChoiceFilter(queryset=get_round_leads, label=_("Leads"))
-    screening_statuses = Select2ModelMultipleChoiceFilter(
+    round = ModelMultipleChoiceFilter(queryset=get_used_rounds, label=_("Rounds"))
+    lead = ModelMultipleChoiceFilter(queryset=get_round_leads, label=_("Leads"))
+    screening_statuses = ModelMultipleChoiceFilter(
         queryset=get_screening_statuses, label=_("Screening"), null_label=_("No Status")
     )
-    reviewers = Select2ModelMultipleChoiceFilter(
+    reviewers = ModelMultipleChoiceFilter(
         queryset=get_all_reviewers, label=_("Reviewers")
     )
-    category_options = Select2MultipleChoiceFilter(
+    category_options = MultipleChoiceFilter(
         choices=[], label=_("Category"), method="filter_category_options"
     )
-    meta_terms = Select2ModelMultipleChoiceFilter(
-        queryset=get_meta_terms, label=_("Terms")
-    )
+    meta_terms = ModelMultipleChoiceFilter(queryset=get_meta_terms, label=_("Terms"))
 
     class Meta:
         model = ApplicationSubmission
@@ -474,10 +449,8 @@ def filter_archived(self, queryset, name, value):
 
 
 class SubmissionDashboardFilter(filters.FilterSet):
-    round = Select2ModelMultipleChoiceFilter(
-        queryset=get_used_rounds, label=_("Rounds")
-    )
-    fund = Select2ModelMultipleChoiceFilter(
+    round = ModelMultipleChoiceFilter(queryset=get_used_rounds, label=_("Rounds"))
+    fund = ModelMultipleChoiceFilter(
         field_name="page", queryset=get_used_funds, label=_("Funds")
     )
 
@@ -547,7 +520,7 @@ def get_column_class_names(self, classes_set, bound_column):
         return classes_set
 
 
-class ActiveRoundFilter(Select2MultipleChoiceFilter):
+class ActiveRoundFilter(MultipleChoiceFilter):
     def __init__(self, *args, **kwargs):
         super().__init__(
             self,
@@ -567,7 +540,7 @@ def filter(self, qs, value):
             return qs.inactive()
 
 
-class OpenRoundFilter(Select2MultipleChoiceFilter):
+class OpenRoundFilter(MultipleChoiceFilter):
     def __init__(self, *args, **kwargs):
         super().__init__(
             self,
@@ -590,8 +563,8 @@ def filter(self, qs, value):
 
 
 class RoundsFilter(filters.FilterSet):
-    fund = Select2ModelMultipleChoiceFilter(queryset=get_used_funds, label=_("Funds"))
-    lead = Select2ModelMultipleChoiceFilter(queryset=get_round_leads, label=_("Leads"))
+    fund = ModelMultipleChoiceFilter(queryset=get_used_funds, label=_("Funds"))
+    lead = ModelMultipleChoiceFilter(queryset=get_round_leads, label=_("Leads"))
     active = ActiveRoundFilter(label=_("Active"))
     round_state = OpenRoundFilter(label=_("Open"))
 
@@ -620,17 +593,17 @@ class ReviewerLeaderboardFilter(filters.FilterSet):
         field_name="full_name", lookup_expr="icontains", widget=forms.HiddenInput
     )
 
-    reviewer = Select2ModelMultipleChoiceFilter(
+    reviewer = ModelMultipleChoiceFilter(
         field_name="pk",
         label=_("Reviewers"),
         queryset=get_all_reviewers,
     )
-    funds = Select2ModelMultipleChoiceFilter(
+    funds = ModelMultipleChoiceFilter(
         field_name="applicationsubmission__page",
         label=_("Funds"),
         queryset=get_used_funds,
     )
-    rounds = Select2ModelMultipleChoiceFilter(
+    rounds = ModelMultipleChoiceFilter(
         field_name="applicationsubmission__round",
         label=_("Rounds"),
         queryset=get_used_rounds,

hypha/apply/funds/templates/funds/base_submissions_table.html

@@ -20,4 +20,6 @@
     <script src="{% static 'js/submission-filters.js' %}"></script>
     <script src="{% static 'js/tabs.js' %}"></script>
     <script src="{% static 'js/batch-actions.js' %}"></script>
+    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
+    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/funds/templates/funds/includes/update_meta_terms_form.html

@@ -8,7 +8,7 @@
     {% comment %} Do this here as the select elements for different roles are dynamically generated. {% endcomment %}
     import Choices from "{% static 'js/esm/choices.js-10-2-0.js' %}";
 
-    const selectElements = document.querySelectorAll('#metaterms_form select');
+    const selectElements = document.querySelectorAll('#id_meta_terms');
 
     // add choices to all select elements
     selectElements.forEach((selectElement) => {

hypha/apply/funds/templates/funds/rounds.html

@@ -26,4 +26,6 @@
 {% block extra_js %}
     {{ filter.form.media.js }}
     <script src="{% static 'js/submission-filters.js' %}"></script>
+    <script src="{% static 'js/vendor/choices.min.js' %}"></script>
+    <script src="{% static 'js/choices-select.js' %}"></script>
 {% endblock %}

hypha/apply/funds/widgets.py

@@ -1,27 +1,4 @@
 from django import forms
-from django.templatetags.static import static
-from django_select2.forms import Select2MultipleWidget
-
-
-class Select2MultiCheckboxesWidget(Select2MultipleWidget):
-    class Media:
-        js = (
-            static("js/select2.multi-checkboxes.js"),
-            static("js/django_select2-checkboxes.js"),
-        )
-
-    def __init__(self, *args, **kwargs):
-        attrs = kwargs.get("attrs", {})
-        attrs.setdefault("data-placeholder", "items")
-        kwargs["attrs"] = attrs
-        super().__init__(*args, **kwargs)
-
-    def build_attrs(self, *args, **kwargs):
-        attrs = super().build_attrs(*args, **kwargs)
-        attrs["class"] = attrs["class"].replace(
-            "django-select2", "django-select2-checkboxes"
-        )
-        return attrs
 
 
 class MultiCheckboxesWidget(forms.SelectMultiple):
@@ -38,7 +15,7 @@ def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
 
 
-class MetaTermSelect2Widget(Select2MultipleWidget):
+class MetaTermWidget(forms.SelectMultiple):
     def create_option(
         self, name, value, label, selected, index, subindex=None, attrs=None
     ):

hypha/urls.py

@@ -45,7 +45,6 @@
     path("", include(tf_urls, "two_factor")),
     path("", include((user_urls, "users"))),
     path("tinymce/", include("tinymce.urls")),
-    path("select2/", include("django_select2.urls")),
 ]
 
 if settings.HIJACK_ENABLE: