Reorder Components within large Dynamic Zones more quickly & easily #7941
Description
- I have created my request on the Product Board before I submitted this issue
- I have looked at all the other requests on the Product Board before I submitted this issue
Please describe your feature request:
Hello, I'm working on a fairly small dev team, using strapi to create a large online exhibition website. This project takes advantage of the Dynamic Zones to create large sections with varied layouts, because one of our top priorities is to make a beautiful and visually interesting site.
However, once you start working with Dynamic Zones that are longer than 15 components, further edits become increasingly difficult, due to how hard it is to reorder components within Dynamic Zones. There are two main problems:
- Currently, new components can only be added to the bottom
- Currently, existing components can only be reordered one step at a time, using the up and down arrows
This means that whenever my team wants to add a component towards the beginning of the dynamic zone, it's a process of pressing the up button, scrolling, pressing it again, scrolling, etc until it's where they want it to be.
After taking a look at the code feels like there a number of solutions, some of which are simple, and some of which are more ambitious, to help resolve this issue.
Solution 1: Move Up/Down 3x Buttons
The easiest fix seems to me to be to add additional arrow buttons to reorder the components, but instead of simply moving up or down by one step, this set of buttons would move the component up or down by 3 steps. So, clicking the MoveUp3 button once would move a component from index 4 to index 1. This seems like it would be pretty achievable by modifying this file to have additional action for MOVE_COMPONENT_UP_THREE which would be identical other than altering this line action.currentIndex - 1,to action.currentIndex - 3,. Then the function would have to be passed down through to context to the component. The only reason I hesitate to implement this myself is that I'm not sure if any additional error checking would need to be done to make sure that the index didn't go out of bounds.
Solution 2: Move Up/Down Buttons with Input Field for Number
The slightly more complex, but more powerful solution would be to instead let the user specify how much they would like to move the component up or down by. This would involve the passing of a variable, and also the setup of a number field.
Solution 3: Move to Top/Bottom Buttons
This solution is also additional arrow buttons, but these would move the component all the way to the top or to the bottom of the Dynamic Zone. These seems like it shouldn't be too difficult to create an action for, I'm just not certain how the action's implementation would differ from the MOVE_COMPONENT_UP action, since I don't understand the functions being called within it. Could you just do the following?
case 'MOVE_COMPONENT_TO_TOP':
return state
.update('shouldCheckErrors', v => {
if (action.shouldCheckErrors) {
return !v;
}
return v;
})
.updateIn(['modifiedData', action.dynamicZoneName], list => {
return list
.delete(action.currentIndex)
.insert(
0, //would it be fine to just pass a number as the index?
state.getIn(['modifiedData', action.dynamicZoneName, action.currentIndex])
);
});
Solution 4: MoveToIndex Buttons with Input Field
A variant on Solution 2 would be to have the ability to move a component to a certain index within the Dynamic Zone, using an input field in conjunction with a button.
Solution 5: Accordion with Drag and Drop functionality to Reorder
This is what I feel would be the best solution, but also the most intensive. For arrays and repeater fields, there is an option to collapse items within the array, and then move them around with drag and drop functionality. This would be amazing, but I recognize it would be extremely involved, and I don't even know how one would start that process.
Edit: From looking at #7940 and also talking to my own content managers:
Solution 6: Additional Add Component Button at Top
Another solution would be to give users the power to add items directly to the top of a Dynamic Zone, by having another ComponentsPicker component at the top of the list of components (as long as the list was not of length 0 I suppose). It also looks like this would have to call a variant ADD_COMPONENT_TO_DYNAMIC_ZONE that instead added the item to the start of the list rather than pushing it to the end.
I'm willing to help contribute some dev time to this issue myself, but I'm generally more of a front-end programmer and don't fully trust myself with a React project of this complexity. Some guidance and assistance would be much appreciated!