Files
sure/app/components/savings/goal_card_component.html.erb
Guillem Arias 560bff87d2 feat(savings_goals/index): collapsed Archived section + archived-aware card
- Controller: @archived_goals exposes state=archived rows already pulled
  by the all_goals load. No extra query (sliced from the existing array).
- Index template: <details> disclosure under "Completed" so archived
  goals are reachable from the list without cluttering the active /
  completed sections. Collapsed by default.
- GoalCardComponent: uses display_status for the data attribute (so the
  card on the index reads as Archived instead of Behind), opacity-75
  applies to archived too, footer_line short-circuits to "Archived" and
  pace_line returns nil. Matches the show-page archived semantics
  shipped earlier.
- Locale: new savings_goals.index.archived_section.heading and
  savings_goals.goal_card.footer_archived.
2026-05-11 19:52:52 +02:00

61 lines
3.1 KiB
Plaintext

<%= link_to savings_goal_path(goal),
class: "group block bg-container rounded-xl shadow-border-xs hover:bg-surface-hover transition-colors p-6 #{"opacity-75" if goal.paused? || goal.archived?}",
data: {
savings_goals_filter_target: "card",
goal_name: goal.name,
goal_status: goal.display_status
} do %>
<div class="flex items-start gap-3">
<%= render Savings::GoalAvatarComponent.new(goal: goal, size: "lg") %>
<div class="min-w-0 flex-1">
<div class="flex items-center gap-2 mb-0.5">
<p class="text-sm font-medium text-primary truncate"><%= goal.name %></p>
<%= render Savings::StatusPillComponent.new(goal: goal) %>
</div>
<p class="text-[11px] text-subdued truncate"><%= secondary_line %></p>
</div>
<div class="shrink-0 relative" style="width: <%= Savings::GoalCardComponent::RING_SIZE %>px; height: <%= Savings::GoalCardComponent::RING_SIZE %>px;">
<svg width="<%= Savings::GoalCardComponent::RING_SIZE %>" height="<%= Savings::GoalCardComponent::RING_SIZE %>" viewBox="0 0 <%= Savings::GoalCardComponent::RING_SIZE %> <%= Savings::GoalCardComponent::RING_SIZE %>">
<circle cx="<%= Savings::GoalCardComponent::RING_SIZE / 2.0 %>"
cy="<%= Savings::GoalCardComponent::RING_SIZE / 2.0 %>"
r="<%= ring_radius %>"
fill="none"
stroke="var(--budget-unallocated-fill)"
stroke-width="<%= Savings::GoalCardComponent::RING_STROKE %>" />
<circle cx="<%= Savings::GoalCardComponent::RING_SIZE / 2.0 %>"
cy="<%= Savings::GoalCardComponent::RING_SIZE / 2.0 %>"
r="<%= ring_radius %>"
fill="none"
stroke="<%= ring_color %>"
stroke-width="<%= Savings::GoalCardComponent::RING_STROKE %>"
stroke-linecap="round"
stroke-dasharray="<%= ring_circumference %>"
stroke-dashoffset="<%= ring_offset %>"
transform="rotate(-90 <%= Savings::GoalCardComponent::RING_SIZE / 2.0 %> <%= Savings::GoalCardComponent::RING_SIZE / 2.0 %>)" />
</svg>
<div class="absolute inset-0 flex items-center justify-center text-[11px] font-medium text-primary tabular-nums">
<%= progress_percent %>%
</div>
</div>
</div>
<div class="mt-5">
<div class="flex items-baseline gap-1.5">
<span class="text-lg font-medium text-primary tabular-nums privacy-sensitive"><%= goal.current_balance_money.format %></span>
<span class="text-xs text-subdued tabular-nums">/ <%= goal.target_amount_money.format %></span>
</div>
<% if pace_line %>
<p class="text-[11px] text-subdued tabular-nums mt-1"><%= pace_line %></p>
<% end %>
</div>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<%= render Savings::AccountStackComponent.new(accounts: linked_accounts) %>
<span class="text-[11px] text-subdued"><%= linked_accounts_count_label %></span>
</div>
<span class="text-[11px] text-subdued tabular-nums"><%= footer_line %></span>
</div>
<% end %>