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

12
app/assets/stylesheets/application.tailwind.css
View file

@ -57,4 +57,16 @@
/* Small, single purpose classes that should take precedence over other styles */
@layer utilities {
.scrollbar::-webkit-scrollbar {
width: 4px;
}
.scrollbar::-webkit-scrollbar-thumb {
background: #d6d6d6;
border-radius: 10px;
}
.scrollbar::-webkit-scrollbar-thumb:hover {
background: #a6a6a6;
}
}

14
app/controllers/transactions_controller.rb
View file

@ -35,7 +35,7 @@ class TransactionsController < ApplicationController
respond_to do |format|
if @transaction.save
format.html { redirect_to transaction_url(@transaction), notice: "Transaction was successfully created." }
format.html { redirect_to transaction_url(@transaction), notice: t(".success") }
else
format.html { render :new, status: :unprocessable_entity }
end
@ -45,7 +45,13 @@ class TransactionsController < ApplicationController
def update
respond_to do |format|
if @transaction.update(transaction_params)
format.html { redirect_to transaction_url(@transaction), notice: "Transaction was successfully updated." }
format.html { redirect_to transaction_url(@transaction), notice: t(".success") }
format.turbo_stream do
render turbo_stream: [
turbo_stream.append("notification-tray", partial: "shared/notification", locals: { type: "success", content: t(".success") }),
turbo_stream.replace("transaction_#{@transaction.id}", partial: "transactions/transaction", locals: { transaction: @transaction })
]
end
else
format.html { render :edit, status: :unprocessable_entity }
end
@ -56,7 +62,7 @@ class TransactionsController < ApplicationController
@transaction.destroy!
respond_to do |format|
format.html { redirect_to transactions_url, notice: "Transaction was successfully destroyed." }
format.html { redirect_to transactions_url, notice: t(".success") }
end
end
@ -68,6 +74,6 @@ class TransactionsController < ApplicationController
# Only allow a list of trusted parameters through.
def transaction_params
params.require(:transaction).permit(:name, :date, :amount, :currency, :notes, :excluded)
params.require(:transaction).permit(:name, :date, :amount, :currency, :notes, :excluded, :category_id)
end
end

26
app/javascript/controllers/dropdown_controller.js
View file

@ -4,20 +4,32 @@ import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ["menu"]
toggleMenu(event) {
event.stopPropagation(); // Prevent event from closing the menu immediately
this.menuTarget.classList.toggle("hidden");
toggleMenu = (e) => {
e.stopPropagation(); // Prevent event from closing the menu immediately
this.menuTarget.classList.contains("hidden") ? this.showMenu() : this.hideMenu();
}
showMenu = () => {
document.addEventListener("click", this.onDocumentClick);
this.menuTarget.classList.remove("hidden");
}
hideMenu = () => {
document.removeEventListener("click", this.onDocumentClick);
this.menuTarget.classList.add("hidden");
}
connect() {
document.addEventListener("click", this.hideMenu);
disconnect = () => {
this.hideMenu();
}
disconnect() {
document.removeEventListener("click", this.hideMenu);
onDocumentClick = (e) => {
if (this.menuTarget.contains(e.target)) {
// user has clicked inside of the dropdown
e.stopPropagation();
return;
}
this.hideMenu();
}
}

2
app/javascript/controllers/modal_controller.js
View file

@ -8,7 +8,7 @@ export default class extends Controller {
}
// Hide the dialog when the user clicks outside of it
click_outside(e) {
clickOutside(e) {
if (e.target === this.element) {
this.element.close();
}

55
app/javascript/tailwindColors.js
View file

@ -2,6 +2,22 @@
* To keep consistent styling across the app, this file can be imported in
* Stimulus controllers to reference our color palette. Mostly used for D3 charts.
*/
export const categoryColors = [
"#e99537",
"#4da568",
"#6471eb",
"#db5a54",
"#df4e92",
"#c44fe9",
"#eb5429",
"#61c9ea",
"#805dee",
"#6ad28a"
]
export const categoryDefaultColor = "#737373"
export default {
transparent: "transparent",
current: "currentColor",
@ -138,4 +154,43 @@ export default {
600: "#7839EE",
700: "#6927DA",
},
fuchsia: {
25: "#FEFAFF",
50: "#FDF4FF",
100: "#FBE8FF",
200: "#F6D0FE",
300: "#EEAAFD",
400: "#E478FA",
500: "#D444F1",
600: "#BA24D5",
700: "#9F1AB1",
800: "#821890",
900: "#6F1877",
},
pink: {
25: "#FFFAFC",
50: "#FEF0F7",
100: "#FFD1E2",
200: "#FFB1CE",
300: "#FD8FBA",
400: "#F86BA7",
500: "#F23E94",
600: "#D5327F",
700: "#BA256B",
800: "#9E1958",
900: "#840B45",
},
orange: {
25: "#FFF9F5",
50: "#FFF4ED",
100: "#FFE6D5",
200: "#FFD6AE",
300: "#FF9C66",
400: "#FF692E",
500: "#FF4405",
600: "#E62E05",
700: "#BC1B06",
800: "#97180C",
900: "#771A0D",
},
};

16
app/models/transaction/category.rb
View file

@ -5,14 +5,14 @@ class Transaction::Category < ApplicationRecord
before_update :clear_internal_category, if: :name_changed?
DEFAULT_CATEGORIES = [
{ internal_category: "income", color: "#fd7f6f" },
{ internal_category: "food_and_drink", color: "#7eb0d5" },
{ internal_category: "entertainment", color: "#b2e061" },
{ internal_category: "personal_care", color: "#bd7ebe" },
{ internal_category: "general_services", color: "#ffb55a" },
{ internal_category: "auto_and_transport", color: "#ffee65" },
{ internal_category: "rent_and_utilities", color: "#beb9db" },
{ internal_category: "home_improvement", color: "#fdcce5" }
{ internal_category: "income", color: "#e99537" },
{ internal_category: "food_and_drink", color: "#4da568" },
{ internal_category: "entertainment", color: "#6471eb" },
{ internal_category: "personal_care", color: "#db5a54" },
{ internal_category: "general_services", color: "#df4e92" },
{ internal_category: "auto_and_transport", color: "#c44fe9" },
{ internal_category: "rent_and_utilities", color: "#eb5429" },
{ internal_category: "home_improvement", color: "#61c9ea" }
]
def self.ransackable_attributes(auth_object = nil)

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 } %>