Files
sure/app/components/goals/card_component.rb
Guillem Arias Fauste 5d0eb7f445 fix(goals): UI polish — submit validation, container-responsive cards, picker & filter fixes (#2160)
* fix(ds): disabled buttons use not-allowed cursor

Tailwind v4 preflight sets cursor:pointer on every <button>, including
disabled ones. Add disabled:cursor-not-allowed to the DS button base so
disabled buttons read as non-interactive.

* fix(goals): disable new-goal submit until required fields valid

The submit button was always enabled, and the funding-accounts checkbox
group has no native 'required', so a goal with no linked account could be
submitted and only fail server-side (422). Disable the submit until name,
a positive target amount, and >=1 account are present, and add a
submit-time guard that surfaces inline errors and focuses the first
offending field as a backstop.

* fix(goals): keep color/icon picker from shifting the form

DS::Disclosure wraps its body in an mt-2 div that sits in normal flow, so
opening the absolutely-positioned picker popover nudged the form down ~8px.
Use a raw <details> for the picker so the popover overlays without
reflowing the content beneath it.

* fix(goals): container-responsive cards, meta-line status, scrollable tabs

- Card grids + KPI strip switch from viewport breakpoints to container
  queries (@container), so columns track the actual content width when the
  account/AI sidebars are open instead of crushing three columns into a
  narrow center.
- Move the status pill from the title row to the meta line; the title now
  gets the full header width (no more 'Hou...' truncation at 3-up). Drop
  the secondary line when the pill already states it (completed / open).
- Card internals harden for narrow widths (ring shrink-0, footer wrap,
  shorter 'N days left' secondary).
- Filter tabs scroll horizontally instead of wrapping 'On track' mid-label
  or forcing the row wider than the viewport.

* fix(goals): only require a funding account on the create form

GoalsController#edit renders account checkboxes from visible accounts only,
so a goal backed solely by a now-hidden (disabled / pending_deletion)
account renders none checked. The submit-validation then wedged the edit
form — a name/notes change couldn't be saved even though #update preserves
existing links when account_ids is omitted. Gate the account requirement on
a require-account Stimulus value that is true only for the create form.

* fix(goals): give the color/icon picker trigger an accessible name

The hand-rolled <summary> is icon-only (pen), so screen readers announced an
unlabeled control. Add a localized aria-label.

* fix(goals): render form validation errors inline on server re-render

The client-side controller already surfaces name / amount / account errors
inline and disables submit, but a server 422 (JS disabled, or a race that
lets an invalid submit through) fell back to the top run-on banner
("X must be filled and Y and Z."). Make the existing inline error hints
server-aware so a failed submit shows the same per-field red text the
client path does, and drop the base-error banner — base only ever carries
the account requirement, which now renders beside the funding-accounts
list.

* fix(goals): blur projection chart under privacy mode

The projection chart's SVG axis labels and annotations (target, "$X short",
$200K/$400K ticks) rendered in cleartext while privacy mode blurred every
other number on the page. Tag the chart container `privacy-sensitive`, the
same wrapper-level treatment the net-worth and cashflow-sankey charts
already use, so it blurs with the rest.

* fix(goals): stop target-date input stretching when amount error shows

The target-amount / target-date row is a two-column grid. The amount
column carries its inline error <p> underneath, so when that error
appears the column grows and the default `items-stretch` makes the
sibling date input stretch to match — the date box visibly grew taller
than the amount box. Anchor the row with `items-start` so each input
keeps its natural height and the error just extends below its own column.

* fix(goals): make invalid submit announce errors instead of dead-ending

Review follow-ups:
- Swap the submit gate from the disabled attribute to aria-disabled: a
  truly disabled default submit also blocks Enter-key implicit
  submission, so an invalid form was a dead button with every inline
  error still hidden. The button now stays clickable and lets
  validateOnSubmit surface the errors; DS buttonish styles the
  aria-disabled state (cursor-not-allowed + opacity-50). Side effect:
  loading_button_controller submits also dim while busy, which reads as
  an upgrade.
- Focus the first funding-account checkbox when accounts are the only
  missing field (focus previously went nowhere).
- Drop the now-orphaned goals.goal_card.days_left_by locale key.
2026-06-06 16:24:17 +02:00

108 lines
3.5 KiB
Ruby

class Goals::CardComponent < ApplicationComponent
def initialize(goal:, filterable: true)
@goal = goal
@filterable = filterable
end
attr_reader :goal, :filterable
def progress_percent
goal.progress_percent
end
# Maps goal status to a DS::ProgressRing tone (the ring geometry/colors now
# live in that primitive — see #1899).
def ring_tone
case goal.status
when :reached, :on_track then :success
when :behind then :warning
else :neutral
end
end
def linked_accounts
@linked_accounts ||= goal.linked_accounts.to_a
end
# Open + unexpired pledges are preloaded on the index via the
# `.includes(:open_pledges, ...)` chain in GoalsController#index, so
# this is a hit on the in-memory association — no N+1.
def has_pending_pledge?
pending_pledges_count.positive?
end
def pending_pledges_count
@pending_pledges_count ||= goal.open_pledges.size
end
def linked_accounts_count_label
I18n.t("goals.goal_card.accounts", count: linked_accounts.size)
end
# Single screen-reader sentence for the card's title <a> aria-label.
# Without this, the whole-card link would inherit every nested text node
# as its accessible name (>15 strings on a typical card).
def aria_label
status_text = I18n.t("goals.status.#{goal.display_status}")
progress_text = I18n.t("goals.goal_card.aria_progress",
percent: progress_percent,
target: goal.target_amount_money.format(precision: 0))
[ goal.name, status_text, progress_text ].join(", ")
end
def secondary_line
# nil when the status pill already carries it — the pill now sits on this
# same meta line, so "Completed Completed" / "Open Open" would read twice.
return nil if goal.completed? || goal.target_date.nil?
days = (goal.target_date - Date.current).to_i
if days >= 0
# Count only ("211 days left"); the full target date lives on the show
# page. Appending "· by <long date>" here overflowed the card's single
# line and truncated to a useless "211 d…".
I18n.t("goals.goal_card.days_left", count: days)
else
I18n.t("goals.goal_card.past_due")
end
end
def pace_line
return nil if goal.archived? || goal.paused? || goal.completed? || goal.status == :reached
avg = goal.pace_money.format(precision: 0)
target = goal.monthly_target_amount ? Money.new(goal.monthly_target_amount, goal.currency).format(precision: 0) : nil
if target
I18n.t("goals.goal_card.pace_with_target", avg: avg, target: target)
else
I18n.t("goals.goal_card.pace_no_target", avg: avg)
end
end
def footer_line
if goal.archived?
I18n.t("goals.goal_card.footer_archived")
elsif goal.paused?
I18n.t("goals.goal_card.footer_paused")
elsif goal.completed? || goal.status == :reached
I18n.t("goals.goal_card.footer_reached")
elsif goal.status == :behind && goal.monthly_target_amount
I18n.t("goals.goal_card.footer_catch_up", amount: goal.catch_up_delta_money.format(precision: 0))
elsif goal.status == :no_target_date
I18n.t("goals.goal_card.footer_no_deadline")
else
days = goal.last_matched_pledge_days_ago
if days.nil?
I18n.t("goals.goal_card.footer_no_pledges")
elsif days.zero?
I18n.t("goals.goal_card.footer_last_today")
else
I18n.t("goals.goal_card.footer_last_days", count: days)
end
end
end
def footer_has_money?
goal.status == :behind && goal.monthly_target_amount
end
end