49 lines
No EOL
2.1 KiB
HTML
49 lines
No EOL
2.1 KiB
HTML
{% import "fragments/_icon_fragment.html" as icons %}
|
|
|
|
{% macro render_combobox(
|
|
id, options, label = none, placeholder = none, data_attributes = none,
|
|
create_url = none, edit_url = none, delete_url = none, refresh_url = none
|
|
) %}
|
|
{% if label %}
|
|
<label for="{{ id }}-input" class="form-label">{{ label }}</label>
|
|
{% endif %}
|
|
<div id="{{ id }}-container" x-data='ComboBox({
|
|
id: {{ id|tojson }},
|
|
createUrl: {{ create_url|tojson if create_url else "null" }},
|
|
editUrl: {{ edit_url|tojson if edit_url else "null" }},
|
|
deleteUrl: {{ delete_url|tojson if delete_url else "null" }},
|
|
refreshUrl: {{ refresh_url|tojson if refresh_url else "null" }}
|
|
})' hx-preserve class="combo-box-widget">
|
|
<div class="input-group">
|
|
<input type="text" id="{{ id }}-input" x-model.trim="query" @keydown.enter.prevent="submitAddOrEdit()"
|
|
@keydown.escape="cancelEdit()" class="form-control rounded-bottom-0">
|
|
|
|
<button id="{{ id }}-add" :disabled="!query" @click="submitAddOrEdit()"
|
|
class="btn btn-primary rounded-bottom-0">
|
|
<i class="bi icon-state" :class="isEditing ? 'bi-pencil' : 'bi-plus-lg'"></i>
|
|
</button>
|
|
|
|
<button id="{{ id }}-remove" :disabled="!hasSelection" @click="removeSelected()"
|
|
class="btn btn-danger rounded-bottom-0">
|
|
{{ icons.render_icon('dash-lg', 16) }}
|
|
</button>
|
|
</div>
|
|
|
|
<select id="{{ id }}-list" multiple x-ref="list" @change="onListChange"
|
|
class="form-select border-top-0 rounded-top-0" name="{{ id }}" size="10">
|
|
{% for option in options if options %}
|
|
<option value="{{ option.id }}">{{ option.name }}</option>
|
|
{% endfor %}
|
|
{% if not options and refresh_url %}
|
|
<option disabled>Loading...</option>
|
|
{% endif %}
|
|
</select>
|
|
|
|
{% if refresh_url %}
|
|
{% set url = refresh_url ~ ('&' if '?' in refresh_url else '?') ~ 'view=option&limit=0&per_page=0' %}
|
|
<div id="{{ id }}-htmx-refresh" class="d-none" hx-get="{{ url }}"
|
|
hx-trigger="revealed, combobox:refresh from:#{{ id }}-container" hx-target="#{{ id }}-list" hx-swap="innerHTML">
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}} |