Refactor combo box integration; streamline onAdd, onRemove, and onEdit parameters in render_combobox macro for improved functionality and readability

This commit is contained in:
Yaro Kasear 2025-06-20 10:02:40 -05:00
parent d3a9b6dbd5
commit b182e30c43
3 changed files with 71 additions and 26 deletions

View file

@ -1,6 +1,4 @@
const ComboBoxWidget = (() => {
let tempIdCounter = -1;
function initComboBox(ns, config = {}) {
const input = document.querySelector(`#${ns}-input`);
const list = document.querySelector(`#${ns}-list`);

View file

@ -24,9 +24,9 @@
<script>
document.addEventListener('DOMContentLoaded', () => {
ComboBoxWidget.initComboBox("{{ id }}", {
{% if onAdd %}onAdd: {{ onAdd }},{% endif %}
{% if onRemove %}onRemove: {{ onRemove }},{% endif %}
{% if onEdit %}onEdit: {{ onEdit }}{% endif %}
{% if onAdd %}onAdd: function(option) { {{ onAdd | safe }} },{% endif %}
{% if onRemove %}onRemove: function(option) { {{ onRemove | safe }} },{% endif %}
{% if onEdit %}onEdit: function(option) { {{ onEdit | safe }} }{% endif %}
});
});
</script>

View file

@ -19,18 +19,18 @@
<div class="row">
<div class="col">
{{ combos.render_combobox(
id='brand',
options=brands,
label='Brands',
placeholder='Add a new brand'
id='brand',
options=brands,
label='Brands',
placeholder='Add a new brand'
) }}
</div>
<div class="col">
{{ combos.render_combobox(
id='type',
options=types,
label='Inventory Types',
placeholder='Add a new type'
id='type',
options=types,
label='Inventory Types',
placeholder='Add a new type'
) }}
</div>
</div>
@ -42,33 +42,80 @@
<div class="row">
<div class="col">
{{ combos.render_combobox(
id='section',
options=sections,
label='Sections',
placeholder='Add a new section'
id='section',
options=sections,
label='Sections',
placeholder='Add a new section'
) }}
</div>
<div class="col">
{{ combos.render_combobox(
id='function',
options=functions,
label='Functions',
placeholder='Add a new function'
id='function',
options=functions,
label='Functions',
placeholder='Add a new function'
) }}
</div>
</div>
<div class="row">
{% set room_editor %}
const roomEditor = new bootstrap.Modal(document.getElementById('roomEditor'));
roomEditor.show();
{% endset %}
<div class="col">
{{ combos.render_combobox(
id='room',
options=rooms,
label='Rooms',
placeholder='Add a new room'
id='room',
options=rooms,
label='Rooms',
placeholder='Add a new room',
onAdd=room_editor
) }}
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="roomEditor" data-bs-backdrop="static" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="roomEditorLabel">Room Editor</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col">
<label for="roomName" class="form-label">Room Name</label>
<input type="text" class="form-input" name="roomName" id="roomName"
placeholder="Enter room name">
</div>
</div>
<div class="row">
<div class="col">
<label for="roomSection" class="form-label">Section</label>
<select name="roomSection" id="roomSection" class="form-select">
<option>Select a section</option>
{% for section in sections %}
<option value="{{ section.id }}">{{ section.name }}</option>
{% endfor %}
</select>
</div>
<div class="col">
<label for="roomFunction" class="form-label">Function</label>
<select name="roomFunction" id="roomFunction" class="form-select">
<option>Select a function</option>
{% for function in functions %}
<option value="{{ function.id }}">{{ function.name }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</form>
{% endblock %}
{% endblock %}