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

Fix expanded state handling for trade offers and modify expand all on trade offers listing to persist between pages

Browse source
This commit is contained in:
badblocks 2025-04-02 13:39:15 -07:00
parent 6a61b79bbe
commit 63e20bace6
7 changed files with 74 additions and 128 deletions
Download patch file Download diff file Expand all files Collapse all files

57
theme/templates/trades/trade_offer_all_list.html
View file

@ -4,15 +4,48 @@
{% block title %}Trade Offers{% endblock title %}
{% block content %}
<div class="container mx-auto max-w-4xl mt-6" x-data="{ allExpanded: false }">
<!-- Header-->
<div class="container mx-auto max-w-4xl mt-6" x-data="{
// Initialize allExpanded from the URL if present, defaulting to false.
allExpanded: new URLSearchParams(window.location.search).get('expanded') === 'true',
page: {{ page_obj.number|default:1 }},
loadOffers() {
let url = new URL('{% url 'trade_offer_list' %}', window.location.origin);
let params = new URLSearchParams(window.location.search);
params.set('page', this.page);
// Include the expanded state if active
if (this.allExpanded) {
params.set('expanded', 'true');
} else {
params.delete('expanded');
}
url.search = params.toString();
fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
.then(response => response.text())
.then(html => { this.$refs.offersContainer.innerHTML = html; });
},
// Update the URL so that navigation preserves our expanded state.
updateUrl() {
let params = new URLSearchParams(window.location.search);
if (this.allExpanded) {
params.set('expanded', 'true');
} else {
params.delete('expanded');
}
history.replaceState(null, '', window.location.pathname + '?' + params.toString());
}
}"
x-init="loadOffers()"
x-on:change-page.window="page = $event.detail.page; loadOffers()">
<!-- Header with the toggle -->
<div class="flex justify-between items-center mb-4">
<h1 class="text-2xl font-bold">Trade Offers</h1>
<div>
<form method="get" class="flex items-center gap-4" x-data>
<label class="cursor-pointer flex items-center gap-2">
<span x-text="allExpanded ? 'Collapse All' : 'Expand All'"></span>
<input type="checkbox" name="all_expanded" value="true" class="toggle toggle-primary" @click="allExpanded = !allExpanded; $dispatch('toggle-all', { expanded: allExpanded })">
<input type="checkbox" name="all_expanded" value="true" class="toggle toggle-primary"
@click="allExpanded = !allExpanded; $dispatch('toggle-all', { expanded: allExpanded }); updateUrl();">
</label>
<label class="cursor-pointer flex items-center gap-2">
<span>Only Closed</span>
@ -27,22 +60,8 @@
<div class="flex justify-end mb-4">
<a href="{% url 'trade_offer_create' %}" class="btn btn-success">Create New Offer</a>
</div>
<div id="all-trade-offers"
x-data="{
page: {{ page_obj.number|default:1 }},
loadOffers() {
let url = new URL('{% url 'trade_offer_list' %}', window.location.origin);
let params = new URLSearchParams(window.location.search);
params.set('page', this.page);
url.search = params.toString();
fetch(url, { headers: { 'X-Requested-With': 'XMLHttpRequest' }})
.then(response => response.text())
.then(html => { this.$el.innerHTML = html; });
}
}"
x-init="loadOffers()"
x-on:change-page.window="page = $event.detail.page; loadOffers()">
{% include "trades/_trade_offer_list.html" with offers=offers page_obj=page_obj %}
<div id="all-trade-offers" x-ref="offersContainer">
{% include "trades/_trade_offer_list.html" with offers=offers page_obj=page_obj expanded=expanded %}
</div>
</section>
</div>