Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DFC Orders] Select/deselect all on DFC Product Import #13168

Open
wants to merge 9 commits into
base: master
Choose a base branch
from

Conversation

dacook
Copy link
Member

@dacook dacook commented Feb 20, 2025

ℹ️ Funded Feature. Please track ALL ASSOCIATED WORK under the associated tracking code #11678 DFC Orders

What? Why?

Adds a checkbox at the top of the table so that you can select or deselect all at once.
Using (and refactoring) an existing Stimulus controller.

What should we test?

See #13125 (comment)

There's A Controller For That.
(But I think it makes the HTML ugly..)
We are already specifying the element's role ('all') in the HTML. Its behaviour should be predefined; there's no need to also specify in the HTML.

The eventhandler doesn't need to be cleand up on disconnect, because they are removed along with the DOM object.
@dacook dacook added the user facing changes Thes pull requests affect the user experience label Feb 20, 2025
@dacook dacook self-assigned this Feb 20, 2025
Best viewed with whitespace ignored
I noticed there's a controller for that too, so might as well make use of it. The orders page has it at the top, because that's where the bulk action menu is. But on this page, the action is the import button so I put it there.
Ok so I wasn't as smart as I thought I was. The stimulus controller knows when its element is added/removed from the DOM (and calls connect/disconnect appropriately). But if any child elements are added, they don't automatically have my new event handlers.

So I borrowed jQuery's event delegation concept, and listen for any events that 'bubble' up to the controller element, and delegate them as needed.

Alternatively, maybe I could have used a Mutation Observer, but I think it's best to avoid where possible.

Or of course, we could just revert my change and keep the 'data-action's in the HTML. I'm curious to hear opinions on this.."
@dacook dacook force-pushed the dfc-product-import-select-all-12301 branch from b4ede4d to e31c16d Compare February 20, 2025 01:48
Copy link
Member

@mkllnk mkllnk left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I really like that implementation. And we learned more about StimulusJS again.

@dacook
Copy link
Member Author

dacook commented Feb 25, 2025

For future reference: @mkllnk and I discussed the order of execution for Stimulus callbacks, and confirmed that:

The [name]TargetConnected() lifecycle callbacks will fire before the controller’s connect() callback.

https://stimulus.hotwired.dev/reference/lifecycle-callbacks#targets

So I guess the connect callback really means it has connect_ed_.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
user facing changes Thes pull requests affect the user experience
Projects
Status: Test Ready 🧪
Development

Successfully merging this pull request may close these issues.

[DFC Orders] List products to import on screen
2 participants