mirror of
https://github.com/we-promise/sure.git
synced 2026-04-16 18:44:13 +00:00
281197f918
* Make category selection menus opaque for excluded transactions * Allow keyboard navigation in category selection menu * Fix category transparency on mobile * Make checkbox opaque * Remove text-secondary from amount container * Submit form directly * Handle aria labels
104 lines
4.6 KiB
Plaintext
104 lines
4.6 KiB
Plaintext
<%= 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-container border border-secondary rounded-lg">
|
|
<input
|
|
placeholder="<%= t(".search_placeholder") %>"
|
|
autocomplete="nope"
|
|
type="search"
|
|
role="combobox"
|
|
aria-label="<%= t(".search_placeholder") %>"
|
|
aria-expanded="false"
|
|
aria-autocomplete="list"
|
|
class="bg-container placeholder:text-sm placeholder:text-secondary font-normal h-10 relative pl-10 w-full border-none rounded-lg focus:outline-hidden focus:ring-0"
|
|
data-list-filter-target="input"
|
|
data-action="list-filter#filter keydown->list-filter#handleKeydown">
|
|
<%= icon("search", class: "absolute inset-0 ml-2 transform top-1/2 -translate-y-1/2") %>
|
|
</div>
|
|
</div>
|
|
<div data-list-filter-target="list" role="listbox" 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-secondary hidden" data-list-filter-target="emptyMessage">
|
|
<%= t(".no_categories") %>
|
|
</div>
|
|
<% if @categories.any? %>
|
|
<% Category::Group.for(@categories).each do |group| %>
|
|
<%= render "category/dropdowns/row", category: group.category %>
|
|
|
|
<% group.subcategories.each do |category| %>
|
|
<%= render "category/dropdowns/row", category: category %>
|
|
<% end %>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="flex justify-center items-center py-12">
|
|
<div class="text-center flex flex-col items-center max-w-[500px]">
|
|
<p class="text-sm text-secondary font-normal mb-4"><%= t(".empty") %></p>
|
|
|
|
<%= render DS::Button.new(
|
|
text: t(".bootstrap"),
|
|
variant: "outline",
|
|
href: bootstrap_categories_path,
|
|
method: :post,
|
|
data: { turbo_frame: :_top }) %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<%= render "shared/ruler", classes: "my-2" %>
|
|
|
|
<div class="relative p-1.5 w-full">
|
|
<% if @transaction.category %>
|
|
<%= button_to transaction_path(@transaction.entry),
|
|
method: :patch,
|
|
data: { turbo_frame: dom_id(@transaction.entry) },
|
|
params: { entry: { entryable_type: "Transaction", entryable_attributes: { id: @transaction.id, category_id: nil } } },
|
|
class: "flex text-sm font-medium items-center gap-2 text-secondary w-full rounded-lg p-2 hover:bg-container-inset-hover" do %>
|
|
<%= icon("minus") %>
|
|
|
|
<%= t(".clear") %>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% unless @transaction.transfer? %>
|
|
<%= link_to new_transaction_transfer_match_path(@transaction.entry),
|
|
class: "flex text-sm font-medium items-center gap-2 text-secondary w-full rounded-lg p-2 hover:bg-container-inset-hover",
|
|
data: { turbo_frame: "modal" } do %>
|
|
<%= icon("refresh-cw") %>
|
|
|
|
<p>Match transfer/payment</p>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<% if @transaction.splittable? %>
|
|
<%= link_to new_transaction_split_path(@transaction.entry),
|
|
class: "flex text-sm font-medium items-center gap-2 text-secondary w-full rounded-lg p-2 hover:bg-container-inset-hover",
|
|
data: { turbo_frame: "modal" } do %>
|
|
<%= icon("split") %>
|
|
|
|
<p><%= t("splits.show.button") %></p>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<div class="flex text-sm font-medium items-center gap-2 text-secondary w-full rounded-lg p-2">
|
|
<div class="flex items-center gap-2">
|
|
<%= form_with url: transaction_path(@transaction.entry),
|
|
method: :patch,
|
|
data: { controller: "auto-submit-form" } do |f| %>
|
|
<%= f.hidden_field "entry[excluded]", value: !@transaction.entry.excluded %>
|
|
<%= f.check_box "entry[excluded]",
|
|
checked: @transaction.entry.excluded,
|
|
class: "checkbox checkbox--light",
|
|
data: { auto_submit_form_target: "auto", autosubmit_trigger_event: "change" } %>
|
|
<% end %>
|
|
</div>
|
|
|
|
<p>One-time <%= @transaction.entry.amount.negative? ? "income" : "expense" %></p>
|
|
|
|
<span class="text-orange-500 ml-auto">
|
|
<%= icon("asterisk", color: "current") %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|