mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-07 22:45:20 +02:00
Balance sheet cache layer, non-blocking sync UI (#2356)
* Balance sheet cache layer with cache-busting * Update family cache timestamps during Sync * Less blocking sync loaders * Consolidate family data caching key logic * Fix turbo stream broadcasts * Remove dev delay * Add back account group sorting
This commit is contained in:
Zach Gollwitzer
GitHub
parent
dab693d74f
commit
10ce2c8e23
35 changed files with 529 additions and 466 deletions
|
|
@ -41,7 +41,7 @@
|
|||
) %>
|
||||
|
||||
<div>
|
||||
<% family.balance_sheet.account_groups("asset").each do |group| %>
|
||||
<% family.balance_sheet.assets.account_groups.each do |group| %>
|
||||
<%= render "accounts/accountable_group", account_group: group, mobile: mobile %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
) %>
|
||||
|
||||
<div>
|
||||
<% family.balance_sheet.account_groups("liability").each do |group| %>
|
||||
<% family.balance_sheet.liabilities.account_groups.each do |group| %>
|
||||
<%= render "accounts/accountable_group", account_group: group, mobile: mobile %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
@ -82,7 +82,7 @@
|
|||
|
||||
<div>
|
||||
<% family.balance_sheet.account_groups.each do |group| %>
|
||||
<%= render "accounts/accountable_group", account_group: group, mobile: mobile %>
|
||||
<%= render "accounts/accountable_group", account_group: group, mobile: mobile, all_tab: true %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,21 @@
|
|||
<%# locals: (account_group:, mobile: false, open: nil, **args) %>
|
||||
<%# locals: (account_group:, mobile: false, all_tab: false, open: nil, **args) %>
|
||||
|
||||
<div id="<%= mobile ? "mobile_#{account_group.id}" : account_group.id %>">
|
||||
<div id="<%= account_group.dom_id(tab: all_tab ? :all : nil, mobile: mobile) %>">
|
||||
<% is_open = open.nil? ? account_group.accounts.any? { |account| page_active?(account_path(account)) } : open %>
|
||||
<%= render DisclosureComponent.new(title: account_group.name, align: :left, open: is_open) do |disclosure| %>
|
||||
<% disclosure.with_summary_content do %>
|
||||
<% if account_group.syncing? %>
|
||||
<div class="ml-2 group-open:hidden">
|
||||
<%= render partial: "shared/sync_indicator", locals: { size: "xs" } %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="ml-auto text-right grow">
|
||||
<% if account_group.syncing? %>
|
||||
<div class="space-y-1">
|
||||
<div class="h-5 w-24 rounded ml-auto bg-loader"></div>
|
||||
<div class="flex items-center w-8 h-4 ml-auto">
|
||||
<div class="w-6 h-px bg-loader"></div>
|
||||
</div>
|
||||
<%= tag.p format_money(account_group.total_money), class: "text-sm font-medium text-primary" %>
|
||||
<%= turbo_frame_tag "#{account_group.key}_sparkline", src: accountable_sparkline_path(account_group.key), loading: "lazy", data: { controller: "turbo-frame-timeout", turbo_frame_timeout_timeout_value: 10000 } do %>
|
||||
<div class="flex items-center w-8 h-4 ml-auto">
|
||||
<div class="w-6 h-px bg-loader"></div>
|
||||
</div>
|
||||
<% else %>
|
||||
<%= tag.p format_money(account_group.total_money), class: "text-sm font-medium text-primary" %>
|
||||
<%= turbo_frame_tag "#{account_group.key}_sparkline", src: accountable_sparkline_path(account_group.key), loading: "lazy", data: { controller: "turbo-frame-timeout", turbo_frame_timeout_timeout_value: 10000 } do %>
|
||||
<div class="flex items-center w-8 h-4 ml-auto">
|
||||
<div class="w-6 h-px bg-loader"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -34,29 +31,23 @@
|
|||
<%= render "accounts/logo", account: account, size: "sm", color: account_group.color %>
|
||||
|
||||
<div class="min-w-0 grow">
|
||||
<%= tag.p account.name, class: "text-sm text-primary font-medium mb-0.5 truncate" %>
|
||||
<div class="flex items-center gap-2 mb-0.5">
|
||||
<%= tag.p account.name, class: "text-sm text-primary font-medium truncate" %>
|
||||
<% if account.syncing? %>
|
||||
<%= render partial: "shared/sync_indicator", locals: { size: "xs" } %>
|
||||
<% end %>
|
||||
</div>
|
||||
<%= tag.p account.short_subtype_label, class: "text-sm text-secondary truncate" %>
|
||||
</div>
|
||||
|
||||
<% if account.syncing? %>
|
||||
<div class="ml-auto text-right grow h-10">
|
||||
<div class="space-y-1">
|
||||
<div class="h-5 w-24 bg-loader rounded ml-auto"></div>
|
||||
<div class="flex items-center w-8 h-4 ml-auto">
|
||||
<div class="w-6 h-px bg-loader"></div>
|
||||
</div>
|
||||
<div class="ml-auto text-right grow h-10">
|
||||
<%= tag.p format_money(account.balance_money), class: "text-sm font-medium text-primary whitespace-nowrap" %>
|
||||
<%= turbo_frame_tag dom_id(account, :sparkline), src: sparkline_account_path(account), loading: "lazy", data: { controller: "turbo-frame-timeout", turbo_frame_timeout_timeout_value: 10000 } do %>
|
||||
<div class="flex items-center w-8 h-4 ml-auto">
|
||||
<div class="w-6 h-px bg-loader"></div>
|
||||
</div>
|
||||
</div>
|
||||
<% else %>
|
||||
<div class="ml-auto text-right grow h-10">
|
||||
<%= tag.p format_money(account.balance_money), class: "text-sm font-medium text-primary whitespace-nowrap" %>
|
||||
<%= turbo_frame_tag dom_id(account, :sparkline), src: sparkline_account_path(account), loading: "lazy", data: { controller: "turbo-frame-timeout", turbo_frame_timeout_timeout_value: 10000 } do %>
|
||||
<div class="flex items-center w-8 h-4 ml-auto">
|
||||
<div class="w-6 h-px bg-loader"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
<%= turbo_frame_tag dom_id(@account, :sparkline) do %>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<div class="w-8 h-5 flex items-center justify-center">
|
||||
<%= icon("alert-triangle", size: "sm", class: "text-warning") %>
|
||||
</div>
|
||||
<p class="font-mono text-right text-xs text-warning">Error</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -2,25 +2,21 @@
|
|||
<% trend = series.trend %>
|
||||
|
||||
<%= turbo_frame_tag dom_id(@account, :chart_details) do %>
|
||||
<% if @account.syncing? %>
|
||||
<%= render "accounts/chart_loader" %>
|
||||
<% else %>
|
||||
<div class="px-4">
|
||||
<%= render partial: "shared/trend_change", locals: { trend: trend, comparison_label: @period.comparison_label } %>
|
||||
</div>
|
||||
<div class="px-4">
|
||||
<%= render partial: "shared/trend_change", locals: { trend: trend, comparison_label: @period.comparison_label } %>
|
||||
</div>
|
||||
|
||||
<div class="h-64 pb-4">
|
||||
<% if series.any? %>
|
||||
<div
|
||||
<div class="h-64 pb-4">
|
||||
<% if series.any? %>
|
||||
<div
|
||||
id="lineChart"
|
||||
class="w-full h-full"
|
||||
data-controller="time-series-chart"
|
||||
data-time-series-chart-data-value="<%= series.to_json %>"></div>
|
||||
<% else %>
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<p class="text-secondary text-sm"><%= t(".data_not_available") %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<div class="w-full h-full flex items-center justify-center">
|
||||
<p class="text-secondary text-sm"><%= t(".data_not_available") %></p>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
|
|
@ -9,18 +9,14 @@
|
|||
<div class="flex items-center gap-1">
|
||||
<%= tag.p account.investment? ? "Total value" : default_value_title, class: "text-sm font-medium text-secondary" %>
|
||||
|
||||
<% if !account.syncing? && account.investment? %>
|
||||
<% if account.investment? %>
|
||||
<%= render "investments/value_tooltip", balance: account.balance_money, holdings: account.balance_money - account.cash_balance_money, cash: account.cash_balance_money %>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 items-baseline">
|
||||
<% if account.syncing? %>
|
||||
<div class="bg-loader rounded-md h-7 w-20"></div>
|
||||
<% else %>
|
||||
<%= tag.p format_money(account.balance_money), class: "text-primary text-3xl font-medium truncate" %>
|
||||
<% if account.currency != Current.family.currency %>
|
||||
<%= tag.p format_money(account.balance_money.exchange_to(Current.family.currency, fallback_rate: 1)), class: "text-sm font-medium text-secondary" %>
|
||||
<% end %>
|
||||
<%= tag.p format_money(account.balance_money), class: "text-primary text-3xl font-medium truncate" %>
|
||||
<% if account.currency != Current.family.currency %>
|
||||
<%= tag.p format_money(account.balance_money.exchange_to(Current.family.currency, fallback_rate: 1)), class: "text-sm font-medium text-secondary" %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,16 @@
|
|||
<div class="flex items-center gap-3 overflow-hidden">
|
||||
<%= render "accounts/logo", account: account %>
|
||||
|
||||
<div class="truncate">
|
||||
<h2 class="font-medium text-xl truncate"><%= title || account.name %></h2>
|
||||
<% if subtitle.present? %>
|
||||
<p class="text-sm text-secondary"><%= subtitle %></p>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="truncate">
|
||||
<h2 class="font-medium text-xl truncate"><%= title || account.name %></h2>
|
||||
<% if subtitle.present? %>
|
||||
<p class="text-sm text-secondary"><%= subtitle %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% if account.syncing? %>
|
||||
<%= render partial: "shared/sync_indicator", locals: { size: "sm" } %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
<% cache Current.family.build_cache_key("account_#{@account.id}_sparkline_html") do %>
|
||||
<%= turbo_frame_tag dom_id(@account, :sparkline) do %>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<div class="w-8 h-5">
|
||||
<%= render "shared/sparkline", id: dom_id(@account, :sparkline_chart), series: @sparkline_series %>
|
||||
</div>
|
||||
<%= turbo_frame_tag dom_id(@account, :sparkline) do %>
|
||||
<div class="flex items-center justify-end gap-1">
|
||||
<div class="w-8 h-5">
|
||||
<%= render "shared/sparkline", id: dom_id(@account, :sparkline_chart), series: @sparkline_series %>
|
||||
</div>
|
||||
|
||||
<%= tag.p @sparkline_series.trend.percent_formatted,
|
||||
<%= tag.p @sparkline_series.trend.percent_formatted,
|
||||
style: "color: #{@sparkline_series.trend.color}",
|
||||
class: "font-mono text-right text-xs font-medium text-primary" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue