Feature Request: "Select All" Option for Spartan-NG Select Control

jon9090 commented 2 months ago

Which scope/s are relevant/related to the feature request?

select

Information

Description: Requesting a "Select All" option for the Spartan-NG select control component. This feature would enable users to efficiently select all options with one click, enhancing usability and saving time.

Benefits:

Streamlines selection process
Improves user experience
Enhances customization options

Implementation:

Clear UI design
Accessibility considerations
Seamless integration with existing component

Example: Users can easily select all options in the dropdown menu with a single click on the "Select All" checkbox.

Conclusion: The addition of this feature would significantly improve the spartan-ng library's select control, providing users with a more efficient and user-friendly experience.

Thank you for considering this enhancement.

Describe any alternatives/workarounds you're currently using

No response

I would be willing to submit a PR to fix this issue

[ ] Yes
[ ] No

sefatanam commented 2 months ago

Hi @goetzrobin

I have a small update on this feature. I've added a 'Select All' feature to the multi-select component. Before I proceed further, I'd like to hear your thoughts. Any feedback you provide will be greatly appreciated. Thanks

select-all

thatsamsonkid commented 2 months ago

So I also had imagined this also as just an option under the select dropdown with maybe some value="*" or something. @jon9090 is what @sefatanam put together what you are looking for?

wizardnet972 commented 2 months ago

Hey @thatsamsonkid, I've created my own code for the "select all" feature without making any alterations to the existing source code. Let me know if you'd like me to send a pull request.

 <hlm-select-content>
     <hlm-option value="select-all" selectAll [allValues]="options">All</hlm-option>
      <hlm-option *ngFor="let option of options" ....

sefatanam commented 2 months ago

Hey @thatsamsonkid, I've integrated the "select all" option into my code without making any alterations to the source code. Let me know if you'd like me to submit a pull request.
 <hlm-select-content>
     <hlm-option value="select-all" selectAll [allValues]="options">All</hlm-option>
      <hlm-option *ngFor="let option of options" ....

great job, I have a different solution, seems like your solution is much better than me 👍

I build up something like,

<hlm-option-all value="*">Select All </hlm-select-all>

thatsamsonkid commented 2 months ago

@wizardnet972 - Yea I think that would be great fi you can raise that and we can take a look. Providing an example of how to do this in the docs I think would be helpful for others. I think definitely my preference would be for users to handle this on the app side as long as it was pretty easy to do. Now if it wasn't then we can see how we can improve it whether through example or maybe a tweak to the select component

goetzrobin commented 1 month ago

@thatsamsonkid I am cool with providing a brnSelectAll directive that can call an toggleAll() function from the service. I like the optional [allValues]. We'd also need to make sure it unselects when the user deselects a different one. What do you think?

goetzrobin / spartan