2024-05-22 12:31:25 +02:00
|
|
|
<%= turbo_frame_tag "category_dropdown" do %>
|
|
|
|
<div class="flex flex-col relative" 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="<%= t(".search_placeholder") %>" autocomplete="nope" type="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>
|
|
|
|
<div data-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">
|
|
|
|
<div class="pb-2 pl-4 mr-2 text-gray-500 hidden" data-list-filter-target="emptyMessage">
|
|
|
|
<%= t(".no_categories") %>
|
|
|
|
</div>
|
|
|
|
<% @categories.each do |category| %>
|
|
|
|
<%= render partial: "transactions/categories/dropdowns/row", locals: { category: } %>
|
|
|
|
<% end %>
|
|
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="relative p-1.5 w-full">
|
|
|
|
<%= link_to new_transaction_category_path(transaction_id: @transaction),
|
|
|
|
class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100",
|
|
|
|
data: { turbo_frame: "modal" } do %>
|
|
|
|
<%= lucide_icon "plus", class: "w-5 h-5" %>
|
|
|
|
|
|
|
|
<%= t(".add_new") %>
|
|
|
|
<% end %>
|
|
|
|
|
|
|
|
<% if @transaction.category %>
|
2024-05-30 20:55:18 -04:00
|
|
|
<%= button_to transaction_row_path(@transaction),
|
2024-05-22 12:31:25 +02:00
|
|
|
method: :patch,
|
2024-05-30 20:55:18 -04:00
|
|
|
data: { turbo_frame: dom_id(@transaction) },
|
2024-05-22 12:31:25 +02:00
|
|
|
params: { transaction: { category_id: nil } },
|
|
|
|
class: "flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100" do %>
|
|
|
|
<%= lucide_icon "minus", class: "w-5 h-5" %>
|
|
|
|
|
|
|
|
<%= t(".clear") %>
|
|
|
|
<% end %>
|
|
|
|
<% end %>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<% end %>
|