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

fix card_multiselect filtering and quantity controls

Browse source
This commit is contained in:
badblocks 2025-03-13 15:48:26 -07:00
parent 6e4c6040bd
commit b97ddde71c
52 changed files with 1689 additions and 2268 deletions
Download patch file Download diff file Expand all files Collapse all files

39
theme/templates/trades/trade_offer_create.html
View file

@ -9,20 +9,19 @@
<form method="post" novalidate class="space-y-4">
{% csrf_token %}
{# Use our DRY friend code selector #}
{% include "trades/_friend_code_select.html" with friend_codes=friend_codes selected_friend_code=selected_friend_code field_name=form.initiated_by.html_name label="Initiated by" %}
<!-- Card Selectors: "Have" and "Want" -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="form-control">
{% card_multiselect "have_cards" "Have:" "Select one or more cards..." available_cards form.initial.have_cards %}
{% card_multiselect "have_cards" "I Have:" "Select some cards..." available_cards form.initial.have_cards %}
</div>
<div class="form-control">
{% card_multiselect "want_cards" "Want:" "Select one or more cards..." available_cards form.initial.want_cards %}
{% card_multiselect "want_cards" "I Want:" "Select some cards..." available_cards form.initial.want_cards %}
</div>
</div>
<button type="submit" class="btn btn-primary w-full">Submit</button>
<button type="submit" class="btn btn-primary w-full">Create Offer</button>
</form>
{% if form.errors %}
<div class="alert alert-error mt-4">
@ -40,36 +39,4 @@
</div>
{% endif %}
</div>
<script defer>
document.addEventListener('DOMContentLoaded', () => {
const initiatedBySelect = document.getElementById('{{ form.initiated_by.html_name }}');
if (initiatedBySelect) {
const choicesInstance = new Choices(initiatedBySelect, {
searchEnabled: false,
classNames: {
containerOuter: 'choices',
containerInner: 'choices__inner',
input: 'choices__input',
},
callbackOnCreateTemplates: function(template) {
return {
choice: (classNames, data) => {
return template(`
<div class="${classNames.item} ${classNames.itemChoice} bg-accent text-white"
data-select-text="${this.config.itemSelectText}"
data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'}
data-id="${data.id}" data-value="${data.value}"
${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'}>
${data.label}
</div>
`);
},
};
},
});
choicesInstance.containerOuter.element.classList.add('bg-secondary', 'select', 'select-bordered', 'w-full');
choicesInstance.containerInner.element.classList.add('bg-secondary', 'text-white');
}
});
</script>
{% endblock content %}