Commit Graph

670 Commits

Author SHA1 Message Date
Javi Martín
e3bca85321 Extract methods in admin menu component
Now that there's no naming confict with the helper method used in the
ProposalsDashboardHelper, we can easily simplify the view, moving the
logic to the Ruby class.
2020-11-26 20:04:08 +01:00
Javi Martín
60b3ca000a Fix typos in admin menu classes
The HTML `class` attribute was declared twice and so the second one was
being ignored.

In the case of messages, it was "working" properly because the
`class=is-active` part is not used on `<li>` tags when they've got a
`<ul>` inside them.
2020-11-26 20:04:08 +01:00
Javi Martín
f9e110aa9b Simplify method names in admin menu component
We no longer need to use the `menu_` prefix, since now these methods
aren't helper methods anymore, and so their names won't collide with
other helpers.
2020-11-26 12:15:07 +01:00
Javi Martín
d501915954 Extract admin menu to a component
This way adding new methods will be easier.
2020-11-26 12:15:07 +01:00
Javi Martín
9794ffbbf8 Use icons in admin table actions
The planned budget investments redesign includes using icons in some
tables, so we might as well use them everywhere.

The original design used Foundation to show the tooltips. We're using
CSS in order to keep the ERB/HTML code simple. One advantage of using
CSS is we can show the tooltip on focus as well, just like accessibility
guidelines recommend [1]. On the other hand, Foundation tooltips appear
on the sides when the link is at the bottom of the page, making sure
they're visible in this case, while CSS tooltips do not. Neither CSS
tooltips nor Foundation tooltips are dismissable, which might be an
accessibility issue.

Note we aren't changing any ERB files in order to replace links with
icons; we're only changing CSS and one line of Ruby code.

[1] https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus
2020-11-03 14:58:02 +01:00
Javi Martín
8c1140a1bf Use semantic HTML classes in table actions
Note the CSS could probably be improved to avoid duplication with other
button style definitions. However, that's fine because we're going to
change the style of the links soon.

For the same reason, I haven't bothered to style every single link the
way it was until now.
2020-11-03 14:58:02 +01:00
Javi Martín
ccb7695056 Use a custom link_to method for table actions
This way we'll be able to change the behavior of these links without
changing the view nor affecting the rest of the application.
2020-11-03 14:58:02 +01:00
Javi Martín
7cb0a4135b Extract component for admin officers table
This way we can remove duplication and simplify the code in the view.

Note we're not using the "within" method in the tests to access a row,
because it doesn't seem to work in components tests when passing the
`text:` option.
2020-10-21 13:19:52 +02:00
Javi Martín
08c2bfc255 Extract component to add/remove admin/mod/manager
We remove some duplication by doing so.
2020-10-21 13:19:52 +02:00
Javi Martín
02e27e13dc Extract component for budget actions
We can omit passing a parameter to the helper method thanks to that, and
we group related code together.
2020-10-21 13:19:52 +02:00
Javi Martín
1537f25739 Extract component for organization actions
We remove duplication by doing so, and now we only need to add the call
do render Admin::TableActionsComponent once.
2020-10-21 13:19:52 +02:00
Javi Martín
eb3f2bc2ca Extract component for restore and hide actions
By doing so, we remove a lot of duplication.
2020-10-21 13:19:52 +02:00
Javi Martín
64b0cc741b Improve table actions layout
In the past we were using some <div> tags surrounding table action
links in order to guarantee these links wouldn't be wider that their
cell's space and wouldn't expand over two lines.

However, while these links didn't expand over two lines, at certain
resolutions the width of their text exceeded the width of the links,
causing part of the text to be outside their borders.

This behavior was also inconsistent: some tables had these <div> tags,
and some tables didn't.

Since we've now introduced the table actions component, the code is more
consistent and we're getting rid of these <div> tags. So now we're again
facing the issue where links could expand over two lines.

Using a flex layout solves this issue and considerably improves the
layout at lower resolutions.
2020-10-21 13:19:52 +02:00
Javi Martín
fb23df2e5b Allow additional links in table actions component
This way we'll be able to make these links consistent.
2020-10-21 13:19:49 +02:00
Javi Martín
e3753b1ad9 Allow custom options in links to actions
Some links were using options like `remote: true`.
2020-10-19 18:56:02 +02:00
Javi Martín
497963817c Allow different confirmation texts in destroy link 2020-10-19 18:56:02 +02:00
Javi Martín
b1f9ca4ad5 Allow custom URLs in links to actions
There were a couple of cases where these links didn't point to the
default actions.
2020-10-19 18:56:02 +02:00
Javi Martín
738646a565 Allow different texts in links to actions
The texts were different for a few models, so the component needs to be
updated.
2020-10-19 18:56:02 +02:00
Javi Martín
10c095d821 Move table actions partial to a component
This partial was going to get too complex since in some places we've got
different texts, different URLs or different confirmation messages.
While we should probably try to be more consistent and that would make
the partial work in most cases, there'll always be some exceptions, and
using a partial (with, perhaps, some helper methods) will become messy
really quickly.
2020-10-19 18:56:02 +02:00
Javi Martín
baefc249f0 Allow using components with view_component
While Rails provides a lot of functionality by default, there's one
missing piece which is present in frameworks like Django or Phoenix: the
so-called "view models", or "components".

It isn't easy to extract methods in a standard Rails view/partial, since
extracting them to a helper will make them available to all views, and
so two helper methods can't have the same name. It's also hard to
organize the code in modules, and due to that it's hard to figure out
where a certain helper method is supposed to be called from.
Furthermore, object-oriented techniques like inheritance can't be
applied, and so in CONSUL customizing views is harder that customizing
models.

Components fix all these issues, and work the way Ruby objects usually
do.

Components are also a pattern whose popularity has increased a lot in
the last few years, with JavaScript frameworks like React using them
heavily. While React's components aren't exactly the same as the
components we're going to use, the concept is really similar.

I've always liked the idea of components. However, there wasn't a stable
gem we could safely use. The most popular gem (cells) hasn't been
maintained for years, and we have to be very careful choosing which gems
CONSUL should depend on.

The view_component gem is maintained by GitHub, which is as a guarantee
of future maintenance as it can be (not counting the Rails core team),
and its usage started growing after RailsConf 2019. While that's
certainly not a huge amount of time, it's not that we're using an
experimental gem either.

There's currently a conflict between view_component and wicked_pdf.
We're adding a monkey-patch with the fix until it's merged in
wicked_pdf.
2020-10-19 18:56:02 +02:00