Convert jquery to vanilla, remove unused js, fix minor bugs

.prettierignore

@@ -7,6 +7,7 @@
 # Minified JavaScript files shouldn't be changed
 **/**.min.js
 **/javascript/esm/**
+**/javascript/vendor/**
 
 # Ignore all files in the static & media directory.
 static_compiled/**

hypha/apply/dashboard/templates/dashboard/contracting_dashboard.html

@@ -36,7 +36,6 @@ <h4 class="heading heading--normal">{% trans "PAFs for review" %}</h4>
 {% endblock %}
 
 {% block extra_js %}
-    <script src="{% static 'js/url-search-params.js' %}"></script>
     <script src="{% static 'js/submission-filters.js' %}"></script>
     <script src="{% static 'js/tabs.js' %}"></script>
 {% endblock %}

hypha/apply/dashboard/templates/dashboard/finance_dashboard.html

@@ -103,6 +103,5 @@ <h4 class="heading heading--normal">{% trans "PAFs for review" %}</h4>
 
 {% block extra_js %}
     {{ my_reviewed.filterset.form.media.js }}
-    <script src="{% static 'js/url-search-params.js' %}"></script>
     <script src="{% static 'js/submission-filters.js' %}"></script>
 {% endblock %}

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

@@ -92,6 +92,5 @@ <h2 class="text-xl mb-2">
 
 {% block extra_js %}
     {{ filter.form.media.js }}
-    <script src="{% static 'js/url-search-params.js' %}"></script>
     <script src="{% static 'js/submission-filters.js' %}"></script>
 {% endblock %}

hypha/apply/dashboard/templates/dashboard/staff_dashboard.html

@@ -138,7 +138,6 @@ <h2 class="heading heading--normal">{{ review_heading }}</h2>
 
 {% block extra_js %}
     {{ my_reviewed.filterset.form.media.js }}
-    <script src="{% static 'js/url-search-params.js' %}"></script>
     <script src="{% static 'js/all-submissions-table.js' %}"></script>
     <script src="{% static 'js/submission-filters.js' %}"></script>
     <script src="{% static 'js/tabs.js' %}"></script>

hypha/apply/funds/templates/funds/application_base.html

@@ -88,7 +88,6 @@ <h3>{% blocktrans %}Sorry this {{ page|verbose_name }} is not accepting applicat
 
 {% block extra_js %}
     <script src="{% static 'js/application-form.js' %}"></script>
-    <script src="{% static 'js/file-uploads.js' %}"></script>
     <script src="{% static 'js/tinymce-word-count.js' %}"></script>
     <script src="{% static 'js/submission-form-copy.js' %}"></script>
     <script src="{% static 'js/application-form-links-new-window.js' %}"></script>

hypha/apply/funds/templates/funds/applicationsubmission_admin_detail.html

@@ -93,7 +93,6 @@ <h5 class="m-0">{% trans "Reminders" %}</h5>
 {% endblock %}
 
 {% block extra_js %}
-    {{ comment_form.media.js }}
     {{ block.super }}
     <script src="{% static 'js/jquery.fancybox.min.js' %}"></script>
     <script src="{% static 'js/fancybox-global.js' %}"></script>

hypha/apply/funds/templates/funds/applicationsubmission_community_detail.html

@@ -25,6 +25,5 @@ <h5>{% trans "Reviews & assignees" %}</h5>
 
 {% block extra_js %}
     {{ reviewer_form.media.js }}
-    {{ comment_form.media.js }}
     {{ block.super }}
 {% endblock %}

hypha/apply/funds/templates/funds/applicationsubmission_detail.html

@@ -262,7 +262,6 @@ <h4 class="m-0 sr-only">{% trans "Add communication" %}</h4>
 {% endblock %}
 
 {% block extra_js %}
-    {{ comment_form.media.js }}
     <script src="{% static 'js/tabs.js' %}"></script>
     <script src="{% static 'js/submission-text-cleanup.js' %}"></script>
     <script>

hypha/apply/funds/templates/funds/applicationsubmission_reviewer_detail.html

@@ -32,6 +32,5 @@ <h5>{% trans "Reviews & assignees" %}</h5>
 
 {% block extra_js %}
     {{ reviewer_form.media.js }}
-    {{ comment_form.media.js }}
     {{ block.super }}
 {% endblock %}

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

@@ -20,8 +20,6 @@
     <script src="{% static 'js/jquery.fancybox.min.js' %}"></script>
     <script src="{% static 'js/fancybox-global.js' %}"></script>
     <script src="{% static 'js/all-submissions-table.js' %}"></script>
-    <script src="{% static 'js/symbol-es6.min.js' %}"></script>
-    <script src="{% static 'js/url-search-params.js' %}"></script>
     <script src="{% static 'js/submission-filters.js' %}"></script>
     <script src="{% static 'js/tabs.js' %}"></script>
     <script src="{% static 'js/batch-actions.js' %}"></script>

hypha/apply/funds/templates/funds/grouped_application_list.html

@@ -20,8 +20,6 @@
     <script src="{% static 'js/jquery.fancybox.min.js' %}"></script>
     <script src="{% static 'js/fancybox-global.js' %}"></script>
     <script src="{% static 'js/all-submissions-table.js' %}"></script>
-    <script src="{% static 'js/symbol-es6.min.js' %}"></script>
-    <script src="{% static 'js/url-search-params.js' %}"></script>
     <script src="{% static 'js/submission-filters.js' %}"></script>
     <script src="{% static 'js/tabs.js' %}"></script>
     <script src="{% static 'js/batch-actions.js' %}"></script>

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

@@ -1,7 +1,7 @@
 {% load i18n primaryactions_tags %}
 
 {% if request.user|should_display_primary_actions_block:object %}
-    <div class="js-actions-sidebar sidebar__inner sidebar__inner--light-blue sidebar__inner--actions {% if mobile %}sidebar__inner--mobile{% endif %}" data-testid="sidebar-primary-actions">
+    <div class="sidebar__inner sidebar__inner--light-blue sidebar__inner--actions" data-testid="sidebar-primary-actions">
         <h5>{% trans "Actions to take" %}</h5>
 
         {% if object.in_internal_review_phase or object.in_external_review_phase %}

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

@@ -25,6 +25,5 @@
 
 {% block extra_js %}
     {{ filter.form.media.js }}
-    <script src="{% static 'js/url-search-params.js' %}"></script>
     <script src="{% static 'js/submission-filters.js' %}"></script>
 {% endblock %}

hypha/apply/funds/templates/funds/staff_assignments.html

@@ -17,8 +17,3 @@
         {% endblock %}
     </div>
 {% endblock %}
-
-{% block extra_js %}
-    {{ filter.form.media.js }}
-    <script src="{% static 'js/symbol-es6.min.js' %}"></script>
-{% endblock %}

hypha/apply/funds/templates/submissions/all.html

@@ -598,6 +598,9 @@ <h2 class='text-2xl'>{% trans "No results matched your search" %}</h2>
 {% endspaceless %}{% endblock content %}
 
 {% block extra_js %}
+    <!-- Datetime picker-->
+    <script src="{% static 'js/vendor/moment.min.js' %}"></script>
+    <script src="{% static 'js/vendor/daterangepicker.min.js' %}"></script>
     <script>
         // Date Range Picker
         // ---------------------------------------------

hypha/apply/projects/templates/application_projects/invoice_detail.html

@@ -55,7 +55,7 @@ <h5 class="card__heading">{% trans "Supporting Documents" %}</h5>
         <aside class="sidebar">
             {% block deliverables %}
             {% endblock %}
-            <div hx-get="{% url 'apply:projects:partial-invoice-detail-actions' pk=object.project.pk invoice_pk=object.pk %}" hx-trigger="invoicesUpdated from:body" class="sticky js-actions-sidebar sidebar__inner sidebar__inner--light-blue sidebar__inner--actions top-8" data-testid="sidebar-primary-actions">
+            <div hx-get="{% url 'apply:projects:partial-invoice-detail-actions' pk=object.project.pk invoice_pk=object.pk %}" hx-trigger="invoicesUpdated from:body" class="sticky sidebar__inner sidebar__inner--light-blue sidebar__inner--actions top-8" data-testid="sidebar-primary-actions">
                 {% include "application_projects/partials/invoice_detail_actions.html" %}
             </div>
         </aside>

hypha/apply/projects/templates/application_projects/project_admin_detail.html

@@ -6,7 +6,7 @@
 {% block admin_assignments %}
     {% user_can_update_project_status object user as can_update_status %}
     {% if can_update_status %}
-        <div class="js-actions-sidebar sidebar__inner sidebar__inner--light-blue sidebar__inner--actions {% if mobile %}sidebar__inner--mobile{% endif %}" data-testid="sidebar-primary-actions">
+        <div class="sidebar__inner sidebar__inner--light-blue sidebar__inner--actions" data-testid="sidebar-primary-actions">
 
             <h5>{% trans "Actions to take" %}</h5>
 
@@ -19,7 +19,7 @@ <h5>{% trans "Actions to take" %}</h5>
                     {% trans "Continue to next status" %}
                 </a>
             {% else %}
-    <!-- Move the condition below to link if add more than one link to 'More Actions'-->
+                <!-- Move the condition below to link if add more than one link to 'More Actions'-->
                 <details>
                     <summary class="sidebar__separator sidebar__separator--medium">{% trans "More actions" %}</summary>
 

hypha/apply/projects/templates/application_projects/project_approval_detail.html

@@ -96,7 +96,7 @@ <h4 class="mb-2">{% trans "Supporting Documents" %}</h4>
             {% user_can_take_actions object user as can_take_actions %}
             {% if can_take_actions %}
                 <aside class="sidebar sidebar__project">
-                    <div class="js-actions-sidebar sidebar__inner sidebar__inner--light-blue sidebar__inner--actions {% if mobile %}sidebar__inner--mobile{% endif %}" data-testid="sidebar-primary-actions">
+                    <div class="sidebar__inner sidebar__inner--light-blue sidebar__inner--actions" data-testid="sidebar-primary-actions">
                         <h5>{% trans "Actions to take" %}</h5>
                         {% user_can_edit_paf object user as can_edit_paf %}
                         {% if can_edit_paf %}

hypha/apply/projects/templates/application_projects/project_approval_form.html

@@ -72,7 +72,7 @@
                 </form>
             </div>
             <aside class="sidebar sidebar__project">
-                <div class="js-actions-sidebar sidebar__inner sidebar__inner--actions {% if mobile %}sidebar__inner--mobile{% endif %}">
+                <div class="sidebar__inner sidebar__inner--actions">
                     <h5>{% trans "Proposal attachments" %}</h5>
                     {% for file in submissions_attachments %}
                         <p><b><a href="{{ file.url }}" target="_blank">{{ file.filename }}</a></b></p>
@@ -96,7 +96,6 @@ <h5>{% trans "Proposal attachments" %}</h5>
 {% endblock %}
 
 {% block extra_js %}
-    <script src="{% static 'js/file-uploads.js' %}"></script>
     <script src="{% static 'js/tinymce-word-count.js' %}"></script>
     <script src="{% static 'js/multi-input-fields.js' %}"></script>
     <script src="{% static 'js/application-form-links-new-window.js' %}"></script>

hypha/apply/projects/templates/application_projects/project_detail.html

@@ -8,6 +8,7 @@
 {% block body_class %}{% endblock %}
 
 {% block content %}
+    {% display_project_status object request.user as project_status %}
     <div class="admin-bar" xmlns="http://www.w3.org/1999/html">
         <div class="admin-bar__inner">
             <h1 class="mb-0 font-medium"
@@ -56,7 +57,7 @@
                 {% endfor %}
             </div>
 
-            <div class="status-bar--mobile">
+            <div class="status-bar--mobile mt-5">
                 <h6 class="status-bar__subheading">
                     {{ project_status }}
                 </h6>
@@ -87,7 +88,6 @@ <h6 class="status-bar__subheading">
     </div>
 
     {% show_closing_banner object as show_banner %}
-    {% display_project_status object request.user as project_status %}
     {% if show_banner %}
         <div class="bg-red-500 text-white font-semibold text-center p-2">
             {% blocktrans with status=project_status %} This project is in {{ status }} state. {% endblocktrans %}
@@ -144,11 +144,7 @@ <h5>{% trans "E-mail" %}</h5>
                     <aside class="sidebar">
                         {% user_next_step_on_project object user request=request as next_step %}
                         {% if next_step %}
-                            {% if mobile %}
-                                <a class="js-actions-toggle button button--white button--full-width button--actions">{{ next_step.heading }}</a>
-                            {% endif %}
-
-                            <div class="bg-yellow-100 shadow js-actions-sidebar px-5 py-3 mb-8 sidebar__inner--actions {% if mobile %}sidebar__inner--mobile{% endif %}">
+                            <div class="bg-yellow-100 shadow px-5 py-3 mb-8 sidebar__inner--actions">
                                 <h5 class="border-b pb-2 border-b-orange-200">
                                     {% heroicon_solid "sparkles" class="inline me-1 fill-orange-500 align-text-top" aria_hidden=true %}
                                     {{ next_step.heading }}
@@ -166,12 +162,7 @@ <h5 class="border-b pb-2 border-b-orange-200">
                             </div>
                         {% endif %}
                         {% if object.paf_approvals.exists and not user.is_applicant %}
-                            {% if mobile %}
-                                <a class="js-actions-toggle button button--white button--full-width button--actions">{% trans "Project form approvals" %}</a>
-                            {% endif %}
-
-
-                            <div class="js-actions-sidebar sidebar__inner sidebar__inner--actions {% if mobile %}sidebar__inner--mobile{% endif %}">
+                            <div class="sidebar__inner sidebar__inner--actions">
 
                                 <h5>{% trans "Project form approvals" %}</h5>
                                 {% for paf_approval in object.paf_approvals.all %}

hypha/apply/projects/templates/application_projects/project_sow_detail.html

@@ -36,7 +36,7 @@ <h4 class="mb-2">{% trans "Project scope of work (SOW)" %}</h4>
             {% user_can_take_actions object user as can_take_actions %}
             {% if can_take_actions %}
                 <aside class="sidebar sidebar__project">
-                    <div class="js-actions-sidebar sidebar__inner sidebar__inner--light-blue sidebar__inner--actions {% if mobile %}sidebar__inner--mobile{% endif %}">
+                    <div class="sidebar__inner sidebar__inner--light-blue sidebar__inner--actions">
                         <h5>{% trans "Actions to take" %}</h5>
                         <div x-data="{ show: false }" class="dropdown">
                             <button x-on:click="show = ! show" class="button button--primary" type="button">

hypha/apply/review/templates/review/review_list.html

@@ -17,7 +17,7 @@
         {% endif %}
     {% endadminbar %}
 
-    <div class="wrapper wrapper--reviews-table js-reviews-table">
+    <div class="wrapper">
         <table class="reviews-list">
             {% for answers in review_data.values %}
                 <tr class="reviews-list__tr">

hypha/apply/users/templates/two_factor/_base.html

@@ -28,5 +28,8 @@
 
 {% block extra_js %}
     {{ block.super }}
-    <script src="{% static 'js/two-factor-focus.js' %}"></script>
+    {# Focus the 2FA field. #}
+    <script>
+        document.querySelector("#id_generator-token").focus();
+    </script>
 {% endblock %}

hypha/apply/users/templates/two_factor/core/backup_tokens.html

@@ -63,7 +63,7 @@ <h1>{% block title %}{% trans "Backup Codes" %}{% endblock %}</h1>
 {% endblock %}
 
 {% block extra_js %}
-    <script src="{% static 'js/clipboard.min.js' %}"></script>
+    <script src="{% static 'js/vendor/clipboard.min.js' %}"></script>
     <script>
 
     {# Select the codes when clicked #}

hypha/apply/users/templates/users/login.html

@@ -119,8 +119,8 @@ <h2 class="text-2xl">{% blocktrans %}Log in to {{ ORG_SHORT_NAME }}{% endblocktr
         </section>
     </div>
 
-    <script>
     {# Fix copy of dynamic fields label #}
+    <script>
         var labelOtpToken = document.querySelector("label[for=id_token-otp_token]");
         if(labelOtpToken){
             labelOtpToken.textContent = "{% trans 'Verification Code' %}: ";

hypha/static_src/javascript/file-uploads.js

@@ -1,29 +1,34 @@
-jQuery(function ($) {
+document.addEventListener("DOMContentLoaded", function () {
     // Initialize django-file-form
-    $("form")
-        .get()
-        .forEach(function (form) {
-            // Prevent initilising it multiple times and run it for forms
-            // that have a `form_id` field added by django-file-form.
-            if (
-                !form.initUploadFieldsDone &&
-                form.querySelector("[name=form_id]")
-            ) {
-                init(form);
-                form.initUploadFieldsDone = true;
-            }
-        });
+    document.querySelectorAll("form").forEach(function (form) {
+        // Prevent initializing it multiple times and run it for forms
+        // that have a `form_id` field added by django-file-form.
+        if (
+            !form.initUploadFieldsDone &&
+            form.querySelector("[name=form_id]")
+        ) {
+            init(form);
+            form.initUploadFieldsDone = true;
+        }
+    });
 
     /**
      * Initialize django-file-form for a form.
      * @param {object} form The form to initialize.
      */
     function init(form) {
-        if ($(".form__group--file").length) {
+        if (document.querySelectorAll(".form__group--file").length) {
             window.initUploadFields(form);
 
             // Hide wrapper elements for hidden inputs added by django-file-form
-            $("input[type=hidden]").closest(".form__group").hide();
+            document
+                .querySelectorAll("input[type=hidden]")
+                .forEach(function (input) {
+                    var closestFormGroup = input.closest(".form__group");
+                    if (closestFormGroup) {
+                        closestFormGroup.hidden = true;
+                    }
+                });
         }
     }
 });