Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-05 13:35:21 +02:00
Code Issues Releases Activity Actions

Add inline category selection (#541)

Browse source 
* 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
This commit is contained in:
Jakub Kottnauer 2024-03-14 15:30:36 +01:00 • committed by GitHub
parent 2c3752668a
commit 2c257a2a4b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 177 additions and 205 deletions
Download patch file Download diff file Expand all files Collapse all files

4
app/views/shared/_category_badge.html.erb Normal file
View file

@ -0,0 +1,4 @@
<%# locals: (name: "Uncategorized", color: "#737373") %>
<% background_color = "color-mix(in srgb, #{color} 5%, white)" %>
<% border_color = "color-mix(in srgb, #{color} 10%, white)" %>
<span class="border text-sm font-medium px-2.5 py-1 rounded-full cursor-pointer" style="background-color: <%= background_color %>; border-color: <%= border_color %>; color: <%= color %>"><%= name %></span>

2
app/views/shared/_sidebar_modal.html.erb
View file

@ -1,5 +1,5 @@
<%= turbo_frame_tag "modal" do %>
<dialog class="bg-white border border-alpha-black-25 rounded-2xl max-h-[calc(100vh-32px)] max-w-[480px] w-full shadow-xs h-full mt-4 mr-4" data-controller="modal" data-action="click->modal#click_outside">
<dialog class="bg-white border border-alpha-black-25 rounded-2xl max-h-[calc(100vh-32px)] max-w-[480px] w-full shadow-xs h-full mt-4 mr-4" data-controller="modal" data-action="click->modal#clickOutside">
<div class="flex flex-col h-full p-4">
<div class="flex justify-end items-center h-9">
<div data-action="click->modal#close" class="cursor-pointer">

42
app/views/transactions/_category_dropdown.html.erb Normal file
View file

@ -0,0 +1,42 @@
<%# 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>

13
app/views/transactions/_transaction.html.erb
View file

@ -1,7 +1,12 @@
<%= link_to transaction_path(transaction), data: { turbo_frame: "modal" }, class: "text-gray-900 flex items-center gap-6 py-4 text-sm font-medium hover:bg-gray-50 px-4", id: dom_id(transaction) do %>
<div class="w-96 flex items-center gap-2">
<div class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-600/5 text-gray-600"><%= transaction.name[0].upcase %></div>
<p class="text-gray-900"><%= transaction.name %></p>
<%= turbo_frame_tag dom_id(transaction), class:"text-gray-900 flex items-center gap-6 py-4 text-sm font-medium px-4" do %>
<%= link_to transaction_path(transaction), data: { turbo_frame: "modal" }, class: "group", id: dom_id(transaction) do %>
<div class="w-96 flex items-center gap-2">
<div class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-600/5 text-gray-600"><%= transaction.name[0].upcase %></div>
<p class="text-gray-900 group-hover:underline group-hover:text-gray-800"><%= transaction.name %></p>
</div>
<% end %>
<div class="w-48">
<%= render partial: "transactions/category_dropdown", locals: { transaction: } %>
</div>
<div>
<p><%= transaction.account.name %></p>

7
app/views/transactions/index.html.erb
View file

@ -50,7 +50,7 @@
</div>
<div>
<%= form.select :date, options_for_select([['All', 'all'], ['7D', 'last_7_days'], ['1M', 'last_30_days'], ["1Y", "last_365_days"]], selected: params.dig(:q, :date)), {}, { class: "block h-full w-full border border-gray-200 rounded-lg text-sm py-2 pr-8 pl-2", "data-transactions-search-target": "date" } %>
<!-- Hidden fields for date range -->
<%= form.hidden_field :date_gteq, value: '', "data-transactions-search-target": "dateGteq" %>
<%= form.hidden_field :date_lteq, value: '', "data-transactions-search-target": "dateLteq" %>
@ -68,12 +68,15 @@
<div class="w-96">
<p class="uppercase">transaction</p>
</div>
<div class="w-48">
<p class="uppercase">category</p>
</div>
<div class="grow uppercase flex justify-between items-center gap-5 text-xs font-medium text-gray-500">
<p>account</p>
<p>amount</p>
</div>
</div>
<div class="space-y-6">
<% @transactions.group_by { |transaction| transaction.date }.each do |date, grouped_transactions| %>
<%= render partial: "transactions/transaction_group", locals: { date: date, transactions: grouped_transactions } %>