[bootstrap5] Upgrade to Bootstrap 5 and Alpine 3 (#47)

* wip * wip * wip * wip * typings * Rewrite filter field * wip * Fix dropdown in navbar * js snippets * update settings from js * Retain form state correctly * Get rid of jQuery and upgrade Alpine * Replace morphdom with alpine-morph * Save form fields to user preferences
openradx · Aug 6, 2023 · e4c1c5a · e4c1c5a
1 parent 779e17f
commit e4c1c5a
Show file tree

Hide file tree

Showing 102 changed files with 20,576 additions and 35,452 deletions.
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -35,7 +35,8 @@
         "ms-python.vscode-pylance",
         "streetsidesoftware.code-spell-checker",
         "tamasfe.even-better-toml",
-        "wayou.vscode-todo-highlight"
+        "wayou.vscode-todo-highlight",
+        "xabikos.javascriptsnippets"
       ]
     }
   }

diff --git a/.gitpod.yml b/.gitpod.yml
@@ -42,3 +42,4 @@ vscode:
     - "streetsidesoftware.code-spell-checker"
     - "tamasfe.even-better-toml"
     - "wayou.vscode-todo-highlight"
+    - "xabikos.javascriptsnippets"
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -18,7 +18,8 @@
     "ms-python.vscode-pylance",
     "streetsidesoftware.code-spell-checker",
     "tamasfe.even-better-toml",
-    "wayou.vscode-todo-highlight"
+    "wayou.vscode-todo-highlight",
+    "xabikos.javascriptsnippets"
   ],
   "unwantedRecommendations": []
 }
diff --git a/TODO.md b/TODO.md
@@ -5,6 +5,7 @@
 - Make job urgent (as staff member)
 - Bootstrap 5 Upgrade
 - Selective transfer choose series
+- Locked info for other apps like batch_transfer_locked.html
 - Hint when app is locked for admin user
 
 ## High Priority
@@ -131,3 +132,9 @@
   -- <https://github.com/django/django/blob/main/django/test/testcases.py#L1810>
 - Maybe move label from from form to models using "verbose_name" and also the help_text
 - Save specific form fields for later use with HTMX, currently we only save them in the post handler when the form is valid.
+
+## RADIS
+
+- Get rid of jQuery in ADIT and RADIS
+- Get rid of Jumbotron
+- Get rid of those not used accounts views and login form
diff --git a/adit/accounts/migrations/0003_rename_misc_settings_user_preferences.py b/adit/accounts/migrations/0003_rename_misc_settings_user_preferences.py
@@ -0,0 +1,17 @@
+# Generated by Django 4.2.3 on 2023-08-06 08:20
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("accounts", "0002_alter_user_id"),
+    ]
+
+    operations = [
+        migrations.RenameField(
+            model_name="user",
+            old_name="misc_settings",
+            new_name="preferences",
+        ),
+    ]
diff --git a/adit/accounts/migrations/0004_alter_user_preferences.py b/adit/accounts/migrations/0004_alter_user_preferences.py
@@ -0,0 +1,17 @@
+# Generated by Django 4.2.3 on 2023-08-06 08:23
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("accounts", "0003_rename_misc_settings_user_preferences"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="user",
+            name="preferences",
+            field=models.JSONField(default=dict),
+        ),
+    ]
diff --git a/adit/accounts/models.py b/adit/accounts/models.py
@@ -7,7 +7,7 @@
 class User(AbstractUser):
     phone_number = models.CharField(max_length=64)
     department = models.CharField(max_length=128)
-    misc_settings = models.JSONField(null=True, blank=True)
+    preferences = models.JSONField(default=dict)
 
     def is_group_member(self, group_name: str):
         return self.groups.filter(name=group_name).exists()

diff --git a/adit/accounts/templates/accounts/user_profile.html b/adit/accounts/templates/accounts/user_profile.html
@@ -34,12 +34,12 @@ <h4>Profile information</h4>
     <br>
     <div>
         <h4>Token Authentication</h4>
