mirror of
https://github.com/we-promise/sure.git
synced 2026-05-30 15:59:02 +00:00
c04b306bfd
P1 of modal refactor — visual fidelity baseline against the Claude
Design reference and refactoring-ui rules.
Drop required: true on name + target_amount (suppresses both the red `*`
indicator and the browser-default HTML5 validation tooltip). Client-side
validation moves into the Stimulus stepper in a follow-up commit.
Pass hide_currency: true on the money_field so single-currency families
don't see a redundant inline currency dropdown.
Wrap the Notes textarea in a <details> disclosure ("Add notes (optional)"
summary) so step 1 isn't padded with rarely-used fields.
Drop the footer top border-subdued divider so the action row floats
against the dialog's existing padding boundary.
Drop the view-layer SavingsGoal::COLORS.sample fallback on hidden color
field — the controller already seeds @savings_goal.color.
188 lines
10 KiB
Plaintext
188 lines
10 KiB
Plaintext
<%# locals: (savings_goal:, linkable_accounts:) %>
|
|
|
|
<div data-controller="savings-goal-stepper">
|
|
<% if savings_goal.errors.any? %>
|
|
<%= render "shared/form_errors", model: savings_goal %>
|
|
<% end %>
|
|
|
|
<%# Connected stepper %>
|
|
<div class="flex items-center gap-3 mb-6">
|
|
<div class="flex items-center gap-2" data-savings-goal-stepper-target="step1Indicator">
|
|
<span data-savings-goal-stepper-target="step1Circle" class="w-7 h-7 rounded-full inline-flex items-center justify-center bg-inverse text-inverse text-xs font-medium">1</span>
|
|
<span class="text-sm font-medium text-primary"><%= t("savings_goals.form_stepper.step1.label") %></span>
|
|
</div>
|
|
<div class="flex-1 h-px bg-subdued" data-savings-goal-stepper-target="stepperLine"></div>
|
|
<div class="flex items-center gap-2" data-savings-goal-stepper-target="step2Indicator">
|
|
<span data-savings-goal-stepper-target="step2Circle" class="w-7 h-7 rounded-full inline-flex items-center justify-center bg-container-inset text-secondary text-xs font-medium">2</span>
|
|
<span class="text-sm font-medium text-secondary"><%= t("savings_goals.form_stepper.step2.label") %></span>
|
|
</div>
|
|
</div>
|
|
|
|
<%= styled_form_with model: savings_goal, url: savings_goals_path, class: "space-y-4" do |f| %>
|
|
<section data-savings-goal-stepper-target="step1Panel" class="space-y-5">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-primary mb-1"><%= t("savings_goals.form_stepper.step1.heading") %></h3>
|
|
<p class="text-sm text-secondary"><%= t("savings_goals.form_stepper.step1.subheading") %></p>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm font-medium text-primary mb-2"><%= t("savings_goals.form_stepper.step1.fields.name") %></label>
|
|
<div class="flex items-stretch gap-2">
|
|
<span class="shrink-0">
|
|
<%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "lg", rounded: false) %>
|
|
</span>
|
|
<%= f.text_field :name,
|
|
placeholder: t("savings_goals.form_stepper.step1.fields.name_placeholder"),
|
|
autofocus: true,
|
|
label: false,
|
|
class: "flex-1",
|
|
data: { savings_goal_stepper_target: "nameInput", action: "input->savings-goal-stepper#nameChanged" } %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<%= f.money_field :target_amount,
|
|
label: t("savings_goals.form_stepper.step1.fields.target_amount"),
|
|
hide_currency: true,
|
|
amount_data: { savings_goal_stepper_target: "amountInput" } %>
|
|
<%= f.date_field :target_date,
|
|
label: t("savings_goals.form_stepper.step1.fields.target_date") %>
|
|
</div>
|
|
|
|
<div>
|
|
<span class="block text-sm font-medium text-primary mb-2"><%= t("savings_goals.form_stepper.step1.fields.funding_accounts") %></span>
|
|
<div class="bg-container-inset rounded-lg p-1">
|
|
<% grouped = linkable_accounts.group_by { |a| a.subtype.to_s.presence || "other" } %>
|
|
<% grouped.each_with_index do |(subtype, accts), group_idx| %>
|
|
<div class="px-3 py-2 text-[11px] font-medium uppercase tracking-wide text-secondary"><%= t("savings_goals.form_stepper.step1.subtypes.#{subtype}", default: subtype.titleize) %></div>
|
|
<div class="bg-container rounded-md <%= "mb-1" if group_idx < grouped.size - 1 %>">
|
|
<% accts.each_with_index do |account, idx| %>
|
|
<label class="flex items-center gap-3 px-3 py-2.5 cursor-pointer hover:bg-surface-hover <%= "border-t border-subdued" if idx > 0 %>">
|
|
<%= check_box_tag "savings_goal[account_ids][]",
|
|
account.id,
|
|
false,
|
|
class: "shrink-0",
|
|
data: {
|
|
savings_goal_stepper_target: "linkedAccountCheckbox",
|
|
action: "change->savings-goal-stepper#linkedAccountChanged",
|
|
account_name: account.name,
|
|
account_subtype: account.subtype || subtype,
|
|
account_balance: account.balance
|
|
} %>
|
|
<%= render Savings::GoalAvatarComponent.new(name: account.name, color: "var(--color-blue-500)", size: "md") %>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-sm font-medium text-primary truncate"><%= account.name %></p>
|
|
<p class="text-xs text-secondary"><%= (account.subtype || subtype).titleize %></p>
|
|
</div>
|
|
<span class="text-sm text-primary tabular-nums"><%= Money.new(account.balance, account.currency).format %></span>
|
|
</label>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<details class="border border-subdued rounded-lg group">
|
|
<summary class="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer list-none text-sm font-medium text-primary">
|
|
<span><%= t("savings_goals.form_stepper.step1.fields.notes_summary") %></span>
|
|
<%= icon("chevron-down", size: "sm", class: "group-open:rotate-180 transition-transform") %>
|
|
</summary>
|
|
<div class="px-4 pb-4">
|
|
<%= f.text_area :notes,
|
|
label: "",
|
|
rows: 2,
|
|
placeholder: t("savings_goals.form_stepper.step1.fields.notes_placeholder") %>
|
|
</div>
|
|
</details>
|
|
|
|
<%= f.hidden_field :color %>
|
|
</section>
|
|
|
|
<section data-savings-goal-stepper-target="step2Panel" class="space-y-5 hidden">
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-primary mb-1"><%= t("savings_goals.form_stepper.step2.heading") %></h3>
|
|
<p class="text-sm text-secondary"><%= t("savings_goals.form_stepper.step2.subheading") %></p>
|
|
</div>
|
|
|
|
<div class="border border-subdued rounded-lg p-5 space-y-4">
|
|
<div class="flex items-center gap-3">
|
|
<%= render DS::FilledIcon.new(variant: :container, icon: "target", size: "lg", rounded: false) %>
|
|
<div class="min-w-0 flex-1">
|
|
<p class="text-base font-medium text-primary truncate" data-savings-goal-stepper-target="reviewName">—</p>
|
|
<p class="text-sm text-secondary tabular-nums" data-savings-goal-stepper-target="reviewSummary">—</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-subdued pt-3 flex items-center justify-between text-sm">
|
|
<span class="text-secondary"><%= t("savings_goals.form_stepper.step2.funding_accounts") %></span>
|
|
<span class="text-primary tabular-nums" data-savings-goal-stepper-target="reviewAccounts">—</span>
|
|
</div>
|
|
|
|
<div class="border-t border-subdued pt-3 flex items-center justify-between text-sm">
|
|
<span class="text-secondary"><%= t("savings_goals.form_stepper.step2.suggested_monthly") %></span>
|
|
<span class="text-primary tabular-nums" data-savings-goal-stepper-target="reviewSuggested">—</span>
|
|
</div>
|
|
</div>
|
|
|
|
<details class="border border-subdued rounded-lg group" data-savings-goal-stepper-target="initialContributionToggle">
|
|
<summary class="flex items-center gap-3 p-4 cursor-pointer list-none">
|
|
<%= render DS::FilledIcon.new(variant: :container, icon: "zap", size: "md", rounded: false) %>
|
|
<div class="flex-1">
|
|
<p class="text-sm font-medium text-primary"><%= t("savings_goals.form_stepper.step2.add_initial_contribution") %></p>
|
|
<p class="text-xs text-secondary"><%= t("savings_goals.form_stepper.step2.add_initial_contribution_sub") %></p>
|
|
</div>
|
|
<%= icon("chevron-down", size: "sm") %>
|
|
</summary>
|
|
<div class="px-4 pb-4 space-y-3">
|
|
<div>
|
|
<%= label_tag "savings_goal[initial_contribution_amount]",
|
|
t("savings_goals.form_stepper.step2.initial_amount"),
|
|
class: "block text-sm text-secondary mb-1" %>
|
|
<%= number_field_tag "savings_goal[initial_contribution_amount]",
|
|
nil,
|
|
step: "0.01", min: "0",
|
|
autocomplete: "off",
|
|
class: "w-full",
|
|
data: { savings_goal_stepper_target: "initialContributionAmount" } %>
|
|
</div>
|
|
<div>
|
|
<%= label_tag "savings_goal[initial_contribution_account_id]",
|
|
t("savings_goals.form_stepper.step2.initial_account"),
|
|
class: "block text-sm text-secondary mb-1" %>
|
|
<%= select_tag "savings_goal[initial_contribution_account_id]",
|
|
options_for_select([]),
|
|
include_blank: t("savings_goals.form_stepper.step2.select_account"),
|
|
data: { savings_goal_stepper_target: "initialContributionAccountSelect" },
|
|
class: "w-full" %>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</section>
|
|
|
|
<div class="flex items-center justify-between pt-2">
|
|
<button type="button"
|
|
class="text-sm font-medium text-secondary hover:text-primary px-2 py-2"
|
|
data-savings-goal-stepper-target="footerLeftButton"
|
|
data-action="click->savings-goal-stepper#footerLeft"
|
|
data-cancel-action="DS--dialog#close">
|
|
<span data-savings-goal-stepper-target="footerLeftLabel"><%= t("savings_goals.form_stepper.cancel") %></span>
|
|
</button>
|
|
<%= render DS::Button.new(
|
|
text: t("savings_goals.form_stepper.continue"),
|
|
variant: "primary",
|
|
icon: "arrow-right",
|
|
icon_position: :right,
|
|
data: {
|
|
savings_goal_stepper_target: "footerRightButton",
|
|
action: "click->savings-goal-stepper#footerRight"
|
|
}
|
|
) %>
|
|
<button type="submit"
|
|
class="sr-only"
|
|
tabindex="-1"
|
|
aria-hidden="true"
|
|
data-savings-goal-stepper-target="submitButton"><%= t("savings_goals.form_stepper.submit") %></button>
|
|
</div>
|
|
<% end %>
|
|
</div>
|