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

Add inventory management templates and utility functions

Browse source 
- Created HTML templates for inventory index, layout, search, settings, table, user, and worklog.
- Implemented utility functions for eager loading relationships in SQLAlchemy.
- Added validation mixin for form submissions.
- Updated project configuration files (pyproject.toml and setup.cfg) for package management.
This commit is contained in:
Yaro Kasear 2025-07-08 11:47:22 -05:00
parent 602bb77e22
commit 9803db17ab
51 changed files with 76 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

313
templates/settings.html
View file

@ -1,313 +0,0 @@
{% extends "layout.html" %}
{% block title %}{{ title }}{% endblock %}
{% block content %}
<form id="settingsForm">
{{ breadcrumbs.breadcrumb_header(
title=title,
save_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="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="editorSaveButton">Save</button>
</div>
</div>
</div>
</div>
</form>
{% endblock %}
{% block script %}
function isSerializable(obj) {
try {
JSON.stringify(obj);
return true;
} catch {
return false;
}
}
function buildFormState() {
function extractOptions(id) {
const select = document.getElementById(`${id}-list`);
return Array.from(select.options).map(opt => {
const name = opt.textContent.trim();
const rawId = opt.value?.trim();
return {
name,
...(rawId ? { id: /^\d+$/.test(rawId) ? parseInt(rawId, 10) : rawId } : {})
};
});
}
function sanitizeFk(val) {
if (val && val !== "null" && val !== "" && val !== "None") {
return /^\d+$/.test(val) ? parseInt(val, 10) : val;
}
return null;
}
const roomOptions = Array.from(document.getElementById('room-list').options);
const rooms = roomOptions.map(opt => {
const id = opt.value?.trim();
const name = opt.textContent.trim();
const sectionId = sanitizeFk(opt.dataset.sectionId);
const functionId = sanitizeFk(opt.dataset.functionId);
const result = {
name,
...(id ? { id } : {}),
section_id: sectionId,
function_id: functionId
};
return result;
});
return {
brands: extractOptions("brand"),
types: extractOptions("type"),
sections: extractOptions("section"),
functions: extractOptions("function"),
rooms
};
}
const modal = document.getElementById('roomEditor');
const saveButton = document.getElementById('saveButton')
const editorSaveButton = document.getElementById('editorSaveButton');
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) {
option.selected = true;
}
modalSections.appendChild(option);
});
Array.from(pageFunctions.options).forEach(opt => {
const option = new Option(opt.textContent, opt.value);
if (opt.value === functionId) {
option.selected = true;
}
modalFunctions.appendChild(option);
});
});
saveButton.addEventListener('click', async (event) => {
event.preventDefault();
console.log("Test")
const state = buildFormState();
if (!isSerializable(state)) {
console.warn("🚨 Payload is not serializable:", state);
alert("Invalid payload — check console.");
return;
}
try {
const response = await fetch('/api/settings', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(state)
});
const contentType = response.headers.get("content-type");
if (!response.ok) {
if (contentType && contentType.includes("application/json")) {
const data = await response.json();
throw new Error(data.errors?.join("\n") || "Unknown error");
} else {
const text = await response.text();
throw new Error("Unexpected response:\n" + text.slice(0, 200));
}
}
const data = await response.json();
console.log("Sync result:", data);
renderToast({ message: 'Settings updated successfully.', type: 'success' });
} catch (err) {
console.error("Submission error:", err);
renderToast({ message: `Failed to update settings, ${err}`, type: 'danger' });
}
});
editorSaveButton.addEventListener('click', () => {
const name = document.getElementById('roomName').value.trim();
const sectionVal = document.getElementById('roomSection').value;
const funcVal = document.getElementById('roomFunction').value;
let idRaw = document.getElementById('roomId').value;
if (!name) {
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 (!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);
bootstrap.Modal.getInstance(modal).hide();
});
cancelButton.addEventListener('click', () => {
bootstrap.Modal.getInstance(modal).hide();
});
{% endblock %}