Added expand/collapse functionalities to relationship formwidget

[damsfx]

This allow relation model with nested tree trait to display a expandable/collapsable list of checkboxes.

The field config allow two new options :

• displayTree: (bool) display the related model as a tree structure
• quickTreeActions: (bool) show tree quick actions (expand all nodes, collapse all nodes and expand only selected nodes)

Summary by CodeRabbit

• New Features
  • Tree-structured relation fields with expand/collapse, per-item toggles and scroll handling.
  • Quick tree actions: "Open all", "Close all", "Open selected".
  • Option to toggle tree rendering for relation checkbox lists.
• Style
  • New styles for nested checkbox lists, transitions, chevrons and open-state visuals.
• Chores
  • Frontend build step and assets added for the relation widget.
• Localization
  • Added English and French strings for new tree controls.

[bennothommo]

@damsfx ooo, I like this. And in Snowboard too! 😍

Couple of quick comments/questions:

• How performant is it with a whole heap of items (like, say, 100s of items)?
• Could the animation be a touch faster? Might be just on the border of being a bit too slow to feel "snappy".

[damsfx]

@bennothommo

And in Snowboard too! 😍

Definitely yes!
The more I practice, the more I love it! It's good to be back in a vanilla javascript environment.

Despite this, a function written in jQuery is still called to update the scroll bar. :o(

How performant is it with a whole heap of items (like, say, 100s of items)?

The tree structure used for my tests and visible in the animation above contains 550 nodes spread over 4 levels of depth.
I can always do a test with more nodes.

Could the animation be a touch faster? Might be just on the border of being a bit too slow to feel "snappy".

For sure.

[damsfx]

@bennothommo

Latest update :

• Use promise to adjust srcollbar after expand/collaspe node(s)
• CloseAll() close only opened nodes instead of all nodes
• Reduce animation timmings
• Use CSS animation end to trigger scrollbar update

[bennothommo]

@damsfx don't be too concerned if you need to fall back on jQuery to do something in the Backend. A lot of the Backend still uses it and the goal of Snowboard was to remove the dependency of jQuery for the CMS side in particular.

[LukeTowers]

@bennothommo are you happy with this as it is?

@damsfx is there a related docs PR?

[damsfx]

@damsfx is there a related docs PR?

Not yet, but I can add a pending PR for this.

[damsfx]

@damsfx is there a related docs PR?

@LukeTowers Done : wintercms/docs#243

[damsfx]

@bennothommo I know your time is precious, but if you have 5 mins to take a look and give me a little feedback if you see any improvements to be made.
Thank you for your time.

[bennothommo]

@damsfx sorry for the delay. Looks great, and the timing of the animation is much better.

Only issue I can see now is that it appears that some plugins and themes were added in your most recent commit:
90fbd40

Could you make sure these are not included in your branch? Once that's done, @LukeTowers should be able to merge if he's happy with it.

[bennothommo]

Approved, pending removal of plugins and themes in recent commit

[damsfx]

pending removal of plugins and themes in recent commit

😱🙄 Oh, I was really distracted!
Thanks for reminding me.

Done !

[damsfx]

@LukeTowers @bennothommo Is this still an interesting PR for WinterCMS !?

[LukeTowers]

@damsfx yes, I had completely forgotten about this. Can you resolve the comments and ping me when it's ready to review?

[coderabbitai]

Walkthrough

Adds a tree-capable Relation form widget: backend config and asset loading, new frontend Relation JS plugin for expand/collapse and selection actions, template updates for tree rendering, styles for nested checkbox lists, and translation keys for tree controls.

Changes

Cohort / File(s)	Summary
Relation Widget Backend modules/backend/formwidgets/Relation.php, modules/backend/formwidgets/relation/partials/_relation.php	Adds public $displayTree, loadAssets() and includes displayTree in config. Markup adds data-control="relation". Options rendering now selects between toNestedArray, listsNested, or lists depending on tree usage and displayTree.
Frontend JS Plugin modules/backend/formwidgets/relation/assets/js/src/Relation.js	New Snowboard plugin implementing tree checkbox UI with defaults, attach/detach events, expand/collapse/expand-checked controls, node toggling, scrollbar updates, and plugin/widget registration.
Styling (LESS/CSS) modules/backend/formwidgets/relation/assets/less/relation.less, modules/backend/formwidgets/relation/assets/less/relation.css	Adds styles for nested checkbox lists, chevron toggle, open/close transitions, spacing, and scrollable container behavior for tree UI.
Checkbox List Template modules/backend/widgets/form/partials/_field_checkboxlist.php	Introduces displayTree and quickTreeActions, makes list scrollable when tree enabled, adds recursive renderCheckboxLine for nested rendering, and renders quick-tree controls (Expand all, Expand checked, Collapse all).
Localization modules/backend/lang/en/lang.php, modules/backend/lang/fr/lang.php	Adds translation keys expand_all, collapse_all, expand_checked (English and French).
Build Configuration modules/backend/winter.mix.js	Adds build step to compile the Relation frontend asset into the distribution bundle.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant Backend
participant Browser
participant RelationJS as Relation Plugin
participant User

Backend->>Browser: Render form (includes `data-control="relation"` and options JSON)
Browser->>Browser: Load assets (relation.js, relation.css)
Browser->>RelationJS: Initialize plugin on control
RelationJS->>RelationJS: Parse config, attach event handlers
User->>RelationJS: Click "Expand all" / Toggle node / Select checkbox
RelationJS->>RelationJS: Open/close levels, update checked state, update scrollbar
RelationJS->>Browser: Update DOM (classes, aria, checkbox states)

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding expand/collapse functionalities to the relationship formwidget, which is the primary objective demonstrated throughout the PR with multiple file additions for tree rendering, JavaScript interactions, and styling.
Docstring Coverage	✅ Passed	Docstring coverage is 80.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[damsfx]

@LukeTowers Done some CodeRabbit's suggestions after a merge from develop branch.

About him, he's a bit temperamental because every commit causes a bit of hysteria.
Once he asks for a line to be added to the minified CSS—but that's not possible—and another time he invents formwidget types that don't exist in Winter!

Minor change:
The nameFrom field's property is no more used in the rendering, the treeview mode is now compatible with a custom SQL select statement to use for the name.

Pending related PRs:

• Update relation formwidget with availables options docs#243
• Demonstrate treeview in relation formwidget wn-test-plugin#24