Files
grecia/app/components/admin/budgets/form_component.html.erb
Alberto b304c640e1 Add groups step to budget creation
Note we're keeping this section's original design (which had one button
to add a new group which after being pressed was replaced by a button to
cancel) but we aren't using Foundation's `data-toggle` because there
were a couple of usability and accessibility issues.

First, using `data-toggle` multiple times and applying it to multiple
elements led to the "cancel" button not being available after submitting
a form with errors. Fixing it made the code more complicated.

Second, the "Add new group" button always had the `aria-expanded`
attribute set to "true", so my screen reader was announcing the button
as expanded even when it wasn't. I didn't manage to fix it using
`data-toggle`.

Finally, after pressing either the "Add new group" and "Cancel" buttons,
the keyboard focus was lost since the elements disappeared.

So we're simplifying the HTML and adding some custom JavaScript to be
able to handle the focus and manually setting the `aria-expanded`
attribute.

Co-Authored-By: Javi Martín <javim@elretirao.net>
Co-Authored-By: Julian Herrero <microweb10@gmail.com>
2021-06-08 18:45:13 +02:00

84 lines
3.1 KiB
Plaintext

<%= translatable_form_for [namespace, budget], html: { class: "budgets-form" } do |f| %>
<fieldset>
<legend><%= t("admin.budgets.edit.info.budget_settings") %></legend>
<%= render "shared/globalize_locales", resource: budget %>
<%= render "shared/errors", resource: budget %>
<%= f.translatable_fields do |translations_form| %>
<div class="small-12 medium-9 large-6 column end">
<%= translations_form.text_field :name,
maxlength: Budget.title_max_length,
hint: t("admin.budgets.edit.name_description") %>
</div>
<% end %>
<div class="small-12 medium-4 column">
<%= f.select :voting_style, voting_styles_select_options %>
</div>
<div class="small-12 medium-2 column end">
<%= f.select :currency_symbol, currency_symbol_select_options %>
</div>
</fieldset>
<fieldset>
<legend><%= t("admin.budgets.edit.info.staff_settings") %></legend>
<% %w[administrators valuators].each do |staff| %>
<div class="small-12 medium-6 large-3 column end">
<%= link_to t("admin.budgets.edit.#{staff}", count: budget.send(staff).count),
"#",
class: "button expanded hollow js-budget-show-#{staff}-list js-budget-show-users-list",
data: { toggle: "#{staff}_list", texts: t("admin.budgets.edit.#{staff}") } %>
</div>
<% end %>
<%= render "/admin/budgets/association", assignable_type: "administrators", assignables: admins, form: f %>
<%= render "/admin/budgets/association", assignable_type: "valuators", assignables: valuators, form: f %>
</fieldset>
<% if budget.persisted? %>
<fieldset>
<legend><%= t("admin.budgets.edit.info.phases_settings") %></legend>
<div class="small-12 medium-6 column">
<%= f.select :phase, phases_select_options %>
</div>
<%= render Admin::BudgetPhases::PhasesComponent.new(budget) %>
</fieldset>
<%= render "admin/shared/show_results_fields", form: f %>
<% end %>
<div class="small-12 column">
<div class="clear small-12 medium-4 large-3 inline-block">
<% if budget.persisted? %>
<%= f.submit nil, class: "button success" %>
<% else %>
<%= f.submit t("admin.budgets_wizard.budgets.continue"), class: "button success expanded" %>
<% end %>
</div>
<div class="float-right">
<% if display_calculate_winners_button?(budget) %>
<%= link_to calculate_winner_button_text(budget),
calculate_winners_admin_budget_path(budget),
method: :put,
class: "button hollow" %>
<% end %>
<% if budget.has_winning_investments? %>
<%= link_to t("budgets.show.see_results"),
budget_results_path(budget),
class: "button hollow margin-left" %>
<% end %>
<% if budget.persisted? %>
<%= link_to t("admin.budgets.edit.delete"),
admin_budget_path(budget),
method: :delete,
class: "delete float-right margin-left" %>
<% end %>
</div>
</div>
<% end %>