Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-05 13:35:21 +02:00
Code Issues Releases Activity Actions

Fix budget allocation forms from resetting and clearing data on slow networks (#1804)

Browse source 
* First pass

* Fix null constraint bug for budget category assignment

* Fix autofocus reset when allocating budget

* Lint fix
This commit is contained in:
Zach Gollwitzer 2025-02-05 09:09:38 -05:00 • committed by GitHub
parent f498212b2d
commit 5b083c9e33
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 56 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

36
app/views/budget_categories/_allocation_progress.erb
View file

@ -1,26 +1,44 @@
<%# locals: (budget:) %>
<div class="space-y-2 mb-6">
<div id="<%= dom_id(budget, :allocation_progress) %>" class="space-y-2 mb-6">
<div class="flex items-center gap-2">
<div class="rounded-full w-1.5 h-1.5 <%= budget.allocated_spending > 0 ? "bg-gray-900" : "bg-gray-100" %>"></div>
<% if budget.available_to_allocate.negative? %>
<div class="rounded-full w-1.5 h-1.5 bg-red-500"></div>
<% else %>
<div class="rounded-full w-1.5 h-1.5 <%= budget.allocated_spending > 0 ? "bg-gray-900" : "bg-gray-100" %>"></div>
<% end %>
<p class="text-gray-500 text-sm">
<%= number_to_percentage(budget.allocated_percent, precision: 0) %> set
</p>
<% if budget.available_to_allocate.negative? %>
<p class="text-gray-900 text-sm">&gt; 100% set</p>
<% else %>
<p class="text-gray-500 text-sm">
<%= number_to_percentage(budget.allocated_percent, precision: 0) %> set
</p>
<% end %>
<p class="ml-auto text-sm space-x-1">
<span class="text-gray-900"><%= format_money(budget.allocated_spending_money) %></span>
<span class="<%= budget.available_to_allocate.negative? ? "text-red-500" : "text-gray-900" %>"><%= format_money(budget.allocated_spending_money) %></span>
<span class="text-gray-500"> / </span>
<span class="text-gray-500"><%= format_money(budget.budgeted_spending_money) %></span>
</p>
</div>
<div class="relative h-1.5 rounded-2xl bg-gray-100">
<div class="absolute inset-0 bg-gray-900 rounded-2xl" style="width: <%= budget.allocated_percent %>%;"></div>
<% if budget.available_to_allocate.negative? %>
<div class="absolute inset-0 bg-red-500 rounded-2xl" style="width: 100%;"></div>
<% else %>
<div class="absolute inset-0 bg-gray-900 rounded-2xl" style="width: <%= budget.allocated_percent %>%;"></div>
<% end %>
</div>
<div class="text-sm">
<span class="text-gray-900"><%= format_money(budget.available_to_allocate_money) %></span>
<span class="text-gray-500">left to allocate</span>
<% if budget.available_to_allocate.negative? %>
<p class="text-gray-500">
Budget exceeded by <span class="text-red-500"><%= format_money(budget.available_to_allocate_money.abs) %></span>
</p>
<% else %>
<span class="text-gray-900"><%= format_money(budget.available_to_allocate_money) %></span>
<span class="text-gray-500">left to allocate</span>
<% end %>
</div>
</div>

25
app/views/budget_categories/_allocation_progress_overage.html.erb
View file

@ -1,25 +0,0 @@
<%# locals: (budget:) %>
<div class="space-y-2 mb-6">
<div class="flex items-center gap-2">
<div class="rounded-full w-1.5 h-1.5 bg-red-500"></div>
<p class="text-gray-900 text-sm">&gt; 100% set</p>
<p class="ml-auto text-sm space-x-1">
<span class="text-red-500"><%= format_money(budget.allocated_spending_money) %></span>
<span class="text-gray-500"> / </span>
<span class="text-gray-500"><%= format_money(budget.budgeted_spending_money) %></span>
</p>
</div>
<div class="relative h-1.5 rounded-2xl bg-gray-100">
<div class="absolute inset-0 bg-red-500 rounded-2xl" style="width: 100%;"></div>
</div>
<div class="text-sm">
<p class="text-gray-500">
Budget exceeded by <span class="text-red-500"><%= format_money(budget.available_to_allocate_money.abs) %></span>
</p>
</div>
</div>

3
app/views/budget_categories/_budget_category_form.html.erb
View file

@ -12,7 +12,7 @@
</div>
<div class="ml-auto">
<%= form_with model: [budget_category.budget, budget_category], data: { controller: "auto-submit-form", auto_submit_form_trigger_event_value: "blur", turbo_frame: :_top } do |f| %>
<%= form_with model: [budget_category.budget, budget_category], data: { controller: "auto-submit-form preserve-focus" } do |f| %>
<div class="form-field w-[120px]">
<div class="flex items-center">
<span class="text-gray-500 text-sm mr-2"><%= currency.symbol %></span>
@ -20,6 +20,7 @@
class: "form-field__input text-right [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
placeholder: "0",
step: currency.step,
id: dom_id(budget_category, :budgeted_spending),
min: 0,
data: { auto_submit_form_target: "auto" } %>
</div>

8
app/views/budget_categories/index.html.erb
View file

@ -21,14 +21,10 @@
</div>
<% else %>
<div class="max-w-md mx-auto">
<% if @budget.available_to_allocate.negative? %>
<%= render "budget_categories/allocation_progress_overage", budget: @budget %>
<% else %>
<%= render "budget_categories/allocation_progress", budget: @budget %>
<% end %>
<%= render "budget_categories/allocation_progress", budget: @budget %>
<div class="space-y-4 mb-4">
<% BudgetCategory::Group.for(@budget.budget_categories).sort_by(&:name).each do |group| %>
<% BudgetCategory::Group.for(@budget_categories).sort_by(&:name).each do |group| %>
<div class="space-y-4">
<%= render "budget_categories/budget_category_form", budget_category: group.budget_category %>

1
app/views/budget_categories/update.turbo_stream.erb Normal file
View file

@ -0,0 +1 @@
<%= turbo_stream.replace dom_id(@budget, :allocation_progress), partial: "budget_categories/allocation_progress", locals: { budget: @budget } %>