ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement HTMX support for user collections display and refactor rendering logic

Browse Source
This commit is contained in:
Ross
2026-01-26 10:44:54 +00:00
parent 0a1b21cec6
commit 797eb9c54a
4 changed files with 79 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
atlas/templates/atlas/index.html
+8
View File
@@ -29,6 +29,14 @@
</p>
</div>
</div>
<!-- HTMX-loaded user collections (loads on page load) -->
<div id="user-collections-placeholder"
hx-get="{% url 'atlas:user_collections' %}"
hx-trigger="load"
hx-swap="innerHTML"
class="mt-3">
<div class="text-muted">Loading your collections…</div>
</div>
</div>
<div class="col-12 col-md-4">
atlas/templates/atlas/partials/_user_collections.html
+46
View File
@@ -0,0 +1,46 @@
{% comment %}Partial listing of a user's collections for HTMX swaps{% endcomment %}
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Your collections</h5>
<h6 class="mt-3">Available to start</h6>
<ul class="list-unstyled">
{% for collection in available_collections %}
<li>
<a href="{% url 'atlas:collection_take_start' collection.pk %}">{{ collection.name }}</a>
{% if collection.description %}<small class="text-muted"> — {{ collection.description }}</small>{% endif %}
</li>
{% empty %}
<li class="text-muted">No collections available to start.</li>
{% endfor %}
</ul>
<h6 class="mt-3">In progress</h6>
<ul class="list-unstyled">
{% for collection in in_progress_collections %}
<li>
<a href="{% url 'atlas:collection_take_start' collection.pk %}">{{ collection.name }}</a>
<span class="badge bg-warning text-dark ms-2">In progress</span>
{% if collection.description %}<small class="text-muted"> — {{ collection.description }}</small>{% endif %}
</li>
{% empty %}
<li class="text-muted">No in-progress collections.</li>
{% endfor %}
</ul>
<h6 class="mt-3">Finished</h6>
<ul class="list-unstyled">
{% for collection in finished_collections %}
<li>
<a href="{% url 'atlas:collection_take_start' collection.pk %}">{{ collection.name }}</a>
<span class="badge bg-success ms-2">Completed</span>
{% if collection.description %}<small class="text-muted"> — {{ collection.description }}</small>{% endif %}
</li>
{% empty %}
<li class="text-muted">No finished collections.</li>
{% endfor %}
</ul>
</div>
</div>
atlas/templates/atlas/user_collections.html
+6 -45
View File
@@ -3,51 +3,12 @@
{% block content %}
<h2>Collections</h2>
The following collections are available for you to view / take. If you received a directly link to a collection it will not appear here unless you have started it.
<p>
The following collections are available for you to view / take. If you received a direct
link to a collection it will not appear here unless you have started it.
</p>
<h3>Available to start</h3>
<ul>
{% for collection in available_collections %}
<li>
<a href="{% url 'atlas:collection_take_start' collection.pk %}">{{ collection.name }}</a>
{% if collection.description %}
<small class="text-muted">— {{ collection.description }}</small>
{% endif %}
</li>
{% empty %}
<li>No collections available to start.</li>
{% endfor %}
</ul>
<h3>In progress</h3>
<ul>
{% for collection in in_progress_collections %}
<li>
<a href="{% url 'atlas:collection_take_start' collection.pk %}">{{ collection.name }}</a>
<span class="badge bg-warning text-dark">In progress</span>
{% if collection.description %}
<small class="text-muted">— {{ collection.description }}</small>
{% endif %}
</li>
{% empty %}
<li>No in-progress collections.</li>
{% endfor %}
</ul>
<h3>Finished</h3>
<ul>
{% for collection in finished_collections %}
<li>
<a href="{% url 'atlas:collection_take_start' collection.pk %}">{{ collection.name }}</a>
<span class="badge bg-success">Completed</span>
{% if collection.description %}
<small class="text-muted">— {{ collection.description }}</small>
{% endif %}
</li>
{% empty %}
<li>No finished collections.</li>
{% endfor %}
</ul>
{# Reuse the HTMX-friendly partial so the same markup is used for full-page and HTMX responses #}
{% include 'atlas/partials/_user_collections.html' %}
{% endblock %}
atlas/views.py
+19 -9
View File
@@ -1131,15 +1131,25 @@ def user_collections(request):
# Finished (completed)
finished_qs = CaseCollection.objects.filter(pk__in=list(finished_ids)).order_by("name")
return render(
request,
"atlas/user_collections.html",
{
"available_collections": available_qs,
"in_progress_collections": in_progress_qs,
"finished_collections": finished_qs,
},
)
context = {
"available_collections": available_qs,
"in_progress_collections": in_progress_qs,
"finished_collections": finished_qs,
}
# If called via HTMX return a small fragment suitable for swapping
# into the index page. Otherwise render the full page.
is_htmx = getattr(request, "htmx", False) or request.headers.get("HX-Request", "").lower() == "true"
if is_htmx:
html = render_to_string("atlas/partials/_user_collections.html", context, request=request)
return HttpResponse(html)
return render(request, "atlas/user_collections.html", context)
# Note: keep the above full-page render for normal requests. If this
# endpoint is called by HTMX we prefer returning a small fragment so it
# can be swapped into the index page without duplicating layout.
@login_required
def collection_options(request):