21dbd6441a
# Context Currently, the Twenty platform incorporates "positions" for rows on the backend, which are functional within the Kanban view. However, this advantageous feature has yet to be leveraged within list views. # Feature Proposal ## Implement Row-Reordering via Drag-and-Drop on Frontend (#4846) - This PR addresses the implementation of row reordering via Drag-and-Drop on frontend. The objective is to enrich the list view functionality by introducing a grip that dynamically appears upon hovering over the left space preceding the checkbox container. This grip empowers users to effortlessly reposition rows within the list. #### Proposal Highlights: - **Enhanced User Interaction**: Introduce a draggable grip to facilitate intuitive row reordering, enhancing user experience and productivity. - **Preservation of Design Aesthetics**: By excluding the grip from the first row and maintaining the left gap, we uphold design integrity while providing enhanced functionality. - **Consistency with Existing Features**: Align with existing drag-and-drop functionalities within the platform, such as Favorites re-ordering or Fields re-ordering in table options, ensuring a seamless user experience. ## Implementation Strategy ### Grip Implementation: - Add an extra column to the table (header + body) to accommodate the grip cell, which displays the IconListViewGrip when its container is hovered over. - Ensure the preceding left-space is maintained by setting the corresponding width for this column and removing padding from the table container (while maintaining padding in other page elements and the Kanban view for coherence). ### Row Drag and Drop: - Implement row drag-and-drop functionality using draggableList and draggableItem, based on the existing logic in the KanbanView for row repositioning. - Create a draggableTableBody and apply it to the current RecordTableBody (including modal open triggering - if dragging while sorting exists). - Apply the draggableItem logic to RecordTableRow. ### Sorting Modal Implementation: - Reuse the ConfirmationModel for the removeSortingModal. - Create a new state to address the modal. - Implement sorting removal logic in the corresponding modal file. ## Outcome - The left-side margin is preserved. - The grip appears upon hovering. - Dragging a row gives it and maintains an aesthetic appearance. - Dropping a row updates its position, and the table gets a new configuration. - If sorting is present, dropping a row activates a modal. Clicking on the "Remove Sorting" button will deactivate any sorting (clicking on "Cancel" will close the modal), and the table will revert to its default configuration by position, allowing manual row reordering. Row repositioning will not occur if sorting is not removed. - The record table maintains its overall consistency. - There are no conflicts with DragSelect functionality. https://github.com/twentyhq/twenty/assets/92337535/73de96cc-4aac-41a9-b4ec-2b8d1c928d04 --------- Co-authored-by: Vasco Paisana <vasco.paisana@tecnico.ulisboa.pt> Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com> Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Run yarn dev while server running on port 3000