Enhance settings page; integrate combo box widgets for brands, types, sections, and functions, and add pencil icon for editing functionality
This commit is contained in:
parent
dba2438937
commit
ad413c3f1b
6 changed files with 177 additions and 67 deletions
81
static/js/widget.js
Normal file
81
static/js/widget.js
Normal file
|
@ -0,0 +1,81 @@
|
|||
const ComboBoxWidget = (() => {
|
||||
let tempIdCounter = -1;
|
||||
|
||||
function initComboBox(ns) {
|
||||
const input = document.querySelector(`#${ns}-input`);
|
||||
const list = document.querySelector(`#${ns}-list`);
|
||||
const addBtn = document.querySelector(`#${ns}-add`);
|
||||
const removeBtn = document.querySelector(`#${ns}-remove`);
|
||||
let currentlyEditing = null;
|
||||
|
||||
if (!input || !list || !addBtn || !removeBtn) {
|
||||
console.warn(`ComboBoxWidget: Missing elements for namespace '${ns}'`);
|
||||
return;
|
||||
}
|
||||
|
||||
function updateAddButtonIcon() {
|
||||
addBtn.innerHTML = currentlyEditing ? icons.edit : icons.add;
|
||||
}
|
||||
|
||||
input.addEventListener('input', () => {
|
||||
addBtn.disabled = input.value.trim() === '';
|
||||
});
|
||||
|
||||
list.addEventListener('change', () => {
|
||||
const selected = list.selectedOptions;
|
||||
removeBtn.disabled = selected.length === 0;
|
||||
|
||||
if (selected.length === 1) {
|
||||
// Load the text into input for editing
|
||||
input.value = selected[0].textContent;
|
||||
addBtn.disabled = input.value.trim() === '';
|
||||
currentlyEditing = selected[0];
|
||||
} else {
|
||||
input.value = '';
|
||||
currentlyEditing = null;
|
||||
addBtn.disabled = true;
|
||||
}
|
||||
|
||||
updateAddButtonIcon();
|
||||
});
|
||||
|
||||
addBtn.addEventListener('click', () => {
|
||||
const newItem = input.value.trim();
|
||||
if (!newItem) return;
|
||||
|
||||
if (currentlyEditing) {
|
||||
currentlyEditing.textContent = newItem;
|
||||
currentlyEditing = null;
|
||||
} else {
|
||||
const option = document.createElement('option');
|
||||
option.textContent = newItem;
|
||||
option.value = tempIdCounter--;
|
||||
list.appendChild(option);
|
||||
}
|
||||
|
||||
input.value = '';
|
||||
addBtn.disabled = true;
|
||||
removeBtn.disabled = true;
|
||||
sortOptions(list);
|
||||
});
|
||||
|
||||
removeBtn.addEventListener('click', () => {
|
||||
Array.from(list.selectedOptions).forEach(opt => opt.remove());
|
||||
currentlyEditing = null;
|
||||
removeBtn.disabled = true;
|
||||
input.value = '';
|
||||
addBtn.disabled = true;
|
||||
});
|
||||
}
|
||||
|
||||
function sortOptions(selectElement) {
|
||||
const sorted = Array.from(selectElement.options)
|
||||
.sort((a, b) => a.text.localeCompare(b.text));
|
||||
selectElement.innerHTML = '';
|
||||
sorted.forEach(option => selectElement.appendChild(option));
|
||||
}
|
||||
|
||||
return {
|
||||
initComboBox
|
||||
};
|
||||
})();
|
Loading…
Add table
Add a link
Reference in a new issue