mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 07:49:01 +00:00
feat(goals/show): status-aware chart variants for empty + no-target-date
Empty state (goal with zero contributions) was rendering a flat-at-$0
saved series and a flat-at-$0 projection that looked broken to anyone
opening a freshly created goal. Now show.html.erb branches on
@goal.goal_contributions.empty? and renders a piggy-bank + "Add a
contribution" CTA card before the chart card. Brand-new goals get a
clean inline call-to-action instead of a misleading line at zero.
No-target-date goals (target_amount set, target_date null) used to
render a standalone "Set a target date" prompt card and hide history
entirely. Now they render the chart with the saved history + the
target horizontal line (no projection segment, no projection legend
item), plus a secondary "Set target date" callout below the chart
linking into the edit modal. History is informative even without a
deadline.
Locale: new goals.show.empty.{heading,body,cta}.
This commit is contained in:
@@ -204,21 +204,22 @@
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% elsif @goal.target_date.nil? %>
|
||||
<%# No-target-date prompt %>
|
||||
<% elsif @goal.goal_contributions.empty? %>
|
||||
<%# No contributions yet: render an inline "add your first" CTA card
|
||||
instead of a flat-at-$0 chart that looks broken. %>
|
||||
<div class="bg-container rounded-xl shadow-border-xs p-5 flex flex-col items-center justify-center text-center">
|
||||
<div class="w-16 h-16 rounded-full bg-surface-inset inline-flex items-center justify-center text-secondary mb-3">
|
||||
<%= icon("calendar-plus", size: "2xl") %>
|
||||
<%= icon("piggy-bank", size: "2xl") %>
|
||||
</div>
|
||||
<h2 class="text-lg font-semibold text-primary"><%= t(".no_target_date.heading") %></h2>
|
||||
<p class="text-sm text-secondary mt-1 max-w-md"><%= t(".no_target_date.body") %></p>
|
||||
<h2 class="text-lg font-semibold text-primary"><%= t(".empty.heading") %></h2>
|
||||
<p class="text-sm text-secondary mt-1 max-w-md"><%= t(".empty.body") %></p>
|
||||
<div class="mt-4">
|
||||
<%= render DS::Link.new(
|
||||
text: t(".no_target_date.cta"),
|
||||
variant: "outline",
|
||||
text: t(".empty.cta"),
|
||||
variant: "primary",
|
||||
size: "sm",
|
||||
href: edit_goal_path(@goal),
|
||||
icon: "calendar-plus",
|
||||
href: new_goal_contribution_path(@goal),
|
||||
icon: "plus",
|
||||
frame: :modal
|
||||
) %>
|
||||
</div>
|
||||
@@ -236,10 +237,12 @@
|
||||
<svg width="18" height="6" class="text-primary"><line x1="0" y1="3" x2="18" y2="3" stroke="currentColor" stroke-width="2" /></svg>
|
||||
<%= t(".projection.legend_saved") %>
|
||||
</span>
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<svg width="18" height="6"><line x1="0" y1="3" x2="18" y2="3" stroke="<%= projection_color %>" stroke-width="2" stroke-dasharray="3 3" /></svg>
|
||||
<%= t(".projection.legend_projection") %>
|
||||
</span>
|
||||
<% unless @goal.target_date.nil? %>
|
||||
<span class="inline-flex items-center gap-1.5">
|
||||
<svg width="18" height="6"><line x1="0" y1="3" x2="18" y2="3" stroke="<%= projection_color %>" stroke-width="2" stroke-dasharray="3 3" /></svg>
|
||||
<%= t(".projection.legend_projection") %>
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 min-h-[200px]"
|
||||
@@ -247,6 +250,16 @@
|
||||
data-goal-projection-chart-data-value="<%= @goal.projection_payload.to_json %>"
|
||||
data-goal-projection-chart-aria-label-value="<%= t("goals.show.projection.aria_label", name: @goal.name) %>"
|
||||
data-goal-projection-chart-aria-description-value="<%= strip_tags(@stats[:projection_summary]) %>"></div>
|
||||
<% if @goal.target_date.nil? %>
|
||||
<div class="mt-3 flex items-center gap-2 text-xs text-secondary">
|
||||
<span class="text-subdued"><%= icon("calendar-plus", size: "sm") %></span>
|
||||
<span class="flex-1"><%= t(".no_target_date.body") %></span>
|
||||
<%= link_to t(".no_target_date.cta"),
|
||||
edit_goal_path(@goal),
|
||||
data: { turbo_frame: :modal },
|
||||
class: "font-medium text-primary underline-offset-2 hover:underline" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</section>
|
||||
|
||||
@@ -153,6 +153,10 @@ en:
|
||||
heading: Add a target date
|
||||
body: Set a deadline to project a finish line and track required pace.
|
||||
cta: Set target date
|
||||
empty:
|
||||
heading: No contributions yet
|
||||
body: Track your progress by adding your first contribution.
|
||||
cta: Add a contribution
|
||||
source:
|
||||
initial: Initial
|
||||
manual: Manual
|
||||
|
||||
Reference in New Issue
Block a user