yaro/inventory
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More logic for dropdown. Hooray!

Browse source
This commit is contained in:
Yaro Kasear 2025-08-15 09:00:05 -05:00
parent 0641519d22
commit b39384f358
2 changed files with 69 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

63
inventory/static/js/dropdown.js
View file

@ -63,6 +63,7 @@ const DropdownWidget = (() => {
} else {
clearButton.classList.add("d-none");
button.classList.remove("rounded-end-0");
button.classList.remove("border-end-0");
button.classList.add("rounded-end");
}
}
@ -97,8 +98,68 @@ function DropDown(cfg) {
refreshUrl: cfg.refreshUrl,
selectUrl: cfg.selectUrl,
selectedId: null,
selectedLabel: '',
init() {
const v = this.$refs.hidden?.value || '';
if (v) {
this.selectedId = v;
this.$refs.clear?.classList.remove('d-none');
}
},
itemSelect(e) {
console.log(e);
const a = e.currentTarget;
const id = a.dataset.invValue || a.getAttribute('data-inv-value');
const label = a.textContent.trim();
const hidden = this.$refs.hidden;
const button = this.$refs.button;
const clear = this.$refs.clear;
this.selectedId = id;
this.selectedLabel = label;
if (hidden) hidden.value = id;
if (button) {
button.textContent = label || '-';
button.dataset.invValue = id;
button.classList.add("rounded-end-0");
button.classList.add("border-end-0");
button.classList.remove("rounded-end");
}
clear?.classList.toggle('d-none', !id);
if (this.selectUrl) {
fetch(this.selectUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ id })
}).catch(() => {});
}
},
clearSelection() {
const hidden = this.$refs.hidden;
const button = this.$refs.button;
const clear = this.$refs.clear;
this.selectedId = '';
this.selectedLabel = '';
if (hidden) hidden.value = '';
if (button) {
button.textContent = '-';
button.removeAttribute('data-inv-value');
button.classList.remove("rounded-end-0");
button.classList.remove("border-end-0");
button.classList.add("rounded-end");
}
clear?.classList.add('d-none');
this.$dispatch('dropdown:cleared', {});
}
};
}

11
inventory/templates/fragments/_dropdown_fragment.html
View file

@ -55,22 +55,25 @@
refreshUrl: {{ refresh_url|tojson if refresh_url else "null" }},
selectUrl: {{ select_url|tojson if select_url else "null" }}
})'
hx-preserve>
hx-preserve x-init="init()">
<div class="btn-group w-100">
<button
class="btn btn-outline-dark dropdown-toggle overflow-x-hidden w-100 rounded-end{% if current_item and enabled %}-0 border-end-0{% endif %} dropdown-button"
type="button" data-bs-toggle="dropdown" data-inv-value="{{ current_item.id if current_item else '' }}"
id="{{ id }}Button" {% if not enabled %} disabled{% endif %}
style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}"
x-ref="button">
{{ current_item.identifier if current_item else '-' }}
</button>
<button
class="btn btn-outline-danger rounded-end font-weight-bold border-start-0{% if not current_item or not enabled %} d-none{% endif %}"
type="button" id="{{ id }}ClearButton"
style="z-index: 9999; border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
style="z-index: 9999; border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}"
x-ref="clear"
@click="clearSelection">
{{ icons.render_icon('x-lg', 16) }}
</button>
<input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
<input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}" x-ref="hidden">
<ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}">
<input type="text"
class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0 dropdown-search-input"