Fix pagination for trade offer lists

theme/templates/trades/_trade_offer_list.html

@@ -18,41 +18,3 @@
     <div>No trade offers available.</div>
   {% endfor %}
 </div>
-
-{% if offers.has_other_pages %}
-  <nav aria-label="Trade offers pagination" class="mt-6">
-    <ul class="flex justify-center space-x-2">
-      {% if offers.has_previous %}
-        <li>
-          <a class="btn btn-outline ajax-page-link" data-page="{{ offers.previous_page_number }}" href="#">
-            Previous
-          </a>
-        </li>
-      {% else %}
-        <li>
-          <span class="btn btn-outline btn-disabled">Previous</span>
-        </li>
-      {% endif %}
-
-      {% for num in offers.paginator.page_range %}
-        <li>
-          <a class="btn btn-outline ajax-page-link {% if offers.number == num %}btn-active{% endif %}" data-page="{{ num }}" href="#">
-            {{ num }}
-          </a>
-        </li>
-      {% endfor %}
-
-      {% if offers.has_next %}
-        <li>
-          <a class="btn btn-outline ajax-page-link" data-page="{{ offers.next_page_number }}" href="#">
-            Next
-          </a>
-        </li>
-      {% else %}
-        <li>
-          <span class="btn btn-outline btn-disabled">Next</span>
-        </li>
-      {% endif %}
-    </ul>
-  </nav>
-{% endif %}

theme/templates/trades/_trade_offer_list_paginated.html

@@ -0,0 +1,38 @@
+{% include "trades/_trade_offer_list.html" %}
+{% if offers.has_other_pages %}
+  <nav aria-label="Trade offers pagination" class="mt-6">
+    <ul class="flex justify-center space-x-2">
+      {% if offers.has_previous %}
+        <li>
+          <a class="btn btn-outline ajax-page-link" data-page="{{ offers.previous_page_number }}" href="#">
+            Previous
+          </a>
+        </li>
+      {% else %}
+        <li>
+          <span class="btn btn-outline btn-disabled">Previous</span>
+        </li>
+      {% endif %}
+
+      {% for num in offers.paginator.page_range %}
+        <li>
+          <a class="btn btn-outline ajax-page-link {% if offers.number == num %}btn-active{% endif %}" data-page="{{ num }}" href="#">
+            {{ num }}
+          </a>
+        </li>
+      {% endfor %}
+
+      {% if offers.has_next %}
+        <li>
+          <a class="btn btn-outline ajax-page-link" data-page="{{ offers.next_page_number }}" href="#">
+            Next
+          </a>
+        </li>
+      {% else %}
+        <li>
+          <span class="btn btn-outline btn-disabled">Next</span>
+        </li>
+      {% endif %}
+    </ul>
+  </nav>
+{% endif %} 

theme/templates/trades/trade_offer_all_list.html

@@ -25,24 +25,47 @@
   <!-- Trade Offers -->
   <section class="mb-12">
     <h2 class="text-2xl font-bold mb-4">All Trade Offers</h2>
-    {% if all_trade_offers_paginated.object_list %}
+    <div 
-      {% include "trades/_trade_offer_list.html" with offers=all_trade_offers_paginated %}
+      id="all-trade-offers"
-      <div class="flex justify-between items-center mt-4">
+      x-data="tradeOffersPagination('{% url 'trade_offer_list' %}?')"
-        {% if all_trade_offers_paginated.has_previous %}
+      x-init="init()"
-          <a href="?{% for key, value in request.GET.items %}{% if key != 'offers_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}offers_page={{ all_trade_offers_paginated.previous_page_number }}" class="btn btn-sm">Previous</a>
+    >
-        {% else %}
+      {% include "trades/_trade_offer_list_paginated.html" with offers=all_trade_offers_paginated %}
-          <span></span>
+    </div>
-        {% endif %}
-        <span>Page {{ all_trade_offers_paginated.number }} of {{ all_trade_offers_paginated.paginator.num_pages }}</span>
-        {% if all_trade_offers_paginated.has_next %}
-          <a href="?{% for key, value in request.GET.items %}{% if key != 'offers_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}offers_page={{ all_trade_offers_paginated.next_page_number }}" class="btn btn-sm">Next</a>
-        {% else %}
-          <span></span>
-        {% endif %}
-      </div>
-    {% else %}
-      <p>No trade offers found.</p>
-    {% endif %}
   </section>
 </div>
