[BUU] Change the order of products in my catalogue by name

[mariocarabotta]

Context

This issue introduces the ability to change the order of the products by Name (A>Z to Z>A).

Description

- As an: enterprise user - On page: /admin/products - I want to be able to: reorder my products - So that: I can see the ones at the end of the list

Acceptance Criteria & Tests

Scenario 1: Trigger reorder Given that I am in /admin/products And I have products in the list When I click on the Name column header Then the list reloads And I see a loading indicator

Scenario 2: List reordered Given that I have triggered reordering of the list When the list is reloaded successfully Then I see the updated list

Scenario 3: Colour notes for text links Currently the table header uses $dark-blue (Sherpa-blue), but it's probably better to reserve blue colors just for interactive links and elements. With that in mind:

• change all the title labels except Name to $near-black
• change name link to $teal (see more details about states in https://github.com/openfoodfoundation/openfoodnetwork/wiki/Design-styleguide:-links-and-buttons)

Design specs

Figma screens are available here > https://www.figma.com/file/v1zbrWDZSRd3Nqoe0SJ2Sm/Engineering-Delivery---Back-Office?type=design&node-id=470%3A5244&mode=design&t=lfLRiAUQwuEU9fNX-1

New components and styles

Component	Example
Link with icon

[mariocarabotta]

assigned to David for now since he's working on some other elements of the table that relate to this issue

[mariocarabotta]

at the moment the list is displayed Z>A, should be the opposite way around

[dacook]

Estimate

0.5 days

[dacook]

We are now using the "search" Stimulus controller (search_controller.js) which has already been built to help manage column sorting. This helps maintain the other filters (search, producer, category) when reloading the sorted data. It was developed by Matt-Yorkley for the admin/orders page, you can check it out there to see how it works. On that page it doesn't use Turbo, but on the Products page I've set it up to use a Turbo Frame for nice reloading. (FYI I configured the frame targeting the whole page by default, but the form submits with Turbo due to this setting: <form data-turbo-frame="_self")

So I suggest looking at the orders page and trying to copy that: https://github.com/openfoodfoundation/openfoodnetwork/blob/master/app/views/spree/admin/orders/_table.html.haml#L10-L22 For this issue, we only need to implement for the Name column, so there's no need for the loop.

[chahmedejaz]

Thanks David, I'd used that controller and it was so nice. It's almost the replica of the order page, however the product 's page uses Turbo and Orders page does not. When I use the sort for the first time after page reloading, it works just fine. But when I try again without reloading, it gives the error of Disconnected Form or something. I'll share more after working on this error. :)

[chahmedejaz]

Update:

• I just fixed this form disconnected error.
• It was a combined issue of the way I was stimulus and turbo :sweat_smile:
• It was a hell of a learning drive though... 👍
• Lesson learned: always try to use stimulus controller closest (or preferably on) to the element on which you want to use its action, otherwise nested usages of the same controller may cause issues especially in case we are using turbo as we are able to change the browsing context with this.
• Other way around this is to use the controller on the common ancestor of elements on which you want its behavior. (this seems more clean, but it's very ideal 😅 )

[chahmedejaz]

The PR is ready for review now. Thanks