Add columns selector JS component and change Rails view to use it

[abelardogilm]

References

#3429

Objectives

Create a new visual component to select which columns will be display on admin budget investments table. Selection will be stored for each user as cookie

Visual Changes

Notes

How it works:

This new feature is based on a JS solution, given display logic to JQuery. To make it run, we just need a couple of data attributes in our table, and render a new shared partial to set checks wrapper

Once Jquery is loaded, It will search a DOM item with id: '#js-columns-selector' to initialize all columns selector JS logic.

• First, columns_selector will extract from table information to build all checkboxes that we want to work as selectors. To do it, it will search all DOM elements which responds to $(".column-selecteable th[data-field]") and will add a new checkbox using header text as label, and data-field value as identifier
• Second, will load or create if not exists a cookie passed as data-cookie property into our columns-selector trigger
• Then it will add or remove class hidden to table columns using data-field property, and will check checkboxes if is included on cookie

Once is loaded, each checkboxes change will trigger an event which toggle column hidden class and update cookie with new value

Adding component to new table

• Render Columns selector trigers and wrapper in our view

<%= render partial: "admin/shared/columns_selector",
        locals: { cookie: _COOKIE_VALUE_ , default: _DEFAULT_COLUMNS_ } %>

• Add column-selecteable class to table
• Add data-field=_FIELD_ attribute to each th we want to add to our chooser, field will identify table attribute
• Add data-field=_FIELD_ attribute to each td we want to associate with our chooser

[houndci-bot]

Avoid qualifying attribute selectors with an element.