Feat: Add drag-and-drop reordering for primitive array fields in forms#407
Open
JoyceJ53 wants to merge 1 commit into
Open
Feat: Add drag-and-drop reordering for primitive array fields in forms#407JoyceJ53 wants to merge 1 commit into
JoyceJ53 wants to merge 1 commit into
Conversation
…sProblem:Users could add or remove items from primitive array fields (such as lists of tags), but they could not change their sequence. Reordering required deleting elements and manually re-typing them, creating a frustrating user experience when index order mattered.Solution:- Integrated `Sortable.js` (vendored to keep dependencies lightweight) via a new Phoenix LiveView hook (`Hooks.Sortable`) to handle the front-end drag-and-drop interactions.- Added visual feedback in `app.css` (`.sortable-ghost` and `.sortable-drag`) for smoother visual transitions.- Updated `render_fallback_attribute/7` in `form.ex` to inject `data-sort-index` metadata and provide a dedicated grab-handle icon so text inputs remain fully editable.- Introduced server-side reindexing utility functions (`to_indexed_map/1` and `reorder_by_indices/2`) in `helpers.ex` to safely normalize inputs and shuffle form parameter values based on the browser's new sequence recipe.- Implemented the core `update_array_sorting` event handler and `sort_array_value/3` function in `form.ex` to persist the new order directly into `form.raw_params`.- Added isolated unit tests in `helpers_test.exs` and an end-to-end integration test in `page_live_test.exs` to ensure correct state transformation and prevent regressions.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem:
Users could add or remove items from primitive array fields (such as lists of strings or tags), but they had no way to adjust their sequence. Reordering required manually deleting elements and re-typing them from scratch, creating a frustrating user experience when index order mattered.
Solution:
Frontend Interactivity: Integrated Sortable.js (vendored locally to maintain a zero-dependency architecture for parent apps) via a new Phoenix LiveView hook (Hooks.Sortable) to drive the drag-and-drop interface.
User Experience & Styling: Added visual feedback rules in app.css (.sortable-ghost and .sortable-drag) to show smooth drop-zone targeting and grabbing cues.
UI Markup Update: Modified render_fallback_attribute/7 in form.ex to inject the necessary data-sort-index metadata and introduced a dedicated grab-handle icon. This isolates the dragging action, ensuring that nested text inputs remain fully selectable and editable.
Backend Transformation Logic: Introduced robust server-side reindexing utility functions (to_indexed_map/1 and reorder_by_indices/2) in helpers.ex to gracefully normalize gappy parameter maps and map values back onto sequential string keys.
Form State Persistence: Implemented the core update_array_sorting event handler and sort_array_value/3 in form.ex to update and persist the newly arranged parameters directly into form.raw_params.
Testing Pipeline: Added unit test coverage in helpers_test.exs to verify data normalization edge cases, alongside a full end-to-end integration test in page_live_test.exs to assert that simulated hook events correctly swap visual form inputs.
Contributor checklist
Leave anything that you believe does not apply unchecked.
Closes #395