-        <a class="btn btn-link ml-2" href="{% url 'token_dashboard' %}">Manage Authentication Tokens</a>
+        <a class="btn btn-link ms-2" href="{% url 'token_dashboard' %}">Manage Authentication Tokens</a>
     </div>
     <br>
     <div>
         <h4>Actions</h4>
         <a class="btn btn-secondary" href="{% url 'auth_password_change' %}">Change Password</a>
-        <a class="btn btn-secondary ml-2" href="{% url 'auth_logout' %}">Logout</a>
+        <a class="btn btn-secondary ms-2" href="{% url 'auth_logout' %}">Logout</a>
     </div>
 {% endblock container %}
diff --git a/adit/batch_query/filters.py b/adit/batch_query/filters.py
@@ -2,7 +2,7 @@
 from django.views import View
 
 from adit.core.filters import DicomJobFilter, DicomTaskFilter
-from adit.core.forms import SingleFilterFormHelper
+from adit.core.forms import FilterSetFormHelper
 from adit.core.utils.type_utils import with_type_hint
 
 from .models import BatchQueryJob, BatchQueryResult, BatchQueryTask
@@ -27,9 +27,8 @@ class Meta:
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
-        self.form.helper = SingleFilterFormHelper(
-            self.request.GET,
-            "task_id",
-            select_widget=False,
-            custom_style="width: 7em;",
-        )
+
+        form_helper = FilterSetFormHelper(self.request.GET)
+        form_helper.add_filter_field("task_id", "text", "Filter")
+        form_helper.build_filter_set_layout()
+        self.form.helper = form_helper
diff --git a/adit/batch_query/forms.py b/adit/batch_query/forms.py
@@ -55,7 +55,10 @@ def __init__(self, *args, **kwargs):
 
         super().__init__(*args, **kwargs)
 
-        self.fields["source"].widget.attrs["class"] = "custom-select"
+        self.fields["source"].widget.attrs["class"] = "form-select"
+        self.fields["source"].widget.attrs["@change"] = "onSourceChange($event)"
+
+        self.fields["urgent"].widget.attrs["@change"] = "onUrgentChange($event)"
 
         if not user.has_perm("batch_query.can_process_urgently"):
             del self.fields["urgent"]
@@ -71,7 +74,12 @@ def __init__(self, *args, **kwargs):
                 "batch_file"
             ].help_text = f"Maximum {self.max_batch_size} tasks per query job!"
 
+        self.fields["send_finished_mail"].widget.attrs[
+            "@change"
+        ] = "onSendFinishedMailChange($event)"
+
         self.helper = FormHelper(self)
+        self.helper.attrs["x-data"] = "batchQueryJobForm()"
         self.helper.add_input(Submit("save", "Create Job"))
 
     def clean_batch_file(self):
