fix pagination of card detail sections

cards/views.py

@@ -4,6 +4,8 @@ from django.views.generic import UpdateView, DeleteView, CreateView, ListView, D
 from cards.models import Card
 from trades.models import TradeOffer
 from common.mixins import ReusablePaginationMixin
+from django.views import View
+from django.shortcuts import get_object_or_404, render
 
 class CardDetailView(DetailView):
     model = Card
@@ -23,46 +25,53 @@ class CardDetailView(DetailView):
         ).distinct().count()
         return context
 
+class TradeOfferHaveCardListView(ReusablePaginationMixin, View):
+    def get(self, request, pk):
+        card = get_object_or_404(Card, pk=pk)
+        order = request.GET.get("order", "newest")
+        page_number = self.get_page_number()
 
-class TradeOfferHaveCardListView(ListView):
+        offers = TradeOffer.objects.filter(trade_offer_have_cards__card=card).distinct()
-    model = TradeOffer
-    template_name = "trades/_trade_offer_list.html"
-    context_object_name = "offers"
-    paginate_by = 2
 
-    def get_queryset(self):
+        if order == "oldest":
-        card_id = self.kwargs.get("pk")
+            offers = offers.order_by("created_at")
-        order_param = self.request.GET.get("order", "newest")
+        else:
-        ordering = "-updated_at" if order_param == "newest" else "updated_at"
+            offers = offers.order_by("-created_at")
-        return TradeOffer.objects.filter(
-            trade_offer_have_cards__card_id=card_id
-        ).order_by(ordering).distinct()
 
-    def get_context_data(self, **kwargs):
+        self.per_page = 12
-        context = super().get_context_data(**kwargs)
+        offers_page, page_obj = self.paginate_data(offers, page_number)
-        context['side'] = 'have'
-        return context
 
+        context = {
+            "offers": offers_page,
+            "page_obj": page_obj,
+        }
+        # Render the partial template to be injected via AJAX
+        return render(request, "trades/_trade_offer_list.html", context)
 
-class TradeOfferWantCardListView(ListView):
+class TradeOfferWantCardListView(ReusablePaginationMixin, View):
-    model = TradeOffer
+    def get(self, request, pk):
-    template_name = "trades/_trade_offer_list.html"
+        card = get_object_or_404(Card, pk=pk)
-    context_object_name = "offers"
-    paginate_by = 2
 
-    def get_queryset(self):
+        order = request.GET.get("order", "newest")
-        card_id = self.kwargs.get("pk")
-        order_param = self.request.GET.get("order", "newest")
-        ordering = "-updated_at" if order_param == "newest" else "updated_at"
-        return TradeOffer.objects.filter(
-            trade_offer_want_cards__card_id=card_id
-        ).order_by(ordering).distinct()
 
-    def get_context_data(self, **kwargs):
+        page_number = self.get_page_number()
-        context = super().get_context_data(**kwargs)
-        context['side'] = 'want'
-        return context
 
+        offers = TradeOffer.objects.filter(trade_offer_want_cards__card=card).distinct()
+
+        if order == "oldest":
+            offers = offers.order_by("created_at")
+        else:
+            offers = offers.order_by("-created_at")
+
+        self.per_page = 12
+        offers_page, page_obj = self.paginate_data(offers, page_number)
+
+        context = {
+            "offers": offers_page,
+            "page_obj": page_obj,
+        }
+        # Render the partial template containing the new pagination controls
+        return render(request, "trades/_trade_offer_list.html", context)
 class CardListView(ReusablePaginationMixin, ListView):
     model = Card
     # Removed built-in pagination; using custom mixin instead

theme/templates/cards/card_detail.html

@@ -22,12 +22,13 @@
                     .then(response => response.text())
                     .then(html => { 
                         this.$refs.offerList.innerHTML = html;
+                        Alpine.initTree(this.$refs.offerList); // reinitialize Alpine on the injected content
                         window.processMarqueeElements && window.processMarqueeElements();
                     });
             }
         }" 
         x-init="loadOffers()"
-        x-on:change-page-have.window="page = $event.detail.page; loadOffers()"
+        x-on:change-page="page = $event.detail.page; loadOffers()"
         class="p-4">
             <div class="flex items-center justify-between mb-4">
                 <h2 class="text-xl font-semibold">Have this Card ({{ trade_offer_have_count }})</h2>
@@ -65,12 +66,13 @@
                         .then(response => response.text())
                         .then(html => { 
                             this.$refs.offerList.innerHTML = html;
+                            Alpine.initTree(this.$refs.offerList); // reinitialize Alpine on the injected content
                             window.processMarqueeElements && window.processMarqueeElements();
                         });
                 }
             }" 
             x-init="loadOffers()"
-        x-on:change-page.window="page = $event.detail.page; loadOffers()"
+            x-on:change-page="page = $event.detail.page; loadOffers()"
             class="p-4">
             <div class="flex items-center justify-between mb-4">
                 <h2 class="text-xl font-semibold">Want this Card ({{ trade_offer_want_count }})</h2>