inventory/inventory/templates/fragments/_dropdown_fragment.html

43 lines
No EOL
2.5 KiB
HTML

{% import "fragments/_icon_fragment.html" as icons %}
{% import "fragments/_link_fragment.html" as links %}
{% macro render_dropdown(id, list, label, current_item = None, entry_link = None, enabled = True) %}
<label for="{{ id }}" class="form-label">
{{ label }}
{% if entry_link %}
{{ links.entry_link(entry_link, current_item.id) }}
{% endif %}
</label>
<div class="dropdown">
<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 %}">
{{ 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 %}"
onclick="DropdownWidget.clear('{{ id }}')">
{{ icons.render_icon('x-lg', 16) }}
</button>
<input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
<ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}"
onclick="DropdownWidget.handleDropdownClick(event, '{{ id }}')">
<input type="text"
class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0 dropdown-search-input"
id="search{{ id }}" placeholder="Search..." oninput="DropdownWidget.searchDropdown('{{ id }}')">
<div class="overflow-auto overflow-x-hidden" style="z-index: 9999;" id="{{ id }}DropdownContent">
{% for item in list %}
<li><a class="dropdown-item" data-inv-value="{{ item.id }}"
onclick="DropdownWidget.setButton('{{ id }}', {{ item.id }}, '{{ item.identifier }}')">{{
item.identifier }}</a></li>
{% endfor %}
</div>
</ul>
</div>
</div>
{% endmacro %}