+
+<script>
+  function tradeOffersPagination(baseUrl) {
+    return {
+      baseUrl: baseUrl,
+      loadPage(page) {
+        let url = new URL(this.baseUrl, window.location.origin);
+        url.searchParams.set("page", page);
+        this.$el.innerHTML = '<div class="flex justify-center items-center w-full mt-10"><span class="loading loading-dots loading-xl"></span></div>';
+        fetch(url, {
+          headers: {
+            'X-Requested-With': 'XMLHttpRequest'
+          }
+        })
+          .then(response => response.text())
+          .then(html => {
+            this.$el.innerHTML = html;
+            // Reinitialize the click events after injecting the new fragment.
+            this.init();
+          });
+      },
+      init() {
+        // Bind click events for AJAX pagination links within this component.
+        this.$el.querySelectorAll("a.ajax-page-link").forEach(link => {
+          link.addEventListener("click", (event) => {
+            event.preventDefault();
+            const page = link.getAttribute("data-page");
+            this.loadPage(page);
+          });
+        });
+      }
+    }
+  }
+</script>
 {% endblock content %} 

theme/templates/trades/trade_offer_my_list.html

@@ -30,70 +30,70 @@
     <!-- Section: Waiting for Your Response -->
     <section class="mb-12">
       <h2 class="text-2xl font-bold mb-4">Waiting for Your Response</h2>
-      {% if trade_acceptances_waiting_paginated.object_list %}
+      <div
-        {% include "trades/_trade_offer_list.html" with offers=trade_acceptances_waiting_paginated %}
+        id="waiting-acceptances"
-        <div class="flex justify-between items-center mt-4">
+        x-data="tradeOffersPagination('{% url 'trade_offer_my_list' %}?ajax_section=waiting_acceptances')"
-          {% if trade_acceptances_waiting_paginated.has_previous %}
+        x-init="init()"
-            <a href="?{% for key, value in request.GET.items %}{% if key != 'waiting_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}waiting_page={{ trade_acceptances_waiting_paginated.previous_page_number }}" class="btn btn-sm">Previous</a>
+      >
-          {% else %}
+        {% include "trades/_trade_offer_list_paginated.html" with offers=trade_acceptances_waiting_paginated %}
-            <span></span>
+      </div>
-          {% endif %}
-          <span>Page {{ trade_acceptances_waiting_paginated.number }} of {{ trade_acceptances_waiting_paginated.paginator.num_pages }}</span>
-          {% if trade_acceptances_waiting_paginated.has_next %}
-            <a href="?{% for key, value in request.GET.items %}{% if key != 'waiting_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}waiting_page={{ trade_acceptances_waiting_paginated.next_page_number }}" class="btn btn-sm">Next</a>
-          {% else %}
-            <span></span>
-          {% endif %}
-        </div>
-      {% else %}
-        <p>None at this time.</p>
-      {% endif %}
     </section>
 
     <!-- Section: Waiting for Their Response -->
     <section class="mb-12">
       <h2 class="text-2xl font-bold mb-4">Waiting for Their Response</h2>
-      {% if other_party_trade_acceptances_paginated.object_list %}
+      <div
-        {% include "trades/_trade_offer_list.html" with offers=other_party_trade_acceptances_paginated %}
+        id="other-acceptances"
-        <div class="flex justify-between items-center mt-4">
+        x-data="tradeOffersPagination('{% url 'trade_offer_my_list' %}?ajax_section=other_party_acceptances')"
-          {% if other_party_trade_acceptances_paginated.has_previous %}
+        x-init="init()"
-            <a href="?{% for key, value in request.GET.items %}{% if key != 'other_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}other_page={{ other_party_trade_acceptances_paginated.previous_page_number }}" class="btn btn-sm">Previous</a>
+      >
-          {% else %}
+        {% include "trades/_trade_offer_list_paginated.html" with offers=other_party_trade_acceptances_paginated %}
-            <span></span>
+      </div>
-          {% endif %}
-          <span>Page {{ other_party_trade_acceptances_paginated.number }} of {{ other_party_trade_acceptances_paginated.paginator.num_pages }}</span>
-          {% if other_party_trade_acceptances_paginated.has_next %}
-            <a href="?{% for key, value in request.GET.items %}{% if key != 'other_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}other_page={{ other_party_trade_acceptances_paginated.next_page_number }}" class="btn btn-sm">Next</a>
-          {% else %}
-            <span></span>
-          {% endif %}
-        </div>
-      {% else %}
-        <p>None at this time.</p>
-      {% endif %}
     </section>
   </div>
   <!-- Section: My Trade Offers -->
   <section class="mb-12">
     <h2 class="text-2xl font-bold mb-4">My Trade Offers</h2>
