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

Refactor render_combobox macro: improve code formatting and readability

Browse source
This commit is contained in:
Yaro Kasear 2025-07-03 10:51:42 -05:00
parent 76d2799e05
commit 81b220ff44
1 changed files with 37 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

68
templates/fragments/_combobox_fragment.html
View file

@ -1,40 +1,44 @@
{% import "fragments/_icon_fragment.html" as icons %} {% import "fragments/_icon_fragment.html" as icons %}
{% macro render_combobox(id, options, label=none, placeholder=none, onAdd=none, onRemove=none, onEdit=none, {% macro render_combobox(id, options, label=none, placeholder=none, onAdd=none, onRemove=none, onEdit=none, data_attributes=none) %}
data_attributes=none) %} <!-- Combobox Widget Fragment -->
<!-- Combobox Widget Fragment -->
{% if label %} {% if label %}
<label for="{{ id }}-input" class="form-label">{{ label }}</label> <label for="{{ id }}-input" class="form-label">{{ label }}</label>
{% endif %} {% endif %}
<div class="combo-box-widget" id="{{ id }}-container"> <div class="combo-box-widget" id="{{ id }}-container">
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control rounded-bottom-0" id="{{ id }}-input" {% if placeholder %} <input type="text" class="form-control rounded-bottom-0" id="{{ id }}-input"{% if placeholder %} placeholder="{{ placeholder }}"{% endif %}>
placeholder="{{ placeholder }}" {% endif %}> <button type="button" class="btn btn-primary rounded-bottom-0" id="{{ id }}-add" disabled>
<button type="button" class="btn btn-primary rounded-bottom-0" id="{{ id }}-add" disabled> {{ icons.render_icon('plus-lg', 16, 'icon-state') }}
{{ icons.render_icon('plus-lg', 16, 'icon-state') }} </button>
</button> <button type="button" class="btn btn-danger rounded-bottom-0" id="{{ id }}-remove" disabled>
<button type="button" class="btn btn-danger rounded-bottom-0" id="{{ id }}-remove" disabled> {{ icons.render_icon('dash-lg', 16) }}
{{ icons.render_icon('dash-lg', 16) }} </button>
</button> </div>
<select class="form-select border-top-0 rounded-top-0" id="{{ id }}-list" name="{{ id }}" size="10" multiple>
{% for option in options %}
<option value="{{ option.id }}"
{% if data_attributes %}
{% for key, data_attr in data_attributes.items() %}
{% if option[key] is defined %}
data-{{ data_attr }}="{{ option[key] }}"
{% endif %}
{% endfor %}
{% endif %}>
{{ option.name }}
</option>
{% endfor %}
</select>
</div> </div>
<select class="form-select border-top-0 rounded-top-0" id="{{ id }}-list" name="{{ id }}" size="10" multiple>
{% for option in options %}
<option value="{{ option.id }}" {% if data_attributes %} {% for key, data_attr in data_attributes.items() %} {%
if option[key] is defined %} data-{{ data_attr }}="{{ option[key] }}" {% endif %} {% endfor %} {% endif %}>
{{ option.name }}
</option>
{% endfor %}
</select>
</div>
<script> <script>
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
ComboBoxWidget.initComboBox("{{ id }}"{% if onAdd or onRemove or onEdit %}, { ComboBoxWidget.initComboBox("{{ id }}"{% if onAdd or onRemove or onEdit %}, {
{% if onAdd %}onAdd: function(newItem, list, createOption) { { { onAdd | safe } } }, {% endif %} {% if onAdd %}onAdd: function(newItem, list, createOption) { {{ onAdd | safe }} },{% endif %}
{% if onRemove %} onRemove: function(option) { { { onRemove | safe } } }, {% endif %} {% if onRemove %}onRemove: function(option) { {{ onRemove | safe }} },{% endif %}
{% if onEdit %} onEdit: function(option) { { { onEdit | safe } } } {% endif %} {% if onEdit %}onEdit: function(option) { {{ onEdit | safe }} }{% endif %}
}{% endif %}); }{% endif %});
}); });
</script> </script>
{% endmacro %} {% endmacro %}