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

Refactor brand management UI; replace datalist with combo box widget and enhance styling for better usability

Browse source
This commit is contained in:
Yaro Kasear 2025-06-18 09:59:07 -05:00
parent e2b8579362
commit dba2438937
4 changed files with 82 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

108
templates/settings.html
View file

@ -12,62 +12,74 @@
<div class="container">
<label for="brandInput" class="form-label">Brands</label>
<div class="input-group">
<input type="text" class="form-control rounded-bottom-0" id="brandInput" name="brandInput" placeholder="Add a new brand">
<button type="button" class="btn btn-primary rounded-bottom-0" id="addBrandButton" onclick="addBrand();" disabled>
{{ icons.plus(16) }}
</button>
<button type="button" class="btn btn-danger rounded-bottom-0" id="removeBrandButton" onclick="removeSelectedBrands()" disabled>
{{ icons.minus(16) }}
</button>
</div>
<select class="form-select border-top-0 rounded-top-0" id="brandList" size="10" multiple>
{% for brand in brands %}
<div class="combo-box-widget">
<div class="input-group">
<input type="text" class="form-control rounded-bottom-0" id="brandInput" name="brandInput" placeholder="Add a new brand">
<button type="button" class="btn btn-primary rounded-bottom-0" id="addBrandButton" onclick="SettingsPage.addBrand();" disabled>
{{ icons.plus(16) }}
</button>
<button type="button" class="btn btn-danger rounded-bottom-0" id="removeBrandButton" onclick="SettingsPage.removeSelectedBrands()" disabled>
{{ icons.minus(16) }}
</button>
</div>
<select class="form-select border-top-0 rounded-top-0" id="brandList" size="10" multiple>
{% for brand in brands %}
<option value="{{ brand.id }}">{{ brand.name }}</option>
{% endfor %}
</select>
{% endfor %}
</select>
</div>
</div>
</form>
{% endblock %}
{% block script %}
const brandInput = document.querySelector('#brandInput');
const brandList = document.querySelector('#brandList');
const addBrandButton = document.querySelector('#addBrandButton');
const removeBrandButton = document.querySelector('#removeBrandButton');
const SettingsPage = (() => {
const brandInput = document.querySelector('#brandInput');
const brandList = document.querySelector('#brandList');
const addBrandButton = document.querySelector('#addBrandButton');
const removeBrandButton = document.querySelector('#removeBrandButton');
let tempIdCounter = -1;
brandInput.addEventListener('input', () => {
addBrandButton.disabled = brandInput.value.trim() === '';
});
function init() {
brandInput.addEventListener('input', () => {
addBrandButton.disabled = brandInput.value.trim() === '';
});
brandList.addEventListener('change', () => {
removeBrandButton.disabled = brandList.selectedOptions.length === 0;
});
function sortOptions() {
const options = Array.from(brandList.options);
options.sort((a, b) => a.text.localeCompare(b.text));
brandList.innerHTML = '';
options.forEach(option => brandList.appendChild(option));
}
let tempIdCounter = -1;
function addBrand() {
const newBrand = brandInput.value.trim();
if (newBrand) {
const option = document.createElement('option');
option.textContent = newBrand;
option.value = tempIdCounter--;
brandList.appendChild(option);
brandInput.value = '';
addBrandButton.disabled = true;
sortOptions();
brandList.addEventListener('change', () => {
removeBrandButton.disabled = brandList.selectedOptions.length === 0;
});
}
}
function removeSelectedBrands() {
Array.from(brandList.selectedOptions).forEach(option => option.remove());
removeBrandButton.disabled = true;
}
function addBrand() {
const newBrand = brandInput.value.trim();
if (newBrand) {
const option = document.createElement('option');
option.textContent = newBrand;
option.value = tempIdCounter--;
brandList.appendChild(option);
brandInput.value = '';
addBrandButton.disabled = true;
sortOptions();
}
}
function removeSelectedBrands() {
Array.from(brandList.selectedOptions).forEach(option => option.remove());
removeBrandButton.disabled = true;
}
function sortOptions() {
Array.from(brandList.options)
.sort((a, b) => a.text.localeCompare(b.text))
.forEach(option => brandList.appendChild(option));
}
return {
init,
addBrand,
removeSelectedBrands
};
})();
document.addEventListener('DOMContentLoaded', SettingsPage.init);
{% endblock %}