mirror of
https://github.com/we-promise/sure.git
synced 2026-04-08 23:04:49 +00:00
4cf25ada63
* feat: Add responsive dialog behavior for transaction modals Add responsive option to DS::Dialog component that switches between: - Mobile (< 1024px): Modal style (centered) with inline close button - Desktop (≥ 1024px): Drawer style (right side panel) with header close button Update transaction, transfer, holding, trade, and valuation views to use responsive behavior, maintaining mobile experience while reverting desktop to drawer style like budget categories. Changes: - app/components/DS/dialog.rb: Add responsive parameter and helper methods - app/components/DS/dialog.html.erb: Apply responsive styling - app/views/*/show.html.erb: Add responsive: true and hide close icons on mobile * fix: Enhance close button accessibility in dialog components * fix: Refactor dialog component to improve close button handling and accessibility
294 lines
14 KiB
Plaintext
294 lines
14 KiB
Plaintext
<%= render DS::Dialog.new(frame: "drawer", responsive: true) do |dialog| %>
|
|
<% dialog.with_header(custom_header: true) do %>
|
|
<div class="flex items-start justify-between gap-4">
|
|
<%= render "transactions/header", entry: @entry %>
|
|
<%= dialog.close_button %>
|
|
</div>
|
|
<% end %>
|
|
<% dialog.with_body do %>
|
|
<%# Potential duplicate alert %>
|
|
<% if @entry.transaction.has_potential_duplicate? %>
|
|
<% potential_match = @entry.transaction.potential_duplicate_entry %>
|
|
<% if potential_match %>
|
|
<div class="mx-4 my-3 p-4 rounded-lg border border-warning bg-warning/5">
|
|
<div class="flex items-start gap-3">
|
|
<%= icon "alert-triangle", size: "md", color: "warning" %>
|
|
<div class="flex-1 space-y-2">
|
|
<h4 class="text-sm font-medium text-primary"><%= t("transactions.show.potential_duplicate_title") %></h4>
|
|
<p class="text-sm text-secondary"><%= t("transactions.show.potential_duplicate_description") %></p>
|
|
<div class="mt-3 p-3 rounded bg-container border border-primary">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-primary"><%= potential_match.name %></p>
|
|
<p class="text-xs text-secondary"><%= potential_match.date.strftime("%b %d, %Y") %> • <%= potential_match.account.name %></p>
|
|
</div>
|
|
<p class="text-sm font-medium <%= potential_match.amount.negative? ? "text-green-600" : "text-primary" %>">
|
|
<%= format_money(-potential_match.amount_money) %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2 mt-3">
|
|
<%= button_to t("transactions.show.merge_duplicate"),
|
|
merge_duplicate_transaction_path(@entry.transaction),
|
|
method: :post,
|
|
class: "btn btn--primary btn--sm",
|
|
data: { turbo_frame: "_top" } %>
|
|
<%= button_to t("transactions.show.keep_both"),
|
|
dismiss_duplicate_transaction_path(@entry.transaction),
|
|
method: :post,
|
|
class: "btn btn--outline btn--sm",
|
|
data: { turbo_frame: "_top" } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<%= render "entries/protection_indicator", entry: @entry, unlock_path: unlock_transaction_path(@entry.transaction) %>
|
|
<% dialog.with_section(title: t(".overview"), open: true) do %>
|
|
<div>
|
|
<%= styled_form_with model: @entry,
|
|
url: transaction_path(@entry),
|
|
class: "space-y-2",
|
|
data: { controller: "auto-submit-form" } do |f| %>
|
|
<%= f.text_field :name,
|
|
label: t(".name_label"),
|
|
"data-auto-submit-form-target": "auto" %>
|
|
<%= f.date_field :date,
|
|
label: t(".date_label"),
|
|
max: Date.current,
|
|
disabled: @entry.linked?,
|
|
"data-auto-submit-form-target": "auto" %>
|
|
<% unless @entry.transaction.transfer? %>
|
|
<div class="flex items-center gap-2">
|
|
<%= f.select :nature,
|
|
[["Expense", "outflow"], ["Income", "inflow"]],
|
|
{ container_class: "w-1/3", label: t(".nature"), selected: @entry.amount.negative? ? "inflow" : "outflow" },
|
|
{ data: { "auto-submit-form-target": "auto" }, disabled: @entry.linked? } %>
|
|
<%= f.money_field :amount, label: t(".amount"),
|
|
container_class: "w-2/3",
|
|
auto_submit: true,
|
|
min: 0,
|
|
value: @entry.amount.abs,
|
|
disabled: @entry.linked?,
|
|
disable_currency: @entry.linked? %>
|
|
</div>
|
|
<%= f.fields_for :entryable do |ef| %>
|
|
<%= ef.collection_select :category_id,
|
|
Current.family.categories.alphabetically,
|
|
:id, :name,
|
|
{ label: t(".category_label"),
|
|
class: "text-subdued", include_blank: t(".uncategorized") },
|
|
"data-auto-submit-form-target": "auto" %>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<% dialog.with_section(title: t(".details")) do %>
|
|
<%= styled_form_with model: @entry,
|
|
url: transaction_path(@entry),
|
|
class: "space-y-2",
|
|
data: { controller: "auto-submit-form" } do |f| %>
|
|
<% unless @entry.transaction.transfer? %>
|
|
<%= f.select :account,
|
|
options_for_select(
|
|
Current.family.accounts.alphabetically.pluck(:name, :id),
|
|
@entry.account_id
|
|
),
|
|
{ label: t(".account_label") },
|
|
{ disabled: true } %>
|
|
<%= f.fields_for :entryable do |ef| %>
|
|
<%= ef.collection_select :merchant_id,
|
|
Current.family.available_merchants.alphabetically,
|
|
:id, :name,
|
|
{ include_blank: t(".none"),
|
|
label: t(".merchant_label"),
|
|
class: "text-subdued" },
|
|
"data-auto-submit-form-target": "auto" %>
|
|
<%= ef.select :tag_ids,
|
|
Current.family.tags.alphabetically.pluck(:name, :id),
|
|
{
|
|
include_blank: t(".none"),
|
|
multiple: true,
|
|
label: t(".tags_label")
|
|
},
|
|
{ "data-controller": "multi-select", "data-auto-submit-form-target": "auto" } %>
|
|
<% end %>
|
|
<% end %>
|
|
<%= f.text_area :notes,
|
|
label: t(".note_label"),
|
|
placeholder: t(".note_placeholder"),
|
|
rows: 5,
|
|
"data-auto-submit-form-target": "auto" %>
|
|
<% end %>
|
|
<% end %>
|
|
<% if (details = build_transaction_extra_details(@entry)) %>
|
|
<% dialog.with_section(title: "Additional details", open: false) do %>
|
|
<div class="px-3 py-2 space-y-3">
|
|
<% if details[:kind] == :simplefin %>
|
|
<% sf = details[:simplefin] %>
|
|
<% if sf.present? %>
|
|
<dl class="space-y-2">
|
|
<% if sf[:payee].present? %>
|
|
<div class="flex items-center justify-between gap-2">
|
|
<dt class="text-secondary text-sm">Payee</dt>
|
|
<dd class="text-sm text-primary"><%= sf[:payee] %></dd>
|
|
</div>
|
|
<% end %>
|
|
<% if sf[:description].present? %>
|
|
<div class="flex items-center justify-between gap-2">
|
|
<dt class="text-secondary text-sm">Description</dt>
|
|
<dd class="text-sm text-primary"><%= sf[:description] %></dd>
|
|
</div>
|
|
<% end %>
|
|
<% if sf[:memo].present? %>
|
|
<div class="flex items-center justify-between gap-2">
|
|
<dt class="text-secondary text-sm">Memo</dt>
|
|
<dd class="text-sm text-primary"><%= sf[:memo] %></dd>
|
|
</div>
|
|
<% end %>
|
|
</dl>
|
|
<% end %>
|
|
<% if details[:provider_extras].present? %>
|
|
<div class="pt-2">
|
|
<h4 class="text-sm text-secondary mb-1">Provider extras</h4>
|
|
<dl class="space-y-2">
|
|
<% details[:provider_extras].each do |ex| %>
|
|
<div class="flex items-center justify-between gap-2">
|
|
<dt class="text-secondary text-sm"><%= ex[:key] %></dt>
|
|
<dd class="text-sm text-primary truncate max-w-[60%]" title="<%= ex[:title] %>"><%= ex[:value] %></dd>
|
|
</div>
|
|
<% end %>
|
|
</dl>
|
|
</div>
|
|
<% end %>
|
|
<% else %>
|
|
<pre class="text-xs text-secondary bg-surface-inset rounded p-2 overflow-auto"><%= details[:raw] %></pre>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<% dialog.with_section(title: t(".settings")) do %>
|
|
<div class="pb-4">
|
|
<%= styled_form_with model: @entry,
|
|
url: transaction_path(@entry),
|
|
class: "p-3",
|
|
data: { controller: "auto-submit-form" } do |f| %>
|
|
<div class="flex cursor-pointer items-center gap-4 justify-between">
|
|
<div class="text-sm space-y-1">
|
|
<h4 class="text-primary"><%= t(".exclude") %></h4>
|
|
<p class="text-secondary"><%= t(".exclude_description") %></p>
|
|
</div>
|
|
<%= f.toggle :excluded, { data: { auto_submit_form_target: "auto" } } %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% if @entry.account.investment? || @entry.account.crypto? %>
|
|
<div class="pb-4">
|
|
<%= styled_form_with model: @entry,
|
|
url: transaction_path(@entry),
|
|
class: "p-3",
|
|
data: { controller: "auto-submit-form" } do |f| %>
|
|
<%= f.fields_for :entryable do |ef| %>
|
|
<div class="flex cursor-pointer items-center gap-4 justify-between">
|
|
<div class="text-sm space-y-1">
|
|
<h4 class="text-primary"><%= t(".activity_type") %></h4>
|
|
<p class="text-secondary"><%= t(".activity_type_description") %></p>
|
|
</div>
|
|
<%= ef.select :investment_activity_label,
|
|
options_for_select(
|
|
[["—", nil]] + Transaction::ACTIVITY_LABELS.map { |l| [t("transactions.activity_labels.#{l.parameterize(separator: '_')}"), l] },
|
|
@entry.entryable.investment_activity_label
|
|
),
|
|
{ label: false },
|
|
{ class: "form-field__input border border-secondary rounded-lg px-3 py-1.5 max-w-40 text-sm",
|
|
data: { auto_submit_form_target: "auto" } } %>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<div class="pb-4">
|
|
<%= styled_form_with model: @entry,
|
|
url: transaction_path(@entry),
|
|
class: "p-3",
|
|
data: { controller: "auto-submit-form" } do |f| %>
|
|
<%= f.fields_for :entryable do |ef| %>
|
|
<div class="flex cursor-pointer items-center gap-4 justify-between">
|
|
<div class="text-sm space-y-1">
|
|
<h4 class="text-primary"><%= t(".one_time_title", type: @entry.amount.negative? ? t("transactions.form.income") : t("transactions.form.expense")) %></h4>
|
|
<p class="text-secondary"><%= t(".one_time_description") %></p>
|
|
</div>
|
|
<%= ef.toggle :kind, {
|
|
checked: @entry.transaction.one_time?,
|
|
data: { auto_submit_form_target: "auto" }
|
|
}, "one_time", "standard" %>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<div class="flex items-center justify-between gap-4 p-3">
|
|
<div class="text-sm space-y-1">
|
|
<h4 class="text-primary">Transfer or Debt Payment?</h4>
|
|
<p class="text-secondary">Transfers and payments are special types of transactions that indicate money movement between 2 accounts.</p>
|
|
</div>
|
|
<%= render DS::Link.new(
|
|
text: "Open matcher",
|
|
icon: "arrow-left-right",
|
|
variant: "outline",
|
|
href: new_transaction_transfer_match_path(@entry),
|
|
frame: :modal
|
|
) %>
|
|
</div>
|
|
<!-- Convert to Trade (Investment Accounts Only, not already converted) -->
|
|
<% if @entry.account.investment? && @entry.entryable.is_a?(Transaction) && !@entry.excluded? %>
|
|
<div class="flex items-center justify-between gap-2 p-3">
|
|
<div class="text-sm space-y-1">
|
|
<h4 class="text-primary">Convert to Security Trade</h4>
|
|
<p class="text-secondary">Convert this transaction into a security trade (buy/sell) by providing ticker, shares, and price.</p>
|
|
</div>
|
|
<%= render DS::Button.new(
|
|
text: "Convert",
|
|
variant: "outline",
|
|
icon: "arrow-right-left",
|
|
href: convert_to_trade_transaction_path(@entry.transaction),
|
|
method: :get,
|
|
frame: :modal
|
|
) %>
|
|
</div>
|
|
<% end %>
|
|
<!-- Mark as Recurring Form -->
|
|
<div class="flex items-center justify-between gap-2 p-3">
|
|
<div class="text-sm space-y-1">
|
|
<h4 class="text-primary"><%= t(".mark_recurring_title") %></h4>
|
|
<p class="text-secondary"><%= t(".mark_recurring_subtitle") %></p>
|
|
</div>
|
|
<%= render DS::Button.new(
|
|
text: t(".mark_recurring"),
|
|
variant: "outline",
|
|
icon: "repeat",
|
|
href: mark_as_recurring_transaction_path(@entry.transaction),
|
|
method: :post,
|
|
frame: "_top"
|
|
) %>
|
|
</div>
|
|
<!-- Delete Transaction Form -->
|
|
<div class="flex items-center justify-between gap-2 p-3">
|
|
<div class="text-sm space-y-1">
|
|
<h4 class="text-primary"><%= t(".delete_title") %></h4>
|
|
<p class="text-secondary"><%= t(".delete_subtitle") %></p>
|
|
</div>
|
|
<%= render DS::Button.new(
|
|
text: t(".delete"),
|
|
variant: "outline-destructive",
|
|
href: entry_path(@entry),
|
|
method: :delete,
|
|
confirm: CustomConfirm.for_resource_deletion("transaction"),
|
|
frame: "_top"
|
|
) %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<% end %>
|