@@ -91,7 +99,7 @@ def clean_batch_file(self):
             raise ValidationError(
                 mark_safe(
                     "Invalid batch file. "
-                    '<a href="#" data-toggle="modal" data-target="#batch_file_errors_modal">'
+                    '<a href="#" data-bs-toggle="modal" data-bs-target="#batch_file_errors_modal">'
                     "[View details]"
                     "</a>"
                 )

diff --git a/adit/batch_query/static/batch_query/batch_query_job_form.js b/adit/batch_query/static/batch_query/batch_query_job_form.js
@@ -0,0 +1,24 @@
+// Keep those variables in sync with the ones in the Django view
+const BATCH_QUERY_SOURCE = "batch_query_source";
+const BATCH_QUERY_URGENT = "batch_query_urgent";
+const BATCH_QUERY_SEND_FINISHED_MAIL = "batch_query_send_finished_mail";
+
+function batchQueryJobForm() {
+  return {
+    onSourceChange: function (ev) {
+      updatePreferences("batch-query", {
+        [BATCH_QUERY_SOURCE]: ev.target.value,
+      });
+    },
+    onUrgentChange: function (ev) {
+      updatePreferences("batch-query", {
+        [BATCH_QUERY_URGENT]: ev.target.checked,
+      });
+    },
+    onSendFinishedMailChange: function (ev) {
+      updatePreferences("batch-query", {
+        [BATCH_QUERY_SEND_FINISHED_MAIL]: ev.target.checked,
+      });
+    },
+  };
+}
diff --git a/adit/batch_query/tables.py b/adit/batch_query/tables.py
@@ -25,7 +25,6 @@ class BatchQueryResultTable(tables.Table):
 
     class Meta:
         model = BatchQueryResult
-        template_name = "django_tables2/bootstrap4.html"
         empty_text = "No results to show"
         fields = (
             "task_id",

diff --git a/adit/batch_query/templates/batch_query/batch_query_job_detail.html b/adit/batch_query/templates/batch_query/batch_query_job_detail.html
@@ -1,14 +1,13 @@
 {% extends "core/base_generic.html" %}
 {% load dicom_job_status_css_class from core_extras %}
-{% load crispy from crispy_forms_tags %}
 {% load render_table from django_tables2 %}
 {% load job_control_panel from batch_query_extras %}
 {% block container %}
     <div class="d-flex justify-content-between align-items-start">
         <h4 class="mb-3">Batch Query Job</h4>
         <a href="{% url 'batch_query_job_list' %}">
             {% include "core/icons/list.svg" %}
-            <strong class="align-middle">Job List</strong>
+            Job List
         </a>
     </div>
     <dl class="row">
@@ -56,19 +55,16 @@ <h4 class="mb-3">Batch Query Job</h4>
             {{ job.message|default:"—" }}
         </dd>
     </dl>
-    <div class="row justify-content-start mb-1">
-        <div class="col-md">
-            <h5 text-nowrap>
-                Study Queries
-                <a href="{% url 'batch_query_result_list' job.id %}"
-                   class="badge badge-light align-top">
-                    {% include "core/icons/view.svg" %}
-                    View Results
-                </a>
-            </h5>
-        </div>
-        <div class="col col-md-auto">{% crispy filter.form %}</div>
-        <div class="col col-md-auto">{% crispy page_size_select %}</div>
+    <div class="d-flex justify-content-between">
+        <h5 text-nowrap>
+            Study Queries
+            <a href="{% url 'batch_query_result_list' job.id %}"
+               class="badge text-bg-light align-top">
+                {% include "core/icons/view.svg" %}
+                View Results
+            </a>
+        </h5>
+        {% include "core/_table_filters.html" %}
     </div>
     {% render_table table %}
     {% job_control_panel %}

diff --git a/adit/batch_query/templates/batch_query/batch_query_job_form.html b/adit/batch_query/templates/batch_query/batch_query_job_form.html
@@ -1,5 +1,10 @@
 {% extends "core/base_generic.html" %}
+{% load static from static %}
 {% load crispy from crispy_forms_tags %}
+{% block script %}
+    {{ block.super }}
+    <script src="{% static 'batch_query/batch_query_job_form.js' %}"></script>
+{% endblock script %}
 {% block container %}
     <div class="d-flex justify-content-between align-items-start">
         <h4 class="mb-3">
@@ -8,7 +13,7 @@ <h4 class="mb-3">
         </h4>
         <a href="{% url 'batch_query_job_list' %}">
             {% include "core/icons/list.svg" %}
-            <strong class="align-middle">Previous Jobs</strong>
+            Previous Jobs
         </a>
     </div>
     {% crispy form %}

diff --git a/adit/batch_query/templates/batch_query/batch_query_job_list.html b/adit/batch_query/templates/batch_query/batch_query_job_list.html
@@ -4,7 +4,7 @@
         <h4 class="mb-3">Batch Query Jobs</h4>
         <a href="{% url 'batch_query_job_create' %}">
             {% include "core/icons/create.svg" %}
-            <strong class="align-middle">Create New Job</strong>
+            Create New Job
         </a>
     </div>
     {% include "core/_dicom_job_table.html" %}

diff --git a/adit/batch_query/templates/batch_query/batch_query_result_list.html b/adit/batch_query/templates/batch_query/batch_query_result_list.html
@@ -1,26 +1,22 @@
 {% extends "core/base_generic.html" %}
-{% load crispy from crispy_forms_tags %}
 {% load render_table from django_tables2 %}
 {% block container %}
     <div class="d-flex justify-content-between align-items-start">
         <h4 class="mb-3">Batch Query Results</h4>
         <a href="{% url 'batch_query_job_detail' job.id %}">
             {% include "core/icons/back.svg" %}
-            <strong class="align-middle">View Job</strong>
+            View Job
         </a>
     </div>
-    <div class="row justify-content-start mb-1">
-        <div class="col-md">
-            <h5 text-nowrap class="mb-0">
-                <a href="{% url 'batch_query_result_download' job.id %}"
-                   class="badge badge-light align-top">
-                    {% include "core/icons/download.svg" %}
-                    Download all results
-                </a>
-            </h5>
-        </div>
-        <div class="col col-md-auto">{% crispy filter.form %}</div>
-        <div class="col col-md-auto">{% crispy page_size_select %}</div>
+    <div class="d-flex justify-content-between">
+        <h5 text-nowrap class="mb-0">
+            <a href="{% url 'batch_query_result_download' job.id %}"
+               class="badge text-bg-light align-top">
+                {% include "core/icons/download.svg" %}
+                Download all results
+            </a>
+        </h5>
+        {% include "core/_table_filters.html" %}
     </div>
     {% render_table table %}
 {% endblock container %}
diff --git a/adit/batch_query/urls.py b/adit/batch_query/urls.py
@@ -13,9 +13,14 @@
     BatchQueryResultDownloadView,
     BatchQueryResultListView,
     BatchQueryTaskDetailView,
+    BatchQueryUpdatePreferencesView,
 )
 
 urlpatterns = [
+    path(
+        "update-preferences/",
+        BatchQueryUpdatePreferencesView.as_view(),
+    ),
     path(
         "jobs/",
         BatchQueryJobListView.as_view(),

diff --git a/adit/batch_query/views.py b/adit/batch_query/views.py
@@ -12,6 +12,7 @@
 
 from adit.core.mixins import OwnerRequiredMixin, PageSizeSelectMixin, RelatedFilterMixin
 from adit.core.views import (
+    BaseUpdatePreferencesView,
     DicomJobCancelView,
     DicomJobCreateView,
     DicomJobDeleteView,
@@ -30,7 +31,17 @@
 from .tables import BatchQueryJobTable, BatchQueryResultTable, BatchQueryTaskTable
 from .utils.exporters import write_results
 
-SAVED_SEND_FINISHED_MAIL_FIELD = "batch_query_send_finished_mail"
+BATCH_QUERY_SOURCE = "batch_query_source"
+BATCH_QUERY_URGENT = "batch_query_urgent"
+BATCH_QUERY_SEND_FINISHED_MAIL = "batch_query_send_finished_mail"
+
+
+class BatchQueryUpdatePreferencesView(BaseUpdatePreferencesView):
+    allowed_keys = [
+        BATCH_QUERY_SOURCE,
+        BATCH_QUERY_URGENT,
+        BATCH_QUERY_SEND_FINISHED_MAIL,
+    ]
 
 
 class BatchQueryJobListView(DicomJobListView):
@@ -50,15 +61,23 @@ class BatchQueryJobCreateView(DicomJobCreateView):
     def get_initial(self) -> dict[str, Any]:
         initial = super().get_initial()
 
-        saved_finished_mail = self.request.session.get(SAVED_SEND_FINISHED_MAIL_FIELD)
-        if saved_finished_mail is not None:
-            initial["send_finished_mail"] = saved_finished_mail
+        preferences: dict[str, Any] = self.request.user.preferences
+
+        source = preferences.get(BATCH_QUERY_SOURCE)
+        if source is not None:
+            initial["source"] = source
+
+        urgent = preferences.get(BATCH_QUERY_URGENT)
+        if urgent is not None:
+            initial["urgent"] = urgent
+
+        send_finished_mail = preferences.get(BATCH_QUERY_SEND_FINISHED_MAIL)
+        if send_finished_mail is not None:
+            initial["send_finished_mail"] = send_finished_mail
 
         return initial
 
     def form_valid(self, form):
-        self.request.session[SAVED_SEND_FINISHED_MAIL_FIELD] = form.instance.send_finished_mail
-
         user = self.request.user
         form.instance.owner = user
         response = super().form_valid(form)