Expand drag-and-drop array reordering to secondary form contexts#412
Open
JoyceJ53 wants to merge 3 commits into
Open
Expand drag-and-drop array reordering to secondary form contexts#412JoyceJ53 wants to merge 3 commits into
JoyceJ53 wants to merge 3 commits 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.
Contributor
|
@JoyceJ53 I see a bunch of merge conflicts here, mind resolving those before I review? |
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
2 participants
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:
Primitive array drag-and-drop reordering only worked on create/update attribute forms. Argument arrays in secondary form contexts — data table query forms, generic action forms, and show-page calculation forms — still required deleting and re-typing items to change order. Separately, LiveView unused* tracking keys were leaking into those array params and exploding into fake tag rows on every keystroke, which made the feature hard to use and test.
Solution:
Shared cleanup helpers: Extended to_indexed_map/1 in helpers.ex to ignore non-digit keys and skip structures, and added sanitize_form_params/1 plus normalize_argument_params/2 so form params strip LiveView unused* keys, densify indexed array maps, and convert array arguments to real lists before FilterForm.Arguments casting.
Data table query forms: Wired update_array_sorting and sort_array_value/3 into data_table.ex, and sanitized query params on validate/save so Sortable.js reorders work on read-action argument arrays without regenerating unused tags.
Generic action forms: Mirrored the same sorting handler and sanitize-on-validate/save path in generic_action.ex so primitive array arguments on custom actions can be reordered.
Show calculation forms: Implemented a show-page-specific update_array_sorting handler in show.ex that reorders raw calculation param maps (no AshPhoenix.Form.update_form/3), and hooked sanitize/normalize into validate, calculate, append, and remove so calculation argument arrays stay clean and reorder correctly.
Shared form rendering: Updated list_value/2 in form.ex to densify via to_indexed_map/1 and avoid charlist-as-many-tags issues, and ran sanitize_form_params/1 on create/update validate/submit for consistency with the secondary contexts.
Demo resources: Added :filter_by_tags, :echo_tags, and :join_tags in the demo user/calculator resources (and matching test Post definitions) so each secondary context can be exercised manually and in LiveView tests.
Testing: Expanded helpers_test.exs for sanitize/normalize edge cases, and added page_live_test.exs coverage that simulates Sortable hook events on data table, generic action, and show calculation forms.
Contributor checklist
Leave anything that you believe does not apply unchecked.
Closes #408