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

Refactor dropdown fragment to enhance button functionality and improve clear button visibility.

Browse source
This commit is contained in:
Yaro Kasear 2025-07-24 13:55:45 -05:00
parent c92afad9fd
commit 19ce49cc55
1 changed files with 42 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,3 +1,4 @@
{% import "fragments/_icon_fragment.html" as icons %}
{% import "fragments/_link_fragment.html" as links %} {% import "fragments/_link_fragment.html" as links %}
{% macro render_dropdown(id, list, label, current_item = None, entry_link = None, enabled = True) %} {% macro render_dropdown(id, list, label, current_item = None, entry_link = None, enabled = True) %}
@ -8,20 +9,25 @@
{% endif %} {% endif %}
</label> </label>
<div class="dropdown"> <div class="dropdown">
<button class="btn btn-outline-dark dropdown-toggle w-100 overflow-x-hidden" type="button" data-bs-toggle="dropdown" <div class="btn-group w-100">
data-inv-value="{{ current_item.id if current_item else '' }}" id="{{ id }}Button"{% if not enabled %} disabled{% endif %} <button class="btn btn-outline-dark dropdown-toggle overflow-x-hidden w-100 rounded-end{% if current_item %}-0{% endif %}" type="button" data-bs-toggle="dropdown"
style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}"> data-inv-value="{{ current_item.id if current_item else '' }}" id="{{ id }}Button"{% if not enabled %} disabled{% endif %}
{{ current_item.identifier if current_item else '-' }} style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
</button> {{ current_item.identifier if current_item else '-' }}
<input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}"> </button>
<ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}"> <button class="btn btn-outline-danger rounded-end{% if not current_item %} d-none{% endif %}" type="button" id="{{ id }}ClearButton" style="z-index: 9999;">
<input type="text" class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0" id="search{{ id }}" placeholder="Search..."> {{ icons.render_icon('x-lg', 16) }}
<div class="overflow-auto overflow-x-hidden" style="z-index: 9999;" id="{{ id }}DropdownContent"> </button>
{% for item in list %} <input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
<li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li> <ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}">
{% endfor %} <input type="text" class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0" id="search{{ id }}" placeholder="Search...">
</div> <div class="overflow-auto overflow-x-hidden" style="z-index: 9999;" id="{{ id }}DropdownContent">
</ul> {% for item in list %}
<li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="{{ id }}SetButton({{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
{% endfor %}
</div>
</ul>
</div>
</div> </div>
<script> <script>
function {{ id }}SetButton(id, identifier) { function {{ id }}SetButton(id, identifier) {
@ -38,6 +44,17 @@
const {{ id }}SearchInput = document.getElementById("search{{ id }}"); const {{ id }}SearchInput = document.getElementById("search{{ id }}");
const {{ id }}DropdownContent = document.getElementById("{{ id }}DropdownContent"); const {{ id }}DropdownContent = document.getElementById("{{ id }}DropdownContent");
const {{ id }}Button = document.getElementById("{{ id }}Button"); const {{ id }}Button = document.getElementById("{{ id }}Button");
const {{ id }}ClearButton = document.getElementById("{{ id }}ClearButton");
{{ id }}ClearButton.addEventListener("click", () => {
{{ id }}Input.value = "";
{{ id }}Button.dataset.invValue = "";
{{ id }}Button.textContent = "-";
{{ id }}ClearButton.classList.add("d-none");
{{ id }}Button.classList.remove("rounded-end-0");
{{ id }}Button.classList.add("rounded-end");
});
{{ id }}Button.addEventListener("shown.bs.dropdown", () => { {{ id }}Button.addEventListener("shown.bs.dropdown", () => {
const menuHeight = {{ id }}Dropdown.clientHeight; const menuHeight = {{ id }}Dropdown.clientHeight;
@ -50,6 +67,17 @@
{{ id }}Dropdown.addEventListener("click", (e) => { {{ id }}Dropdown.addEventListener("click", (e) => {
if (e.target.tagName === "A") { if (e.target.tagName === "A") {
{{ id }}Input.value = e.target.dataset.invValue; {{ id }}Input.value = e.target.dataset.invValue;
{{ id }}Button.textContent = e.target.textContent;
if (e.target.dataset.invValue) {
{{ id }}ClearButton.classList.remove("d-none");
{{ id }}Button.classList.add("rounded-end-0");
{{ id }}Button.classList.remove("rounded-end");
} else {
{{ id }}ClearButton.classList.add("d-none");
{{ id }}Button.classList.remove("rounded-end-0");
{{ id }}Button.classList.add("rounded-end");
}
} }
}); });