From 843b2b6e5596344f3166efd5f6d27a33499cd421 Mon Sep 17 00:00:00 2001
From: badbl0cks <4161747+badbl0cks@users.noreply.github.com>
Date: Thu, 17 Apr 2025 18:36:13 -0700
Subject: [PATCH] fix pagination of card detail sections

---
 cards/views.py                         | 73 +++++++++++++++-----------
 theme/templates/cards/card_detail.html | 36 +++++++------
 2 files changed, 60 insertions(+), 49 deletions(-)

diff --git a/cards/views.py b/cards/views.py
index 18244fc..b1bfcbb 100644
--- a/cards/views.py
+++ b/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):
-    model = TradeOffer
-    template_name = "trades/_trade_offer_list.html"
-    context_object_name = "offers"
-    paginate_by = 2
+        offers = TradeOffer.objects.filter(trade_offer_have_cards__card=card).distinct()
 
-    def get_queryset(self):
-        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_have_cards__card_id=card_id
-        ).order_by(ordering).distinct()
+        if order == "oldest":
+            offers = offers.order_by("created_at")
+        else:
+            offers = offers.order_by("-created_at")
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['side'] = 'have'
-        return context
+        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 to be injected via AJAX
+        return render(request, "trades/_trade_offer_list.html", context)
 
-class TradeOfferWantCardListView(ListView):
-    model = TradeOffer
-    template_name = "trades/_trade_offer_list.html"
-    context_object_name = "offers"
-    paginate_by = 2
+class TradeOfferWantCardListView(ReusablePaginationMixin, View):
+    def get(self, request, pk):
+        card = get_object_or_404(Card, pk=pk)
 
-    def get_queryset(self):
-        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()
+        order = request.GET.get("order", "newest")
 
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-        context['side'] = 'want'
-        return context
+        page_number = self.get_page_number()
 
+        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
diff --git a/theme/templates/cards/card_detail.html b/theme/templates/cards/card_detail.html
index 020743d..96ed018 100644
--- a/theme/templates/cards/card_detail.html
+++ b/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>
@@ -56,22 +57,23 @@
             </div>
         </div>
         
-        <!-- Trade Offers: Want -->
-        <div x-data="{
-            order: 'newest',
-            page: 1,
-            loadOffers() {
-                fetch(`{% url 'cards:card_trade_offer_want_list' card.pk %}?order=` + this.order + '&page=' + this.page)
-                    .then(response => response.text())
-                    .then(html => { 
-                        this.$refs.offerList.innerHTML = html;
-                        window.processMarqueeElements && window.processMarqueeElements();
-                    });
-            }
-        }" 
-        x-init="loadOffers()"
-        x-on:change-page.window="page = $event.detail.page; loadOffers()"
-        class="p-4">
+            <!-- Trade Offers: Want -->
+            <div x-data="{
+                order: 'newest',
+                page: 1,
+                loadOffers() {
+                    fetch(`{% url 'cards:card_trade_offer_want_list' card.pk %}?order=` + this.order + '&page=' + this.page)
+                        .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="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>
                 <!-- DaisyUI dropdown replacing the select -->