Refactor combo box integration; streamline onAdd, onRemove, and onEdit parameters in render_combobox macro for improved functionality and readability
This commit is contained in:
parent
d3a9b6dbd5
commit
b182e30c43
3 changed files with 71 additions and 26 deletions
|
@ -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`);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 %}
|
Loading…
Add table
Add a link
Reference in a new issue