ROS-494: Add ability to display custom text inside OXD treeselect input for the selected values#883
ROS-494: Add ability to display custom text inside OXD treeselect input for the selected values#883inmoh7 wants to merge 4 commits intoorangehrm:entfrom
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request adds a new feature to the TreeSelect component that allows displaying "All" as the input value when all options are selected, controlled by a new showAllWhenAllSelected prop. The feature includes proper test coverage and Storybook documentation.
Changes:
- Added
showAllWhenAllSelectedboolean prop to TreeSelect component with default valuefalse - Modified the display logic to show "All" when the prop is enabled and all options are selected
- Updated the count chip visibility logic to hide it when showing "All"
- Added comprehensive test coverage for the new functionality
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| components/src/core/components/Input/TreeSelect/TreeSelect.vue | Added new prop and updated display value logic to show "All" when appropriate, modified count chip visibility condition |
| components/src/core/components/Input/tests/treeselect.spec.ts | Added comprehensive test suite for the new showAllWhenAllSelected functionality including edge cases |
| storybook/stories/core/components/treeSelect/TreeSelectShowAll.story.vue | New Storybook story demonstrating the "Show All" feature |
| storybook/stories/core/components/treeSelect/TreeSelect.stories.js | Added story export for the new ShowAll example |
| changelog.md | Documented the new feature in the changelog |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
storybook/stories/core/components/treeSelect/TreeSelectShowAll.story.vue
Outdated
Show resolved
Hide resolved
inmoh7
force-pushed
the
treeselect-all-text-display
branch
from
06a0760 to
8a12378
Compare
inmoh7
changed the title
| return {args}; | ||
| }, | ||
| components: {TreeSelectShowAll}, | ||
| template: `<TreeSelectShowAll/>`, |
There was a problem hiding this comment.
Check the story documentation when viewed from docs mode it should show the code that can be copied to get the output of story. Check below example.
| type: String, | ||
| default: '', | ||
| validator: function(value: string) { | ||
| return value.length <= 100; |
There was a problem hiding this comment.
Would it be better to truncate this within the component rather adding a limitation here. Prop errors are sometime missed
| :value=" | ||
| getPlaceholderValue() + (selectedIdsLengthComputed > 1 ? ',' : '') | ||
| " | ||
| :value="allSelectedText && isAllSelected ? allSelectedText : displayValue" |
There was a problem hiding this comment.
Since we have a computed property for displayvalue. can we do all the condition and checks within it? that would be more efficent
Super-Chama
changed the title
2 participants
Checklist