Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-07-25 08:09:38 +02:00
Code Issues Releases Activity Actions 2

Allow user to search transaction categories (#577)

Browse source 
Issue #573
This commit is contained in:
Mattia 2024-03-29 14:02:15 +00:00 • committed by GitHub
parent 2181cdd118
commit 2d406274ac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 27 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

18
app/javascript/controllers/list_filter_controller.js
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");
}
}
}

19
app/views/transactions/_category_dropdown.html.erb
View file

@ -5,18 +5,21 @@
</div>
<div class="absolute z-10 hidden w-screen mt-2 max-w-min cursor-default" data-dropdown-target="menu">
<div class="w-64 text-sm font-semibold leading-6 text-gray-900 bg-white shadow-lg shrink rounded-xl ring-1 ring-gray-900/5">
<div class="flex flex-col">
<div class="grow p-1.5 cursor-not-allowed">
<div class="flex flex-col" data-controller="list-filter">
<div class="grow p-1.5">
<div class="relative flex items-center bg-white border border-gray-200 rounded-lg">
<input placeholder="Search" class="placeholder:text-sm placeholder:text-gray-500 h-10 relative pl-10 w-full border-none rounded-lg cursor-not-allowed" disabled/>
<input placeholder="Search" class="placeholder:text-sm placeholder:text-gray-500 font-normal h-10 relative pl-10 w-full border-none rounded-lg" data-list-filter-target="input" data-action="list-filter#filter" />
<%= lucide_icon("search", class: "w-5 h-5 text-gray-500 ml-2 absolute inset-0 transform top-1/2 -translate-y-1/2") %>
</div>
</div>
<%= form_with model: transaction, namespace: dom_id(transaction), html: { data: { controller: "auto-submit-form" }, class: "flex flex-col gap-0.5 p-1.5 mt-0.5 mr-2 max-h-64 overflow-y-scroll scrollbar" } do |form| %>
<%= form_with model: transaction, namespace: dom_id(transaction), html: { data: { controller: "auto-submit-form", list_filter_target: "list" }, class: "flex flex-col gap-0.5 p-1.5 mt-0.5 mr-2 max-h-64 overflow-y-scroll scrollbar" } do |form| %>
<div class="py-8 pl-4 mt-0.5 mr-2 text-gray-500 hidden" data-list-filter-target="emptyMessage">
No categories found
</div>
<% Current.family.transaction_categories.each do |category| %>
<% is_selected = (!transaction.category.nil? and category.id == transaction.category.id) %>
<div class="flex items-center <%= class_names("bg-gray-25": is_selected) %> hover:bg-gray-25 border-none rounded-lg px-2 py-1 group">
<%= form.radio_button :category_id, category.id, class: "hidden" %>
<% is_selected = category.id == transaction.category.try(:id) %>
<%= content_tag :div, class: ["filterable-item flex items-center hover:bg-gray-25 border-none rounded-lg px-2 py-1 group", { "bg-gray-25": is_selected }], data: { filter_name: category.name } do %>
<%= form.radio_button :category_id, category.id, class: "hidden", data: { auto_submit_form_target: "auto" } %>
<%= label dom_id(transaction), :transaction_category_id, value: category.id, class: "flex w-full items-center gap-1.5 cursor-pointer" do %>
<span class="w-5 h-5">
<%= lucide_icon("check", class: "w-5 h-5 text-gray-500") if is_selected %>
@ -26,7 +29,7 @@
<button class="ml-auto flex items-center justify-center hover:bg-gray-50 w-8 h-8 rounded-lg invisible group-hover:visible cursor-not-allowed" type="button" disabled>
<%= lucide_icon("more-horizontal", class: "w-5 h-5 text-gray-500") %>
</button>
</div>
<% end %>
<% end %>
<% end %>
<hr/>