Implement HTMX lazy-loading for exam collections and optimize queryset annotations for performance

This commit is contained in:
Ross
2025-12-29 12:26:56 +00:00
parent 768e1bf8c5
commit 4ecc32f837
4 changed files with 132 additions and 88 deletions
@@ -22,7 +22,7 @@
{% if object.anatomy_exams.all %}
{% if object.anatomy_count %}
<div class="card mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<strong>Anatomy Exams</strong>
@@ -31,16 +31,14 @@
<button class="btn btn-sm btn-outline-primary" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'anatomy' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker</button>
</div>
</div>
<div class="card-body p-2">
{% with exams=object.anatomy_exams.all app_name="anatomy" %}
{% include "exam_list.html#exam-list" %}
{% endwith %}
<div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'anatomy' %}" hx-trigger="revealed" hx-swap="innerHTML">
<div class="placeholder small text-muted">Loading anatomy exams…</div>
</div>
<div class="card-footer add-marker small"></div>
</div>
{% endif %}
{% if object.longs_exams.all %}
{% if object.longs_count %}
<div class="card mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<strong>Longs Exams</strong>
@@ -49,16 +47,14 @@
<button class="btn btn-sm btn-outline-primary" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'longs' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker</button>
</div>
</div>
<div class="card-body p-2">
{% with exams=object.longs_exams.all app_name="longs" %}
{% include "exam_list.html#exam-list" %}
{% endwith %}
<div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'longs' %}" hx-trigger="revealed" hx-swap="innerHTML">
<div class="placeholder small text-muted">Loading longs exams…</div>
</div>
<div class="card-footer add-marker small"></div>
</div>
{% endif %}
{% if object.rapids_exams.all %}
{% if object.rapids_count %}
<div class="card mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<strong>Rapids Exams</strong>
@@ -67,16 +63,14 @@
<button class="btn btn-sm btn-outline-primary" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'rapids' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker</button>
</div>
</div>
<div class="card-body p-2">
{% with exams=object.rapids_exams.all app_name="rapids" %}
{% include "exam_list.html#exam-list" %}
{% endwith %}
<div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'rapids' %}" hx-trigger="revealed" hx-swap="innerHTML">
<div class="placeholder small text-muted">Loading rapids exams…</div>
</div>
<div class="card-footer add-marker small"></div>
</div>
{% endif %}
{% if object.shorts_exams.all %}
{% if object.shorts_count %}
<div class="card mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<strong>Shorts Exams</strong>
@@ -85,39 +79,33 @@
<button class="btn btn-sm btn-outline-primary" hx-get="{% url 'generic:exam_collection_add_marker' object.pk 'shorts' %}" hx-target=".add-marker" hx-swap="innerHTML">Add marker</button>
</div>
</div>
<div class="card-body p-2">
{% with exams=object.shorts_exams.all app_name="shorts" %}
{% include "exam_list.html#exam-list" %}
{% endwith %}
<div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'shorts' %}" hx-trigger="revealed" hx-swap="innerHTML">
<div class="placeholder small text-muted">Loading shorts exams…</div>
</div>
<div class="card-footer add-marker small"></div>
</div>
{% endif %}
{% if object.physics_exams.all %}
{% if object.physics_count %}
<div class="card mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<strong>Physics Exams</strong>
<a class="btn btn-sm btn-outline-secondary" href="{% url 'physics:exam_list_collection' object.pk %}">View exam list</a>
</div>
<div class="card-body p-2">
{% with exams=object.physics_exams.all app_name="physics" %}
{% include "exam_list.html#exam-list" %}
{% endwith %}
<div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'physics' %}" hx-trigger="revealed" hx-swap="innerHTML">
<div class="placeholder small text-muted">Loading physics exams…</div>
</div>
</div>
{% endif %}
{% if object.sbas_exams.all %}
{% if object.sbas_count %}
<div class="card mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<strong>SBAs Exams</strong>
<a class="btn btn-sm btn-outline-secondary" href="{% url 'sbas:exam_list_collection' object.pk %}">View exam list</a>
</div>
<div class="card-body p-2">
{% with exams=object.sbas_exams.all app_name="sbas" %}
{% include "exam_list.html#exam-list" %}
{% endwith %}
<div class="card-body p-2" hx-get="{% url 'generic:exam_collection_exams_partial' object.pk 'sbas' %}" hx-trigger="revealed" hx-swap="innerHTML">
<div class="placeholder small text-muted">Loading SBAs exams…</div>
</div>
</div>
{% endif %}
@@ -0,0 +1,6 @@
{% load partials %}
{% comment %} Minimal fragment rendering the exam-list partialdef for HTMX swaps. {% endcomment %}
{% with exams=exams app_name=app_name marking=marking collection=collection %}
{% include "exam_list.html#exam-list" %}
{% endwith %}