mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-23 15:19:38 +02:00
parent
2181cdd118
commit
2d406274ac
2 changed files with 27 additions and 10 deletions
|
@ -2,15 +2,29 @@ import { Controller } from "@hotwired/stimulus";
|
|||
|
||||
// Basic functionality to filter a list based on a provided text attribute.
|
||||
export default class extends Controller {
|
||||
static targets = ["input", "list"];
|
||||
static targets = ["input", "list", "emptyMessage"];
|
||||
|
||||
filter() {
|
||||
const filterValue = this.inputTarget.value.toLowerCase();
|
||||
const items = this.listTarget.querySelectorAll(".filterable-item");
|
||||
let noMatchFound = true;
|
||||
|
||||
if (this.hasEmptyMessageTarget) {
|
||||
this.emptyMessageTarget.classList.add("hidden");
|
||||
}
|
||||
|
||||
items.forEach((item) => {
|
||||
const text = item.getAttribute("data-filter-name").toLowerCase();
|
||||
item.style.display = text.includes(filterValue) ? "" : "none";
|
||||
const shouldDisplay = text.includes(filterValue);
|
||||
item.style.display = shouldDisplay ? "" : "none";
|
||||
|
||||
if (shouldDisplay) {
|
||||
noMatchFound = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (noMatchFound && this.hasEmptyMessageTarget) {
|
||||
this.emptyMessageTarget.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue