#3624 - Fix Multi-Row Drag-and-Drop Issue for Chips in Item Submission Form

[Simone-Ramundi]

References

• Fixes Drag-and-Drop Malfunction in submission form #3624

Description

This PR addresses an issue with multi-row drag-and-drop functionality in DSpace’s item submission form. When chips are distributed across multiple rows, drag-and-drop operations fail due to limitations in the current Angular CDK version (17.3.10). This update ensures correct functionality for dragging and swapping items across rows in DSpace 8.

Instructions for Reviewers

The changes in this PR ensure that items can be individually dragged between rows without affecting other items in adjacent rows.

List of changes in this PR:

• Defined cdkDropListGroup to connect all drag-and-drop items, allowing them to act independently within their respective rows.
• Assigned unique cdkDropList instances to each item to prevent unintended reordering of the entire list.
• Set cdkDropListOrientation to horizontal to control the drag direction, restricting movements along a single row.
• Updated the onDrop method to capture and handle item swaps within the chipsItems array, using indices for precise item placement.
• Adjusted CSS layout for visual consistency, aligning chips horizontally with appropriate spacing to enhance usability.

Testing Instructions

1. Go to the DSpace instance and initiate a new item submission in the "Articles" collection.
2. In the "Describe" section, under "Subject Keyword," add multiple keywords to create multiple rows.
3. Try dragging items within a row and between rows, observing that only the dragged item moves, and adjacent rows remain unaffected.

This fix ensures that the drag-and-drop functionality aligns with the expected user experience, allowing seamless interactions within and across rows.

Checklist

• My PR is created against the main branch of code (unless it is a backport or is fixing an issue specific to an older branch).
• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• My PR passes ESLint validation using npm run lint
• My PR doesn't introduce circular dependencies (verified via npm run check-circ-deps)
• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• My PR aligns with Accessibility guidelines if it makes changes to the user interface.
• My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations.
• My PR includes details on how to test it. I've provided clear instructions to reviewers on how to successfully test this fix or feature.
• If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
• If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
• If my PR fixes an issue ticket, I've linked them together.

[nwoodward]

Thanks @Simone-Ramundi! I tested this on the dspace-8_x branch, and it fixes the drag-and-drop problems with subjects.

[dspace-bot]

Successfully created backport PR for main:

• [Port main] #3624 - Fix Multi-Row Drag-and-Drop Issue for Chips in Item Submission Form #3769

[dspace-bot]

Backport failed for dspace-7_x, because it was unable to cherry-pick the commit(s).

Please cherry-pick the changes locally and resolve any conflicts.

git fetch origin dspace-7_x
git worktree add -d .worktree/backport-3654-to-dspace-7_x origin/dspace-7_x
cd .worktree/backport-3654-to-dspace-7_x
git switch --create backport-3654-to-dspace-7_x
git cherry-pick -x 23d8730d5b1637b95f19cc2502d64816d9b18dee

[tdonohue]

@Simone-Ramundi : The automated port to dspace-7_x failed above. Would you be able to create a manual port of this fix against the dspace-7_x branch? That way we could also get this fixed in 7.6.x as well.