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

  • Added tree-based display option for relation form fields with expandable/collapsible tree controls.
  • Introduced quick action controls: "Expand all", "Collapse all", and "Expand selected" for tree-based selections.
  • Added multi-language support with English and French translations for new controls.

• Style

  • Enhanced styling for tree-based relation widget UI with improved visual feedback for expanded/collapsed states.

[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]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 3b712e68-72cb-4dc0-b865-5ba675f9d0f4

📥 Commits

Reviewing files that changed from the base of the PR and between 5d4dc32 and 64cfebd.

📒 Files selected for processing (1)

• modules/backend/lang/en/lang.php

✅ Files skipped from review due to trivial changes (1)

• modules/backend/lang/en/lang.php

---

Walkthrough

This PR adds a displayTree mode to the backend Relation form widget. On the PHP side, a new public $displayTree property is introduced, wired into the configuration lifecycle via fillFromConfig, and the option-building logic is extended to branch on usesTree plus displayTree to produce options via toNestedArray, listsNested, or lists. A loadAssets method enqueues relation.js. The widget partial gains a data-control="relation" attribute. The _field_checkboxlist.php partial gains a recursive renderCheckboxLine helper, a quickTreeActions toolbar with expand/collapse controls, and a displayTree-driven rendering path. A new Snowboard JS class (Relation) provides expand/collapse interactions, per-item toggling, and scrollbar updates, registered as backend.formwidget.relation. A LESS stylesheet styles the nested checkbox list. Translation keys expand_all, collapse_all, and expand_checked are added to English and French lang files. The asset build step for Relation.js is added to winter.mix.js.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main feature addition: expand/collapse functionalities for the relationship formwidget, which aligns with the primary changes across all modified files.
Docstring Coverage	✅ Passed	Docstring coverage is 80.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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