-    {% if my_trade_offers_paginated.object_list %}
+    <div
-      {% include "trades/_trade_offer_list.html" with offers=my_trade_offers_paginated %}
+      id="my-trade-offers"
-      <div class="flex justify-between items-center mt-4">
+      x-data="tradeOffersPagination('{% url 'trade_offer_my_list' %}?ajax_section=my_trade_offers')"
-        {% if my_trade_offers_paginated.has_previous %}
+      x-init="init()"
-          <a href="?{% for key, value in request.GET.items %}{% if key != 'offers_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}offers_page={{ my_trade_offers_paginated.previous_page_number }}" class="btn btn-sm">Previous</a>
+    >
-        {% else %}
+      {% include "trades/_trade_offer_list_paginated.html" with offers=my_trade_offers_paginated %}
-          <span></span>
+    </div>
-        {% endif %}
-        <span>Page {{ my_trade_offers_paginated.number }} of {{ my_trade_offers_paginated.paginator.num_pages }}</span>
-        {% if my_trade_offers_paginated.has_next %}
-          <a href="?{% for key, value in request.GET.items %}{% if key != 'offers_page' %}{{ key }}={{ value }}&{% endif %}{% endfor %}offers_page={{ my_trade_offers_paginated.next_page_number }}" class="btn btn-sm">Next</a>
-        {% else %}
-          <span></span>
-        {% endif %}
-      </div>
-    {% else %}
-      <p>No trade offers found.</p>
-    {% endif %}
   </section>
 </div>
+
+<script>
+  function tradeOffersPagination(baseUrl) {
+    return {
+      baseUrl: baseUrl,
+      loadPage(page) {
+        let url = new URL(this.baseUrl, window.location.origin);
+        url.searchParams.set("page", page);
+        fetch(url, {
+          headers: {
+            'X-Requested-With': 'XMLHttpRequest'
+          }
+        })
+          .then(response => response.text())
+          .then(html => {
+            this.$el.innerHTML = html;
+            // Reinitialize click events after content update.
+            this.init();
+          });
+      },
+      init() {
+        // Bind click events on pagination links within the component.
+        this.$el.querySelectorAll("a.ajax-page-link").forEach(link => {
+          link.addEventListener("click", (event) => {
+            event.preventDefault();
+            let page = link.getAttribute("data-page");
+            this.loadPage(page);
+          });
+        });
+      }
+    }
+  }
+</script>
 {% endblock content %} 

trades/views.py

@@ -72,13 +72,13 @@ class TradeOfferAllListView(ListView):
     model = TradeOffer
     template_name = "trades/trade_offer_all_list.html"
 
-
     def get_context_data(self, *, object_list=None, **kwargs):
         context = super().get_context_data(**kwargs)
         request = self.request
         show_closed = request.GET.get("show_closed", "false").lower() == "true"
         context["show_closed"] = show_closed
 
+        # Build the queryset with our related objects.
         queryset = (
             TradeOffer.objects.select_related('initiated_by')
             .prefetch_related(
@@ -96,12 +96,42 @@ class TradeOfferAllListView(ListView):
         else:
             queryset = queryset.filter(is_closed=False)
 
+        # On initial load, use the 'offers_page' parameter.
         offers_page = request.GET.get("offers_page")
         offers_paginator = Paginator(queryset, 10)
         context["all_trade_offers_paginated"] = offers_paginator.get_page(offers_page)
-
         return context
 
+    def render_to_response(self, context, **response_kwargs):
+        # For AJAX requests, return only the paginated fragment.
+        if self.request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            page = self.request.GET.get("page")
+            show_closed = self.request.GET.get("show_closed", "false").lower() == "true"
+
+            queryset = (
+                TradeOffer.objects.select_related('initiated_by')
+                .prefetch_related(
+                    'trade_offer_have_cards__card',
+                    'trade_offer_want_cards__card',
+                    Prefetch(
+                        'acceptances',
+                        queryset=TradeAcceptance.objects.select_related('accepted_by', 'requested_card', 'offered_card')
+                    )
+                )
+                .order_by("-updated_at")
+            )
+            if show_closed:
+                queryset = queryset.filter(is_closed=True)
+            else:
+                queryset = queryset.filter(is_closed=False)
+            paginated_offers = Paginator(queryset, 10).get_page(page)
+            return render(
+                self.request,
+                "trades/_trade_offer_list_paginated.html",
+                {"offers": paginated_offers}
+            )
+        return super().render_to_response(context, **response_kwargs)
+
 class TradeOfferMyListView(LoginRequiredMixin, ListView):
     model = TradeOffer  # Fallback model; our context data holds separate filtered querysets.
     template_name = "trades/trade_offer_my_list.html"
@@ -125,40 +155,35 @@ class TradeOfferMyListView(LoginRequiredMixin, ListView):
             .order_by("-updated_at")
         )
 
-    def get_context_data(self, **kwargs):
+    def get_selected_friend_code(self):
-        context = super().get_context_data(**kwargs)
+        friend_codes = self.request.user.friend_codes.all()
-        request = self.request
+        friend_code_param = self.request.GET.get("friend_code")
-        show_closed = request.GET.get("show_closed", "false").lower() == "true"
-        context["show_closed"] = show_closed
-
-        friend_codes = request.user.friend_codes.all()
-        friend_code_param = request.GET.get("friend_code")
         if friend_code_param:
             try:
                 selected_friend_code = friend_codes.get(pk=friend_code_param)
             except friend_codes.model.DoesNotExist:
-                selected_friend_code = request.user.default_friend_code or friend_codes.first()
+                selected_friend_code = self.request.user.default_friend_code or friend_codes.first()
         else:
-            selected_friend_code = request.user.default_friend_code or friend_codes.first()
+            selected_friend_code = self.request.user.default_friend_code or friend_codes.first()
 
         if not selected_friend_code:
             raise PermissionDenied("You do not have an active friend code associated with your account.")
 
-        context["selected_friend_code"] = selected_friend_code
+        return selected_friend_code
-        context["friend_codes"] = friend_codes
 
+    def get_show_closed(self):
+        return self.request.GET.get("show_closed", "false").lower() == "true"
+
+    def get_my_trade_offers_paginated(self, page_param):
+        selected_friend_code = self.get_selected_friend_code()
         queryset = self.get_queryset().filter(initiated_by=selected_friend_code)
-        if show_closed:
+        if self.get_show_closed():
             queryset = queryset.filter(is_closed=True)
         else:
             queryset = queryset.filter(is_closed=False)
+        return Paginator(queryset, 10).get_page(page_param)
 
-        offers_page = request.GET.get("offers_page")
+    def get_involved_acceptances(self, selected_friend_code):
-        offers_paginator = Paginator(queryset, 10)
-        context["my_trade_offers_paginated"] = offers_paginator.get_page(offers_page)
-
-        # ----- Trade Acceptances involving the user -----
-        # Update terminal states to include the thanked and rejected states.
         terminal_states = [
             TradeAcceptance.AcceptanceState.THANKED_BY_INITIATOR,
             TradeAcceptance.AcceptanceState.THANKED_BY_ACCEPTOR,
@@ -169,34 +194,72 @@ class TradeOfferMyListView(LoginRequiredMixin, ListView):
         involved_acceptances_qs = TradeAcceptance.objects.filter(
             Q(trade_offer__initiated_by=selected_friend_code) | Q(accepted_by=selected_friend_code)
         ).order_by("-updated_at")
+        if self.get_show_closed():
+            return involved_acceptances_qs.filter(state__in=terminal_states)
+        return involved_acceptances_qs.exclude(state__in=terminal_states)
 
-        if show_closed:
+    def get_trade_acceptances_waiting_paginated(self, page_param):
-            involved_acceptances = involved_acceptances_qs.filter(state__in=terminal_states)
+        selected_friend_code = self.get_selected_friend_code()
-        else:
+        involved_acceptances = self.get_involved_acceptances(selected_friend_code)
-            involved_acceptances = involved_acceptances_qs.exclude(state__in=terminal_states)
-
-        # ----- Split Acceptances into "Waiting for Your Response" and "Other" -----
         waiting_acceptances = involved_acceptances.filter(
             Q(trade_offer__initiated_by=selected_friend_code, state__in=[
                 TradeAcceptance.AcceptanceState.ACCEPTED,
                 TradeAcceptance.AcceptanceState.RECEIVED,
             ]) |
-            Q(accepted_by=selected_friend_code, state__in=[
+            Q(accepted_by=selected_friend_code, state__in=[TradeAcceptance.AcceptanceState.SENT])
-                TradeAcceptance.AcceptanceState.SENT
-            ])
         )
-        other_party_trade_acceptances = involved_acceptances.exclude(pk__in=waiting_acceptances.values("pk"))
+        return Paginator(waiting_acceptances, 10).get_page(page_param)
 
+    def get_other_party_trade_acceptances_paginated(self, page_param):
+        selected_friend_code = self.get_selected_friend_code()
+        involved_acceptances = self.get_involved_acceptances(selected_friend_code)
+        waiting_acceptances = involved_acceptances.filter(
+            Q(trade_offer__initiated_by=selected_friend_code, state__in=[
+                TradeAcceptance.AcceptanceState.ACCEPTED,
+                TradeAcceptance.AcceptanceState.RECEIVED,
+            ]) |
+            Q(accepted_by=selected_friend_code, state__in=[TradeAcceptance.AcceptanceState.SENT])
+        )
+        other_acceptances = involved_acceptances.exclude(pk__in=waiting_acceptances.values("pk"))
+        return Paginator(other_acceptances, 10).get_page(page_param)
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        request = self.request
+        show_closed = self.get_show_closed()
+        context["show_closed"] = show_closed
+
+        selected_friend_code = self.get_selected_friend_code()
+        context["selected_friend_code"] = selected_friend_code
+        context["friend_codes"] = request.user.friend_codes.all()
+
+        # Use request params for initial full page load (could be None)
+        offers_page = request.GET.get("offers_page")
         waiting_page = request.GET.get("waiting_page")
         other_page = request.GET.get("other_page")
-        waiting_paginator = Paginator(waiting_acceptances, 10)
+        context["my_trade_offers_paginated"] = self.get_my_trade_offers_paginated(offers_page)
-        other_party_paginator = Paginator(other_party_trade_acceptances, 10)
+        context["trade_acceptances_waiting_paginated"] = self.get_trade_acceptances_waiting_paginated(waiting_page)
-
+        context["other_party_trade_acceptances_paginated"] = self.get_other_party_trade_acceptances_paginated(other_page)
-        context["trade_acceptances_waiting_paginated"] = waiting_paginator.get_page(waiting_page)
-        context["other_party_trade_acceptances_paginated"] = other_party_paginator.get_page(other_page)
 
         return context
 
+    def render_to_response(self, context, **response_kwargs):
+        # For AJAX requests, return only the paginated fragment.
+        if self.request.headers.get("X-Requested-With") == "XMLHttpRequest":
+            ajax_section = self.request.GET.get("ajax_section")
+            page = self.request.GET.get("page")
+            if ajax_section == "my_trade_offers":
+                offers = self.get_my_trade_offers_paginated(page)
+            elif ajax_section == "waiting_acceptances":
+                offers = self.get_trade_acceptances_waiting_paginated(page)
+            elif ajax_section == "other_party_acceptances":
+                offers = self.get_other_party_trade_acceptances_paginated(page)
+            else:
+                # Fallback to my trade offers.
+                offers = self.get_my_trade_offers_paginated(page)
+            return render(self.request, "trades/_trade_offer_list_paginated.html", {"offers": offers})
+        return super().render_to_response(context, **response_kwargs)
+
 class TradeOfferDeleteView(LoginRequiredMixin, DeleteView):
     model = TradeOffer
     success_url = reverse_lazy("trade_offer_list")