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

Enhance dropdown functionality by adding onclick event to dropdown items for better item selection; improve search input handling for filtering options.

Browse source
This commit is contained in:
Yaro Kasear 2025-07-22 12:00:27 -05:00
parent 462c077681
commit 69a4a19587
1 changed files with 50 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,47 +1,57 @@
{% macro render_dropdown(id, list, label, current_item = None, entry_link = None) %} {% macro render_dropdown(id, list, label, current_item = None, entry_link = None) %}
<label for="{{ id }}" class="form-label"> <label for="{{ id }}" class="form-label">
{{ label }} {{ label }}
{% if entry_link %} {% if entry_link %}
{{ links.entry_link(entry_link, current_item.id) }} {{ links.entry_link(entry_link, current_item.id) }}
{% endif %} {% endif %}
</label> </label>
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-outline-dark dropdown-toggle w-100" type="button" data-bs-toggle="dropdown" <button class="btn btn-outline-dark dropdown-toggle w-100" type="button" data-bs-toggle="dropdown"
data-inv-value="{{ current_item.id if current_item else '' }}" aria-expanded="false"> data-inv-value="{{ current_item.id if current_item else '' }}" id="{{ id }}Button">
{{ current_item.identifier if current_item else '-' }} {{ current_item.identifier if current_item else '-' }}
</button> </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 '' }}">
<ul class="dropdown-menu w-100" id="menu{{ id }}"> <ul class="dropdown-menu w-100" id="menu{{ id }}">
<input type="text" class="form-control" id="search{{ id }}" placeholder="Search..."> <input type="text" class="form-control" id="search{{ id }}" placeholder="Search...">
{% for item in list %} {% for item in list %}
<li><a class="dropdown-item" data-inv-value="{{ item.id }}">{{ item.identifier }}</a></li> <li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
<script> <script>
document.addEventListener("DOMContentLoaded", () => { function {{ id }}SetButton(id, identifier) {
const {{ id }}Dropdown = document.getElementById("menu{{ id }}"); const button = document.getElementById("{{ id }}Button");
const {{ id }}Input = document.getElementById("{{ id }}"); const input = document.getElementById("{{ id }}");
button.dataset.invValue = id;
button.textContent = identifier;
input.value = id;
console.log("Selected {{ id }} ID:", id);
}
{{ id }}Dropdown.addEventListener("click", (e) => { document.addEventListener("DOMContentLoaded", () => {
if (e.target.tagName === "A") { const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
{{ id }}Input.value = e.target.dataset.invValue; const {{ id }}Input = document.getElementById("{{ id }}");
console.log("Selected {{ id }} ID:", {{ id }}Input.value);
}
});
const {{ id }}SearchInput = document.getElementById("search{{ id }}"); {{ id }}Dropdown.addEventListener("click", (e) => {
searchInput.addEventListener("input", () => { if (e.target.tagName === "A") {
const filter = searchInput.value.toLowerCase(); {{ id }}Input.value = e.target.dataset.invValue;
const items = {{ id }}Dropdown.querySelectorAll("a.dropdown-item"); console.log("Selected {{ id }} ID:", {{ id }}Input.value);
items.forEach(item => {
if (item.textContent.toLowerCase().includes(filter)) {
item.style.display = "";
} else {
item.style.display = "none";
} }
}); });
const {{ id }}SearchInput = document.getElementById("search{{ id }}");
console.log({{ id }}SearchInput);
{{ id }}SearchInput.addEventListener("input", () => {
const filter = {{ id }}SearchInput.value.toLowerCase();
const items = {{ id }}Dropdown.querySelectorAll("a.dropdown-item");
items.forEach(item => {
if (item.textContent.toLowerCase().includes(filter)) {
item.style.display = "";
} else {
item.style.display = "none";
}
});
});
}); });
}); </script>
</script>
{% endmacro %} {% endmacro %}