React-admin: Orderable List by drag

Created on 12 Feb 2019  路  2Comments  路  Source: marmelab/react-admin

Is your feature request related to a problem? Please describe.
Most of the times with the List component is enough, but sometimes I have a resource that needs and "order field" for defining the order of the elements (like slides order in a slider defined by react-admin). My current and realistic solution is an integer field that users can edit, but it's cumbersome because if 2 resources have the same "order value" don't work as expected, or if you want to put a resource between 2 resources with a consecutive "order value", you must edit many "order values" of other resources.

Describe the solution you'd like
It would be great if there were an internal or third party components that would allow ordering resources.
As ra-tree-ui-materialui philosophy, draggableList wouldn't have pagination in order to show all the resources. For keeping the flexible the component, some option to saying the "ordering field" would be necessary as well.
I suppose that the component must use a UPDATE_MANY call in order to update not only the resource draggable if you want to put a resource between 2 resources that have correlative "order value".

Example: If you have a resources list like these:

[
{id: 1, name: "Apple", order: 1},
{id: 2, name: "Peach", order: 2},
{id: 3, name: "Mandarin", order: 3},
{id: 4, name: "Watermelon", order: 4}
{id: 5, name: "Banana", order: 5},
]

If you want to order the Watermelon between Apple/Peach, In the dragout action you should update watermelon (order=>2), peach (order=>3) & mandarin (order=>4). You need some recursive function until you found a free place.

Describe alternatives you've considered
I've already searched and found some issues in more or less on the same direction:
https://github.com/marmelab/react-admin/pull/1836 ==> drag order in a ArrayList

I've tried ra-tree-ui-materialui and it allows you to drag and even create nested resources (awesome), but you cannot update a field as "order", the component just update the "parent_id" field. There is an issue talking the ordering in ra-tree-ui-materialui, but a Marmelab developer said that "Not in the foreseeable future". Is there any option to do a DraggableList without nested option?

Most helpful comment

https://kauboy.tistory.com/22

i did it.

i used react-sortable-hoc

All 2 comments

No, this is not something we'll add to the core, which we want minimal to be able to maintain it in good shape for a long time. Feel free to share your solution as a standalone component, though.

https://kauboy.tistory.com/22

i did it.

i used react-sortable-hoc

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ericwb picture ericwb  路  3Comments

9747749366 picture 9747749366  路  3Comments

aserrallerios picture aserrallerios  路  3Comments

nicgirault picture nicgirault  路  3Comments

ilaif picture ilaif  路  3Comments