mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-07 14:35:23 +02:00
Consolidate and simplify account pages (#2462)
* Remove ScrollFocusable * Consolidate and simplify account pages * Lint fixes * Fix tab param initialization * Remove stale files * Remove stale route, make accountable routes clearer
This commit is contained in:
Zach Gollwitzer
GitHub
parent
3eea5a9891
commit
8c97c9d31a
41 changed files with 252 additions and 269 deletions
|
|
@ -1,7 +0,0 @@
|
|||
<div class="px-4">
|
||||
<div class="bg-loader rounded-md h-5 w-32"></div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 h-60 flex items-center justify-center">
|
||||
<div class="bg-loader rounded-md h-full w-full"></div>
|
||||
</div>
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
<% series = @account.balance_series(period: @period, view: @chart_view) %>
|
||||
<% trend = series.trend %>
|
||||
|
||||
<%= turbo_frame_tag dom_id(@account, :chart_details) do %>
|
||||
<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
|
||||
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 %>
|
||||
6
app/views/accounts/show.html.erb
Normal file
6
app/views/accounts/show.html.erb
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<%= render UI::AccountPage.new(
|
||||
account: @account,
|
||||
chart_view: @chart_view,
|
||||
chart_period: @period,
|
||||
active_tab: @tab
|
||||
) %>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<%# locals: (account:) %>
|
||||
|
||||
<%= turbo_frame_tag dom_id(account, "entries") do %>
|
||||
<div class="bg-container p-5 shadow-border-xs rounded-xl" data-controller="focus-record" data-focus-record-id-value="<%= @focused_record ? dom_id(@focused_record) : nil %>">
|
||||
<div class="bg-container p-5 shadow-border-xs rounded-xl">
|
||||
<div class="flex items-center justify-between mb-4" data-testid="activity-menu">
|
||||
<%= tag.h2 t(".title"), class: "font-medium text-lg" %>
|
||||
<% unless @account.plaid_account_id.present? %>
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
<%# locals: (account:, tooltip: nil, chart_view: nil, **args) %>
|
||||
|
||||
<% period = @period || Period.last_30_days %>
|
||||
<% default_value_title = account.asset? ? t(".balance") : t(".owed") %>
|
||||
|
||||
<div id="<%= dom_id(account, :chart) %>" class="bg-container shadow-border-xs rounded-xl space-y-2">
|
||||
<div class="flex justify-between flex-col-reverse lg:flex-row gap-2 px-4 pt-4 mb-2">
|
||||
<div class="space-y-2 w-full">
|
||||
<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.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">
|
||||
<%= 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>
|
||||
|
||||
<%= form_with url: request.path, method: :get, data: { controller: "auto-submit-form" } do |form| %>
|
||||
<div class="flex items-center gap-2">
|
||||
<% if chart_view.present? %>
|
||||
<%= form.select :chart_view,
|
||||
[["Total value", "balance"], ["Holdings", "holdings_balance"], ["Cash", "cash_balance"]],
|
||||
{ selected: chart_view },
|
||||
class: "bg-container border border-secondary rounded-lg text-sm pr-7 cursor-pointer text-primary focus:outline-hidden focus:ring-0",
|
||||
data: { "auto-submit-form-target": "auto" } %>
|
||||
<% end %>
|
||||
|
||||
<%= form.select :period,
|
||||
Period.as_options,
|
||||
{ selected: period.key },
|
||||
data: { "auto-submit-form-target": "auto" },
|
||||
class: "bg-container border border-secondary rounded-lg px-3 py-2 text-sm pr-7 cursor-pointer text-primary focus:outline-hidden focus:ring-0" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%= turbo_frame_tag dom_id(account, :chart_details), src: chart_account_path(account, period: period.key, chart_view: chart_view) do %>
|
||||
<%= render "accounts/chart_loader" %>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
@ -1,36 +1,30 @@
|
|||
<%# locals: (account:, title: nil, subtitle: nil) %>
|
||||
<%# locals: (account:, title:, subtitle: nil) %>
|
||||
|
||||
<header class="space-y-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<% content = yield %>
|
||||
<div class="flex items-center gap-3 overflow-hidden">
|
||||
<%= render "accounts/logo", account: account %>
|
||||
|
||||
<% if content.present? %>
|
||||
<%= content %>
|
||||
<% else %>
|
||||
<div class="flex items-center gap-3 overflow-hidden">
|
||||
<%= render "accounts/logo", account: account %>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="truncate">
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="font-medium text-xl truncate <%= "animate-pulse" if account.syncing? %>"><%= title || account.name %></h2>
|
||||
<% if account.draft? %>
|
||||
<%= render LinkComponent.new(
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="truncate">
|
||||
<div class="flex items-center gap-3">
|
||||
<h2 class="font-medium text-xl truncate <%= "animate-pulse" if account.syncing? %>"><%= title %></h2>
|
||||
<% if account.draft? %>
|
||||
<%= render LinkComponent.new(
|
||||
text: "Complete setup",
|
||||
href: edit_account_path(account),
|
||||
variant: :outline,
|
||||
size: :sm,
|
||||
frame: :modal
|
||||
) %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% if subtitle.present? %>
|
||||
<p class="text-sm text-secondary"><%= subtitle %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
<% if subtitle.present? %>
|
||||
<p class="text-sm text-secondary"><%= subtitle %></p>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-1 ml-auto">
|
||||
<% if Rails.env.development? || self_hosted? %>
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
<div class="p-5">
|
||||
<p class="text-secondary animate-pulse">Loading account...</p>
|
||||
</div>
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<%# locals: (account:, key:, is_selected:) %>
|
||||
|
||||
<%= link_to key.titleize,
|
||||
account_path(account, tab: key),
|
||||
data: { turbo: false },
|
||||
class: [
|
||||
"px-2 py-1.5 rounded-md border border-transparent",
|
||||
"bg-container shadow-xs border-alpha-black-50": is_selected
|
||||
] %>
|
||||
|
|
@ -1,17 +0,0 @@
|
|||
<%# locals: (account:, tabs:) %>
|
||||
|
||||
<% active_tab = tabs.find { |tab| tab[:key] == params[:tab] } || tabs.first %>
|
||||
|
||||
<%= render TabsComponent.new(active_tab: active_tab[:key], url_param_key: "tab") do |tabs_container| %>
|
||||
<% tabs_container.with_nav(classes: "max-w-fit") do |nav| %>
|
||||
<% tabs.each do |tab| %>
|
||||
<% nav.with_btn(id: tab[:key], label: tab[:key].humanize, classes: "px-6") %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
||||
<% tabs.each do |tab| %>
|
||||
<% tabs_container.with_panel(tab_id: tab[:key]) do %>
|
||||
<%= tab[:contents] %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
<% end %>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<%# locals: (account:, header: nil, chart: nil, chart_view: nil, tabs: nil) %>
|
||||
|
||||
<%= turbo_stream_from account %>
|
||||
|
||||
<%= turbo_frame_tag dom_id(account, :container) do %>
|
||||
<%= tag.div class: "space-y-4 pb-32" do %>
|
||||
<% if header.present? %>
|
||||
<%= header %>
|
||||
<% else %>
|
||||
<%= render "accounts/show/header", account: account %>
|
||||
<% end %>
|
||||
|
||||
<% if chart.present? %>
|
||||
<%= chart %>
|
||||
<% else %>
|
||||
<%= render "accounts/show/chart", account: account, chart_view: chart_view %>
|
||||
<% end %>
|
||||
|
||||
<div class="min-h-[800px]" data-testid="account-details">
|
||||
<% if tabs.present? %>
|
||||
<%= tabs %>
|
||||
<% else %>
|
||||
<%= render "accounts/show/activity", account: account %>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<% end %>
|
||||
Loading…
Add table
Add a link
Reference in a new issue