-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path_allocation.html.erb
More file actions
106 lines (102 loc) · 6.92 KB
/
Copy path_allocation.html.erb
File metadata and controls
106 lines (102 loc) · 6.92 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<%# locals: (allocation:, scenario:, allocation_counter: 0) %>
<% if allocation.ongoing? %>
<% color = allocation_chart_color(allocation_counter) %>
<% slider_limit = remaining_ongoing_percentage(scenario, allocation) %>
<div data-controller="dialog">
<div data-controller="allocation-slider"
data-allocation-slider-ongoing-amount-value="<%= scenario.ongoing_giving_amount.to_i %>"
data-allocation-slider-payout-rate-value="<%= Allocation::Ongoing::PERPETUITY_PAYOUT_RATE %>"
data-allocation-slider-limit-value="<%= slider_limit %>"
class="rounded-lg border <%= allocation.greatest_community_need? ? "border-brand/30 bg-brand-tint" : "border-line-soft bg-surface" %> px-4 py-3 transition hover:shadow-sm">
<div class="flex items-start justify-between gap-3">
<% if allocation.greatest_community_need? %>
<div class="min-w-0">
<p class="font-medium text-ink"><%= allocation.display_label %></p>
<p class="mt-0.5 text-sm text-ink-soft"><%= Allocation::GreatestCommunityNeed::DESCRIPTION %></p>
</div>
<% else %>
<div class="min-w-0">
<p class="font-medium text-ink truncate"><%= allocation.display_label %></p>
<p class="mt-0.5 text-sm text-ink-soft truncate">
<%= allocation.preference_categories.map(&:name).join(", ").presence || "No additional preferences" %>
</p>
</div>
<% end %>
<div class="flex items-start gap-3 shrink-0">
<div class="w-16 text-right leading-tight">
<span class="block font-semibold text-ink tabular-nums" data-allocation-slider-target="percent"><%= allocation.percentage %>%</span>
<span class="block text-sm text-ink-faint tabular-nums" data-allocation-slider-target="dollar"><%= number_to_currency(allocation.dollar_amount) %></span>
</div>
<% unless allocation.greatest_community_need? %>
<button type="button" data-action="dialog#open" aria-label="Edit allocation"
class="text-ink-faint hover:text-accent cursor-pointer bg-transparent p-0 leading-none">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931z" />
</svg>
</button>
<%= button_to scenario_allocation_path(allocation.scenario, allocation), method: :delete,
class: "text-ink-faint hover:text-danger cursor-pointer bg-transparent p-0 leading-none",
form_class: "leading-none", aria: { label: "Remove allocation" },
data: { turbo_confirm: "Remove this allocation?" } do %>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
<% end %>
<% end %>
</div>
</div>
<div class="mt-3 flex items-center gap-4">
<%= form_with url: scenario_allocation_path(scenario, allocation), method: :patch, class: "flex-1 min-w-0 leading-none" do %>
<%# The input's max stays at 100 (see allocation_slider_controller.js), so the
headroom the slider actually stops at has to be announced separately. %>
<span id="<%= dom_id(allocation, :headroom) %>" class="sr-only"><%= slider_limit %>% remaining to allocate</span>
<%= range_field_tag "allocation[percentage]", allocation.percentage, min: 0, max: 100, step: 1,
style: "--slider-color: #{color}; --slider-value: #{allocation.percentage.to_i}; --slider-limit: #{slider_limit}",
aria: { describedby: dom_id(allocation, :headroom) },
data: { allocation_slider_target: "input", action: "input->allocation-slider#update change->allocation-slider#save" },
class: [ "allocation-slider block", ("allocation-slider--capped" if slider_limit < 100) ] %>
<% end %>
<div class="flex items-baseline gap-3 shrink-0">
<span class="w-10 text-right font-semibold text-ink tabular-nums" data-allocation-slider-target="percent"><%= allocation.percentage %>%</span>
<span class="w-16 text-right text-ink-soft tabular-nums" data-allocation-slider-target="dollar"><%= number_to_currency(allocation.dollar_amount) %></span>
</div>
</div>
<p class="mt-3 text-xs text-ink-faint">
<span style="color: <%= color %>">∞</span>
Est. <span class="font-medium text-ink-soft" data-allocation-slider-target="perpetuity"><%= number_to_currency(allocation.perpetuity_annual_amount) %></span>
annually in perpetuity
<span class="text-ink-faint">(<%= (Allocation::Ongoing::PERPETUITY_PAYOUT_RATE * 100).to_i %>% of principal)</span>
</p>
</div>
<% unless allocation.greatest_community_need? %>
<%= render "scenarios/allocation_modal", allocation: allocation, scenario: scenario, color: color %>
<% end %>
</div>
<% else %>
<div data-controller="dialog">
<div class="flex items-start justify-between gap-3 rounded-lg border border-line-soft bg-surface px-4 py-3 transition hover:shadow-sm">
<div class="min-w-0">
<p class="font-medium text-ink truncate"><%= allocation.display_label %></p>
<% if allocation.preference_categories.any? %>
<p class="mt-0.5 text-sm text-ink-soft"><%= allocation.preference_categories.map(&:name).join(", ") %></p>
<% end %>
<% if allocation.note.present? %>
<p class="mt-1 text-sm text-ink-soft"><%= allocation.note %></p>
<% end %>
</div>
<div class="flex items-center gap-3 shrink-0">
<span class="font-semibold text-ink">
<%= number_to_currency(allocation.amount) %>
</span>
<button type="button" data-action="dialog#open"
class="text-sm text-ink-faint hover:text-accent cursor-pointer bg-transparent p-0 leading-none">
Edit
</button>
<%= button_to "✕", scenario_allocation_path(allocation.scenario, allocation), method: :delete,
class: "text-ink-faint hover:text-danger cursor-pointer bg-transparent p-0 leading-none",
data: { turbo_confirm: "Remove this allocation?" } %>
</div>
</div>
<%= render "scenarios/allocation_modal", allocation: allocation, scenario: scenario %>
</div>
<% end %>