[Accordion] Add "collapse all"/ "expand all" logic into AccordionContainer #11565
Conversation
AlexVelezLl
added
TODO: needs review
Build Artifacts
|
|
Thanks @AlexVelezLl ! This will need to be rebased once #11434 is merged and you might run into some minor conflicts I'll be happy to help resolve. |
| @@ -185,57 +185,34 @@ | |||
| </KGrid> | |||
|
|
|||
| <AccordionContainer | |||
| :items="quizForge.activeQuestions.value" | |||
| @toggled="items => expandedQuestionIds = items" | |||
| :items="quizForge.activeQuestions.value.map(i => ({ | |||
There was a problem hiding this comment.
I would suggest that we can make items a generic array of objects that contains, for example, the id attribute (instead of something specific like "question_id"), and that from this we have the criteria to know which items to choose expand when the "expand all" button is clicked.
| }; | ||
| }, | ||
| watch: { | ||
| expandedItemIds() { | ||
| this.$emit('toggled', this.expandedItemIds); |
There was a problem hiding this comment.
By handling the collapse all and expand all within the AccordionComponent, I think we can handle the functionality of the expandedItemIds within the component without having to expose the entire array, and just expose the isItemExpanded method.
AlexVelezLl
changed the title
There was a problem hiding this comment.
Great work @AlexVelezLl thank you!
I tested it manually and it works as expected. Thanks for the additional clean-up and normalizing the component to use a generic id property on the object passed in for the items that's excellent <3
| @@ -185,57 +185,34 @@ | |||
| </KGrid> | |||
|
|
|||
| <AccordionContainer | |||
| :items="quizForge.activeQuestions.value" | |||
| @toggled="items => expandedQuestionIds = items" | |||
| :items="quizForge.activeQuestions.value.map(i => ({ | |||
| }; | ||
| }, | ||
| watch: { | ||
| expandedItemIds() { | ||
| this.$emit('toggled', this.expandedItemIds); |
| type: Array, | ||
| required: true, | ||
| function(value) { | ||
| return value.every(item => typeof item === 'object' && 'id' in item); |
There was a problem hiding this comment.
TIL 🤯 'id' in { id: 1 } => true
So many times I've written Object.keys(theObj).includes(theKey) and I could have just used in
Summary
Before
After
References
Closes #11547
Reviewer guidance
const quizForge = useQuizCreation(true);hereTesting checklist
PR process
Reviewer checklist
yarnandpip)