Fix pagination for trade offer lists
This commit is contained in:
parent
3df4b41750
commit
b20ca8a888
5 changed files with 233 additions and 147 deletions
|
|
@ -17,42 +17,4 @@
|
|||
{% empty %}
|
||||
<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 %}
|
||||
</div>
|
||||
38
theme/templates/trades/_trade_offer_list_paginated.html
Normal file
38
theme/templates/trades/_trade_offer_list_paginated.html
Normal file
|
|
@ -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 %}
|
||||
|
|
@ -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 %}
|
||||
{% include "trades/_trade_offer_list.html" with offers=all_trade_offers_paginated %}
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
{% if all_trade_offers_paginated.has_previous %}
|
||||
<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 %}
|
||||
<span></span>
|
||||
{% 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 %}
|
||||
<div
|
||||
id="all-trade-offers"
|
||||
x-data="tradeOffersPagination('{% url 'trade_offer_list' %}?')"
|
||||
x-init="init()"
|
||||
>
|
||||
{% include "trades/_trade_offer_list_paginated.html" with offers=all_trade_offers_paginated %}
|
||||
</div>
|
||||
</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 %}
|
||||
|
|
@ -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 %}
|
||||
{% include "trades/_trade_offer_list.html" with offers=trade_acceptances_waiting_paginated %}
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
{% if trade_acceptances_waiting_paginated.has_previous %}
|
||||
<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 %}
|
||||
<span></span>
|
||||
{% 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 %}
|
||||
<div
|
||||
id="waiting-acceptances"
|
||||
x-data="tradeOffersPagination('{% url 'trade_offer_my_list' %}?ajax_section=waiting_acceptances')"
|
||||
x-init="init()"
|
||||
>
|
||||
{% include "trades/_trade_offer_list_paginated.html" with offers=trade_acceptances_waiting_paginated %}
|
||||
</div>
|
||||
</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 %}
|
||||
{% include "trades/_trade_offer_list.html" with offers=other_party_trade_acceptances_paginated %}
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
{% if other_party_trade_acceptances_paginated.has_previous %}
|
||||
<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 %}
|
||||
<span></span>
|
||||
{% 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 %}
|
||||
<div
|
||||
id="other-acceptances"
|
||||
x-data="tradeOffersPagination('{% url 'trade_offer_my_list' %}?ajax_section=other_party_acceptances')"
|
||||
x-init="init()"
|
||||
>
|
||||
{% include "trades/_trade_offer_list_paginated.html" with offers=other_party_trade_acceptances_paginated %}
|
||||
</div>
|
||||
</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 %}
|
||||
{% include "trades/_trade_offer_list.html" with offers=my_trade_offers_paginated %}
|
||||
<div class="flex justify-between items-center mt-4">
|
||||
{% if my_trade_offers_paginated.has_previous %}
|
||||
<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 %}
|
||||
<span></span>
|
||||
{% 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 %}
|
||||
<div
|
||||
id="my-trade-offers"
|
||||
x-data="tradeOffersPagination('{% url 'trade_offer_my_list' %}?ajax_section=my_trade_offers')"
|
||||
x-init="init()"
|
||||
>
|
||||
{% include "trades/_trade_offer_list_paginated.html" with offers=my_trade_offers_paginated %}
|
||||
</div>
|
||||
</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 %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue