Add ability to select multiple rows on Admin Tables #3565

DanielePalombo · 2020-03-20T16:08:28Z

Description

This PR adds the ability to select more elements of admin tables.
Before this PR the ability was present only for return items and with a custom js code.

Adding a selectable-table CSS class to an admin table, and a checkbox (with a selectable class) for every related record, it will be possible to select more than one element.

If a checkbox named select-all is present this check/uncheck all the elements.

Adding the selector CSS class selectable-label on a node HTML it will
be rendered a text depending on the number of the selected row.

Thanks to it will be possible to show different information depending on the selection type.
e.g.

An example of usage is provided at /admin/style_guide under Building Tables section.

This PR uses the selectable code on the return items

Checklist:

I have followed Pull Request guidelines
I have added a detailed description into each commit message
I have updated Guides and README accordingly to this change (if needed)
I have added tests to cover this change (if needed)
I have attached screenshots to this PR for visual changes (if needed)

backend/app/assets/javascripts/spree/backend/views/tables/selectable_table.js

kennyadsl

Left a couple of notes, only one is blocking. Great work Daniele!

backend/app/assets/javascripts/spree/backend/components/selectable_table.js

backend/app/views/spree/admin/style_guide/topics/tables/_building_tables.html.erb

kennyadsl · 2020-04-20T12:35:39Z

We discussed IRL, and we are trying to move more things to handlebars templates.

backend/app/assets/javascripts/spree/backend/views/tables/selectable_table_sum_item_amount.js

backend/app/assets/javascripts/spree/backend/views/tables/selectable_table.js

DanielePalombo · 2020-05-22T16:43:58Z

Refactored with handlebars templates
Exported return items selection logic in a Backbone controller and handlebars template

backend/app/assets/javascripts/spree/backend/views/tables/selectable_table_sum_item_amount.js

kennyadsl · 2020-06-22T11:50:09Z

@DanielePalombo Not sure how, but the failure doesn't seem a flaky, can you take a look? I'm restarting the suite again just be sure anyway.

DanielePalombo · 2020-06-22T14:06:40Z

@kennyadsl It looks green now

tvdeyen

Is this also persisting any of the changes to the server? Is this only for removing columns or also for exerting multiple items at once?

tvdeyen · 2020-06-23T07:17:33Z

backend/app/assets/javascripts/spree/backend/components/selectable_table.js

+
+    new Spree.Views.Tables.SelectableTable({el: this, model: selectableTableModel});
+
+    if($(this).hasClass('return-items-table')) {


Why hard-code this behavior here? Can we add a dedicated view model for the return items table instead?

I made a dedicated view for return items table, let me know if it works for you.

backend/app/assets/javascripts/spree/backend/templates/tables/selectable_label.hbs

tvdeyen · 2020-06-23T07:21:06Z

backend/app/assets/stylesheets/spree/backend/sections/_style_guide.scss

+
+  img {
+    max-width: none;
+  }


Why is this change necessary?

This shows the image under style_guide page

Without it, the image doesn't appear

backend/app/assets/javascripts/spree/backend/components/selectable_table.js

backend/app/assets/javascripts/spree/backend/views/tables/selectable_table_summary.js

This commit adds the ability to select more rows on admin resource tables. To use this feature, add the `selectable-table` CSS class to the selected table and the CSS class `selectable` to the checkbox, which identifies the record id. It is possible to add a checkbox named `select-all` to check/uncheck all the elements. An example of its usage is provided at `/admin/style_guide` under `Building Tables` section.

This event is triggered when the selectableTable is initialized. Binding on this event you can add your own logic to the selectableTable. e.g. ``` # app/assets/javascript/components/selectable_table/custom.js Backbone.on('selectableTable:init', function(selectableTable){ if(selectableTable.$el.find('.selectable').length > 0) { new Spree.Views.Tables.SelectableTable.Custom(el: selectableTable.el); } }) ```

spaghetticode

@DanielePalombo thank you! 💯

kennyadsl

Left a non-blocking comment if you have time to fix it. Thanks!

backend/app/assets/javascripts/spree/backend/views/tables/return_items.js

DanielePalombo · 2020-07-17T12:04:17Z

@kennyadsl the build is failed because of flaky spec, do you mind re-running the CI?

This component will be rendered above the selectableTable and will shown the selected item number label.

This commit updates the JS and HTML code related to return items, to use the selectable.js code. You can see the code working on: /admin/orders/ORDER_NUMBER/customer_returns/new /admin/orders/ORDER_NUMBER/return_authorizations/new return_item_selection.js file is removed in favor of HBS template.

This feature got lost with solidusio#3565. It automatically checks rows where the admin changes something, under the assumption that, if a value is changed, then the user means to include the row into the RMA/return. An integration spec is added to properly track this feature.

This feature got lost with #3565. It automatically checks rows where the admin changes something, under the assumption that, if a value is changed, then the user means to include the row into the RMA/return. An integration spec is added to properly track this feature.

houndci-bot reviewed Mar 20, 2020

View reviewed changes

DanielePalombo force-pushed the nebulab/selectable-table branch 2 times, most recently from 1eae7eb to 3e3a792 Compare March 27, 2020 12:55

DanielePalombo marked this pull request as ready for review March 27, 2020 14:25

DanielePalombo force-pushed the nebulab/selectable-table branch from 3e3a792 to e3eaaba Compare March 27, 2020 14:29

kennyadsl changed the title ~~Add ability to select more rows on spree admin table model~~ Add ability to select more rows on spree admin tables Mar 27, 2020

DanielePalombo force-pushed the nebulab/selectable-table branch from e3eaaba to d79be59 Compare April 3, 2020 07:49

kennyadsl requested changes Apr 3, 2020

View reviewed changes

DanielePalombo force-pushed the nebulab/selectable-table branch 2 times, most recently from da9f15f to 0314317 Compare April 3, 2020 16:11

kennyadsl reviewed Apr 6, 2020

View reviewed changes

backend/app/views/spree/admin/style_guide/topics/tables/_building_tables.html.erb Outdated Show resolved Hide resolved

DanielePalombo force-pushed the nebulab/selectable-table branch 2 times, most recently from 5eb017f to f2f9054 Compare April 10, 2020 13:05

kennyadsl added the Needs Work label Apr 20, 2020

DanielePalombo force-pushed the nebulab/selectable-table branch from f2f9054 to 5e3dcab Compare May 22, 2020 16:15

houndci-bot reviewed May 22, 2020

View reviewed changes

DanielePalombo force-pushed the nebulab/selectable-table branch from 5e3dcab to e8382d0 Compare May 22, 2020 16:41

DanielePalombo force-pushed the nebulab/selectable-table branch from e8382d0 to b9ce553 Compare May 25, 2020 07:43

kennyadsl reviewed Jun 5, 2020

View reviewed changes

backend/app/assets/javascripts/spree/backend/views/tables/selectable_table_sum_item_amount.js Outdated Show resolved Hide resolved

DanielePalombo force-pushed the nebulab/selectable-table branch 2 times, most recently from cb87120 to 22abbc7 Compare June 12, 2020 11:21

DanielePalombo force-pushed the nebulab/selectable-table branch from 22abbc7 to 6a507d1 Compare June 19, 2020 12:14

kennyadsl added Needs Core Team Review changelog:solidus_backend Changes to the solidus_backend gem and removed Needs Work labels Jun 23, 2020

kennyadsl requested a review from a team June 23, 2020 06:05

kennyadsl changed the title ~~Add ability to select more rows on spree admin tables~~ Add ability to select multiple rows on Admin Tables Jun 23, 2020

tvdeyen reviewed Jun 23, 2020

View reviewed changes

spaghetticode reviewed Jun 23, 2020

View reviewed changes

backend/app/assets/javascripts/spree/backend/components/selectable_table.js Outdated Show resolved Hide resolved

aldesantis removed the Needs Core Team Review label Jun 26, 2020

houndci-bot reviewed Jun 26, 2020

View reviewed changes

backend/app/assets/javascripts/spree/backend/views/tables/selectable_table_summary.js Outdated Show resolved Hide resolved

backend/app/assets/javascripts/spree/backend/views/tables/selectable_table_summary.js Outdated Show resolved Hide resolved

DanielePalombo force-pushed the nebulab/selectable-table branch 2 times, most recently from b5d14b7 to cdee859 Compare July 3, 2020 06:05

DanielePalombo force-pushed the nebulab/selectable-table branch 2 times, most recently from 9fb2dfb to 83869e7 Compare July 17, 2020 07:35

DanielePalombo added 3 commits July 17, 2020 10:34

Fix placeholders on style_guide page

5a5fe51

DanielePalombo force-pushed the nebulab/selectable-table branch from 2b6a462 to 399c6bf Compare July 17, 2020 08:34

spaghetticode approved these changes Jul 17, 2020

View reviewed changes

kennyadsl approved these changes Jul 17, 2020

View reviewed changes

backend/app/assets/javascripts/spree/backend/views/tables/return_items.js Outdated Show resolved Hide resolved

DanielePalombo force-pushed the nebulab/selectable-table branch from 399c6bf to fa9330d Compare July 17, 2020 10:08

DanielePalombo added 2 commits July 17, 2020 14:24

Add selectableTable header

214c9d9

This component will be rendered above the selectableTable and will shown the selected item number label.

DanielePalombo force-pushed the nebulab/selectable-table branch from fa9330d to ea23be2 Compare July 17, 2020 12:24

spaghetticode merged commit 7ae3f53 into solidusio:master Jul 20, 2020

DanielePalombo deleted the nebulab/selectable-table branch July 20, 2020 12:48

spaghetticode mentioned this pull request Jan 20, 2021

[Admin] Automatically check edited return items in RMA form #3904

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add ability to select multiple rows on Admin Tables #3565

Add ability to select multiple rows on Admin Tables #3565

DanielePalombo commented Mar 20, 2020 •

edited

Loading

kennyadsl left a comment

kennyadsl commented Apr 20, 2020

DanielePalombo commented May 22, 2020

kennyadsl commented Jun 22, 2020

DanielePalombo commented Jun 22, 2020

tvdeyen left a comment

tvdeyen Jun 23, 2020

DanielePalombo Jun 26, 2020

tvdeyen Jun 23, 2020

DanielePalombo Jun 26, 2020

spaghetticode left a comment

kennyadsl left a comment

DanielePalombo commented Jul 17, 2020


		new Spree.Views.Tables.SelectableTable({el: this, model: selectableTableModel});

		if($(this).hasClass('return-items-table')) {

Add ability to select multiple rows on Admin Tables #3565

Add ability to select multiple rows on Admin Tables #3565

Conversation

DanielePalombo commented Mar 20, 2020 • edited Loading

kennyadsl left a comment

Choose a reason for hiding this comment

kennyadsl commented Apr 20, 2020

DanielePalombo commented May 22, 2020

kennyadsl commented Jun 22, 2020

DanielePalombo commented Jun 22, 2020

tvdeyen left a comment

Choose a reason for hiding this comment

tvdeyen Jun 23, 2020

Choose a reason for hiding this comment

DanielePalombo Jun 26, 2020

Choose a reason for hiding this comment

tvdeyen Jun 23, 2020

Choose a reason for hiding this comment

DanielePalombo Jun 26, 2020

Choose a reason for hiding this comment

spaghetticode left a comment

Choose a reason for hiding this comment

kennyadsl left a comment

Choose a reason for hiding this comment

DanielePalombo commented Jul 17, 2020

DanielePalombo commented Mar 20, 2020 •

edited

Loading