badblocks/pkmntrade.club
1
1
Fork 0
Code Issues 14 Pull requests Projects 1 Releases Packages Wiki Activity

fix pagination of card detail sections

Browse source
This commit is contained in:
badblocks 2025-04-17 18:36:13 -07:00
parent 725061e151
commit 843b2b6e55
2 changed files with 60 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

73
cards/views.py
View file

@ -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

36
theme/templates/cards/card_detail.html
View file

@ -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 -->