mirror of
https://github.com/we-promise/sure.git
synced 2026-04-08 23:04:49 +00:00
4f0b2de4ef
* Basic listbox and popover controllers with temporary example * Separate select and menu controllers
46 lines
3.1 KiB
Plaintext
46 lines
3.1 KiB
Plaintext
<%# locals: (transaction:) %>
|
|
<div class="relative" data-controller="menu">
|
|
<button data-menu-target="button" class="flex">
|
|
<%= render partial: "shared/category_badge", locals: transaction.category.nil? ? {} : { name: transaction.category.name, color: transaction.category.color } %>
|
|
</button>
|
|
<div data-menu-target="content" class="absolute z-10 hidden w-screen mt-2 max-w-min cursor-default">
|
|
<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" 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" 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>
|
|
<%= 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 = 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 %>
|
|
</span>
|
|
<%= render partial: "shared/category_badge", locals: { name: category.name, color: category.color } %>
|
|
<% end %>
|
|
<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>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
<hr/>
|
|
<div class="p-1.5 w-full">
|
|
<button class="cursor-not-allowed flex text-sm font-medium items-center gap-2 text-gray-500 w-full rounded-lg p-2 hover:bg-gray-100" disabled>
|
|
<%= lucide_icon("plus", class: "w-5 h-5") %>
|
|
Add new
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|