Skip to content

Feat: Add drag-and-drop reordering for primitive array fields in forms#407

Open
JoyceJ53 wants to merge 1 commit into
ash-project:mainfrom
JoyceJ53:main
Open

Feat: Add drag-and-drop reordering for primitive array fields in forms#407
JoyceJ53 wants to merge 1 commit into
ash-project:mainfrom
JoyceJ53:main

Conversation

@JoyceJ53

Copy link
Copy Markdown

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.

  • I accept the AI Policy, or AI was not used in the creation of this PR.
  • Bug fixes include regression tests
  • Chores
  • Documentation changes
  • Features include unit/acceptance tests
  • Refactoring
  • Update dependencies

Closes #395

…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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow reordering of array attributes in update actions

1 participant