Filter transactions by category (#581)

* Add transaction filtering by category

* Link label to checkbox

* Keep the dropdown open when clicked to allow tab change

* Show the badge with color and name when filter is applied

* Reduce color height

app/models/transaction.rb

@@ -32,6 +32,10 @@ class Transaction < ApplicationRecord
           value.each do |account_id|
             filters << { type: "account", value: family.accounts.find(account_id), original: { key: key, value: account_id } }
           end
+        when "category_id_in"
+          value.each do |category_id|
+            filters << { type: "category", value: family.transaction_categories.find(category_id), original: { key: key, value: category_id } }
+          end
         when "category_name_or_account_name_or_name_cont"
           filters << { type: "search", value: value, original: { key: key, value: nil } }
         end

app/models/transaction/category.rb

@@ -18,7 +18,7 @@ class Transaction::Category < ApplicationRecord
   ]
 
   def self.ransackable_attributes(auth_object = nil)
-    %w[name]
+    %w[name id]
   end
 
   def self.ransackable_associations(auth_object = nil)

app/views/transactions/_filter.html.erb

@@ -1,11 +1,17 @@
 <%# locals: (filter:) %>
 <div class="flex items-center gap-1 text-sm border border-alpha-black-200 rounded-3xl p-1.5">
-  <% if filter[:type] == "account" %>
+  <% case filter[:type] %>
+  <% when "account" %>
     <div class="flex items-center gap-2">
       <div class="w-5 h-5 bg-blue-600/10 text-xs flex items-center justify-center rounded-full"><%= filter[:value].name[0].upcase %></div>
       <p><%= filter[:value].name %></p>
     </div>
-  <% elsif filter[:type] == "search" %>
+  <% when "category" %>
+    <div class="flex items-center gap-2">
+      <div class="w-2 h-4 text-xs flex items-center justify-center rounded-full"  style="background-color: <%= filter[:value].color %>"></div>
+      <p><%= filter[:value].name %></p>
+    </div>
+  <% when "search" %>
     <div class="flex items-center gap-2">
       <%= lucide_icon "text", class: "w-5 h-5 text-gray-500" %>
       <p><%= "\"#{filter[:value]}\"".truncate(20) %></p>

app/views/transactions/_search_form.html.erb

@@ -6,7 +6,7 @@
         <div class="grow">
           <%= render partial: "transactions/search_form/search_filter", locals: { form: form } %>
         </div>
-        <div data-controller="dropdown" class="relative">
+        <div data-controller="dropdown" data-dropdown-close-on-click-value="false" class="relative">
           <button type="button" data-action="dropdown#toggleMenu" class="border border-gray-200 block h-full rounded-lg flex items-center gap-2 px-4">
             <%= lucide_icon("list-filter", class: "w-5 h-5 text-gray-500") %>
             <p class="text-sm font-medium text-gray-900">Filter</p>

app/views/transactions/search_form/_account_filter.html.erb

@@ -7,7 +7,7 @@
   <div class="my-2" id="list" data-list-filter-target="list">
     <% Current.family.accounts.each do |account| %>
       <div class="filterable-item flex items-center gap-2 p-2" data-filter-name="<%= account.name %>">
-        <%= form.check_box :account_id_in, { "data-auto-submit-form-target": "auto", multiple: true, id: dom_id(account), class: "rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" }, account.id, nil %>
+        <%= form.check_box :account_id_in, { "data-auto-submit-form-target": "auto", multiple: true, class: "rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" }, account.id, nil %>
         <%= form.label :account_id_in, account.name, value: account.id, class: "text-sm text-gray-900" %>
       </div>
     <% end %>

app/views/transactions/search_form/_category_filter.html.erb

@@ -1,4 +1,17 @@
 <%# locals: (form:) %>
-<div class="py-12 flex items-center justify-center">
-  <p class="text-gray-500 text-sm">Coming soon...</p>
+<div data-controller="list-filter">
+  <div class="relative">
+    <input type="search" placeholder="Filter category" data-list-filter-target="input" data-action="input->list-filter#filter" class="block w-full border border-gray-200 rounded-md py-2 pl-10 pr-3 focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm">
+    <%= lucide_icon("search", class: "w-5 h-5 text-gray-500 absolute inset-y-0 left-2 top-1/2 transform -translate-y-1/2") %>
+  </div>
+  <div class="my-2" id="list" data-list-filter-target="list">
+    <% Current.family.transaction_categories.each do |transaction_category| %>
+      <div class="filterable-item flex items-center gap-2 p-2" data-filter-name="<%= transaction_category.name %>">
+        <%= form.check_box :category_id_in, { "data-auto-submit-form-target": "auto", multiple: true, class: "rounded-sm border-gray-300 text-indigo-600 shadow-xs focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" }, transaction_category.id, nil %>
+        <%= form.label :category_id_in, transaction_category.name, value: transaction_category.id, class: "text-sm text-gray-900" do %>
+          <%= render partial: "shared/category_badge", locals: { name: transaction_category.name, color: transaction_category.color } %>
+        <%end%>
+      </div>
+    <% end %>
+  </div>
 </div>