openfoodnetwork
openfoodnetwork copied to clipboard
openfoodfoundation
[BUU] Change the order of products in my catalogue by name
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 |
assigned to David for now since he's working on some other elements of the table that relate to this issue
at the moment the list is displayed Z>A, should be the opposite way around
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.
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. :)
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 😅 )