Implement HTMX lazy-loading for exam collections and optimize queryset annotations for performance
This commit is contained in:
@@ -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 %}
|
||||
Reference in New Issue
Block a user