Enhance DropdownWidget with search and click handling functionality for improved user interaction
This commit is contained in:
Yaro Kasear
parent
2b72158375
commit
e91af64c1c
2 changed files with 76 additions and 66 deletions
|
|
@ -41,8 +41,47 @@ const DropdownWidget = (() => {
|
|||
});
|
||||
});
|
||||
|
||||
|
||||
function handleDropdownClick(e, name) {
|
||||
if (e.target.tagName === "A") {
|
||||
const input = document.getElementById(name);
|
||||
const button = document.getElementById(`${name}Button`);
|
||||
const clearButton = document.getElementById(`${name}ClearButton`);
|
||||
|
||||
input.value = e.target.dataset.invValue;
|
||||
button.textContent = e.target.textContent;
|
||||
|
||||
if (e.target.dataset.invValue) {
|
||||
clearButton.classList.remove("d-none");
|
||||
button.classList.add("rounded-end-0");
|
||||
button.classList.remove("rounded-end");
|
||||
} else {
|
||||
clearButton.classList.add("d-none");
|
||||
button.classList.remove("rounded-end-0");
|
||||
button.classList.add("rounded-end");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function searchDropdown(name) {
|
||||
const searchInput = document.getElementById(`search${name}`);
|
||||
const dropdown = document.getElementById(`menu${name}`);
|
||||
|
||||
const filter = searchInput.value.toLowerCase();
|
||||
const items = dropdown.querySelectorAll("a.dropdown-item");
|
||||
items.forEach(item => {
|
||||
if (item.textContent.toLowerCase().includes(filter)) {
|
||||
item.style.display = "";
|
||||
} else {
|
||||
item.style.display = "none";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
clear,
|
||||
handleDropdownClick,
|
||||
searchDropdown,
|
||||
setButton
|
||||
};
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -2,71 +2,42 @@
|
|||
{% import "fragments/_link_fragment.html" as links %}
|
||||
|
||||
{% macro render_dropdown(id, list, label, current_item = None, entry_link = None, enabled = True) %}
|
||||
<label for="{{ id }}" class="form-label">
|
||||
{{ label }}
|
||||
{% if entry_link %}
|
||||
{{ links.entry_link(entry_link, current_item.id) }}
|
||||
{% endif %}
|
||||
</label>
|
||||
<div class="dropdown">
|
||||
<div class="btn-group w-100">
|
||||
<button class="btn btn-outline-dark dropdown-toggle overflow-x-hidden w-100 rounded-end{% if current_item %}-0 border-end-0{% endif %} dropdown-button" type="button" data-bs-toggle="dropdown"
|
||||
data-inv-value="{{ current_item.id if current_item else '' }}" id="{{ id }}Button"{% if not enabled %} disabled{% endif %}
|
||||
style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
|
||||
{{ current_item.identifier if current_item else '-' }}
|
||||
</button>
|
||||
<button class="btn btn-outline-danger rounded-end font-weight-bold border-start-0{% if not current_item %} d-none{% endif %}" type="button" id="{{ id }}ClearButton"
|
||||
style="z-index: 9999; border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}" onclick="DropdownWidget.clear('{{ id }}')">
|
||||
{{ icons.render_icon('x-lg', 16) }}
|
||||
</button>
|
||||
<input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
|
||||
<ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}">
|
||||
<input type="text" class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0 dropdown-search-input" id="search{{ id }}" placeholder="Search...">
|
||||
<div class="overflow-auto overflow-x-hidden" style="z-index: 9999;" id="{{ id }}DropdownContent">
|
||||
{% for item in list %}
|
||||
<li><a class="dropdown-item" data-inv-value="{{ item.id }}" onclick="DropdownWidget.setButton('{{ id }}', {{ item.id }}, '{{ item.identifier }}')">{{ item.identifier }}</a></li>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<label for="{{ id }}" class="form-label">
|
||||
{{ label }}
|
||||
{% if entry_link %}
|
||||
{{ links.entry_link(entry_link, current_item.id) }}
|
||||
{% endif %}
|
||||
</label>
|
||||
<div class="dropdown">
|
||||
<div class="btn-group w-100">
|
||||
<button
|
||||
class="btn btn-outline-dark dropdown-toggle overflow-x-hidden w-100 rounded-end{% if current_item %}-0 border-end-0{% endif %} dropdown-button"
|
||||
type="button" data-bs-toggle="dropdown" data-inv-value="{{ current_item.id if current_item else '' }}"
|
||||
id="{{ id }}Button" {% if not enabled %} disabled{% endif %}
|
||||
style="border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}">
|
||||
{{ current_item.identifier if current_item else '-' }}
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline-danger rounded-end font-weight-bold border-start-0{% if not current_item %} d-none{% endif %}"
|
||||
type="button" id="{{ id }}ClearButton"
|
||||
style="z-index: 9999; border-color: rgb(222, 226, 230);{% if not enabled %} background-color: rgb(233, 236, 239); color: rgb(0, 0, 0);{% endif %}"
|
||||
onclick="DropdownWidget.clear('{{ id }}')">
|
||||
{{ icons.render_icon('x-lg', 16) }}
|
||||
</button>
|
||||
<input type="hidden" name="{{ id }}" id="{{ id }}" value="{{ current_item.id if current_item else '' }}">
|
||||
<ul class="dropdown-menu w-100 pt-0" style="max-height: 40vh; z-index: 9999;" id="menu{{ id }}"
|
||||
onclick="DropdownWidget.handleDropdownClick(event, '{{ id }}')">
|
||||
<input type="text"
|
||||
class="form-control rounded-bottom-0 border-start-0 border-top-0 border-end-0 dropdown-search-input"
|
||||
id="search{{ id }}" placeholder="Search..." oninput="DropdownWidget.searchDropdown('{{ id }}')">
|
||||
<div class="overflow-auto overflow-x-hidden" style="z-index: 9999;" id="{{ id }}DropdownContent">
|
||||
{% for item in list %}
|
||||
<li><a class="dropdown-item" data-inv-value="{{ item.id }}"
|
||||
onclick="DropdownWidget.setButton('{{ id }}', {{ item.id }}, '{{ item.identifier }}')">{{
|
||||
item.identifier }}</a></li>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const {{ id }}Dropdown = document.getElementById("menu{{ id }}");
|
||||
const {{ id }}Input = document.getElementById("{{ id }}");
|
||||
const {{ id }}SearchInput = document.getElementById("search{{ id }}");
|
||||
const {{ id }}DropdownContent = document.getElementById("{{ id }}DropdownContent");
|
||||
const {{ id }}Button = document.getElementById("{{ id }}Button");
|
||||
const {{ id }}ClearButton = document.getElementById("{{ id }}ClearButton");
|
||||
|
||||
{{ id }}Dropdown.addEventListener("click", (e) => {
|
||||
if (e.target.tagName === "A") {
|
||||
{{ id }}Input.value = e.target.dataset.invValue;
|
||||
{{ id }}Button.textContent = e.target.textContent;
|
||||
|
||||
if (e.target.dataset.invValue) {
|
||||
{{ id }}ClearButton.classList.remove("d-none");
|
||||
{{ id }}Button.classList.add("rounded-end-0");
|
||||
{{ id }}Button.classList.remove("rounded-end");
|
||||
} else {
|
||||
{{ id }}ClearButton.classList.add("d-none");
|
||||
{{ id }}Button.classList.remove("rounded-end-0");
|
||||
{{ id }}Button.classList.add("rounded-end");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
{{ id }}SearchInput.addEventListener("input", () => {
|
||||
const filter = {{ id }}SearchInput.value.toLowerCase();
|
||||
const items = {{ id }}Dropdown.querySelectorAll("a.dropdown-item");
|
||||
items.forEach(item => {
|
||||
if (item.textContent.toLowerCase().includes(filter)) {
|
||||
item.style.display = "";
|
||||
} else {
|
||||
item.style.display = "none";
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue