Split budget creation in steps #4531

taitus · 2021-05-31T07:39:52Z

References

This is part of pull request New budgets administration and front views #4198

Objectives

Make it easier to create new budgets

Visual Changes

Budget step
Groups step
Headings step
Phases step

app/assets/stylesheets/admin.scss

app/components/admin/budget_groups/groups_component.rb

spec/system/admin/budgets_spec.rb

app/components/admin/budget_phases/form_component.html.erb

app/controllers/admin/budgets_wizard/groups_controller.rb

This way it will be easier to change it and reuse it.

We introduce the first step (creating the budget). Co-Authored-By: decabeza <[email protected]>

We usually prefer local variables over instance variables in partials. This way we'll be able to call the partial from views or components where the instance variable isn't available. And since we're using the `path` variable to configure the URL, we don't have to specify extra variables like `@budget` or the namespace `:admin` in `form_for`, since Rails only uses those variables to set the URL.

Using the placeholder selector, we weren't overwriting the rules in the mixin called with `@include` in some cases because in the generated CSS the placeholder selector appeared before the code generated by the calls to `@include`.

When we've got 6 actions and we use it in 3, IMHO the code is easier to follow if we write the actions where we do use it.

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 <[email protected]> Co-Authored-By: Julian Herrero <[email protected]>

This way adding new steps will be easier.

With the word "headings" in it, it's a bit easier to know where we are. We're also using a translation since not every language in the world uses a "/" as a standard separator between two terms.

Co-Authored-By: decabeza <[email protected]>

This way it'll be easier to use it in the budgets wizard section as well.

So now there's no need to edit each phase individually to enable/disable them. We aren't doing the same thing in the form to edit a budget because we aren't sure about possible usability issues. On one hand, in some tables we automatically update records when we mark a checkbox, so users might expect that. On the other hand, having a checkbox in the middle of a form which updates the database automatically is counter-intuitive, particularly when right below that table there are other checkboxes which don't update the database until the form is submitted. So, either way, chances are users would think they've updated the phases (or kept them intact) while the opposite would be true. In the form within the wizard to create a budget that problem isn't that important because there aren't any other fields in the form and it's pretty intuitive that what users do will have no effect until they press the "Finish" button. Co-Authored-By: Julian Nicolas Herrero <[email protected]>

When users created a budget and made a typo, they could use the link to go back to edit a budget. However, after doing so, they were out of the budget creation process. So we're now letting users go back to edit the budget, fix any mistakes they might have made, and then continue to groups.