Content
View differences
Updated by Alexander Coles 10 days ago
### **Context**
The legacy Angular frontend still uses Dragula via the shared `DragAndDropService` (`frontend/src/app/shared/helpers/drag-and-drop/drag-and-drop.service.ts`), serving the work-package table, card view, boards, and the BIM BCF list. Per the decision in #DREAM-678, these surfaces migrate to Pragmatic Drag and Drop now. #DREAM-755 provides the shared sortable-lists engine and the Angular `opSortableLists` directives this work builds on.
### **Goal**
* Convert the template-rendered surfaces to the sortable-lists directives: work-package card view (single list), boards (cross-list via the root/group), BIM BCF (inherits through `wp-grid`, provider cleanup only). Consumers transact optimistically on their view state and persist on completion, preserving the optimistic behavior of the Stimulus sortable-lists controllers including rollback on failure.
* Rebuild `DragAndDropService` as a slim imperative binding of the same engine for its one remaining consumer, the work-package fast-table, whose rows are builder DOM without Angular templates.
* Retire the service API and Dragula-era styling toggles no consumer uses afterwards.
### **Screens touched**
Breadcrumbs per the drag-and-drop inventory in #DREAM-777:
* Project › Work packages — table with manual sorting, including hierarchy and group modes (engine binding via `DragAndDropService`)
* Project › Work packages — card display (`dr=card`; directives)
* Project › Boards › \[board\] — cards within and between lists (directives; column reorder itself stays Angular CDK)
* Project › BCF (BIM edition) — BCF cards via `wp-grid`
Unchanged: team planner (#DREAM-761), widget grids/dashboards (Angular CDK, #DREAM-760), draggable autocompleter (#DREAM-755).
### Visual notes
After discussion with <mention class="mention" data-id="100056" data-type="user" data-text="@Julia Racsko">@Julia Racsko</mention> (28.07.2026), we made some interim design choices:
* as before, initiating a drag in the work package list view shows a card with the subject and work package ID in parentheses (same padding, vertical alignment as before - opacity and drop shadow may differ slightly after this reimplementation however due to platform limitations)
* Boards now shows the source card with a lighter opacity (matching Backlogs), a drop indicator and the card with similar styling to the Backlogs view. N.B. aligning selection colours will be handled separately
* ~~grab and grabbing cursors should be displayed - as with~~ ~~#DREAM-755~~ ~~and Backlogs.~~
### **Technical notes**
Child work packages verify each consumer surface: Boards, work-package table/card/grid, BIM BCF list, dashboards/grids widgets (the grids widgets are CDK-based and untouched — see #DREAM-760 re-scope).
The two direct Dragula consumers (#DREAM-755 draggable autocompleter, team planner calendar) are migrated separately and do not depend on this rewrite.
### Hints for QA
Please perform a smoke test of "screens touched" above. Thanks!
Note on "card display": this is the regular Work packages module rendered as cards instead of the table — not the BCF module. There is no UI toggle for it — append `?query_props={"dr":"card"}` to the Work packages URL, e.g. `/projects/<project>/work_packages?query_props=%7B%22dr%22%3A%22card%22%7D`.
The legacy Angular frontend still uses Dragula via the shared `DragAndDropService` (`frontend/src/app/shared/helpers/drag-and-drop/drag-and-drop.service.ts`), serving the work-package table, card view, boards, and the BIM BCF list. Per the decision in #DREAM-678, these surfaces migrate to Pragmatic Drag and Drop now. #DREAM-755 provides the shared sortable-lists engine and the Angular `opSortableLists` directives this work builds on.
### **Goal**
* Convert the template-rendered surfaces to the sortable-lists directives: work-package card view (single list), boards (cross-list via the root/group), BIM BCF (inherits through `wp-grid`, provider cleanup only). Consumers transact optimistically on their view state and persist on completion, preserving the optimistic behavior of the Stimulus sortable-lists controllers including rollback on failure.
* Rebuild `DragAndDropService` as a slim imperative binding of the same engine for its one remaining consumer, the work-package fast-table, whose rows are builder DOM without Angular templates.
* Retire the service API and Dragula-era styling toggles no consumer uses afterwards.
### **Screens touched**
Breadcrumbs per the drag-and-drop inventory in #DREAM-777:
* Project › Work packages — table with manual sorting, including hierarchy and group modes (engine binding via `DragAndDropService`)
* Project › Work packages — card display (`dr=card`; directives)
* Project › Boards › \[board\] — cards within and between lists (directives; column reorder itself stays Angular CDK)
* Project › BCF (BIM edition) — BCF cards via `wp-grid`
Unchanged: team planner (#DREAM-761), widget grids/dashboards (Angular CDK, #DREAM-760), draggable autocompleter (#DREAM-755).
### Visual notes
After discussion with <mention class="mention" data-id="100056" data-type="user" data-text="@Julia Racsko">@Julia Racsko</mention> (28.07.2026), we made some interim design choices:
* as before, initiating a drag in the work package list view shows a card with the subject and work package ID in parentheses (same padding, vertical alignment as before - opacity and drop shadow may differ slightly after this reimplementation however due to platform limitations)
* Boards now shows the source card with a lighter opacity (matching Backlogs), a drop indicator and the card with similar styling to the Backlogs view. N.B. aligning selection colours will be handled separately
* ~~grab and grabbing cursors should be displayed - as with~~ ~~#DREAM-755~~ ~~and Backlogs.~~
### **Technical notes**
Child work packages verify each consumer surface: Boards, work-package table/card/grid, BIM BCF list, dashboards/grids widgets (the grids widgets are CDK-based and untouched — see #DREAM-760 re-scope).
The two direct Dragula consumers (#DREAM-755 draggable autocompleter, team planner calendar) are migrated separately and do not depend on this rewrite.
### Hints for QA
Please perform a smoke test of "screens touched" above. Thanks!
Note on "card display": this is the regular Work packages module rendered as cards instead of the table — not the BCF module. There is no UI toggle for it — append `?query_props={"dr":"card"}` to the Work packages URL, e.g. `/projects/<project>/work_packages?query_props=%7B%22dr%22%3A%22card%22%7D`.