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

  • Relation fields can display checkbox options as expandable, collapsible trees.
  • Added tree controls to expand all items, expand selected items, or collapse all items.
  • English and French labels are available for the new controls.
  • Long checkbox lists and tree views support scrolling.

• Style

  • Updated tree styling with visual cues for expanded items and smoother open-and-close transitions.

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

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

• Last reviewed commit: 01b0231
• Latest commit, not reviewed: 0f44f50

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Advanced

Run ID: 72b28737-7217-4ba7-9bbf-0ac5328f7296

📥 Commits

Reviewing files that changed from the base of the PR and between 64cfebd and 01b0231.

📒 Files selected for processing (2)

• modules/backend/lang/en/lang.php
• modules/backend/winter.mix.js

🚧 Files skipped from review as they are similar to previous changes (1)

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

Included review availability: This review used your included allowance. Your plan provides up to 4 included reviews per hour; 3 remain after this review.

Walkthrough

This PR adds English labels for the Relation widget’s tree actions and adds a backend build entry for compiling its JavaScript asset.

Priority: ➖ Normal

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: ⚪ Minimal · up to 01b02

The build output matches the Relation widget’s registered asset path, and the tree-action labels are supplied. The reviewed changes present no concrete merge-blocking risk.

### Architecture Summary

Architecture risk: 🔵 Low · up to 01b02

The change affects 1 system.

Changed systems: modules

Architecture concerns
No architecture-level concerns identified.

Review details

Systems and components

• observed — modules (service) was modified; 2 changed files map to changed impact.

Before / after behavior

• observed — Modified behavior in modules/backend/lang/en/lang.php: Added form labels for opening all items, closing all items, and opening selected items.
• observed — Modified behavior in modules/backend/winter.mix.js: Adds a JavaScript build entry for the relation form widget, compiling Relation.js into relation.js.

🚥 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 describes the main change: adding expand and collapse functionality to the relationship form widget.
Docstring Coverage	✅ Passed	Docstring coverage is 80.00% which is sufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 5 functions across 4 files.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

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.}

[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