Refactor settings form and layout; enhance form submission with JSON handling and improve modal functionality for room management
This commit is contained in:
Yaro Kasear
parent
d7e38cb8da
commit
5a3176cad1
3 changed files with 201 additions and 219 deletions
|
|
@ -3,147 +3,149 @@
|
|||
{% block title %}{{ title }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{{ breadcrumbs.breadcrumb_header(
|
||||
title=title,
|
||||
submit_button=True
|
||||
) }}
|
||||
<form id="settingsForm">
|
||||
{{ breadcrumbs.breadcrumb_header(
|
||||
title=title,
|
||||
submit_button=True
|
||||
) }}
|
||||
|
||||
<div class="container">
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
Inventory Settings
|
||||
</h5>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
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'
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Location Settings</h5>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
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'
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{% set room_editor %}
|
||||
const roomEditorModal = new bootstrap.Modal(document.getElementById('roomEditor'));
|
||||
const input = document.getElementById('room-input');
|
||||
const name = input.value.trim();
|
||||
const existingOption = Array.from(document.getElementById('room-list').options)
|
||||
.find(opt => opt.textContent.trim() === name);
|
||||
|
||||
const event = new CustomEvent('roomEditor:prepare', {
|
||||
detail: {
|
||||
id: existingOption?.value ?? '',
|
||||
name: name,
|
||||
sectionId: existingOption?.dataset.sectionId ?? '',
|
||||
functionId: existingOption?.dataset.functionId ?? ''
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('roomEditor').dispatchEvent(event);
|
||||
roomEditorModal.show();
|
||||
|
||||
document.getElementById('room-input').value = '';
|
||||
{% endset %}
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
id='room',
|
||||
options=rooms,
|
||||
label='Rooms',
|
||||
placeholder='Add a new room',
|
||||
onAdd=room_editor,
|
||||
onEdit=room_editor,
|
||||
data_attributes={'area_id': 'section-id', 'function_id': 'function-id'}
|
||||
) }}
|
||||
</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="container">
|
||||
<div class="card mb-3">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">
|
||||
Inventory Settings
|
||||
</h5>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label for="roomName" class="form-label">Room Name</label>
|
||||
<input type="text" class="form-input" id="roomName" placeholder="Enter room name">
|
||||
<input type="hidden" id="roomId">
|
||||
{{ combos.render_combobox(
|
||||
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'
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Location Settings</h5>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
{{ combos.render_combobox(
|
||||
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'
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
{% set room_editor %}
|
||||
const roomEditorModal = new bootstrap.Modal(document.getElementById('roomEditor'));
|
||||
const input = document.getElementById('room-input');
|
||||
const name = input.value.trim();
|
||||
const existingOption = Array.from(document.getElementById('room-list').options)
|
||||
.find(opt => opt.textContent.trim() === name);
|
||||
|
||||
const event = new CustomEvent('roomEditor:prepare', {
|
||||
detail: {
|
||||
id: existingOption?.value ?? '',
|
||||
name: name,
|
||||
sectionId: existingOption?.dataset.sectionId ?? '',
|
||||
functionId: existingOption?.dataset.functionId ?? ''
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('roomEditor').dispatchEvent(event);
|
||||
roomEditorModal.show();
|
||||
|
||||
document.getElementById('room-input').value = '';
|
||||
{% endset %}
|
||||
<div class="col">
|
||||
<label for="roomSection" class="form-label">Section</label>
|
||||
<select id="roomSection" class="form-select">
|
||||
<option value="">Select a section</option>
|
||||
{% for section in sections %}
|
||||
<option value="{{ section.id }}">{{ section.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label">Function</label>
|
||||
<select id="roomFunction" class="form-select">
|
||||
<option value="">Select a function</option>
|
||||
{% for function in functions %}
|
||||
<option value="{{ function.id }}">{{ function.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{{ combos.render_combobox(
|
||||
id='room',
|
||||
options=rooms,
|
||||
label='Rooms',
|
||||
placeholder='Add a new room',
|
||||
onAdd=room_editor,
|
||||
onEdit=room_editor,
|
||||
data_attributes={'area_id': 'section-id', 'function_id': 'function-id'}
|
||||
) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-danger" data-bs-dismiss="modal"
|
||||
id="roomEditorCancelButton">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="roomEditorSaveButton">Save</button>
|
||||
</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" id="roomName" placeholder="Enter room name">
|
||||
<input type="hidden" id="roomId">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<label for="roomSection" class="form-label">Section</label>
|
||||
<select id="roomSection" class="form-select">
|
||||
<option value="">Select a section</option>
|
||||
{% for section in sections %}
|
||||
<option value="{{ section.id }}">{{ section.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="col">
|
||||
<label class="form-label">Function</label>
|
||||
<select id="roomFunction" class="form-select">
|
||||
<option value="">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"
|
||||
id="roomEditorCancelButton">Cancel</button>
|
||||
<button type="button" class="btn btn-primary" id="roomEditorSaveButton">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{% endblock %}
|
||||
|
||||
{% block script %}
|
||||
const formState = {
|
||||
brands: {{ brands | tojson }},
|
||||
types: {{ types | tojson }},
|
||||
sections: {{ sections | tojson }},
|
||||
functions: {{ functions | tojson }},
|
||||
rooms: {{ rooms | tojson }},
|
||||
brands: {{ brands | tojson }},
|
||||
types: {{ types | tojson }},
|
||||
sections: {{ sections | tojson }},
|
||||
functions: {{ functions | tojson }},
|
||||
rooms: {{ rooms | tojson }},
|
||||
};
|
||||
|
||||
function buildFormState() {
|
||||
|
|
@ -162,7 +164,7 @@ submit_button=True
|
|||
const roomOptions = Array.from(document.getElementById('room-list').options);
|
||||
const rooms = roomOptions.map(opt => {
|
||||
const data = opt.dataset;
|
||||
|
||||
|
||||
return {
|
||||
id: opt.value || undefined,
|
||||
name: opt.textContent.trim(),
|
||||
|
|
@ -187,21 +189,21 @@ submit_button=True
|
|||
const cancelButton = document.getElementById('roomEditorCancelButton');
|
||||
const form = document.getElementById('settingsForm');
|
||||
|
||||
|
||||
|
||||
modal.addEventListener('roomEditor:prepare', (event) => {
|
||||
const { id, name, sectionId, functionId } = event.detail;
|
||||
document.getElementById('roomId').value = id;
|
||||
document.getElementById('roomName').value = name;
|
||||
|
||||
|
||||
// Populate dropdowns before assigning selection
|
||||
const modalSections = document.getElementById('roomSection');
|
||||
const modalFunctions = document.getElementById('roomFunction');
|
||||
const pageSections = document.getElementById('section-list');
|
||||
const pageFunctions = document.getElementById('function-list');
|
||||
|
||||
|
||||
modalSections.innerHTML = '<option value="">Select a section</option>';
|
||||
modalFunctions.innerHTML = '<option value="">Select a function</option>';
|
||||
|
||||
|
||||
Array.from(pageSections.options).forEach(opt => {
|
||||
const option = new Option(opt.textContent, opt.value);
|
||||
if (opt.value === sectionId) {
|
||||
|
|
@ -209,7 +211,7 @@ submit_button=True
|
|||
}
|
||||
modalSections.appendChild(option);
|
||||
});
|
||||
|
||||
|
||||
Array.from(pageFunctions.options).forEach(opt => {
|
||||
const option = new Option(opt.textContent, opt.value);
|
||||
if (opt.value === functionId) {
|
||||
|
|
@ -219,15 +221,32 @@ submit_button=True
|
|||
});
|
||||
});
|
||||
|
||||
// Replace the whole submission logic with just JSON
|
||||
form.addEventListener('submit', (event) => {
|
||||
event.preventDefault(); // 🚨 Stop form from leaving the building
|
||||
event.preventDefault();
|
||||
try {
|
||||
const state = buildFormState();
|
||||
document.getElementById('formStateField').value = JSON.stringify(state);
|
||||
form.submit(); // 🟢 Now it can go
|
||||
fetch('/api/settings', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(state)
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
return response.json().then(data => {
|
||||
throw new Error(data.errors?.join("\n") || "Unknown error");
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then(data => {
|
||||
console.log("Sync result:", data);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error("Submission error:", err);
|
||||
});
|
||||
} catch (err) {
|
||||
alert("Form submission failed: " + err.message);
|
||||
console.error("Failed to build form state:", err);
|
||||
}
|
||||
});
|
||||
|
|
@ -242,27 +261,27 @@ submit_button=True
|
|||
alert('Please enter a room name.');
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const roomList = document.getElementById('room-list');
|
||||
let existingOption = Array.from(roomList.options).find(opt => opt.value === idRaw);
|
||||
|
||||
|
||||
// If it's a brand new ID, generate one (string-based!)
|
||||
if (!idRaw) {
|
||||
idRaw = ComboBoxWidget.createTempId("room");
|
||||
}
|
||||
|
||||
|
||||
if (!existingOption) {
|
||||
existingOption = ComboBoxWidget.createOption(name, idRaw);
|
||||
roomList.appendChild(existingOption);
|
||||
}
|
||||
|
||||
|
||||
existingOption.textContent = name;
|
||||
existingOption.value = idRaw;
|
||||
existingOption.dataset.sectionId = sectionVal || "";
|
||||
existingOption.dataset.functionId = funcVal || "";
|
||||
|
||||
|
||||
ComboBoxWidget.sortOptions(roomList);
|
||||
|
||||
|
||||
// Update formState.rooms
|
||||
const index = formState.rooms.findIndex(r => r.id === idRaw);
|
||||
const payload = {
|
||||
|
|
@ -271,13 +290,13 @@ submit_button=True
|
|||
section_id: sectionVal !== "" ? sectionVal : null,
|
||||
function_id: funcVal !== "" ? funcVal : null
|
||||
};
|
||||
|
||||
|
||||
if (index >= 0) {
|
||||
formState.rooms[index] = payload;
|
||||
} else {
|
||||
formState.rooms.push(payload);
|
||||
}
|
||||
|
||||
|
||||
bootstrap.Modal.getInstance(modal).hide();
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue