57 lines
3.2 KiB
HTML
57 lines
3.2 KiB
HTML
{% import "fragments/_icon_fragment.html" as icons %}
|
|
{% import "fragments/_link_fragment.html" as links %}
|
|
|
|
{% macro render_dropdown(id, list = none, label = none, current_item = none, entry_link = none, enabled = true, refresh_url = none, select_url = none, record_id = none, field_name = none) %}
|
|
<label for="{{ id }}" class="form-label">
|
|
{{ label or '' }}
|
|
{% if entry_link %}
|
|
{{ links.entry_link(entry_link, current_item.id) }}
|
|
{% endif %}
|
|
</label>
|
|
<div class="dropdown" id="{{ id }}-dropdown" x-data='DropDown({
|
|
id: {{ id|tojson }},
|
|
refreshUrl: {{ refresh_url|tojson if refresh_url else "null" }},
|
|
selectUrl: {{ select_url|tojson if select_url else "null" }},
|
|
recordId: {{ record_id|tojson if record_id else "null"}},
|
|
field: {{ field_name|tojson if field_name else "null"}}
|
|
})'
|
|
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 %}"
|
|
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 %}"
|
|
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 '' }}" 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"
|
|
id="search{{ id }}" placeholder="Search...">
|
|
<div class="overflow-auto overflow-x-hidden" style="z-index: 9999;" id="{{ id }}DropdownContent">
|
|
{% if list %}
|
|
{% for item in list %}
|
|
<li><a class="dropdown-item" data-inv-value="{{ item.id }}">{{
|
|
item.identifier }}</a></li>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
</ul>
|
|
</div>
|
|
{% if refresh_url %}
|
|
{% set url = refresh_url ~ ('&' if '?' in refresh_url else '?') ~ 'view=list&limit=0' %}
|
|
<div id="{{ id }}-htmx-refresh" class="d-none" hx-get="{{ url }}"
|
|
hx-trigger="revealed, combobox:refresh from:#{{ id }}-dropdown" hx-target="#{{ id }}DropdownContent" hx-swap="innerHTML"></div>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|