Implement HTMX support for user collections display and refactor rendering logic
This commit is contained in:
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user