Allow user to search transaction categories (#577)

Issue #573
This commit is contained in:
Mattia
2024-03-29 14:02:15 +00:00
committed by GitHub
parent 2181cdd118
commit 2d406274ac
2 changed files with 27 additions and 10 deletions

View File

@@ -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");
}
}
}