Load Choices.js with data-js-choices. (#4381)

Added "data-js-choices" to:

* CommentForm
* UpdateReviewersForm
* BatchUpdateReviewersForm
* UpdatePartnersForm
* BecomeUserForm

Author: frjo

hypha/apply/activity/forms.py

@@ -20,6 +20,7 @@ class CommentForm(FileFormMixin, forms.ModelForm):
         empty_label=_("Select..."),
         label=_("Assign to"),
     )
+    assign_to.widget.attrs.update({"data-js-choices": ""})
 
     class Meta:
         model = Activity

hypha/apply/activity/templates/activity/include/comment_form.html

@@ -38,18 +38,4 @@
             </div>
         </div>
     </form>
-    <script type="module">
-        {% comment %} Do this here as the select elements for partners are dynamically generated. {% endcomment %}
-        import Choices from "{% static 'js/esm/choices.js-10-2-0.js' %}";
-
-        const selectElements = document.querySelectorAll('.id_assign_to select');
-
-        // add choices to all select elements
-        selectElements.forEach((selectElement) => {
-            new Choices(selectElement, {
-                removeItemButton: true,
-                allowHTML: true,
-            });
-        });
-    </script>
 </div>

hypha/apply/funds/forms.py

@@ -95,13 +95,14 @@ class UpdateReviewersForm(ApplicationSubmissionModelForm):
         label=_("External Reviewers"),
         required=False,
     )
+    reviewer_reviewers.widget.attrs.update(
+        {"data-placeholder": _("Select..."), "data-js-choices": ""}
+    )
 
     class Meta:
         model = ApplicationSubmission
         fields: list = []
 
-    reviewer_reviewers.widget.attrs.update({"data-placeholder": "Select..."})
-
     def __init__(self, *args, **kwargs):
         self.user = kwargs.pop("user")
         if kwargs.get("instance"):
@@ -127,6 +128,7 @@ def __init__(self, *args, **kwargs):
             self.fields[field_name] = data["field"]
             self.role_fields[field_name] = data["role"]
             self.fields[field_name].initial = assigned_roles.get(data["role"])
+            self.fields[field_name].widget.attrs.update({"data-js-choices": ""})
 
         self.submitted_reviewers = User.objects.filter(
             id__in=self.instance.assigned.reviewed().values("reviewer"),
@@ -234,7 +236,7 @@ class BatchUpdateReviewersForm(forms.Form):
     )
     external_reviewers = forms.ModelMultipleChoiceField(
         queryset=User.objects.reviewers().only("pk", "full_name"),
-        widget=MultiCheckboxesWidget(attrs={"data-placeholder": "Select..."}),
+        widget=MultiCheckboxesWidget(attrs={"data-placeholder": _("Select...")}),
         label=_("External Reviewers"),
         required=False,
     )
@@ -252,6 +254,7 @@ def __init__(self, *args, user=None, round=None, **kwargs):
             field_name = data["field_name"]
             self.fields[field_name] = data["field"]
             self.role_fields[field_name] = data["role"]
+            self.fields[field_name].widget.attrs.update({"data-js-choices": ""})
 
         self.fields.move_to_end("external_reviewers")
 
@@ -330,7 +333,9 @@ class UpdatePartnersForm(ApplicationSubmissionModelForm):
         label=_("Partners"),
         required=False,
     )
-    partner_reviewers.widget.attrs.update({"data-placeholder": "Select..."})
+    partner_reviewers.widget.attrs.update(
+        {"data-placeholder": _("Select..."), "data-js-choices": ""}
+    )
 
     class Meta:
         model = ApplicationSubmission

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

@@ -58,18 +58,3 @@
         >{% trans "Cancel" %}</button>
     </div>
 </form>
-
-<script type="module">
-    {% 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('#reviewer_form select');
-
-    // add choices to all select elements
-    selectElements.forEach((selectElement) => {
-        new Choices(selectElement, {
-            removeItemButton: true,
-            allowHTML: true,
-        });
-    });
-</script>

hypha/apply/funds/templates/funds/modals/update_partner_form.html

@@ -15,18 +15,3 @@
     {% url 'funds:submissions:partners_update' pk=object.pk as progress_url %}
     {% include 'funds/includes/dialog_form_base.html' with form=form value=value url=progress_url %}
 </form>
-
-<script type="module">
-    {% comment %} Do this here as the select elements for partners are dynamically generated. {% endcomment %}
-    import Choices from "{% static 'js/esm/choices.js-10-2-0.js' %}";
-
-    const selectElements = document.querySelectorAll('#partner_form select');
-
-    // add choices to all select elements
-    selectElements.forEach((selectElement) => {
-        new Choices(selectElement, {
-            removeItemButton: true,
-            allowHTML: true,
-        });
-    });
-</script>

hypha/apply/funds/templates/submissions/submenu/bulk-update-reviewers.html

@@ -48,18 +48,3 @@
         {% trans "Update" %}
     </button>
 </form>
-
-<script type="module">
-    {% 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('#bulk-update-reviewers-form select');
-
-    // add choices to all select elements
-    selectElements.forEach((selectElement) => {
-        new Choices(selectElement, {
-            removeItemButton: true,
-            allowHTML: true,
-        });
-    });
-</script>

hypha/apply/users/forms.py

@@ -244,6 +244,7 @@ class BecomeUserForm(forms.Form):
         label="",
         required=False,
     )
+    user_pk.widget.attrs.update({"data-js-choices": ""})
 
 
 class EmailChangePasswordForm(forms.Form):

hypha/apply/users/templates/users/become.html

@@ -33,16 +33,3 @@
         >{% trans "Cancel" %}</button>
     </div>
 </i>
-
-<script type="module">
-    import Choices from "{% static 'js/esm/choices.js-10-2-0.js' %}";
-
-    const selectElements = document.querySelectorAll('select#id_user_pk');
-
-    // add choices to all select elements
-    selectElements.forEach((selectElement) => {
-        new Choices(selectElement, {
-            allowHTML: true
-        });
-    });
-</script>