mirror of
https://github.com/we-promise/sure.git
synced 2026-04-08 23:04:49 +00:00
2c257a2a4b
* Implement inline category selection * Add turbo frame to refresh updated transaction * Improve styles * Fix category assignment * Reorganize code * Revert event propagation * Remove unused frames * Make only the transaction name clickable * Add custom scrollbar class
43 lines
2.8 KiB
Plaintext
43 lines
2.8 KiB
Plaintext
<%# locals: (transaction:) %>
|
|
<div class="relative" data-controller="dropdown">
|
|
<div class="flex cursor-pointer" data-action="click->dropdown#toggleMenu">
|
|
<%= render partial: "shared/category_badge", locals: transaction.category.nil? ? {} : { name: transaction.category.name, color: transaction.category.color } %>
|
|
</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="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/>
|
|
<%= 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| %>
|
|
<% 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" %>
|
|
<%= 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>
|
|
</div>
|
|
<% 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>
|