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

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

2
static/js/widget.js
View file

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

6
templates/fragments/_combobox_fragment.html
View file

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

89
templates/settings.html
View file

@ -19,18 +19,18 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
{{ combos.render_combobox( {{ combos.render_combobox(
id='brand', id='brand',
options=brands, options=brands,
label='Brands', label='Brands',
placeholder='Add a new brand' placeholder='Add a new brand'
) }} ) }}
</div> </div>
<div class="col"> <div class="col">
{{ combos.render_combobox( {{ combos.render_combobox(
id='type', id='type',
options=types, options=types,
label='Inventory Types', label='Inventory Types',
placeholder='Add a new type' placeholder='Add a new type'
) }} ) }}
</div> </div>
</div> </div>
@ -42,33 +42,80 @@
<div class="row"> <div class="row">
<div class="col"> <div class="col">
{{ combos.render_combobox( {{ combos.render_combobox(
id='section', id='section',
options=sections, options=sections,
label='Sections', label='Sections',
placeholder='Add a new section' placeholder='Add a new section'
) }} ) }}
</div> </div>
<div class="col"> <div class="col">
{{ combos.render_combobox( {{ combos.render_combobox(
id='function', id='function',
options=functions, options=functions,
label='Functions', label='Functions',
placeholder='Add a new function' placeholder='Add a new function'
) }} ) }}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
{% set room_editor %}
const roomEditor = new bootstrap.Modal(document.getElementById('roomEditor'));
roomEditor.show();
{% endset %}
<div class="col"> <div class="col">
{{ combos.render_combobox( {{ combos.render_combobox(
id='room', id='room',
options=rooms, options=rooms,
label='Rooms', label='Rooms',
placeholder='Add a new room' placeholder='Add a new room',
onAdd=room_editor
) }} ) }}
</div> </div>
</div> </div>
</div> </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> </form>
{% endblock %} {% endblock %}