various small bugfixes; add cards list view

theme/templates/cards/_card_list.html

@@ -0,0 +1,40 @@
+{% load card_badge %}
+{% if group_by and groups %}
+    {% for group in groups %}
+        <div class="divider">{{ group.group }}</div>
+        <div class="flex justify-center flex-wrap gap-4">
+            {% for card in group.cards %}
+                <a href="{% url 'cards:card_detail' card.pk %}">
+                    {% card_badge card "" %}
+                </a>
+            {% endfor %}
+        </div>
+    {% endfor %}
+{% else %}
+    <div class="flex justify-center flex-wrap gap-4">
+        {% for card in cards %}
+            <a href="{% url 'cards:card_detail' card.pk %}">
+                {% card_badge card "" %}
+            </a>
+        {% endfor %}
+    </div>
+{% endif %}
+
+<!-- Pagination Controls -->
+<div class="mt-6">
+    {% if is_paginated %}
+        <div class="flex justify-center space-x-2">
+            {% if page_obj.has_previous %}
+                <button class="btn btn-outline" @click="$dispatch('change-page', { page: {{ page_obj.previous_page_number }} })">
+                    Previous
+                </button>
+            {% endif %}
+            <span>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
+            {% if page_obj.has_next %}
+                <button class="btn btn-outline" @click="$dispatch('change-page', { page: {{ page_obj.next_page_number }} })">
+                    Next
+                </button>
+            {% endif %}
+        </div>
+    {% endif %}
+</div>

theme/templates/cards/card_list.html

@@ -0,0 +1,52 @@
+{% extends "base.html" %}
+{% load static card_badge %}
+{% block content %}
+<div class="container mx-auto p-4" 
+     x-data="{
+         order: '{{ order }}',
+         groupBy: '{{ group_by|default:'none' }}',
+         page: 1,
+         loadCards() {
+             // Construct URL using current pathname and query parameters.
+             let groupParam = this.groupBy === 'none' ? '' : this.groupBy;
+             let url = window.location.pathname + '?order=' + this.order + '&group_by=' + groupParam + '&page=' + this.page;
+             fetch(url, { headers: { 'x-requested-with': 'XMLHttpRequest' } })
+                .then(response => response.text())
+                .then(html => { this.$refs.cardList.innerHTML = html; });
+         }
+     }"
+     x-init="loadCards()"
+     x-on:change-page.window="page = $event.detail.page; loadCards()"
+>
+    <h1 class="text-2xl font-bold mb-4">Cards</h1>
+    <div class="flex flex-wrap items-center justify-between mb-6">
+        <!-- Sort Dropdown -->
+        <div class="dropdown dropdown-end m-1">
+            <div tabindex="0" class="btn">
+                <span x-text="order === 'absolute' ? 'Absolute' : (order === 'alphabetical' ? 'Alphabetical' : 'Rarity')"></span> 🞃
+            </div>
+            <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
+                <li><a href="#" @click.prevent="order = 'absolute'; page = 1; loadCards()">Absolute</a></li>
+                <li><a href="#" @click.prevent="order = 'alphabetical'; page = 1; loadCards()">Alphabetical</a></li>
+                <li><a href="#" @click.prevent="order = 'rarity'; page = 1; loadCards()">Rarity</a></li>
+            </ul>
+        </div>
+        <!-- Grouping Dropdown -->
+        <div class="dropdown dropdown-end m-1">
+            <div tabindex="0" class="btn">
+                <span x-text="groupBy === 'none' ? 'No Group' : (groupBy.charAt(0).toUpperCase() + groupBy.slice(1))"></span> 🞃
+            </div>
+            <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52">
+                <li><a href="#" @click.prevent="groupBy = 'none'; page = 1; loadCards()">No Group</a></li>
+                <li><a href="#" @click.prevent="groupBy = 'deck'; page = 1; loadCards()">Deck</a></li>
+                <li><a href="#" @click.prevent="groupBy = 'cardset'; page = 1; loadCards()">Cardset</a></li>
+                <li><a href="#" @click.prevent="groupBy = 'rarity'; page = 1; loadCards()">Rarity</a></li>
+            </ul>
+        </div>
+    </div>
+    <!-- Container for the partial card list -->
+    <div x-ref="cardList">
+        <!-- The contents of _card_list.html will be loaded here via AJAX -->
+    </div>
+</div>
+{% endblock %}