mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-07-24 15:49:39 +02:00
Add balance heading, date period partials (#507)
* Make balance heading partial * Move period dropdown to partial * Fix tests * Remove redundant arg
This commit is contained in:
parent
0fe9b6d34a
commit
19f15e9391
5 changed files with 41 additions and 26 deletions
|
@ -49,13 +49,12 @@ module ApplicationHelper
|
|||
end
|
||||
|
||||
# Styles to use when displaying a change in value
|
||||
def trend_styles(trend, mode: :asset)
|
||||
puts mode == :liability ? "it is a liability" : "it is an asset"
|
||||
def trend_styles(trend)
|
||||
bg_class, text_class, symbol, icon = case trend.direction
|
||||
when "up"
|
||||
mode == :liability ? [ "bg-red-500/5", "text-red-500", "+", "arrow-up" ] : [ "bg-green-500/5", "text-green-500", "+", "arrow-up" ]
|
||||
trend.type == :liability ? [ "bg-red-500/5", "text-red-500", "+", "arrow-up" ] : [ "bg-green-500/5", "text-green-500", "+", "arrow-up" ]
|
||||
when "down"
|
||||
mode == :liability ? [ "bg-green-500/5", "text-green-500", "-", "arrow-down" ] : [ "bg-red-500/5", "text-red-500", "-", "arrow-down" ]
|
||||
trend.type == :liability ? [ "bg-green-500/5", "text-green-500", "-", "arrow-down" ] : [ "bg-red-500/5", "text-red-500", "-", "arrow-down" ]
|
||||
when "flat"
|
||||
[ "bg-gray-500/5", "text-gray-500", "", "minus" ]
|
||||
else
|
||||
|
@ -65,7 +64,7 @@ module ApplicationHelper
|
|||
{ bg_class: bg_class, text_class: text_class, symbol: symbol, icon: icon }
|
||||
end
|
||||
|
||||
def trend_label(period)
|
||||
def period_label(period)
|
||||
return "since account creation" if period.date_range.nil?
|
||||
start_date, end_date = period.date_range.first, period.date_range.last
|
||||
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
<%# locals: (valuation_series:, classification:) %>
|
||||
<% valuation_series.data.reverse_each.with_index do |valuation_item, index| %>
|
||||
<% valuation, trend = valuation_item.values_at(:raw, :trend) %>
|
||||
<% valuation_styles = trend_styles(valuation_item[:trend], mode: classification) %>
|
||||
<% valuation_styles = trend_styles(valuation_item[:trend]) %>
|
||||
<%= turbo_frame_tag dom_id(valuation) do %>
|
||||
<div class="p-4 flex items-center">
|
||||
<div class="w-16">
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
<%= turbo_stream_from @account %>
|
||||
<% balance_trend_styles = trend_styles(@balance_series.trend, mode: @account.classification) %>
|
||||
<% balance = Money.from_amount(@account.balance, @account.currency) %>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center">
|
||||
|
@ -27,25 +26,13 @@
|
|||
<div class="bg-white shadow-xs rounded-xl border border-alpha-black-25 rounded-lg">
|
||||
<div class="p-4 flex justify-between">
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm text-gray-500">Total Value</p>
|
||||
<p class="text-gray-900">
|
||||
<span class="text-gray-500"><%= balance.symbol %></span>
|
||||
<span class="text-xl font-medium"><%= format_currency(balance.amount, precision: 0, unit: '') %></span>
|
||||
<%- if balance.precision.positive? -%>
|
||||
<span class="text-gray-500"><%= balance.separator %><%= balance.cents %></span>
|
||||
<% end %>
|
||||
</p>
|
||||
<% if @balance_series.nil? %>
|
||||
<p class="text-sm text-gray-500">Data not available for the selected period</p>
|
||||
<% elsif @balance_series.trend.amount == 0 %>
|
||||
<p class="text-sm text-gray-500">No change vs. prior period</p>
|
||||
<% else %>
|
||||
<p class="text-sm <%= balance_trend_styles[:text_class] %>">
|
||||
<span><%= balance_trend_styles[:symbol] %><%= number_to_currency(@balance_series.trend.amount.abs, precision: 2) %></span>
|
||||
<span>(<%= lucide_icon(@balance_series.trend.amount > 0 ? 'arrow-up' : 'arrow-down', class: "w-4 h-4 align-text-bottom inline") %> <%= @balance_series.trend.percent %>%)</span>
|
||||
<span class="text-gray-500"><%= trend_label(@period) %></span>
|
||||
</p>
|
||||
<% end %>
|
||||
<%= render partial: "shared/balance_heading", locals: {
|
||||
label: "Total Value",
|
||||
period: @period,
|
||||
balance: Money.from_amount(@account.balance, @account.currency),
|
||||
trend: @balance_series.trend
|
||||
}
|
||||
%>
|
||||
</div>
|
||||
<%= form_with url: account_path(@account), method: :get, class: "flex items-center gap-4", html: { class: "" } do |f| %>
|
||||
<%= f.select :period, options_for_select([['7D', 'last_7_days'], ['1M', 'last_30_days'], ["1Y", "last_365_days"], ['All', 'all']], selected: params[:period]), {}, { class: "block w-full border border-alpha-black-100 shadow-xs rounded-lg text-sm py-2 pr-8 pl-2 cursor-pointer", onchange: "this.form.submit();" } %>
|
||||
|
|
25
app/views/shared/_balance_heading.html.erb
Normal file
25
app/views/shared/_balance_heading.html.erb
Normal file
|
@ -0,0 +1,25 @@
|
|||
<%# locals: (label:, period:, balance:, trend:, size: "lg")%>
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm text-gray-500"><%= label %></p>
|
||||
<p class="text-gray-900 -space-x-0.5">
|
||||
<span class="text-gray-500"><%= balance.symbol %></span>
|
||||
<span class="<%= size == "lg" ? "text-xl" : "text-lg" %> font-medium"><%= format_currency(balance.amount, precision: 0, unit: '') %></span>
|
||||
<%- if balance.precision.positive? -%>
|
||||
<span class="text-gray-500">
|
||||
<%= balance.separator %><%= balance.cents %>
|
||||
</span>
|
||||
<% end %>
|
||||
</p>
|
||||
<% if trend.nil? %>
|
||||
<p class="text-sm text-gray-500">Data not available for the selected period</p>
|
||||
<% elsif trend.direction == "flat" %>
|
||||
<p class="text-sm text-gray-500">No change vs. prior period</p>
|
||||
<% else %>
|
||||
<% styles = trend_styles(trend) %>
|
||||
<p class="text-sm <%= styles[:text_class] %>">
|
||||
<span><%= styles[:symbol] %><%= format_currency(trend.amount.abs, precision: balance.precision) %></span>
|
||||
<span>(<%= lucide_icon(styles[:icon], class: "w-4 h-4 align-text-bottom inline") %><%= trend.percent %>%)</span>
|
||||
<span class="text-gray-500"><%= period_label(period) %></span>
|
||||
</p>
|
||||
<% end %>
|
||||
</div>
|
4
app/views/shared/_period_dropdown.html.erb
Normal file
4
app/views/shared/_period_dropdown.html.erb
Normal file
|
@ -0,0 +1,4 @@
|
|||
<%# locals: (path:, period:) -%>
|
||||
<%= form_with url: path, method: :get, class: "flex items-center gap-4", html: { class: "" } do |f| %>
|
||||
<%= f.select :period, options_for_select([['7D', 'last_7_days'], ['1M', 'last_30_days'], ["1Y", "last_365_days"], ['All', 'all']], selected: params[:period]), {}, { class: "block w-full border border-alpha-black-100 shadow-xs rounded-lg text-sm py-2 pr-8 pl-2 cursor-pointer", onchange: "this.form.submit();" } %>
|
||||
<% end %>
|
Loading…
Add table
Add a link
Reference in a new issue